From c5819478d3dc46caca5144f4c57f7e9720b6c3fe Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 1 Feb 2024 05:44:10 -0700
Subject: [PATCH] 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                             |  3 ++
 web/src/components/card/TimelineItemCard.tsx  |  2 +-
 .../components/player/DynamicVideoPlayer.tsx  | 18 +++++++++++
 web/src/pages/Live.tsx                        |  9 +++++-
 web/src/views/history/DesktopTimelineView.tsx | 32 ++++++++++---------
 5 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/frigate/config.py b/frigate/config.py
index 4ee51a1f9..9373cbcaf 100644
--- a/frigate/config.py
+++ b/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
diff --git a/web/src/components/card/TimelineItemCard.tsx b/web/src/components/card/TimelineItemCard.tsx
index 000a29054..9ebbc2c88 100644
--- a/web/src/components/card/TimelineItemCard.tsx
+++ b/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">
diff --git a/web/src/components/player/DynamicVideoPlayer.tsx b/web/src/components/player/DynamicVideoPlayer.tsx
index 9f9c41076..c2a9503fc 100644
--- a/web/src/components/player/DynamicVideoPlayer.tsx
+++ b/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) => {
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index f4f0cf80f..90343dd44 100644
--- a/web/src/pages/Live.tsx
+++ b/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
diff --git a/web/src/views/history/DesktopTimelineView.tsx b/web/src/views/history/DesktopTimelineView.tsx
index 06151f060..2c3d1ae17 100644
--- a/web/src/views/history/DesktopTimelineView.tsx
+++ b/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 =