From a6867bf89bfed9d51ccec0b374c806e3e96a56e1 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Fri, 14 Oct 2022 10:11:31 -0600
Subject: [PATCH] Adjust VideoPlayer to accept live option which disables
 irrelevant controls

---
 web/src/components/VideoPlayer.jsx | 4 ++--
 web/src/routes/Camera.jsx          | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/src/components/VideoPlayer.jsx b/web/src/components/VideoPlayer.jsx
index 49a79d38f..e8612a943 100644
--- a/web/src/components/VideoPlayer.jsx
+++ b/web/src/components/VideoPlayer.jsx
@@ -6,7 +6,7 @@ import 'videojs-seek-buttons';
 import 'video.js/dist/video-js.css';
 import 'videojs-seek-buttons/dist/videojs-seek-buttons.css';
 
-export default function VideoPlayer({ children, options, seekOptions = {}, onReady = () => {}, onDispose = () => {} }) {
+export default function VideoPlayer({ children, options, audio=true, live=false, seekOptions = {}, onReady = () => {}, onDispose = () => {} }) {
   const playerRef = useRef();
 
   useEffect(() => {
@@ -25,7 +25,7 @@ export default function VideoPlayer({ children, options, seekOptions = {}, onRea
       defaultOptions.playbackRates.push(16);
     }
 
-    const player = videojs(playerRef.current, { ...defaultOptions, ...options }, () => {
+    const player = videojs(playerRef.current, { ...defaultOptions, ...options, controlBar: { volumePanel: audio, playToggle: !live, progressControl: !live, remainingTimeDisplay: !live, playbackRateMenuButton: !live } }, () => {
       onReady(player);
     });
     player.seekButtons({
diff --git a/web/src/routes/Camera.jsx b/web/src/routes/Camera.jsx
index 6a7fc2a3c..3d83bbf72 100644
--- a/web/src/routes/Camera.jsx
+++ b/web/src/routes/Camera.jsx
@@ -94,11 +94,13 @@ export default function Camera({ camera }) {
 
   let player;
   if (viewMode === 'live') {
-    if (cameraConfig.live.source == 'restream') {
+    if (cameraConfig.live.source == 'mp4') {
       player = (
         <Fragment>
           <div style={`max-height: ${cameraConfig.live.height}px; max-width: ${liveWidth}px`}>
             <VideoPlayer
+              audio={false}
+              live={true}
               options={{
                 autoplay: true,
                 preload: 'metadata',
@@ -111,6 +113,7 @@ export default function Camera({ camera }) {
                   },
                 ],
               }}
+              seekOptions={{ forward: false, back: false }}
               onReady={() => {}}
             />
           </div>