feat: Align local video/subtitle split by source aspect ratio on drop and theater toggle

common/app/components/Player.tsx

@@ -16,7 +16,13 @@
     TokenizedSubtitleModel,
     VideoTabModel,
 } from '@project/common';
-import { ApplyStrategy, AsbplayerSettings, SettingsProvider, TokenState } from '@project/common/settings';
+import {
+    ApplyStrategy,
+    AsbplayerSettings,
+    SettingsProvider,
+    TokenState,
+    VideoSubtitleSplitBehavior,
+} from '@project/common/settings';
 import { DictionaryProvider } from '@project/common/dictionary-db';
 import { SubtitleCollection } from '@project/common/subtitle-collection';
 import { renderRichTextOntoSubtitles, HoveredToken, SubtitleColoring } from '@project/common/subtitle-coloring';
@@ -40,6 +46,7 @@
 import { MiningContext } from '../services/mining-context';
 import { SeekTimestampCommand, WebSocketClient } from '../../web-socket-client';
 import { ensureStoragePersisted } from '../../util';
+import { resolveVideoSubtitleSplitLayout } from './video-subtitle-split';
 
 const minVideoPlayerWidth = 300;
 
@@ -199,6 +206,7 @@
     const flattenSubtitleFiles = sources?.flattenSubtitleFiles;
     const videoFile = sources?.videoFile;
     const videoFileUrl = sources?.videoFileUrl;
+    const [videoAspectRatio, setVideoAspectRatio] = useState<number>();
     const playModeEnabled = subtitles && subtitles.length > 0 && Boolean(videoFileUrl);
     const [subtitlePlayerResizing, setSubtitlePlayerResizing] = useState<boolean>(false);
     const [loadingSubtitles, setLoadingSubtitles] = useState<boolean>(false);
@@ -232,6 +240,29 @@
     const classes = useStyles({ appBarHidden, appBarHeight });
     const calculateLength = () => trackLength(channelRef.current, subtitlesRef.current);
 
+    useEffect(() => {
+        setVideoAspectRatio(undefined);
+
+        if (!videoFileUrl) {
+            return;
+        }
+
+        const video = document.createElement('video');
+        video.preload = 'metadata';
+        video.onloadedmetadata = () => {
+            if (video.videoWidth > 0 && video.videoHeight > 0) {
+                setVideoAspectRatio(video.videoWidth / video.videoHeight);
+            }
+        };
+        video.src = videoFileUrl;
+
+        return () => {
+            video.onloadedmetadata = null;
+            video.removeAttribute('src');
+            video.load();
+        };
+    }, [videoFileUrl]);
+
     useEffect(() => {
         playModesRef.current = playModes;
     }, [playModes]);
@@ -254,7 +285,21 @@
     );
 
     const handleSubtitlePlayerResizeStart = useCallback(() => setSubtitlePlayerResizing(true), []);
-    const handleSubtitlePlayerResizeEnd = useCallback(() => setSubtitlePlayerResizing(false), []);
+    const handleSubtitlePlayerResizeEnd = useCallback(
+        (width: number) => {
+            setSubtitlePlayerResizing(false);
+
+            if (
+                settings.videoSubtitleSplitBehavior !== VideoSubtitleSplitBehavior.rememberSplitPosition ||
+                settings.subtitlePlayerWidth === width
+            ) {
+                return;
+            }
+
+            settingsProvider.set({ subtitlePlayerWidth: width }).catch(onError);
+        },
+        [onError, settings.subtitlePlayerWidth, settings.videoSubtitleSplitBehavior, settingsProvider]
+    );
 
     const handleOnStartedShowingSubtitle = useCallback(() => {
         if (
@@ -750,7 +795,7 @@
     );
     useEffect(
         () => channel?.onPlay((forwardToMedia) => play(clock, mediaAdapter, forwardToMedia)),
         [channel, mediaAdapter, clock]
     );
     useEffect(
         () => channel?.onPause((forwardToMedia) => pause(clock, mediaAdapter, forwardToMedia)),
@@ -900,7 +945,7 @@
                     break;
             }
         });
     }, [miningContext, settings, wasPlayingWhenMiningStarted, clock, mediaAdapter]);
 
     useEffect(() => {
         return miningContext.onEvent('started-mining', () => {
@@ -1002,7 +1047,7 @@
         setLastJumpToTopTimestamp(Date.now());
     }, [videoPopOut, channelId, videoFileUrl, videoFrameRef, videoChannelRef, origin]);
 
     const handlePlay = useCallback(() => play(clock, mediaAdapter, true), [clock, mediaAdapter]);
     const handlePause = useCallback(() => pause(clock, mediaAdapter, true), [clock, mediaAdapter]);
     const handleSeek = useCallback(
         async (progress: number) => {
@@ -1034,7 +1079,7 @@
                 play(clock, mediaAdapter, true);
             }
         },
         [clock, seek, mediaAdapter]
     );
 
     const handleCopyFromSubtitlePlayer = useCallback(
@@ -1094,7 +1139,7 @@
                 play(clock, mediaAdapter, true);
             }
         },
         [channel, clock, mediaAdapter, seek]
     );
 
     const handleOffsetChange = useCallback(
@@ -1176,7 +1221,7 @@
         );
 
         return () => unbind();
     }, [keyBinder, clock, mediaAdapter, disableKeyEvents]);
 
     useEffect(() => {
         return keyBinder.bindAdjustPlaybackRate(
@@ -1279,10 +1324,26 @@
         };
     }, [webSocketClient, extension, seek, clock]);
 
-    const [windowWidth] = useWindowSize(true);
+    const [windowWidth, windowHeight] = useWindowSize(true);
 
     const loaded = videoFileUrl || subtitles;
     const videoInWindow = Boolean(loaded && videoFileUrl && !videoPopOut);
+    const playerHeight = appBarHidden ? windowHeight : Math.max(0, windowHeight - appBarHeight);
+    const aspectFitVideoWidth =
+        videoAspectRatio && videoAspectRatio > 0
+            ? Math.max(minVideoPlayerWidth, Math.round(playerHeight * videoAspectRatio))
+            : undefined;
+    const autoSubtitlePlayerInitialWidth =
+        videoInWindow && aspectFitVideoWidth !== undefined ? Math.max(0, windowWidth - aspectFitVideoWidth) : undefined;
+    const { initialWidth: subtitlePlayerInitialWidth, initialWidthKey: subtitlePlayerInitialWidthKey } =
+        resolveVideoSubtitleSplitLayout({
+            behavior: settings.videoSubtitleSplitBehavior,
+            persistedWidth: settings.subtitlePlayerWidth,
+            autoWidth: autoSubtitlePlayerInitialWidth,
+            videoFileUrl: videoInWindow ? videoFileUrl : undefined,
+            appBarHidden,
+            appBarHeight,
+        });
     const subtitlePlayerMaxResizeWidth = Math.max(0, windowWidth - minVideoPlayerWidth);
     const notEnoughSpaceForSubtitlePlayer = subtitlePlayerMaxResizeWidth < minSubtitlePlayerWidth;
     const actuallyHideSubtitlePlayer =
@@ -1318,6 +1379,7 @@
                     hidden={actuallyHideSubtitlePlayer}
                     style={{
                         flexGrow: videoInWindow ? 0 : 1,
+                        flexShrink: 0,
                         width: 'auto',
                     }}
                 >
@@ -1385,6 +1447,11 @@
                         settings={settings}
                         keyBinder={keyBinder}
                         webSocketClient={webSocketClient}
+                        initialWidth={subtitlePlayerInitialWidth}
+                        initialWidthKey={subtitlePlayerInitialWidthKey}
+                        resetWidthOnOrientationChange={
+                            settings.videoSubtitleSplitBehavior === VideoSubtitleSplitBehavior.autoMaximizeVideo
+                        }
                     />
                 </Grid>
             </Grid>

common/app/components/SubtitlePlayer.tsx

@@ -41,6 +41,7 @@ import { MineSubtitleParams } from '../hooks/use-app-web-socket-client';
 import { isMobile } from 'react-device-detect';
 import ChromeExtension, { ExtensionMessage } from '../services/chrome-extension';
 import { MineSubtitleCommand, WebSocketClient } from '../../web-socket-client';
+import { clampSubtitlePlayerWidth } from './video-subtitle-split';
 import './subtitles.css';
 
 let lastKnownWidth: number | undefined;
@@ -362,7 +363,7 @@ interface SubtitlePlayerProps {
     onMouseOver: (e: React.MouseEvent) => void;
     onMouseOut: (e: React.MouseEvent) => void;
     onResizeStart?: () => void;
-    onResizeEnd?: () => void;
+    onResizeEnd?: (width: number) => void;
     autoPauseContext: AutoPauseContext;
     subtitles?: DisplaySubtitleModel[];
     subtitleCollection: SubtitleColoring | SubtitleCollection<DisplaySubtitleModel>;
@@ -383,6 +384,9 @@ interface SubtitlePlayerProps {
     settings: AsbplayerSettings;
     keyBinder: KeyBinder;
     maxResizeWidth: number;
+    initialWidth?: number;
+    initialWidthKey?: string;
+    resetWidthOnOrientationChange?: boolean;
     webSocketClient?: WebSocketClient;
 }
 
@@ -418,6 +422,9 @@ export default function SubtitlePlayer({
     settings,
     keyBinder,
     maxResizeWidth,
+    initialWidth,
+    initialWidthKey,
+    resetWidthOnOrientationChange = true,
     webSocketClient,
 }: SubtitlePlayerProps) {
     const { t } = useTranslation();
@@ -1012,18 +1019,47 @@ export default function SubtitlePlayer({
         onResizeEnd,
     });
 
+    const appliedInitialWidthKeyRef = useRef<string | undefined>(undefined);
+    useEffect(() => {
+        if (!resizable || initialWidth === undefined || maxResizeWidth < minSubtitlePlayerWidth) {
+            return;
+        }
+
+        if (initialWidthKey && appliedInitialWidthKeyRef.current === initialWidthKey) {
+            return;
+        }
+
+        const clampedInitialWidth = clampSubtitlePlayerWidth(initialWidth, minSubtitlePlayerWidth, maxResizeWidth);
+        setWidth(clampedInitialWidth);
+        lastKnownWidth = clampedInitialWidth;
+        appliedInitialWidthKeyRef.current = initialWidthKey;
+    }, [resizable, initialWidth, initialWidthKey, maxResizeWidth, setWidth]);
+
+    // Scroll to selected subtitle when layout changes
+    useEffect(() => {
+        // Small delay to allow layout to settle
+        const timer = setTimeout(() => {
+            scrollToCurrentSubtitle();
+        }, 50);
+        return () => clearTimeout(timer);
+    }, [width, scrollToCurrentSubtitle]);
+
     useEffect(() => {
         lastKnownWidth = width;
     }, [width, maxResizeWidth]);
 
     useEffect(() => {
+        if (!resetWidthOnOrientationChange) {
+            return;
+        }
+
         const listener = () => {
             lastKnownWidth = undefined;
             setWidth(calculateInitialWidth());
         };
         screen.orientation.addEventListener('change', listener);
         return () => screen.orientation.removeEventListener('change', listener);
-    }, [setWidth]);
+    }, [resetWidthOnOrientationChange, setWidth]);
 
     const { dragging, draggingStartLocation, draggingCurrentLocation } = useDragging({ holdToDragMs: 750 });
 

common/app/components/video-subtitle-split.test.ts

@@ -0,0 +1,55 @@
+import { VideoSubtitleSplitBehavior } from '@project/common/settings';
+import { clampSubtitlePlayerWidth, resolveVideoSubtitleSplitLayout } from './video-subtitle-split';
+
+it('uses the saved split width in remember mode', () => {
+    expect(
+        resolveVideoSubtitleSplitLayout({
+            behavior: VideoSubtitleSplitBehavior.rememberSplitPosition,
+            persistedWidth: 420,
+            autoWidth: 300,
+            videoFileUrl: 'blob:video',
+            appBarHidden: false,
+            appBarHeight: 64,
+        })
+    ).toEqual({
+        initialWidth: 420,
+        initialWidthKey: 'remember:420',
+    });
+});
+
+it('falls back to the auto width in remember mode when nothing has been saved', () => {
+    expect(
+        resolveVideoSubtitleSplitLayout({
+            behavior: VideoSubtitleSplitBehavior.rememberSplitPosition,
+            persistedWidth: -1,
+            autoWidth: 300,
+            videoFileUrl: 'blob:video',
+            appBarHidden: false,
+            appBarHeight: 64,
+        })
+    ).toEqual({
+        initialWidth: 300,
+        initialWidthKey: 'remember:-1',
+    });
+});
+
+it('ignores saved width in auto-maximize mode', () => {
+    expect(
+        resolveVideoSubtitleSplitLayout({
+            behavior: VideoSubtitleSplitBehavior.autoMaximizeVideo,
+            persistedWidth: 420,
+            autoWidth: 300,
+            videoFileUrl: 'blob:video',
+            appBarHidden: true,
+            appBarHeight: 0,
+        })
+    ).toEqual({
+        initialWidth: 300,
+        initialWidthKey: 'auto:blob:video|true|0',
+    });
+});
+
+it('clamps split width to the current bounds', () => {
+    expect(clampSubtitlePlayerWidth(150, 200, 500)).toBe(200);
+    expect(clampSubtitlePlayerWidth(600, 200, 500)).toBe(500);
+});

common/app/components/video-subtitle-split.ts

@@ -0,0 +1,44 @@
+import { VideoSubtitleSplitBehavior } from '../../settings';
+
+interface ResolveVideoSubtitleSplitLayoutArgs {
+    behavior: VideoSubtitleSplitBehavior;
+    persistedWidth: number;
+    autoWidth?: number;
+    videoFileUrl?: string;
+    appBarHidden: boolean;
+    appBarHeight: number;
+}
+
+interface VideoSubtitleSplitLayout {
+    initialWidth?: number;
+    initialWidthKey?: string;
+}
+
+export function clampSubtitlePlayerWidth(width: number, minWidth: number, maxWidth: number) {
+    return Math.min(maxWidth, Math.max(minWidth, width));
+}
+
+export function resolveVideoSubtitleSplitLayout({
+    behavior,
+    persistedWidth,
+    autoWidth,
+    videoFileUrl,
+    appBarHidden,
+    appBarHeight,
+}: ResolveVideoSubtitleSplitLayoutArgs): VideoSubtitleSplitLayout {
+    if (!videoFileUrl) {
+        return {};
+    }
+
+    if (behavior === VideoSubtitleSplitBehavior.rememberSplitPosition) {
+        return {
+            initialWidth: persistedWidth > 0 ? persistedWidth : autoWidth,
+            initialWidthKey: `remember:${persistedWidth}`,
+        };
+    }
+
+    return {
+        initialWidth: autoWidth,
+        initialWidthKey: `auto:${videoFileUrl}|${appBarHidden}|${appBarHeight}`,
+    };
+}

common/app/hooks/use-resize.ts

@@ -5,7 +5,7 @@ interface Props {
     minWidth: number;
     maxWidth: number;
     onResizeStart?: () => void;
-    onResizeEnd?: () => void;
+    onResizeEnd?: (width: number) => void;
 }
 
 // https://stackoverflow.com/questions/49469834/recommended-way-to-have-drawer-resizable
@@ -20,9 +20,13 @@ export const useResize = ({ initialWidth, minWidth, maxWidth, onResizeStart, onR
     }, [setIsResizing, onResizeStart]);
 
     const disableResize = useCallback(() => {
+        if (!isResizing) {
+            return;
+        }
+
         setIsResizing(false);
-        onResizeEnd?.();
-    }, [setIsResizing, onResizeEnd]);
+        onResizeEnd?.(width);
+    }, [isResizing, setIsResizing, onResizeEnd, width]);
 
     const recordLastMouseDownPosition = useCallback((e: MouseEvent) => {
         setLastMouseDownClientX(e.clientX);

common/app/services/video-channel.ts

@@ -632,6 +632,8 @@ export default class VideoChannel {
     miscSettings(settings: MiscSettings) {
         const {
             themeType,
+            videoSubtitleSplitBehavior,
+            subtitlePlayerWidth,
             copyToClipboardOnMine,
             autoPausePreference,
             seekDuration,
@@ -658,6 +660,8 @@ export default class VideoChannel {
             command: 'miscSettings',
             value: {
                 themeType,
+                videoSubtitleSplitBehavior,
+                subtitlePlayerWidth,
                 copyToClipboardOnMine,
                 autoPausePreference,
                 seekDuration,