give
/
src
/
Promotions
/
WelcomeBanner
/
resources
/
js
/
app
/
components
/
VideoPlayer
/
index.tsx
give
/
src
/
Promotions
/
WelcomeBanner
/
resources
/
js
/
app
/
components
/
VideoPlayer
Last commit date
index.tsx
2 years ago
styles.scss
2 years ago
index.tsx
60 lines
| 1 | import {useRef, useState} from 'react'; |
| 2 | import './styles.scss'; |
| 3 | import getWindowData from '../../../index'; |
| 4 | |
| 5 | type VideoPlayerProps = { |
| 6 | src: string; |
| 7 | fallbackImage: string; |
| 8 | }; |
| 9 | |
| 10 | /** |
| 11 | * @since 3.0.0 |
| 12 | */ |
| 13 | export default function VideoPlayer({src, fallbackImage}: VideoPlayerProps) { |
| 14 | const videoRef = useRef<HTMLVideoElement>(null); |
| 15 | const [isPlaying, setIsPlaying] = useState<boolean>(false); |
| 16 | |
| 17 | const {assets} = getWindowData(); |
| 18 | |
| 19 | const togglePlay = () => { |
| 20 | if (videoRef.current.paused) { |
| 21 | videoRef.current.play(); |
| 22 | setIsPlaying(true); |
| 23 | } else { |
| 24 | videoRef.current.pause(); |
| 25 | setIsPlaying(false); |
| 26 | } |
| 27 | }; |
| 28 | |
| 29 | const useFallbackImage = |
| 30 | src === null || |
| 31 | src === undefined || |
| 32 | src === '' || |
| 33 | isPlaying === null || |
| 34 | (!src.endsWith('.mp4') && !src.endsWith('.mov')); |
| 35 | |
| 36 | return ( |
| 37 | <div className={'givewp-welcome-banner-video'}> |
| 38 | <div className={'givewp-welcome-banner-video-container'}> |
| 39 | {useFallbackImage ? ( |
| 40 | <div className={'givewp-welcome-banner-video-fallback'}> |
| 41 | <img className={'givewp-welcome-banner-video-fallback__image'} src={fallbackImage} alt={'/'} /> |
| 42 | </div> |
| 43 | ) : ( |
| 44 | <video ref={videoRef} src={src} loop muted /> |
| 45 | )} |
| 46 | |
| 47 | {!useFallbackImage && ( |
| 48 | <button className="play-button" onClick={togglePlay}> |
| 49 | {isPlaying ? ( |
| 50 | <img src={`${assets}/pause-icon.svg`} alt="Pause" /> |
| 51 | ) : ( |
| 52 | <img src={`${assets}/play-icon.svg`} alt={'play'} /> |
| 53 | )} |
| 54 | </button> |
| 55 | )} |
| 56 | </div> |
| 57 | </div> |
| 58 | ); |
| 59 | } |
| 60 |