give / src / Promotions / WelcomeBanner / resources / js / app / components / VideoPlayer / index.tsx

index.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.18.0.1, at src/Promotions/WelcomeBanner/resources/js/app/components/VideoPlayer/index.tsx

60 lines 1.8 KB

Raw Download Zip

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