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/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}
     />
   );