Cleanup (#10846)

* Hide motion playback controls during scrubbing * Fix portrait recordings on mobile * Don't apply to desktop
blakeblackshear · Apr 5, 2024 · 2318e79 · 2318e79
1 parent fb7cfe5
commit 2318e79
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 28 deletions.
diff --git 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
@@ -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;
-
-          if (wasPlaying) {
-            setPlaying(false);
-          }
+      {!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);
+            }
 
-          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}
+        />
+      )}
     </>
   );
 }