From 2318e795022c340747d1de4c0ed9a5da51e1f1e1 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 5 Apr 2024 07:38:05 -0600
Subject: [PATCH] Cleanup (#10846)

* Hide motion playback controls during scrubbing

* Fix portrait recordings on mobile

* Don't apply to desktop
---
 web/src/components/player/HlsVideoPlayer.tsx |  4 +-
 web/src/views/events/EventView.tsx           | 54 ++++++++++----------
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index b6480d6bd..2bbf4d801 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -92,7 +92,7 @@ export default function HlsVideoPlayer({
   return (
     <TransformWrapper minScale={1.0}>
       <div
-        className={`relative w-full ${className ?? ""} ${visible ? "visible" : "hidden"}`}
+        className={`relative ${className ?? ""} ${visible ? "visible" : "hidden"}`}
         onMouseOver={
           isDesktop
             ? () => {
@@ -112,9 +112,11 @@ export default function HlsVideoPlayer({
         <TransformComponent
           wrapperStyle={{
             width: "100%",
+            height: "100%",
           }}
           contentStyle={{
             width: "100%",
+            height: isMobile ? "100%" : undefined,
           }}
         >
           <video
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 02e34f0d4..e1d7b24df 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -898,35 +898,37 @@ function MotionReview({
         )}
       </div>
 
-      <VideoControls
-        className="absolute bottom-16 left-1/2 -translate-x-1/2"
-        features={{
-          volume: false,
-          seek: true,
-          playbackRate: true,
-        }}
-        isPlaying={playing}
-        playbackRates={[4, 8, 12, 16]}
-        playbackRate={playbackRate}
-        controlsOpen={controlsOpen}
-        setControlsOpen={setControlsOpen}
-        onPlayPause={setPlaying}
-        onSeek={(diff) => {
-          const wasPlaying = playing;
+      {!scrubbing && (
+        <VideoControls
+          className="absolute bottom-16 left-1/2 -translate-x-1/2"
+          features={{
+            volume: false,
+            seek: true,
+            playbackRate: true,
+          }}
+          isPlaying={playing}
+          playbackRates={[4, 8, 12, 16]}
+          playbackRate={playbackRate}
+          controlsOpen={controlsOpen}
+          setControlsOpen={setControlsOpen}
+          onPlayPause={setPlaying}
+          onSeek={(diff) => {
+            const wasPlaying = playing;
 
-          if (wasPlaying) {
-            setPlaying(false);
-          }
+            if (wasPlaying) {
+              setPlaying(false);
+            }
 
-          setCurrentTime(currentTime + diff);
+            setCurrentTime(currentTime + diff);
 
-          if (wasPlaying) {
-            setTimeout(() => setPlaying(true), 100);
-          }
-        }}
-        onSetPlaybackRate={setPlaybackRate}
-        show={currentTime < timeRange.before - 4}
-      />
+            if (wasPlaying) {
+              setTimeout(() => setPlaying(true), 100);
+            }
+          }}
+          onSetPlaybackRate={setPlaybackRate}
+          show={currentTime < timeRange.before - 4}
+        />
+      )}
     </>
   );
 }