VideoBG.tsx

import React, {useState} from 'react';
import {Alert, Clipboard, View, ViewStyle} from 'react-native';
import FastImage, {ResizeMode} from 'react-native-fast-image';
import Video, {VideoProperties} from 'react-native-video';
import {InView} from 'react-native-intersection-observer';
import {useNavigation} from '@react-navigation/native';

export interface VideoBGProps
  extends Omit<VideoProperties, 'source' | 'src' | 'resizeMode'> {
  imgURL: string;
  vidURL: string;
  /** @param backgroundColor - default value is '#FFFFFF' */
  backgroundColor?: string;
  dontUnmountOnPause?: boolean;
  /**
   * @param style - Do not modify style object
   * instead wrap VideoBG inside View to apply other styles
   * <View style={{margin: 10, padding: 10}}>
   *    <VideoBG .../>
   * </View>
   * */
  style: {
    height: number;
    width: number;
    borderRadius?: ViewStyle['borderRadius'];
  };
  resizeMode?: ResizeMode & ('contain' | 'cover' | 'stretch' | 'none');
}

const VideoBG = React.forwardRef((props: VideoBGProps, ref: any) => {
  const {
    style,
    imgURL,
    vidURL,
    resizeMode = 'cover',
    backgroundColor,
    dontUnmountOnPause,
    ...restProps
  } = props;
  const videoStyle = {
    ...style,
    position: 'absolute',
  } as VideoProperties['style'];

  const imageStyle = {...style, backgroundColor};
  const navigation = useNavigation();
  const [display, setDisplay] = useState<boolean>(false);
  const [unmountOnPause, setUnmountOnPause] = useState<boolean>(true);
  const [isBlurred, setBlurred] = useState<boolean>(false);

  React.useEffect(() => {
    if (!dontUnmountOnPause) {
      setUnmountOnPause(!restProps.paused ?? false);
    } else {
      setUnmountOnPause(true);
    }
  }, [restProps.paused]);

  React.useEffect(() => {
    return navigation.addListener('blur', () => {
      setBlurred(true);
    });
  }, [navigation]);

  React.useEffect(() => {
    return navigation.addListener('focus', () => {
      setBlurred(false);
    });
  }, [navigation]);

  const imageWidget = imgURL ? (
    <FastImage
      resizeMode={resizeMode}
      style={imageStyle}
      source={{uri: imgURL}}
    />
  ) : (
    <View style={imageStyle} />
  );

  if (isBlurred) {
    return imageWidget;
  }

  return (
    <InView onChange={setDisplay}>
      {imageWidget}
      {vidURL && display && unmountOnPause ? (
        // @ts-ignore
        <Video
          {...restProps}
          key={vidURL}
          ref={ref}
          source={{uri: vidURL}}
          style={videoStyle}
          resizeMode={resizeMode}
          hideShutterView
          onError={(...args) => {
            if (props.onError) props.onError(...args);
            console.error(args, {vidURL});
            if (__DEV__) {
              Alert.alert(
                'Error playing video',
                `copied video link to clipboard`,
              );
              Clipboard.setString(vidURL);
            }
          }}
          // @ts-ignore
          shutterColor={'#00FF0050'}
        />
      ) : null}
    </InView>
  );
});

export default VideoBG;