Bugfixes (#14587)

* Ensure review and search item mobile pages reopen correctly

* disable pan/pinch/zoom when native browser video controls are displayed

* report 0 for storage usage when api returns null

web/src/components/graph/CombinedStorageGraph.tsx

@@ -216,7 +216,7 @@ export function CombinedStorageGraph({
                     </Popover>
                   )}
                 </TableCell>
-                <TableCell>{getUnitSize(item.usage)}</TableCell>
+                <TableCell>{getUnitSize(item.usage ?? 0)}</TableCell>
                 <TableCell>{item.data[0].toFixed(2)}%</TableCell>
                 <TableCell>
                   {item.name === "Unused"

web/src/components/mobile/MobilePage.tsx

@@ -25,7 +25,13 @@ export function MobilePage({
   const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
 
   const open = controlledOpen ?? uncontrolledOpen;
-  const setOpen = onOpenChange ?? setUncontrolledOpen;
+  const setOpen = (value: boolean) => {
+    if (onOpenChange) {
+      onOpenChange(value);
+    } else {
+      setUncontrolledOpen(value);
+    }
+  };
 
   return (
     <MobilePageContext.Provider value={{ open, onOpenChange: setOpen }}>

web/src/components/overlay/detail/ReviewDetailDialog.tsx

@@ -13,7 +13,7 @@ import { getIconForLabel } from "@/utils/iconUtil";
 import { useApiHost } from "@/api";
 import { ReviewDetailPaneType, ReviewSegment } from "@/types/review";
 import { Event } from "@/types/event";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 import { FrigatePlusDialog } from "../dialog/FrigatePlusDialog";
 import ObjectLifecycle from "./ObjectLifecycle";
@@ -91,6 +91,22 @@ export default function ReviewDetailDialog({
     review != undefined,
   );
 
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+      if (!open) {
+        // short timeout to allow the mobile page animation
+        // to complete before updating the state
+        setTimeout(() => {
+          setReview(undefined);
+          setSelectedEvent(undefined);
+          setPane("overview");
+        }, 300);
+      }
+    },
+    [setReview, setIsOpen],
+  );
+
   useEffect(() => {
     setIsOpen(review != undefined);
     // we know that these deps are correct
@@ -109,16 +125,7 @@ export default function ReviewDetailDialog({
 
   return (
     <>
-      <Overlay
+      <Overlay open={isOpen ?? false} onOpenChange={handleOpenChange}>
-        open={isOpen ?? false}
-        onOpenChange={(open) => {
-          if (!open) {
-            setReview(undefined);
-            setSelectedEvent(undefined);
-            setPane("overview");
-          }
-        }}
-      >
         <FrigatePlusDialog
           upload={upload}
           onClose={() => setUpload(undefined)}
@@ -140,7 +147,7 @@ export default function ReviewDetailDialog({
         >
           <span tabIndex={0} className="sr-only" />
           {pane == "overview" && (
-            <Header className="justify-center" onClose={() => setIsOpen(false)}>
+            <Header className="justify-center">
               <Title>Review Item Details</Title>
               <Description className="sr-only">Review item details</Description>
               <div

web/src/components/overlay/detail/SearchDetailDialog.tsx

@@ -109,6 +109,20 @@ export default function SearchDetailDialog({
 
   const [isOpen, setIsOpen] = useState(search != undefined);
 
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+      if (!open) {
+        // short timeout to allow the mobile page animation
+        // to complete before updating the state
+        setTimeout(() => {
+          setSearch(undefined);
+        }, 300);
+      }
+    },
+    [setSearch],
+  );
+
   useEffect(() => {
     if (search) {
       setIsOpen(search != undefined);
@@ -158,14 +172,7 @@ export default function SearchDetailDialog({
   const Description = isDesktop ? DialogDescription : MobilePageDescription;
 
   return (
-    <Overlay
+    <Overlay open={isOpen} onOpenChange={handleOpenChange}>
-      open={isOpen}
-      onOpenChange={() => {
-        if (search) {
-          setSearch(undefined);
-        }
-      }}
-    >
       <Content
         className={cn(
           "scrollbar-container overflow-y-auto",
@@ -174,7 +181,7 @@ export default function SearchDetailDialog({
           isMobile && "px-4",
         )}
       >
-        <Header onClose={() => setIsOpen(false)}>
+        <Header>
           <Title>Tracked Object Details</Title>
           <Description className="sr-only">Tracked object details</Description>
         </Header>

web/src/components/player/HlsVideoPlayer.tsx

@@ -190,6 +190,7 @@ export default function HlsVideoPlayer({
       minScale={1.0}
       wheel={{ smoothStep: 0.005 }}
       onZoom={(zoom) => setZoomScale(zoom.state.scale)}
+      disabled={!frigateControls}
     >
       {frigateControls && (
         <VideoControls