Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3694 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1650 stevensc 1 
import React, { useEffect, useRef, useState } from 'react'
2 
import { IconButton } from '@mui/material'
3 
import {
4 
  Pause,
5 
  PlayArrowRounded,
6 
  VolumeOff,
7 
  VolumeUp
8 
} from '@mui/icons-material'
9 
import styled, { css } from 'styled-components'
10 
import { REEL_SIZES } from '../../../constants/feed'
11 
 
12 
const ReelContainer = styled.div`
13 
  border-radius: 20px;
14 
  background-color: #000;
15 
  position: relative;
16 
  overflow: hidden;
17 
  cursor: pointer;
18 
  video {
19 
    width: 100%;
20 
    height: 100%;
21 
    object-fit: ${({ preview }) => (preview ? 'cover' : 'contain')};
22 
  }
23 
 
24 
  ${({ size }) =>
25 
    size === REEL_SIZES.sm &&
26 
    css`
27 
      height: 150px;
28 
      width: 50px;
29 
    `}
30 
 
31 
  ${({ size }) =>
32 
    size === REEL_SIZES.md &&
33 
    css`
34 
      height: 250px;
35 
      width: 150px;
36 
    `}
37 
 
38 
  ${({ size }) =>
39 
    size === REEL_SIZES.lg &&
40 
    css`
41 
      height: 350px;
42 
      width: 250px;
43 
    `}
44 
`
45 
 
46 
const PlayButton = styled(IconButton)`
47 
  position: absolute !important;
48 
  top: 0.5rem;
49 
  right: 0.5rem;
50 
`
51 
 
52 
const MuteButton = styled(PlayButton)`
53 
  bottom: 0.5rem;
54 
  top: inherit;
55 
`
56 
 
57 
const ReelItem = ({
58 
  reel = {},
59 
  autoPlay = false,
60 
  controls = false,
61 
  onSelect = () => {},
62 
  onEnded = () => {},
63 
  preview = false,
64 
  size = REEL_SIZES.md
65 
}) => {
66 
  const [isPlaying, setIsPlaying] = useState(autoPlay)
67 
  const [isMuted, setIsMuted] = useState(false)
68 
  const videoRef = useRef(null)
69 
 
70 
  const handleMute = () => {
71 
    setIsMuted(!isMuted)
72 
  }
73 
 
74 
  const handlePlay = () => {
75 
    isPlaying ? videoRef.current.pause() : videoRef.current?.play()
76 
    setIsPlaying(!isPlaying)
77 
  }
78 
 
79 
  useEffect(() => {
80 
    !reel.url && videoRef.current.pause()
81 
  }, [reel])
82 
 
83 
  return (
84 
    <ReelContainer
85 
      preview={preview}
86 
      size={size}
87 
      onClickCapture={() => onSelect(reel)}
88 
    >
89 
      <video
90 
        src={reel.url}
91 
        autoPlay={autoPlay}
92 
        muted={isMuted}
93 
        controls={false}
94 
        ref={videoRef}
95 
        onEnded={onEnded}
96 
      />
97 
 
98 
      {controls ? (
99 
        <>
100 
          <PlayButton onClickCapture={handlePlay}>
101 
            {isPlaying ? <Pause /> : <PlayArrowRounded />}
102 
          </PlayButton>
103 
 
104 
          <MuteButton onClickCapture={handleMute}>
105 
            {isMuted ? <VolumeOff /> : <VolumeUp />}
106 
          </MuteButton>
107 
        </>
108 
      ) : null}
109 
    </ReelContainer>
110 
  )
111 
}
112 
 
113 
export default ReelItem