Web & ffmpeg bug fixes (#9525)

* Fix scaling for long timeline lists

* Better handle taller video in player

* Fix birdseye options

* Fix ffmpeg auto detect

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) => {