Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useRef, useState } from 'react';
import { IconButton } from '@mui/material';
import Pause from '@mui/icons-material/Pause';
import PlayArrowRounded from '@mui/icons-material/PlayArrowRounded';
import VolumeOff from '@mui/icons-material/VolumeOff';
import VolumeUp from '@mui/icons-material/VolumeUp';
import styled, { css } from 'styled-components';
import { REEL_SIZES } from '../../../constants/feed';

const ReelContainer = styled.div`
  border-radius: 20px;
  background-color: #000;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  video {
    width: 100%;
    height: 100%;
    object-fit: ${({ preview }) => (preview ? 'cover' : 'contain')};
  }

  ${({ size }) =>
    size === REEL_SIZES.sm &&
    css`
      height: 150px;
      width: 50px;
    `}

  ${({ size }) =>
    size === REEL_SIZES.md &&
    css`
      height: 250px;
      width: 150px;
    `}

  ${({ size }) =>
    size === REEL_SIZES.lg &&
    css`
      height: 350px;
      width: 250px;
    `}
`;

const PlayButton = styled(IconButton)`
  position: absolute !important;
  top: 0.5rem;
  right: 0.5rem;
`;

const MuteButton = styled(PlayButton)`
  bottom: 0.5rem;
  top: inherit;
`;

const ReelItem = ({
  reel = {},
  autoPlay = false,
  controls = false,
  onSelect = () => {},
  onEnded = () => {},
  preview = false,
  size = REEL_SIZES.md
}) => {
  const [isPlaying, setIsPlaying] = useState(autoPlay);
  const [isMuted, setIsMuted] = useState(false);
  const videoRef = useRef(null);

  const handleMute = () => {
    setIsMuted(!isMuted);
  };

  const handlePlay = () => {
    isPlaying ? videoRef.current.pause() : videoRef.current?.play();
    setIsPlaying(!isPlaying);
  };

  useEffect(() => {
    !reel.url && videoRef.current.pause();
  }, [reel]);

  return (
    <ReelContainer preview={preview} size={size} onClickCapture={() => onSelect(reel)}>
      <video
        src={reel.url}
        autoPlay={autoPlay}
        muted={isMuted}
        controls={false}
        ref={videoRef}
        onEnded={onEnded}
      />

      {controls ? (
        <>
          <PlayButton onClickCapture={handlePlay}>
            {isPlaying ? <Pause /> : <PlayArrowRounded />}
          </PlayButton>

          <MuteButton onClickCapture={handleMute}>
            {isMuted ? <VolumeOff /> : <VolumeUp />}
          </MuteButton>
        </>
      ) : null}
    </ReelContainer>
  );
};

export default ReelItem;