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;