Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1650 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1650 Rev 3694
Línea 1... Línea 1...
1 
import React, { useEffect, useRef, useState } from 'react'
 1 
import React, { useEffect, useRef, useState } from 'react';
2 
import { IconButton } from '@mui/material'
 2 
import { IconButton } from '@mui/material';
3 
import {
 - 
 
4 
  Pause,
 3 
import Pause from '@mui/icons-material/Pause';
5 
  PlayArrowRounded,
 4 
import PlayArrowRounded from '@mui/icons-material/PlayArrowRounded';
6 
  VolumeOff,
 5 
import VolumeOff from '@mui/icons-material/VolumeOff';
7 
  VolumeUp
 - 
 
8 
} from '@mui/icons-material'
 6 
import VolumeUp from '@mui/icons-material/VolumeUp';
9 
import styled, { css } from 'styled-components'
 7 
import styled, { css } from 'styled-components';
10 
import { REEL_SIZES } from '../../../constants/feed'
 8 
import { REEL_SIZES } from '../../../constants/feed';
Línea 11... Línea 9...
11 
 
 9 
 
12 
const ReelContainer = styled.div`
 10 
const ReelContainer = styled.div`
13 
  border-radius: 20px;
 11 
  border-radius: 20px;
14 
  background-color: #000;
 12 
  background-color: #000;
Línea 39... Línea 37...
39 
    size === REEL_SIZES.lg &&
 37 
    size === REEL_SIZES.lg &&
40 
    css`
 38 
    css`
41 
      height: 350px;
 39 
      height: 350px;
42 
      width: 250px;
 40 
      width: 250px;
43 
    `}
 41 
    `}
44 
`
 42 
`;
Línea 45... Línea 43...
45 
 
 43 
 
46 
const PlayButton = styled(IconButton)`
 44 
const PlayButton = styled(IconButton)`
47 
  position: absolute !important;
 45 
  position: absolute !important;
48 
  top: 0.5rem;
 46 
  top: 0.5rem;
49 
  right: 0.5rem;
 47 
  right: 0.5rem;
Línea 50... Línea 48...
50 
`
 48 
`;
51 
 
 49 
 
52 
const MuteButton = styled(PlayButton)`
 50 
const MuteButton = styled(PlayButton)`
53 
  bottom: 0.5rem;
 51 
  bottom: 0.5rem;
Línea 54... Línea 52...
54 
  top: inherit;
 52 
  top: inherit;
55 
`
 53 
`;
56 
 
 54 
 
57 
const ReelItem = ({
 55 
const ReelItem = ({
58 
  reel = {},
 56 
  reel = {},
59 
  autoPlay = false,
 57 
  autoPlay = false,
60 
  controls = false,
 58 
  controls = false,
61 
  onSelect = () => {},
 59 
  onSelect = () => {},
62 
  onEnded = () => {},
 60 
  onEnded = () => {},
63 
  preview = false,
 61 
  preview = false,
64 
  size = REEL_SIZES.md
 62 
  size = REEL_SIZES.md
65 
}) => {
 63 
}) => {
Línea 66... Línea 64...
66 
  const [isPlaying, setIsPlaying] = useState(autoPlay)
 64 
  const [isPlaying, setIsPlaying] = useState(autoPlay);
67 
  const [isMuted, setIsMuted] = useState(false)
 65 
  const [isMuted, setIsMuted] = useState(false);
68 
  const videoRef = useRef(null)
 66 
  const videoRef = useRef(null);
Línea 69... Línea 67...
69 
 
 67 
 
70 
  const handleMute = () => {
 68 
  const handleMute = () => {
71 
    setIsMuted(!isMuted)
 69 
    setIsMuted(!isMuted);
72 
  }
 70 
  };
Línea 73... Línea 71...
73 
 
 71 
 
74 
  const handlePlay = () => {
 72 
  const handlePlay = () => {
75 
    isPlaying ? videoRef.current.pause() : videoRef.current?.play()
 73 
    isPlaying ? videoRef.current.pause() : videoRef.current?.play();
Línea 76... Línea 74...
76 
    setIsPlaying(!isPlaying)
 74 
    setIsPlaying(!isPlaying);
77 
  }
 - 
 
78 
 
 - 
 
79 
  useEffect(() => {
 - 
 
80 
    !reel.url && videoRef.current.pause()
 75 
  };
81 
  }, [reel])
 - 
 
82 
 
 76 
 
83 
  return (
 77 
  useEffect(() => {
84 
    <ReelContainer
 78 
    !reel.url && videoRef.current.pause();
85 
      preview={preview}
 79 
  }, [reel]);
86 
      size={size}
 80 
 
Línea 105... Línea 99...
105 
            {isMuted ? <VolumeOff /> : <VolumeUp />}
 99 
            {isMuted ? <VolumeOff /> : <VolumeUp />}
106 
          </MuteButton>
 100 
          </MuteButton>
107 
        </>
 101 
        </>
108 
      ) : null}
 102 
      ) : null}
109 
    </ReelContainer>
 103 
    </ReelContainer>
110 
  )
 104 
  );
111 
}
 105 
};
Línea 112... Línea 106...
112 
 
 106