Use full resolution aspect ratio when available (#11173)

* base recordings and live views off of actual video resolution

* don't set for jsmpeg

* reset when changing main cam

* rename

* Only use resolution for main camera

* fix lint

---------

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

web/src/components/player/HlsVideoPlayer.tsx

@@ -1,8 +1,15 @@
-import { MutableRefObject, useEffect, useRef, useState } from "react";
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import Hls from "hls.js";
 import { isAndroid, isDesktop, isMobile } from "react-device-detect";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import VideoControls from "./VideoControls";
+import { VideoResolutionType } from "@/types/live";
 
 // Android native hls does not seek correctly
 const USE_NATIVE_HLS = !isAndroid;
@@ -21,6 +28,7 @@ type HlsVideoPlayerProps = {
   onPlayerLoaded?: () => void;
   onTimeUpdate?: (time: number) => void;
   onPlaying?: () => void;
+  setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
 };
 export default function HlsVideoPlayer({
   videoRef,
@@ -31,6 +39,7 @@ export default function HlsVideoPlayer({
   onPlayerLoaded,
   onTimeUpdate,
   onPlaying,
+  setFullResolution,
 }: HlsVideoPlayerProps) {
   // playback
 
@@ -38,6 +47,18 @@ export default function HlsVideoPlayer({
   const [useHlsCompat, setUseHlsCompat] = useState(false);
   const [loadedMetadata, setLoadedMetadata] = useState(false);
 
+  const handleLoadedMetadata = useCallback(() => {
+    setLoadedMetadata(true);
+    if (videoRef.current) {
+      if (setFullResolution) {
+        setFullResolution({
+          width: videoRef.current.videoWidth,
+          height: videoRef.current.videoHeight,
+        });
+      }
+    }
+  }, [videoRef, setFullResolution]);
+
   useEffect(() => {
     if (!videoRef.current) {
       return;
@@ -193,7 +214,7 @@ export default function HlsVideoPlayer({
               : undefined
           }
           onLoadedData={onPlayerLoaded}
-          onLoadedMetadata={() => setLoadedMetadata(true)}
+          onLoadedMetadata={handleLoadedMetadata}
           onEnded={onClipEnded}
           onError={(e) => {
             if (

web/src/components/player/LivePlayer.tsx

@@ -8,7 +8,7 @@ import JSMpegPlayer from "./JSMpegPlayer";
 import { MdCircle } from "react-icons/md";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { useCameraActivity } from "@/hooks/use-camera-activity";
-import { LivePlayerMode } from "@/types/live";
+import { LivePlayerMode, VideoResolutionType } from "@/types/live";
 import useCameraLiveMode from "@/hooks/use-camera-live-mode";
 import { getIconForLabel } from "@/utils/iconUtil";
 import Chip from "../indicators/Chip";
@@ -27,6 +27,7 @@ type LivePlayerProps = {
   iOSCompatFullScreen?: boolean;
   pip?: boolean;
   onClick?: () => void;
+  setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
 };
 
 export default function LivePlayer({
@@ -41,6 +42,7 @@ export default function LivePlayer({
   iOSCompatFullScreen = false,
   pip,
   onClick,
+  setFullResolution,
 }: LivePlayerProps) {
   const [cameraHovered, setCameraHovered] = useState(false);
 
@@ -123,6 +125,7 @@ export default function LivePlayer({
           audioEnabled={playAudio}
           onPlaying={() => setLiveReady(true)}
           pip={pip}
+          setFullResolution={setFullResolution}
         />
       );
     } else {

web/src/components/player/MsePlayer.tsx

@@ -1,5 +1,13 @@
 import { baseUrl } from "@/api/baseUrl";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { VideoResolutionType } from "@/types/live";
+import {
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 type MSEPlayerProps = {
   camera: string;
@@ -8,6 +16,7 @@ type MSEPlayerProps = {
   audioEnabled?: boolean;
   pip?: boolean;
   onPlaying?: () => void;
+  setFullResolution?: React.Dispatch<SetStateAction<VideoResolutionType>>;
 };
 
 function MSEPlayer({
@@ -17,6 +26,7 @@ function MSEPlayer({
   audioEnabled = false,
   pip = false,
   onPlaying,
+  setFullResolution,
 }: MSEPlayerProps) {
   let connectTS: number = 0;
 
@@ -50,6 +60,15 @@ function MSEPlayer({
     return `${baseUrl.replace(/^http/, "ws")}live/mse/api/ws?src=${camera}`;
   }, [camera]);
 
+  const handleLoadedMetadata = useCallback(() => {
+    if (videoRef.current && setFullResolution) {
+      setFullResolution({
+        width: videoRef.current.videoWidth,
+        height: videoRef.current.videoHeight,
+      });
+    }
+  }, [setFullResolution]);
+
   const play = () => {
     const currentVideo = videoRef.current;
 
@@ -286,6 +305,7 @@ function MSEPlayer({
       playsInline
       preload="auto"
       onLoadedData={onPlaying}
+      onLoadedMetadata={handleLoadedMetadata}
       muted={!audioEnabled}
     />
   );

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -9,6 +9,7 @@ import { DynamicVideoController } from "./DynamicVideoController";
 import HlsVideoPlayer from "../HlsVideoPlayer";
 import { TimeRange } from "@/types/timeline";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { VideoResolutionType } from "@/types/live";
 
 /**
  * Dynamically switches between video playback and scrubbing preview player.
@@ -24,6 +25,7 @@ type DynamicVideoPlayerProps = {
   onControllerReady: (controller: DynamicVideoController) => void;
   onTimestampUpdate?: (timestamp: number) => void;
   onClipEnded?: () => void;
+  setFullResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
 };
 export default function DynamicVideoPlayer({
   className,
@@ -36,6 +38,7 @@ export default function DynamicVideoPlayer({
   onControllerReady,
   onTimestampUpdate,
   onClipEnded,
+  setFullResolution,
 }: DynamicVideoPlayerProps) {
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -182,6 +185,7 @@ export default function DynamicVideoPlayer({
           setIsLoading(false);
           setNoRecording(false);
         }}
+        setFullResolution={setFullResolution}
       />
       <PreviewPlayer
         className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className}`}