From 83517f59b46b9d158a7b6ebb75389141874335c8 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 22 Mar 2024 08:31:20 -0600
Subject: [PATCH] WebUI Fixes (#10608)

* Fix camera with -

* Fix not playing player after making slight adjustment

* Fix hovering getting stuck
---
 web/src/components/player/PreviewPlayer.tsx        |  3 ++-
 .../components/player/PreviewThumbnailPlayer.tsx   | 14 +++++++-------
 .../player/dynamic/DynamicVideoController.ts       |  4 ++++
 web/src/views/events/RecordingView.tsx             |  2 ++
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx
index a299cf9ec..212779f3a 100644
--- a/web/src/components/player/PreviewPlayer.tsx
+++ b/web/src/components/player/PreviewPlayer.tsx
@@ -352,7 +352,8 @@ function PreviewFramesPlayer({
     }
 
     return previewFrames.map((frame) =>
-      parseFloat(frame.split("-")[1].slice(undefined, -5)),
+      // @ts-expect-error we know this item will exist
+      parseFloat(frame.split("-").slice(undefined, -5)),
     );
   }, [previewFrames]);
 
diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 5e9a5c651..c57e1041c 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -171,7 +171,7 @@ export default function PreviewThumbnailPlayer({
       {...swipeHandlers}
     >
       {playingBack && (
-        <div className="absolute inset-0 animate-in fade-in">
+        <div className="absolute inset-0 animate-in fade-in pointer-events-none">
           <PreviewContent
             review={review}
             relevantPreview={relevantPreview}
@@ -486,10 +486,10 @@ function VideoPreview({
   );
 
   return (
-    <div className="relative size-full aspect-video bg-black">
+    <div className="relative size-full aspect-video bg-black pointer-events-none">
       <video
         ref={playerRef}
-        className="size-full aspect-video bg-black"
+        className="size-full aspect-video bg-black pointer-events-none"
         autoPlay
         playsInline
         preload="auto"
@@ -500,7 +500,7 @@ function VideoPreview({
       </video>
       <Slider
         ref={sliderRef}
-        className="absolute inset-x-0 bottom-0 z-30"
+        className="absolute inset-x-0 bottom-0 z-30 pointer-events-none"
         value={[progress]}
         onValueChange={onManualSeek}
         onValueCommit={onStopManualSeek}
@@ -654,7 +654,7 @@ function InProgressPreview({
   }
 
   return (
-    <div className="relative size-full flex items-center bg-black">
+    <div className="relative size-full flex items-center bg-black pointer-events-none">
       <img
         className="size-full object-contain"
         src={`${apiHost}api/preview/${previewFrames[key]}/thumbnail.webp`}
@@ -681,8 +681,8 @@ function PreviewPlaceholder({ imgLoaded }: { imgLoaded: boolean }) {
   }
 
   return isSafari ? (
-    <div className={`absolute inset-0 bg-gray-300`} />
+    <div className={`absolute inset-0 bg-gray-300 pointer-events-none`} />
   ) : (
-    <Skeleton className={`absolute inset-0`} />
+    <Skeleton className={`absolute inset-0 pointer-events-none`} />
   );
 }
diff --git a/web/src/components/player/dynamic/DynamicVideoController.ts b/web/src/components/player/dynamic/DynamicVideoController.ts
index d30976447..ce40fa719 100644
--- a/web/src/components/player/dynamic/DynamicVideoController.ts
+++ b/web/src/components/player/dynamic/DynamicVideoController.ts
@@ -42,6 +42,10 @@ export class DynamicVideoController {
     }
   }
 
+  play() {
+    this.playerController.play();
+  }
+
   pause() {
     this.playerController.pause();
   }
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 2c5b3fa61..ad3f3262b 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -147,6 +147,8 @@ export function RecordingView({
         } else {
           updateSelectedSegment(currentTime, true);
         }
+      } else {
+        mainControllerRef.current?.play();
       }
     }
     // we only want to seek when current time doesn't match the player update time