Web & ffmpeg bug fixes (#9525)

* Fix scaling for long timeline lists

* Better handle taller video in player

* Fix birdseye options

* Fix ffmpeg auto detect

frigate/config.py

@@ -1124,6 +1124,9 @@ class FrigateConfig(FrigateBaseModel):
                 {"name": name, **merged_config}
             )
 
+            if camera_config.ffmpeg.hwaccel_args == "auto":
+                camera_config.ffmpeg.hwaccel_args = config.ffmpeg.hwaccel_args
+
             if (
                 camera_config.detect.height is None
                 or camera_config.detect.width is None

web/src/components/card/TimelineItemCard.tsx

@@ -47,7 +47,7 @@ export default function TimelineItemCard({
 
   return (
     <Card
-      className="relative m-2 flex w-full h-20 xl:h-24 3xl:h-28 4xl:h-36 cursor-pointer"
+      className="relative mx-2 mb-2 flex w-full h-20 xl:h-24 3xl:h-28 4xl:h-36 cursor-pointer"
       onClick={onSelect}
     >
       <div className="w-32 xl:w-40 3xl:w-44 4xl:w-60 p-2">

web/src/components/player/DynamicVideoPlayer.tsx

@@ -40,6 +40,19 @@ export default function DynamicVideoPlayer({
     [config]
   );
 
+  // playback behavior
+  const tallVideo = useMemo(() => {
+    if (!config) {
+      return false;
+    }
+
+    return (
+      config.cameras[camera].detect.width /
+        config.cameras[camera].detect.height <
+      1.7
+    );
+  }, [config]);
+
   // controlling playback
 
   const playerRef = useRef<Player | undefined>(undefined);
@@ -64,6 +77,7 @@ export default function DynamicVideoPlayer({
   }, [config]);
 
   // keyboard control
+
   const onKeyboardShortcut = useCallback(
     (key: string, down: boolean, repeat: boolean) => {
       switch (key) {
@@ -185,6 +199,8 @@ export default function DynamicVideoPlayer({
     return <ActivityIndicator />;
   }
 
+  //console.log(`${config.detect.width / config.detect.height < 1.7 ? "16:9" : undefined}`)
+
   return (
     <div className={className}>
       <div
@@ -197,6 +213,7 @@ export default function DynamicVideoPlayer({
             preload: "auto",
             autoplay: true,
             sources: [initialPlaybackSource],
+            aspectRatio: tallVideo ? "16:9" : undefined,
             controlBar: {
               remainingTimeDisplay: false,
               progressControl: {
@@ -239,6 +256,7 @@ export default function DynamicVideoPlayer({
             muted: true,
             loadingSpinner: false,
             sources: hasPreview ? initialPreviewSource : null,
+            aspectRatio: tallVideo ? "16:9" : undefined,
           }}
           seekOptions={{}}
           onReady={(player) => {

web/src/pages/Live.tsx

@@ -37,8 +37,15 @@ function Live() {
     );
   }, [config]);
   const restreamEnabled = useMemo(() => {
+    if (!config) {
+      return false;
+    }
+
+    if (camera == "birdseye") {
+      return config.birdseye.restream;
+    }
+
     return (
-      config &&
       cameraConfig &&
       Object.keys(config.go2rtc.streams || {}).includes(
         cameraConfig.live.stream_name

web/src/views/history/DesktopTimelineView.tsx

@@ -109,7 +109,7 @@ export default function DesktopTimelineView({
 
   return (
     <div className="w-full flex flex-col">
-      <div className="flex max-h-[60%]">
+      <div className="flex mt-2 max-h-[60%]">
         <DynamicVideoPlayer
           className="w-2/3 bg-black flex justify-center items-center"
           camera={initialPlayback.camera}
@@ -129,22 +129,24 @@ export default function DesktopTimelineView({
             }
           }}
         />
-        <div className="px-2 h-full w-1/3 overflow-y-auto overflow-x-hidden">
-          {selectedPlayback.timelineItems.map((timeline) => {
-            return (
-              <TimelineItemCard
-                key={timeline.timestamp}
-                timeline={timeline}
-                relevantPreview={selectedPlayback.relevantPreview}
-                onSelect={() => {
-                  controllerRef.current?.seekToTimelineItem(timeline);
-                }}
-              />
-            );
-          })}
+        <div className="relative h-full w-1/3">
+          <div className="absolute px-2 left-0 top-0 right-0 bottom-0 overflow-y-auto overflow-x-hidden">
+            {selectedPlayback.timelineItems.map((timeline) => {
+              return (
+                <TimelineItemCard
+                  key={timeline.timestamp}
+                  timeline={timeline}
+                  relevantPreview={selectedPlayback.relevantPreview}
+                  onSelect={() => {
+                    controllerRef.current?.seekToTimelineItem(timeline);
+                  }}
+                />
+              );
+            })}
+          </div>
         </div>
       </div>
-      <div className="mt-4 w-full h-full relative">
+      <div className="relative mt-4 w-full h-full">
         <div className="absolute left-0 top-0 right-0 bottom-0 overflow-auto">
           {timelineStack.playbackItems.map((timeline) => {
             const isInitiallySelected =