Cleanup autoplay

web/src/components/Wrapper.tsx

@@ -5,7 +5,7 @@ type TWrapperProps = {
 };
 
 const Wrapper = ({ children }: TWrapperProps) => {
-  return <main className="w-screen h-screen overflow-hidden">{children}</main>;
+  return <main className="w-screen h-dvh overflow-hidden">{children}</main>;
 };
 
 export default Wrapper;

web/src/components/player/DynamicVideoPlayer.tsx

@@ -99,26 +99,6 @@ export default function DynamicVideoPlayer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [controller]);
 
-  const [initPreviewOnly, setInitPreviewOnly] = useState(previewOnly);
-
-  useEffect(() => {
-    if (!controller || !playerRef) {
-      return;
-    }
-
-    if (previewOnly == initPreviewOnly) {
-      return;
-    }
-
-    if (!previewOnly) {
-      controller.seekToTimestamp(playerRef.currentTime() || 0, true);
-    }
-
-    setInitPreviewOnly(previewOnly);
-    // we only want to fire once when players are ready
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [controller, previewOnly]);
-
   // keyboard control
 
   const onKeyboardShortcut = useCallback(
@@ -191,16 +171,23 @@ export default function DynamicVideoPlayer({
   // start at correct time
 
   useEffect(() => {
-    if (previewOnly || !startTime) {
-      return;
-    }
-
     const player = playerRef;
 
     if (!player) {
       return;
     }
 
+    if (previewOnly) {
+      player.autoplay(false);
+      return;
+    }
+
+    player.autoplay(true);
+
+    if (!startTime) {
+      return;
+    }
+
     if (player.isReady_) {
       controller?.seekToTimestamp(startTime, true);
       return;

web/src/views/events/RecordingView.tsx

@@ -373,7 +373,9 @@ export function MobileRecordingView({
         </Button>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button>{playbackCamera}</Button>
+            <Button className="capitalize">
+              {playbackCamera.replaceAll("_", " ")}
+            </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuRadioGroup
@@ -384,7 +386,11 @@ export function MobileRecordingView({
               }}
             >
               {allCameras.map((cam) => (
-                <DropdownMenuRadioItem key={cam} value={cam}>
+                <DropdownMenuRadioItem
+                  key={cam}
+                  className="capitalize"
+                  value={cam}
+                >
                   {cam.replaceAll("_", " ")}
                 </DropdownMenuRadioItem>
               ))}
@@ -395,7 +401,7 @@ export function MobileRecordingView({
 
       <div>
         <DynamicVideoPlayer
-          camera={startCamera}
+          camera={playbackCamera}
           timeRange={currentTimeRange}
           cameraPreviews={relevantPreviews || []}
           startTime={playbackStart}