From 53b31224c18a7941878a47c11126cb1d060a4de7 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 4 Jul 2024 09:56:36 -0500
Subject: [PATCH 01/11] Use full resolution aspect for main camera style in
 history view

---
 web/src/views/events/RecordingView.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index f42e83a173..e0dcb65aa0 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -314,7 +314,10 @@ export function RecordingView({
       return undefined;
     }
 
-    const aspect = camera.detect.width / camera.detect.height;
+    const aspect =
+      fullResolution.width && fullResolution.height
+        ? fullResolution.width / fullResolution.height
+        : camera.detect.width / camera.detect.height;
 
     if (!aspect) {
       return undefined;
@@ -336,7 +339,14 @@ export function RecordingView({
     return {
       width: `${Math.round(percent)}%`,
     };
-  }, [config, mainCameraAspect, mainWidth, mainHeight, mainCamera]);
+  }, [
+    config,
+    mainCameraAspect,
+    mainWidth,
+    mainHeight,
+    mainCamera,
+    fullResolution,
+  ]);
 
   const previewRowOverflows = useMemo(() => {
     if (!previewRowRef.current) {

From b29757544c2b39b97ffbfb20356605981a4b173f Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 4 Jul 2024 10:33:10 -0500
Subject: [PATCH 02/11] Only check for offline cameras after 60s of uptime

---
 web/src/hooks/use-camera-activity.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/hooks/use-camera-activity.ts b/web/src/hooks/use-camera-activity.ts
index 15b35de7ff..815bd12f35 100644
--- a/web/src/hooks/use-camera-activity.ts
+++ b/web/src/hooks/use-camera-activity.ts
@@ -133,7 +133,7 @@ export function useCameraActivity(
       return false;
     }
 
-    return cameras[camera.name].camera_fps == 0;
+    return cameras[camera.name].camera_fps == 0 && stats["service"].uptime > 60;
   }, [camera, stats]);
 
   return {

From bdad02bff96e506dcdd899b438ab23b2209dbc01 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 4 Jul 2024 17:07:31 -0500
Subject: [PATCH 03/11] only call onPlaying when loadeddata is fired or after
 timeout

---
 web/src/components/player/MsePlayer.tsx | 87 +++++++++++++++----------
 1 file changed, 52 insertions(+), 35 deletions(-)

diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index ad2c10e24b..bff6a59286 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -46,6 +46,7 @@ function MSEPlayer({
 
   const visibilityCheck: boolean = !pip;
   const [isPlaying, setIsPlaying] = useState(false);
+  const playTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const [wsState, setWsState] = useState<number>(WebSocket.CLOSED);
   const [connectTS, setConnectTS] = useState<number>(0);
@@ -371,49 +372,65 @@ function MSEPlayer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [playbackEnabled]);
 
+  const handleLoadedData = useCallback(() => {
+    handleLoadedMetadata?.();
+    if (playTimeoutRef.current) {
+      clearTimeout(playTimeoutRef.current);
+      playTimeoutRef.current = null;
+    }
+    onPlaying?.();
+    setIsPlaying(true);
+  }, [handleLoadedMetadata, onPlaying]);
+
+  const handleProgress = useCallback(() => {
+    if (!isPlaying && !playTimeoutRef.current && playbackEnabled) {
+      playTimeoutRef.current = setTimeout(() => {
+        handleLoadedData();
+      }, 5000);
+    }
+    if (onError != undefined) {
+      if (videoRef.current?.paused) {
+        return;
+      }
+
+      if (bufferTimeout) {
+        clearTimeout(bufferTimeout);
+        setBufferTimeout(undefined);
+      }
+
+      setBufferTimeout(
+        setTimeout(() => {
+          if (
+            document.visibilityState === "visible" &&
+            wsRef.current != null &&
+            videoRef.current
+          ) {
+            onDisconnect();
+            onError("stalled");
+          }
+        }, 3000),
+      );
+    }
+  }, [
+    isPlaying,
+    onError,
+    videoRef,
+    bufferTimeout,
+    onDisconnect,
+    handleLoadedData,
+    playbackEnabled,
+  ]);
+
   return (
     <video
       ref={videoRef}
       className={className}
       playsInline
       preload="auto"
-      onLoadedData={() => {
-        handleLoadedMetadata?.();
-        onPlaying?.();
-        setIsPlaying(true);
-      }}
+      onLoadedData={handleLoadedData}
       muted={!audioEnabled}
       onPause={() => videoRef.current?.play()}
-      onProgress={() => {
-        if (!isPlaying) {
-          setIsPlaying(true);
-          handleLoadedMetadata?.();
-          onPlaying?.();
-        }
-        if (onError != undefined) {
-          if (videoRef.current?.paused) {
-            return;
-          }
-
-          if (bufferTimeout) {
-            clearTimeout(bufferTimeout);
-            setBufferTimeout(undefined);
-          }
-
-          setBufferTimeout(
-            setTimeout(() => {
-              if (
-                document.visibilityState === "visible" &&
-                wsRef.current != null &&
-                videoRef.current
-              ) {
-                onDisconnect();
-                onError("stalled");
-              }
-            }, 3000),
-          );
-        }
-      }}
+      onProgress={handleProgress}
       onError={(e) => {
         if (
           // @ts-expect-error code does exist

From c79c6317123819ac72661bfbfe0ebd45b6e6afcd Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 4 Jul 2024 17:38:57 -0500
Subject: [PATCH 04/11] revert to inline funcs

---
 web/src/components/player/MsePlayer.tsx | 91 +++++++++++--------------
 1 file changed, 40 insertions(+), 51 deletions(-)

diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index bff6a59286..491f31d628 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -372,65 +372,54 @@ function MSEPlayer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [playbackEnabled]);
 
-  const handleLoadedData = useCallback(() => {
-    handleLoadedMetadata?.();
-    if (playTimeoutRef.current) {
-      clearTimeout(playTimeoutRef.current);
-      playTimeoutRef.current = null;
-    }
-    onPlaying?.();
-    setIsPlaying(true);
-  }, [handleLoadedMetadata, onPlaying]);
-
-  const handleProgress = useCallback(() => {
-    if (!isPlaying && !playTimeoutRef.current && playbackEnabled) {
-      playTimeoutRef.current = setTimeout(() => {
-        handleLoadedData();
-      }, 5000);
-    }
-    if (onError != undefined) {
-      if (videoRef.current?.paused) {
-        return;
-      }
-
-      if (bufferTimeout) {
-        clearTimeout(bufferTimeout);
-        setBufferTimeout(undefined);
-      }
-
-      setBufferTimeout(
-        setTimeout(() => {
-          if (
-            document.visibilityState === "visible" &&
-            wsRef.current != null &&
-            videoRef.current
-          ) {
-            onDisconnect();
-            onError("stalled");
-          }
-        }, 3000),
-      );
-    }
-  }, [
-    isPlaying,
-    onError,
-    videoRef,
-    bufferTimeout,
-    onDisconnect,
-    handleLoadedData,
-    playbackEnabled,
-  ]);
-
   return (
     <video
       ref={videoRef}
       className={className}
       playsInline
       preload="auto"
-      onLoadedData={handleLoadedData}
+      onLoadedData={() => {
+        handleLoadedMetadata?.();
+        if (playTimeoutRef.current) {
+          clearTimeout(playTimeoutRef.current);
+          playTimeoutRef.current = null;
+        }
+        onPlaying?.();
+        setIsPlaying(true);
+      }}
       muted={!audioEnabled}
       onPause={() => videoRef.current?.play()}
-      onProgress={handleProgress}
+      onProgress={() => {
+        if (!isPlaying && !playTimeoutRef.current && playbackEnabled) {
+          playTimeoutRef.current = setTimeout(() => {
+            setIsPlaying(true);
+            onPlaying?.();
+          }, 5000);
+        }
+        if (onError != undefined) {
+          if (videoRef.current?.paused) {
+            return;
+          }
+
+          if (bufferTimeout) {
+            clearTimeout(bufferTimeout);
+            setBufferTimeout(undefined);
+          }
+
+          setBufferTimeout(
+            setTimeout(() => {
+              if (
+                document.visibilityState === "visible" &&
+                wsRef.current != null &&
+                videoRef.current
+              ) {
+                onDisconnect();
+                onError("stalled");
+              }
+            }, 3000),
+          );
+        }
+      }}
       onError={(e) => {
         if (
           // @ts-expect-error code does exist

From 259b584266f05ca43ecfca15c9d04e68d34a7ab1 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 5 Jul 2024 10:13:18 -0500
Subject: [PATCH 05/11] Portal frigate plus alert dialog

---
 web/src/components/icons/FrigatePlusIcon.tsx  | 32 +++++----
 web/src/components/player/HlsVideoPlayer.tsx  |  3 +
 web/src/components/player/VideoControls.tsx   | 16 +++--
 .../player/dynamic/DynamicVideoPlayer.tsx     |  3 +
 web/src/components/ui/alert-dialog.tsx        | 66 ++++++++++---------
 web/src/views/events/RecordingView.tsx        |  1 +
 6 files changed, 71 insertions(+), 50 deletions(-)

diff --git a/web/src/components/icons/FrigatePlusIcon.tsx b/web/src/components/icons/FrigatePlusIcon.tsx
index 24ee06eb53..15e196cd14 100644
--- a/web/src/components/icons/FrigatePlusIcon.tsx
+++ b/web/src/components/icons/FrigatePlusIcon.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { LuPlus } from "react-icons/lu";
 import Logo from "../Logo";
 import { cn } from "@/lib/utils";
@@ -6,17 +7,20 @@ type FrigatePlusIconProps = {
   className?: string;
   onClick?: () => void;
 };
-export default function FrigatePlusIcon({
-  className,
-  onClick,
-}: FrigatePlusIconProps) {
-  return (
-    <div
-      className={cn("relative flex items-center", className)}
-      onClick={onClick}
-    >
-      <Logo className="size-full" />
-      <LuPlus className="absolute size-2 translate-x-3 translate-y-3/4" />
-    </div>
-  );
-}
+
+const FrigatePlusIcon = forwardRef<HTMLDivElement, FrigatePlusIconProps>(
+  ({ className, onClick }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("relative flex items-center", className)}
+        onClick={onClick}
+      >
+        <Logo className="size-full" />
+        <LuPlus className="absolute size-2 translate-x-3 translate-y-3/4" />
+      </div>
+    );
+  },
+);
+
+export default FrigatePlusIcon;
diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 2086402cd3..5562303b2a 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -40,6 +40,7 @@ type HlsVideoPlayerProps = {
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onUploadFrame?: (playTime: number) => Promise<AxiosResponse> | undefined;
   toggleFullscreen?: () => void;
+  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
 };
 export default function HlsVideoPlayer({
   videoRef,
@@ -54,6 +55,7 @@ export default function HlsVideoPlayer({
   setFullResolution,
   onUploadFrame,
   toggleFullscreen,
+  containerRef,
 }: HlsVideoPlayerProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
@@ -225,6 +227,7 @@ export default function HlsVideoPlayer({
         }}
         fullscreen={fullscreen}
         toggleFullscreen={toggleFullscreen}
+        containerRef={containerRef}
       />
       <TransformComponent
         wrapperStyle={{
diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
index 5adebdc7c2..70d9a4be8c 100644
--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@@ -71,6 +71,7 @@ type VideoControlsProps = {
   onSetPlaybackRate: (rate: number) => void;
   onUploadFrame?: () => void;
   toggleFullscreen?: () => void;
+  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
 };
 export default function VideoControls({
   className,
@@ -91,10 +92,11 @@ export default function VideoControls({
   onSetPlaybackRate,
   onUploadFrame,
   toggleFullscreen,
+  containerRef,
 }: VideoControlsProps) {
   // layout
 
-  const containerRef = useRef<HTMLDivElement | null>(null);
+  const controlsContainerRef = useRef<HTMLDivElement | null>(null);
 
   // controls
 
@@ -197,7 +199,7 @@ export default function VideoControls({
             MIN_ITEMS_WRAP &&
           "min-w-[75%] flex-wrap",
       )}
-      ref={containerRef}
+      ref={controlsContainerRef}
     >
       {video && features.volume && (
         <div className="flex cursor-pointer items-center justify-normal gap-2">
@@ -247,7 +249,7 @@ export default function VideoControls({
         >
           <DropdownMenuTrigger>{`${playbackRate}x`}</DropdownMenuTrigger>
           <DropdownMenuContent
-            portalProps={{ container: containerRef.current }}
+            portalProps={{ container: controlsContainerRef.current }}
           >
             <DropdownMenuRadioGroup
               onValueChange={(rate) => onSetPlaybackRate(parseFloat(rate))}
@@ -281,6 +283,7 @@ export default function VideoControls({
             }
           }}
           onUploadFrame={onUploadFrame}
+          containerRef={containerRef}
         />
       )}
       {features.fullscreen && toggleFullscreen && (
@@ -297,12 +300,14 @@ type FrigatePlusUploadButtonProps = {
   onOpen: () => void;
   onClose: () => void;
   onUploadFrame: () => void;
+  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
 };
 function FrigatePlusUploadButton({
   video,
   onOpen,
   onClose,
   onUploadFrame,
+  containerRef,
 }: FrigatePlusUploadButtonProps) {
   const [videoImg, setVideoImg] = useState<string>();
 
@@ -336,7 +341,10 @@ function FrigatePlusUploadButton({
           }}
         />
       </AlertDialogTrigger>
-      <AlertDialogContent className="md:max-w-2xl lg:max-w-3xl xl:max-w-4xl">
+      <AlertDialogContent
+        portalProps={{ container: containerRef?.current }}
+        className="md:max-w-2xl lg:max-w-3xl xl:max-w-4xl"
+      >
         <AlertDialogHeader>
           <AlertDialogTitle>Submit this frame to Frigate+?</AlertDialogTitle>
         </AlertDialogHeader>
diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
index 62f8a75d7d..2f347404f5 100644
--- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
@@ -30,6 +30,7 @@ type DynamicVideoPlayerProps = {
   onClipEnded?: () => void;
   setFullResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   toggleFullscreen: () => void;
+  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
 };
 export default function DynamicVideoPlayer({
   className,
@@ -45,6 +46,7 @@ export default function DynamicVideoPlayer({
   onClipEnded,
   setFullResolution,
   toggleFullscreen,
+  containerRef,
 }: DynamicVideoPlayerProps) {
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -208,6 +210,7 @@ export default function DynamicVideoPlayer({
         setFullResolution={setFullResolution}
         onUploadFrame={onUploadFrameToPlus}
         toggleFullscreen={toggleFullscreen}
+        containerRef={containerRef}
       />
       <PreviewPlayer
         className={cn(
diff --git a/web/src/components/ui/alert-dialog.tsx b/web/src/components/ui/alert-dialog.tsx
index cc49f39602..1519098429 100644
--- a/web/src/components/ui/alert-dialog.tsx
+++ b/web/src/components/ui/alert-dialog.tsx
@@ -1,14 +1,14 @@
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialog = AlertDialogPrimitive.Root;
 
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@@ -17,31 +17,33 @@ const AlertDialogOverlay = React.forwardRef<
   <AlertDialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
     ref={ref}
   />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
+    portalProps?: AlertDialogPrimitive.AlertDialogPortalProps;
+  }
+>(({ className, portalProps, ...props }, ref) => (
+  <AlertDialogPortal {...portalProps}>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        className,
       )}
       {...props}
     />
   </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
   className,
@@ -50,12 +52,12 @@ const AlertDialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
 
 const AlertDialogFooter = ({
   className,
@@ -64,12 +66,12 @@ const AlertDialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -80,8 +82,8 @@ const AlertDialogTitle = React.forwardRef<
     className={cn("text-lg font-semibold", className)}
     {...props}
   />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
@@ -92,9 +94,9 @@ const AlertDialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
+));
 AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+  AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
@@ -105,8 +107,8 @@ const AlertDialogAction = React.forwardRef<
     className={cn(buttonVariants(), className)}
     {...props}
   />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
@@ -117,12 +119,12 @@ const AlertDialogCancel = React.forwardRef<
     className={cn(
       buttonVariants({ variant: "outline" }),
       "mt-2 sm:mt-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
@@ -136,4 +138,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-}
+};
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index e0dcb65aa0..aceb96cfbe 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -542,6 +542,7 @@ export function RecordingView({
                 isScrubbing={scrubbing || exportMode == "timeline"}
                 setFullResolution={setFullResolution}
                 toggleFullscreen={toggleFullscreen}
+                containerRef={mainLayoutRef}
               />
             </div>
             {isDesktop && (

From 2e5aa1051403ffc6bc3fbab032a7d85e479dff25 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 5 Jul 2024 17:17:05 -0500
Subject: [PATCH 06/11] remove duplicated logic

---
 web/src/views/events/RecordingView.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index aceb96cfbe..92c96441a2 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -314,10 +314,7 @@ export function RecordingView({
       return undefined;
     }
 
-    const aspect =
-      fullResolution.width && fullResolution.height
-        ? fullResolution.width / fullResolution.height
-        : camera.detect.width / camera.detect.height;
+    const aspect = getCameraAspect(mainCamera);
 
     if (!aspect) {
       return undefined;
@@ -345,7 +342,7 @@ export function RecordingView({
     mainWidth,
     mainHeight,
     mainCamera,
-    fullResolution,
+    getCameraAspect,
   ]);
 
   const previewRowOverflows = useMemo(() => {

From 69879ae62892a2ff3ab9400f2531414467d1d77a Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 5 Jul 2024 19:56:47 -0500
Subject: [PATCH 07/11] increase onplaying timeout

---
 web/src/components/player/MsePlayer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index 491f31d628..0300557de1 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -394,7 +394,7 @@ function MSEPlayer({
           playTimeoutRef.current = setTimeout(() => {
             setIsPlaying(true);
             onPlaying?.();
-          }, 5000);
+          }, 7000);
         }
         if (onError != undefined) {
           if (videoRef.current?.paused) {

From 5cd4720ef2d3756d2f47368e873dd7e68f624e80 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 6 Jul 2024 17:59:50 -0500
Subject: [PATCH 08/11] Use a ref instead of a state and clear timeout in
 AutoUpdatingCameraImage

---
 .../camera/AutoUpdatingCameraImage.tsx        | 26 ++++++++++---------
 web/src/components/player/LivePlayer.tsx      |  7 ++---
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/web/src/components/camera/AutoUpdatingCameraImage.tsx b/web/src/components/camera/AutoUpdatingCameraImage.tsx
index 3730f069b1..ee0f6eccc7 100644
--- a/web/src/components/camera/AutoUpdatingCameraImage.tsx
+++ b/web/src/components/camera/AutoUpdatingCameraImage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import CameraImage from "./CameraImage";
 
 type AutoUpdatingCameraImageProps = {
@@ -22,7 +22,7 @@ export default function AutoUpdatingCameraImage({
 }: AutoUpdatingCameraImageProps) {
   const [key, setKey] = useState(Date.now());
   const [fps, setFps] = useState<string>("0");
-  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
     if (reloadInterval == -1) {
@@ -32,9 +32,9 @@ export default function AutoUpdatingCameraImage({
     setKey(Date.now());
 
     return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-        setTimeoutId(undefined);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
       }
     };
     // we know that these deps are correct
@@ -46,19 +46,21 @@ export default function AutoUpdatingCameraImage({
       return;
     }
 
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
     const loadTime = Date.now() - key;
 
     if (showFps) {
       setFps((1000 / Math.max(loadTime, reloadInterval)).toFixed(1));
     }
 
-    setTimeoutId(
-      setTimeout(
-        () => {
-          setKey(Date.now());
-        },
-        loadTime > reloadInterval ? 1 : reloadInterval,
-      ),
+    timeoutRef.current = setTimeout(
+      () => {
+        setKey(Date.now());
+      },
+      loadTime > reloadInterval ? 1 : reloadInterval,
     );
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 4a5bd8c023..5d3129ffe7 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -256,9 +256,10 @@ export default function LivePlayer({
         )}
 
       <div
-        className={`absolute inset-0 w-full ${
-          showStillWithoutActivity && !liveReady ? "visible" : "invisible"
-        }`}
+        className={cn(
+          "absolute inset-0 w-full",
+          showStillWithoutActivity && !liveReady ? "visible" : "invisible",
+        )}
       >
         <AutoUpdatingCameraImage
           className="size-full"

From 6cb90e2ebe74221c451207060b8d2172597b32cd Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 6 Jul 2024 21:15:52 -0500
Subject: [PATCH 09/11] default to the selected month for selectedDay

---
 web/src/components/overlay/ReviewActivityCalendar.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/src/components/overlay/ReviewActivityCalendar.tsx b/web/src/components/overlay/ReviewActivityCalendar.tsx
index e119870322..6ac7c6a205 100644
--- a/web/src/components/overlay/ReviewActivityCalendar.tsx
+++ b/web/src/components/overlay/ReviewActivityCalendar.tsx
@@ -61,6 +61,7 @@ export default function ReviewActivityCalendar({
 
   return (
     <Calendar
+      key={selectedDay ? selectedDay.toISOString() : "reset"}
       mode="single"
       disabled={disabledDates}
       showOutsideDays={false}
@@ -70,6 +71,7 @@ export default function ReviewActivityCalendar({
       components={{
         DayContent: ReviewActivityDay,
       }}
+      defaultMonth={selectedDay ?? new Date()}
     />
   );
 }
@@ -152,12 +154,14 @@ export function TimezoneAwareCalendar({
 
   return (
     <Calendar
+      key={selectedDay ? selectedDay.toISOString() : "reset"}
       mode="single"
       disabled={disabledDates}
       showOutsideDays={false}
       today={today}
       selected={selectedDay}
       onSelect={onSelect}
+      defaultMonth={selectedDay ?? new Date()}
     />
   );
 }

From 47dafca77733ceeb60e0887d7a0175daf5dc2156 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 7 Jul 2024 07:00:00 -0500
Subject: [PATCH 10/11] Use buffered time instead of timeout

---
 web/src/components/player/MsePlayer.tsx | 25 +++++++++++++++----------
 web/src/views/live/LiveCameraView.tsx   |  2 +-
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index 0300557de1..e4ed4393ed 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -46,7 +46,6 @@ function MSEPlayer({
 
   const visibilityCheck: boolean = !pip;
   const [isPlaying, setIsPlaying] = useState(false);
-  const playTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const [wsState, setWsState] = useState<number>(WebSocket.CLOSED);
   const [connectTS, setConnectTS] = useState<number>(0);
@@ -298,6 +297,11 @@ function MSEPlayer({
     };
   };
 
+  const getBufferedTime = (video: HTMLVideoElement | null) => {
+    if (!video || video.buffered.length === 0) return 0;
+    return video.buffered.end(video.buffered.length - 1) - video.currentTime;
+  };
+
   useEffect(() => {
     if (!playbackEnabled) {
       return;
@@ -380,21 +384,22 @@ function MSEPlayer({
       preload="auto"
       onLoadedData={() => {
         handleLoadedMetadata?.();
-        if (playTimeoutRef.current) {
-          clearTimeout(playTimeoutRef.current);
-          playTimeoutRef.current = null;
-        }
         onPlaying?.();
         setIsPlaying(true);
       }}
       muted={!audioEnabled}
       onPause={() => videoRef.current?.play()}
       onProgress={() => {
-        if (!isPlaying && !playTimeoutRef.current && playbackEnabled) {
-          playTimeoutRef.current = setTimeout(() => {
-            setIsPlaying(true);
-            onPlaying?.();
-          }, 7000);
+        // if we have > 3 seconds of buffered data and we're still not playing,
+        // something might be wrong - maybe codec issue, no audio, etc
+        // so mark the player as playing so that error handlers will fire
+        if (
+          !isPlaying &&
+          playbackEnabled &&
+          getBufferedTime(videoRef.current) > 3
+        ) {
+          setIsPlaying(true);
+          onPlaying?.();
         }
         if (onError != undefined) {
           if (videoRef.current?.paused) {
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 65581d5022..f148f01ee5 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -399,7 +399,7 @@ export default function LiveCameraView({
                   onClick={() => setMic(!mic)}
                 />
               )}
-              {supportsAudioOutput && (
+              {supportsAudioOutput && preferredLiveMode != "jsmpeg" && (
                 <CameraFeatureToggle
                   className="p-2 md:p-0"
                   variant={fullscreen ? "overlay" : "primary"}

From 105986f1736d1e1040699dfc8d3a1e7a08dcffd2 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 8 Jul 2024 08:07:20 -0500
Subject: [PATCH 11/11] Use default cursor when not editing polygons

---
 web/src/components/settings/PolygonDrawer.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/src/components/settings/PolygonDrawer.tsx b/web/src/components/settings/PolygonDrawer.tsx
index 706cbea9d2..966aad2ca1 100644
--- a/web/src/components/settings/PolygonDrawer.tsx
+++ b/web/src/components/settings/PolygonDrawer.tsx
@@ -131,10 +131,18 @@ export default function PolygonDrawer({
         closed={isFinished}
         fill={colorString(isActive || isHovered ? true : false)}
         onMouseOver={() =>
-          isFinished ? setCursor("move") : setCursor("crosshair")
+          isActive
+            ? isFinished
+              ? setCursor("move")
+              : setCursor("crosshair")
+            : setCursor("default")
         }
         onMouseOut={() =>
-          isFinished ? setCursor("default") : setCursor("crosshair")
+          isActive
+            ? isFinished
+              ? setCursor("default")
+              : setCursor("crosshair")
+            : setCursor("default")
         }
       />
       {isFinished && isActive && (