Revert video dimension layout fix for chrome (#19636)

originally introduced in https://github.com/blakeblackshear/frigate/pull/19414

web/src/components/player/GenericVideoPlayer.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from "react";
 import { useVideoDimensions } from "@/hooks/use-video-dimensions";
 import HlsVideoPlayer from "./HlsVideoPlayer";
 import ActivityIndicator from "../indicators/activity-indicator";
@@ -89,6 +95,12 @@ export function GenericVideoPlayer({
     },
   );
 
+  const hlsSource = useMemo(() => {
+    return {
+      playlist: source,
+    };
+  }, [source]);
+
   return (
     <div ref={containerRef} className="relative flex h-full w-full flex-col">
       <div className="relative flex flex-grow items-center justify-center">
@@ -107,9 +119,7 @@ export function GenericVideoPlayer({
             >
               <HlsVideoPlayer
                 videoRef={videoRef}
-                currentSource={{
+                currentSource={hlsSource}
-                  playlist: source,
-                }}
                 hotKeys
                 visible
                 frigateControls={false}

web/src/hooks/use-video-dimensions.ts

@@ -17,7 +17,7 @@ export function useVideoDimensions(
   });
 
   const videoAspectRatio = useMemo(() => {
-    return videoResolution.width / videoResolution.height;
+    return videoResolution.width / videoResolution.height || 16 / 9;
   }, [videoResolution]);
 
   const containerAspectRatio = useMemo(() => {
@@ -25,7 +25,7 @@ export function useVideoDimensions(
   }, [containerWidth, containerHeight]);
 
   const videoDimensions = useMemo(() => {
-    if (!containerWidth || !containerHeight || !videoAspectRatio)
+    if (!containerWidth || !containerHeight)
       return { width: "100%", height: "100%" };
     if (containerAspectRatio > videoAspectRatio) {
       const height = containerHeight;