Miscellaneous Fixes (#21005)

* update live view docs

* use swr as single source of truth for searchDetail

rather than maintaining a separate state, derive the selected item from swr cache. fixes websocket sync when regenerating descriptions or fetching transcriptions

* fix key warning in console

* don't try to fetch event from review item for audio events

* update audio transcription toast wording

* Add a community supported badge to specific detectors in the info summaries to better separate

* Make object classification publish to tracked object update and add examples for state classification

* Add item to advanced docs about tensorflow limiting

* Don't show submission for in progress objects

* fix for ios not reporting video dimensions on initial metadata load

in testing, polling with requestAnimationFrame finds the dimensions within 2 frames

* Catch jetson nvidia device tree

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

web/src/components/filter/SearchFilterGroup.tsx

@@ -572,9 +572,8 @@ export function SortTypeContent({
             className="w-full space-y-1"
           >
             {availableSortTypes.map((value) => (
-              <div className="flex flex-row gap-2">
+              <div key={value} className="flex flex-row gap-2">
                 <RadioGroupItem
-                  key={value}
                   value={value}
                   id={`sort-${value}`}
                   className={

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

@@ -42,9 +42,10 @@ export default function DetailActionsMenu({
     return `start/${startTime}/end/${endTime}`;
   }, [search]);
 
-  const { data: reviewItem } = useSWR<ReviewSegment>([
-    `review/event/${search.id}`,
-  ]);
+  // currently, audio event ids are not saved in review items
+  const { data: reviewItem } = useSWR<ReviewSegment>(
+    search.data?.type === "audio" ? null : [`review/event/${search.id}`],
+  );
 
   return (
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>

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

@@ -1295,6 +1295,7 @@ function ObjectDetailsTab({
 
       {search.data.type === "object" &&
         config?.plus?.enabled &&
+        search.end_time != undefined &&
         search.has_snapshot && (
           <div
             className={cn(

web/src/components/player/HlsVideoPlayer.tsx

@@ -94,24 +94,52 @@ export default function HlsVideoPlayer({
   const [loadedMetadata, setLoadedMetadata] = useState(false);
   const [bufferTimeout, setBufferTimeout] = useState<NodeJS.Timeout>();
 
+  const applyVideoDimensions = useCallback(
+    (width: number, height: number) => {
+      if (setFullResolution) {
+        setFullResolution({ width, height });
+      }
+      setVideoDimensions({ width, height });
+      if (height > 0) {
+        setTallCamera(width / height < ASPECT_VERTICAL_LAYOUT);
+      }
+    },
+    [setFullResolution],
+  );
+
   const handleLoadedMetadata = useCallback(() => {
     setLoadedMetadata(true);
-    if (videoRef.current) {
-      const width = videoRef.current.videoWidth;
-      const height = videoRef.current.videoHeight;
-
-      if (setFullResolution) {
-        setFullResolution({
-          width,
-          height,
-        });
-      }
-
-      setVideoDimensions({ width, height });
-
-      setTallCamera(width / height < ASPECT_VERTICAL_LAYOUT);
+    if (!videoRef.current) {
+      return;
     }
-  }, [videoRef, setFullResolution]);
+
+    const width = videoRef.current.videoWidth;
+    const height = videoRef.current.videoHeight;
+
+    // iOS Safari occasionally reports 0x0 for videoWidth/videoHeight
+    // Poll with requestAnimationFrame until dimensions become available (or timeout).
+    if (width > 0 && height > 0) {
+      applyVideoDimensions(width, height);
+      return;
+    }
+
+    let attempts = 0;
+    const maxAttempts = 120; // ~2 seconds at 60fps
+    const tryGetDims = () => {
+      if (!videoRef.current) return;
+      const w = videoRef.current.videoWidth;
+      const h = videoRef.current.videoHeight;
+      if (w > 0 && h > 0) {
+        applyVideoDimensions(w, h);
+        return;
+      }
+      if (attempts < maxAttempts) {
+        attempts += 1;
+        requestAnimationFrame(tryGetDims);
+      }
+    };
+    requestAnimationFrame(tryGetDims);
+  }, [videoRef, applyVideoDimensions]);
 
   useEffect(() => {
     if (!videoRef.current) {

web/src/components/player/MsePlayer.tsx

@@ -91,7 +91,7 @@ function MSEPlayer({
     (error: LivePlayerError, description: string = "Unknown error") => {
       // eslint-disable-next-line no-console
       console.error(
-        `${camera} - MSE error '${error}': ${description} See the documentation: https://docs.frigate.video/configuration/live/#live-view-faq`,
+        `${camera} - MSE error '${error}': ${description} See the documentation: https://docs.frigate.video/configuration/live/#live-player-error-messages`,
       );
       onError?.(error);
     },

web/src/components/player/WebRTCPlayer.tsx

@@ -42,7 +42,7 @@ export default function WebRtcPlayer({
     (error: LivePlayerError, description: string = "Unknown error") => {
       // eslint-disable-next-line no-console
       console.error(
-        `${camera} - WebRTC error '${error}': ${description} See the documentation: https://docs.frigate.video/configuration/live/#live-view-faq`,
+        `${camera} - WebRTC error '${error}': ${description} See the documentation: https://docs.frigate.video/configuration/live/#live-player-error-messages`,
       );
       onError?.(error);
     },