Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useRef, useState } from 'react'
import { IconButton } from '@mui/material'
import {
  Pause,
  PlayArrowRounded,
  VolumeOff,
  VolumeUp
} from '@mui/icons-material'
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