WiP on handling Videos

Author: jrief

client/components/editor/Video.tsx

@@ -1,14 +1,65 @@
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {useContext, useRef, useState} from 'react';
+import ReactPlayer from 'react-player/file';
 import {FinderSettings} from 'finder/FinderSettings';
-import FileDetails from './FileDetails';
+import {FileDetails} from 'finder/FileDetails';
+import PauseIcon from 'icons/pause.svg';
+import PlayIcon from 'icons/play.svg';
+import CameraIcon from 'icons/camera.svg';
 
 
 export default function Video(props) {
+	const sampleFields = {
+		posterFrame: document.getElementById('id_poster_frame') as HTMLInputElement,
+	};
 	const settings = useContext(FinderSettings);
+	const style = {
+		width: '960px',
+		maxWidth: '100%',
+		height: 'auto',
+	};
+	const videoRef = useRef(null);
+	const [isPlaying, setIsPlaying] = useState(false);
 
+	const onReady = () => {
+	}
+
+	const onPlayPause = () => {
+		const player = videoRef.current.getInternalPlayer();
+		if (isPlaying) {
+			player.pause();
+			setIsPlaying(false);
+		} else {
+			player.play();
+			setIsPlaying(true);
+		}
+	}
+
+	const createPosterFrame = () => {
+		const currentTime = videoRef.current.getCurrentTime();
+		sampleFields.posterFrame.value = currentTime;
+	}
+
+	const controlButtons = [(isPlaying ?
+		<button onClick={onPlayPause}><PauseIcon/>{gettext("Pause")}</button> :
+		<button onClick={onPlayPause}><PlayIcon/>{gettext("Play")}</button>
+	),
+		<button onClick={createPosterFrame}><CameraIcon/>{gettext("Create Poster Frame")}</button>
+	];
 	return (
-		<FileDetails>
-			<video src={settings.download_url}></video>
+		<FileDetails controlButtons={controlButtons} style={style}>
+			<ReactPlayer
+				url={settings.download_url}
+				controls={true}
+				controlsList="nofullscreen nodownload"
+				disablePictureInPicture={true}
+				onReady={onReady}
+				onPlay={() => setIsPlaying(true)}
+				onPause={() => setIsPlaying(false)}
+				pip={false}
+				ref={videoRef}
+				width="100%"
+				height="100%"
+			/>
 		</FileDetails>
 	);
 }

client/esbuild.cjs

@@ -1,4 +1,4 @@
-const { build } = require('esbuild');
+const {build} = require('esbuild');
 const svgr = require('esbuild-plugin-svgr');
 const buildOptions = require('yargs-parser')(process.argv.slice(2), {
   boolean: ['debug'],

package.json

@@ -17,6 +17,7 @@
     "esbuild-plugin-svgr": "^2.1.0",
     "react-h5-audio-player": "^3.9.1",
     "react-image-crop": "^11.0.5",
+    "react-player": "^2.16.0",
     "react-tooltip": "^5.26.4",
     "request": "^2.88.2",
     "sass": "^1.77.2",