History mobile: let zoom fill splitter-created headroom

(cherry picked from commit 36936707451d9b6aa9281b680fab3b8370d4440f)

web/src/components/player/HlsVideoPlayer.tsx

@@ -38,6 +38,7 @@ export interface HlsSource {
 
 type HlsVideoPlayerProps = {
   videoRef: MutableRefObject<HTMLVideoElement | null>;
+  videoClassName?: string;
   containerRef?: React.MutableRefObject<HTMLDivElement | null>;
   visible: boolean;
   currentSource: HlsSource;
@@ -64,6 +65,7 @@ type HlsVideoPlayerProps = {
 
 export default function HlsVideoPlayer({
   videoRef,
+  videoClassName,
   containerRef,
   visible,
   currentSource,
@@ -441,7 +443,12 @@ export default function HlsVideoPlayer({
             )}
           <video
             ref={videoRef}
-            className={`size-full rounded-lg bg-black md:rounded-2xl ${loadedMetadata ? "" : "invisible"} cursor-pointer`}
+            className={cn(
+              "size-full rounded-lg bg-black md:rounded-2xl",
+              loadedMetadata ? "" : "invisible",
+              "cursor-pointer",
+              videoClassName,
+            )}
             preload="auto"
             autoPlay
             controls={!frigateControls}

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

@@ -83,6 +83,7 @@ function playbackSessionReducer(
  */
 type DynamicVideoPlayerProps = {
   className?: string;
+  videoClassName?: string;
   camera: string;
   timeRange: TimeRange;
   cameraPreviews: Preview[];
@@ -102,6 +103,7 @@ type DynamicVideoPlayerProps = {
 };
 export default function DynamicVideoPlayer({
   className,
+  videoClassName,
   camera,
   timeRange,
   cameraPreviews,
@@ -387,6 +389,7 @@ export default function DynamicVideoPlayer({
       {source && (
         <HlsVideoPlayer
           videoRef={playerRef}
+          videoClassName={videoClassName}
           containerRef={containerRef}
           visible={
             !isScrubbing &&

web/src/views/recording/RecordingView.tsx

@@ -413,6 +413,7 @@ export function RecordingView({
     () => !isDesktop && mainLayoutHeight > mainLayoutWidth,
     [mainLayoutHeight, mainLayoutWidth],
   );
+  const usePortraitSplitLayout = isMobilePortraitStacked && !fullscreen;
 
   const updateMobileSplitFromClientY = useCallback(
     (clientY: number) => {
@@ -897,6 +898,8 @@ export function RecordingView({
                       useHeightBased
                       ? "h-full"
                       : "w-full"
+                    : usePortraitSplitLayout
+                      ? "size-full"
                       : cn(
                           "flex-shrink-0 portrait:w-full landscape:h-full",
                           mainCameraAspect == "wide"
@@ -907,7 +910,9 @@ export function RecordingView({
                         ),
                 )}
                 style={{
-                  aspectRatio: getCameraAspect(mainCamera),
+                  aspectRatio: usePortraitSplitLayout
+                    ? undefined
+                    : getCameraAspect(mainCamera),
                 }}
               >
                 {(isDesktop || isTablet) && (
@@ -921,6 +926,9 @@ export function RecordingView({
 
                 <DynamicVideoPlayer
                   className={grow}
+                  videoClassName={
+                    usePortraitSplitLayout ? "object-contain" : undefined
+                  }
                   camera={mainCamera}
                   timeRange={currentTimeRange}
                   cameraPreviews={allPreviews ?? []}