VideoCard.tsx

import React, { useState } from 'react';
import styled from 'styled-components/native';
import { useInterval } from '../../../utils/NotifyHooks';
import { Animated, Easing } from 'react-native';
import FastImage from 'react-native-fast-image';
import { TouchableOpacity } from 'react-native-gesture-handler';

type VideoCardProps = {
  thumbstrip: string;
  size?: number;
  style?: any;
  margin?: number;
  liveThumb?: boolean;
  onPress?: () => any;
  roundedCorners?: boolean;
};

const AMOUNT_OF_IMAGES = 8;
const ANIMATION_SPEED = 150;

export default function VideoCard(props: VideoCardProps) {
  const [stepperVal, setStepperVal] = useState(0);
  const [opacity] = useState(new Animated.Value(0));
  const [right, setRight] = useState(true);
  let onPress: () => any = () => props.onPress();
  let { size, style, thumbstrip } = props;

  useInterval(() => {
    if (props.liveThumb === false) return;

    if (stepperVal === AMOUNT_OF_IMAGES - 2) setRight(false);
    else if (stepperVal <= 1) setRight(true);

    setStepperVal(right ? stepperVal + 1 : stepperVal - 1);
  }, ANIMATION_SPEED);

  if (!size) size = 200;

  const stepperStyle: any = {};
  if (props.liveThumb) stepperStyle.opacity = opacity;

  return (
    <TouchableOpacity activeOpacity={1} onPress={onPress}>
      <CardContainer
        roundedCorners={props.roundedCorners}
        size={size}
        style={style}
      >
        <StepperContainer
          size={size}
          style={stepperStyle}
          stepValue={stepperVal}
        >
          <VideoThumbImg
            onLoad={() =>
              Animated.timing(opacity, {
                toValue: 1,
                duration: 250,
                easing: Easing.ease,
                useNativeDriver: true
              }).start()
            }
            resizeMode={FastImage.resizeMode.cover}
            size={size}
            source={{
              uri: `${thumbstrip}?t=nocache`
            }}
          />
        </StepperContainer>
      </CardContainer>
    </TouchableOpacity>
  );
}

export const calcTrailerHeight = (width: number) => (width * 14) / 9;

const CardContainer = styled.View<any>`
  border-radius: ${(props) => (props.roundedCorners === false ? 0 : 6)}px;
  max-width: ${(props) => props.size}px;
  min-width: ${(props) => props.size}px;
  max-height: ${(props) => calcTrailerHeight(props.size)}px;
  min-height: ${(props) => calcTrailerHeight(props.size)}px;
  background-color: ${(props) => 'black'};
  overflow: hidden;
`;

const VideoThumbImg = styled(FastImage)<any>`
  flex: 1;
  height: ${(props) => `${calcTrailerHeight(props.size)}px`};
  background-color: ${(props) => props.theme.box};
`;

const StepperContainer = Animated.createAnimatedComponent(styled.View<any>`
  width: ${(props) => props.size * AMOUNT_OF_IMAGES}px;
  margin-left: ${(props) => -props.size * props.stepValue}px;
  height: ${(props) => calcTrailerHeight(props.size)}px;
`);