import ReactPlayer, { ReactPlayerProps } from 'react-player';

export type Props = ReactPlayerProps & {
  videoUrl?: string | null;
  imageUrl?: string | null;
  className?: string;
  ref?: React.RefObject<ReactPlayer | null>;
};

const VideoLoopPlayer: React.FC<Props> = (props) => {
  const { className, imageUrl, videoUrl, playing, ref, ...restProps } = props;

  if (!videoUrl) return null;

  return (
    <ReactPlayer
      className={className}
      ref={ref}
      url={videoUrl}
      light={imageUrl ? !playing : false}
      playing={playing}
      volume={0}
      muted={true}
      width='100%'
      height='100%'
      playIcon={<></>}
      loop={true}
      playsinline={true}
      config={{
        file: {
          attributes: {
            style: {
              objectFit: 'cover',
              width: '100%',
              height: '100%',
            },
            poster: imageUrl,
          },
        },
      }}
      {...restProps}
    />
  );
};

export default VideoLoopPlayer;