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, useVideoAspectRatio } from './video-subtitle-split';
 
 const minVideoPlayerWidth = 300;
 
@@ -254,7 +261,16 @@
     );
 
     const handleSubtitlePlayerResizeStart = useCallback(() => setSubtitlePlayerResizing(true), []);
-    const handleSubtitlePlayerResizeEnd = useCallback(() => setSubtitlePlayerResizing(false), []);
+    const handleSubtitlePlayerResizeEnd = useCallback(
+        (width: number) => {
+            setSubtitlePlayerResizing(false);
+
+            if (settings.videoSubtitleSplitBehavior === VideoSubtitleSplitBehavior.rememberSplitPosition) {
+                playbackPreferences.subtitlePlayerWidth = width;
+            }
+        },
+        [playbackPreferences, settings.videoSubtitleSplitBehavior]
+    );
 
     const handleOnStartedShowingSubtitle = useCallback(() => {
         if (
@@ -750,7 +766,7 @@
     );
     useEffect(
         () => channel?.onPlay((forwardToMedia) => play(clock, mediaAdapter, forwardToMedia)),
         [channel, mediaAdapter, clock]
     );
     useEffect(
         () => channel?.onPause((forwardToMedia) => pause(clock, mediaAdapter, forwardToMedia)),
@@ -900,7 +916,7 @@
                     break;
             }
         });
     }, [miningContext, settings, wasPlayingWhenMiningStarted, clock, mediaAdapter]);
 
     useEffect(() => {
         return miningContext.onEvent('started-mining', () => {
@@ -1002,7 +1018,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 +1050,7 @@
                 play(clock, mediaAdapter, true);
             }
         },
         [clock, seek, mediaAdapter]
     );
 
     const handleCopyFromSubtitlePlayer = useCallback(
@@ -1094,7 +1110,7 @@
                 play(clock, mediaAdapter, true);
             }
         },
         [channel, clock, mediaAdapter, seek]
     );
 
     const handleOffsetChange = useCallback(
@@ -1176,7 +1192,7 @@
         );
 
         return () => unbind();
     }, [keyBinder, clock, mediaAdapter, disableKeyEvents]);
 
     useEffect(() => {
         return keyBinder.bindAdjustPlaybackRate(
@@ -1279,10 +1295,24 @@
         };
     }, [webSocketClient, extension, seek, clock]);
 
-    const [windowWidth] = useWindowSize(true);
+    const [windowWidth, windowHeight] = useWindowSize(true);
 
+    const videoInWindow = Boolean(videoFileUrl && !videoPopOut);
+    const shouldLoadVideoAspectRatio =
+        videoInWindow && settings.videoSubtitleSplitBehavior !== VideoSubtitleSplitBehavior.rememberSplitPosition;
+    const videoAspectRatio = useVideoAspectRatio(videoFileUrl, shouldLoadVideoAspectRatio);
     const loaded = videoFileUrl || subtitles;
-    const videoInWindow = Boolean(loaded && videoFileUrl && !videoPopOut);
+    const playerHeight = appBarHidden ? windowHeight : Math.max(0, windowHeight - appBarHeight);
+    const aspectFitVideoWidth = videoAspectRatio
+        ? Math.max(minVideoPlayerWidth, Math.round(playerHeight * videoAspectRatio))
+        : undefined;
+    const autoSubtitlePlayerInitialWidth =
+        videoInWindow && aspectFitVideoWidth !== undefined ? Math.max(0, windowWidth - aspectFitVideoWidth) : undefined;
+    const subtitlePlayerInitialWidth = resolveVideoSubtitleSplitLayout({
+        behavior: settings.videoSubtitleSplitBehavior,
+        persistedWidth: playbackPreferences.subtitlePlayerWidth,
+        autoWidth: autoSubtitlePlayerInitialWidth,
+    });
     const subtitlePlayerMaxResizeWidth = Math.max(0, windowWidth - minVideoPlayerWidth);
     const notEnoughSpaceForSubtitlePlayer = subtitlePlayerMaxResizeWidth < minSubtitlePlayerWidth;
     const actuallyHideSubtitlePlayer =
@@ -1318,6 +1348,7 @@
                     hidden={actuallyHideSubtitlePlayer}
                     style={{
                         flexGrow: videoInWindow ? 0 : 1,
+                        flexShrink: 0,
                         width: 'auto',
                     }}
                 >
@@ -1385,6 +1416,7 @@
                         settings={settings}
                         keyBinder={keyBinder}
                         webSocketClient={webSocketClient}
+                        initialWidth={subtitlePlayerInitialWidth}
                     />
                 </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,7 @@ interface SubtitlePlayerProps {
     settings: AsbplayerSettings;
     keyBinder: KeyBinder;
     maxResizeWidth: number;
+    initialWidth?: number;
     webSocketClient?: WebSocketClient;
 }
 
@@ -418,6 +420,7 @@ export default function SubtitlePlayer({
     settings,
     keyBinder,
     maxResizeWidth,
+    initialWidth,
     webSocketClient,
 }: SubtitlePlayerProps) {
     const { t } = useTranslation();
@@ -1012,18 +1015,35 @@ export default function SubtitlePlayer({
         onResizeEnd,
     });
 
+    const appliedInitialWidthRef = useRef<number | undefined>(undefined);
     useEffect(() => {
-        lastKnownWidth = width;
-    }, [width, maxResizeWidth]);
+        if (!resizable || initialWidth === undefined || maxResizeWidth < minSubtitlePlayerWidth) {
+            return;
+        }
+
+        const clampedInitialWidth = clampSubtitlePlayerWidth(initialWidth, minSubtitlePlayerWidth, maxResizeWidth);
+
+        if (appliedInitialWidthRef.current === clampedInitialWidth) {
+            return;
+        }
 
+        appliedInitialWidthRef.current = clampedInitialWidth;
+        setWidth(clampedInitialWidth);
+        lastKnownWidth = clampedInitialWidth;
+    }, [resizable, initialWidth, maxResizeWidth, setWidth]);
+
+    // Scroll to selected subtitle when layout changes
     useEffect(() => {
-        const listener = () => {
-            lastKnownWidth = undefined;
-            setWidth(calculateInitialWidth());
-        };
-        screen.orientation.addEventListener('change', listener);
-        return () => screen.orientation.removeEventListener('change', listener);
-    }, [setWidth]);
+        // Small delay to allow layout to settle
+        const timer = setTimeout(() => {
+            scrollToCurrentSubtitle();
+        }, 50);
+        return () => clearTimeout(timer);
+    }, [width, scrollToCurrentSubtitle]);
+
+    useEffect(() => {
+        lastKnownWidth = width;
+    }, [width, maxResizeWidth]);
 
     const { dragging, draggingStartLocation, draggingCurrentLocation } = useDragging({ holdToDragMs: 750 });
 

common/app/components/subtitles.css

@@ -1,3 +1,18 @@
+html,
+body {
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+    margin: 0;
+}
+
+#root {
+    height: 100%;
+    overflow: hidden;
+}
+
 .asbplayer-offscreen {
     position: fixed !important;
     left: 100% !important;

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

@@ -0,0 +1,36 @@
+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,
+        })
+    ).toBe(420);
+});
+
+it('leaves the width unchanged in remember mode when nothing has been saved', () => {
+    expect(
+        resolveVideoSubtitleSplitLayout({
+            behavior: VideoSubtitleSplitBehavior.rememberSplitPosition,
+            autoWidth: 300,
+        })
+    ).toBeUndefined();
+});
+
+it('ignores saved width in auto-maximize mode', () => {
+    expect(
+        resolveVideoSubtitleSplitLayout({
+            behavior: VideoSubtitleSplitBehavior.autoMaximizeVideo,
+            persistedWidth: 420,
+            autoWidth: 300,
+        })
+    ).toBe(300);
+});
+
+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,51 @@
+import { useEffect, useState } from 'react';
+import { VideoSubtitleSplitBehavior } from '../../settings';
+
+interface ResolveVideoSubtitleSplitLayoutArgs {
+    behavior: VideoSubtitleSplitBehavior;
+    persistedWidth?: number;
+    autoWidth?: number;
+}
+
+export function clampSubtitlePlayerWidth(width: number, minWidth: number, maxWidth: number) {
+    return Math.min(maxWidth, Math.max(minWidth, width));
+}
+
+export function resolveVideoSubtitleSplitLayout({
+    behavior,
+    persistedWidth,
+    autoWidth,
+}: ResolveVideoSubtitleSplitLayoutArgs) {
+    if (behavior === VideoSubtitleSplitBehavior.rememberSplitPosition) {
+        return persistedWidth;
+    }
+
+    return autoWidth;
+}
+
+export function useVideoAspectRatio(videoFileUrl: string | undefined, enabled: boolean) {
+    const [videoAspectRatio, setVideoAspectRatio] = useState<number>();
+
+    useEffect(() => {
+        setVideoAspectRatio(undefined);
+
+        if (!enabled || !videoFileUrl) {
+            return;
+        }
+
+        const video = document.createElement('video');
+        video.preload = 'metadata';
+        video.onloadedmetadata = () => {
+            setVideoAspectRatio(video.videoWidth / video.videoHeight);
+        };
+        video.src = videoFileUrl;
+
+        return () => {
+            video.onloadedmetadata = null;
+            video.removeAttribute('src');
+            video.load();
+        };
+    }, [videoFileUrl, enabled]);
+
+    return videoAspectRatio;
+}

common/app/hooks/use-resize.ts

@@ -1,28 +1,37 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 interface Props {
     initialWidth: () => number;
     minWidth: number;
     maxWidth: number;
     onResizeStart?: () => void;
-    onResizeEnd?: () => void;
+    onResizeEnd?: (width: number) => void;
 }
 
 // https://stackoverflow.com/questions/49469834/recommended-way-to-have-drawer-resizable
 export const useResize = ({ initialWidth, minWidth, maxWidth, onResizeStart, onResizeEnd }: Props) => {
     const [isResizing, setIsResizing] = useState(false);
     const [width, setWidth] = useState(initialWidth);
     const [lastMouseDownClientX, setLastMouseDownClientX] = useState<number>(0);
+    const widthRef = useRef(width);
+
+    useEffect(() => {
+        widthRef.current = width;
+    }, [width]);
 
     const enableResize = useCallback(() => {
         setIsResizing(true);
         onResizeStart?.();
     }, [setIsResizing, onResizeStart]);
 
     const disableResize = useCallback(() => {
+        if (!isResizing) {
+            return;
+        }
+
         setIsResizing(false);
-        onResizeEnd?.();
-    }, [setIsResizing, onResizeEnd]);
+        onResizeEnd?.(widthRef.current);
+    }, [isResizing, setIsResizing, onResizeEnd]);
 
     const recordLastMouseDownPosition = useCallback((e: MouseEvent) => {
         setLastMouseDownClientX(e.clientX);

common/app/services/playback-preferences.ts

@@ -7,6 +7,7 @@ const theaterModeKey = 'theaterMode';
 const offsetKey = 'offset';
 const displaySubtitlesKey = 'displaySubtitles';
 const hideSubtitleListKey = 'hideSubtitleList';
+const subtitlePlayerWidthKey = 'subtitlePlayerWidth';
 const defaultVolume = 100;
 
 interface PlaybackPrefSettings {
@@ -96,4 +97,18 @@ export default class PlaybackPreferences {
     set displaySubtitles(displaySubtitles: boolean) {
         this._storage.set(displaySubtitlesKey, String(displaySubtitles));
     }
+
+    get subtitlePlayerWidth(): number | undefined {
+        const value = this._storage.get(subtitlePlayerWidthKey);
+
+        if (value === null) {
+            return undefined;
+        }
+
+        return Number(value);
+    }
+
+    set subtitlePlayerWidth(width: number) {
+        this._storage.set(subtitlePlayerWidthKey, String(width));
+    }
 }

common/app/services/video-channel.ts

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