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,17 +898,21 @@ export function RecordingView({
                       useHeightBased
                       ? "h-full"
                       : "w-full"
-                    : cn(
+                    : usePortraitSplitLayout
-                        "flex-shrink-0 portrait:w-full landscape:h-full",
+                      ? "size-full"
-                        mainCameraAspect == "wide"
+                      : cn(
-                          ? "aspect-wide"
+                          "flex-shrink-0 portrait:w-full landscape:h-full",
-                          : mainCameraAspect == "tall"
+                          mainCameraAspect == "wide"
-                            ? "aspect-tall portrait:h-full"
+                            ? "aspect-wide"
-                            : "aspect-video",
+                            : mainCameraAspect == "tall"
-                      ),
+                              ? "aspect-tall portrait:h-full"
+                              : "aspect-video",
+                        ),
                 )}
                 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 ?? []}