Hide subtitle player when there's not enough room

killergerbah · Jan 6, 2024 · de181b3 · de181b3
1 parent e7c6872
commit de181b3
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/common/app/components/Player.tsx b/common/app/components/Player.tsx
@@ -22,7 +22,7 @@ import Clock from '../services/clock';
 import Controls, { Point } from './Controls';
 import Grid from '@material-ui/core/Grid';
 import MediaAdapter, { MediaElement } from '../services/media-adapter';
-import SubtitlePlayer, { DisplaySubtitleModel } from './SubtitlePlayer';
+import SubtitlePlayer, { DisplaySubtitleModel, minSubtitlePlayerWidth } from './SubtitlePlayer';
 import VideoChannel from '../services/video-channel';
 import ChromeExtension from '../services/chrome-extension';
 import PlaybackPreferences from '../services/playback-preferences';
@@ -948,7 +948,11 @@ export default function Player({
 
     const loaded = videoFileUrl || subtitles;
     const videoInWindow = Boolean(loaded && videoFileUrl && !videoPopOut);
-    const actuallyHideSubtitlePlayer = videoInWindow && (hideSubtitlePlayer || !subtitles || subtitles?.length === 0);
+    const subtitlePlayerMaxResizeWidth = Math.max(0, windowWidth - minVideoPlayerWidth);
+    const notEnoughSpaceForSubtitlePlayer = subtitlePlayerMaxResizeWidth < minSubtitlePlayerWidth;
+    const actuallyHideSubtitlePlayer =
+        videoInWindow &&
+        (hideSubtitlePlayer || !subtitles || subtitles?.length === 0 || notEnoughSpaceForSubtitlePlayer);
 
     return (
         <div onMouseMove={handleMouseMove} className={classes.root}>
@@ -1042,7 +1046,7 @@ export default function Player({
                         onSubtitlesHighlighted={handleSubtitlesHighlighted}
                         onResizeStart={handleSubtitlePlayerResizeStart}
                         onResizeEnd={handleSubtitlePlayerResizeEnd}
-                        maxResizeWidth={Math.max(0, windowWidth - minVideoPlayerWidth)}
+                        maxResizeWidth={subtitlePlayerMaxResizeWidth}
                         autoPauseContext={autoPauseContext}
                         settings={settings}
                         keyBinder={keyBinder}

diff --git a/common/app/components/SubtitlePlayer.tsx b/common/app/components/SubtitlePlayer.tsx
@@ -29,6 +29,7 @@ import { useAppBarHeight } from '../hooks/use-app-bar-height';
 import { isMobile } from 'react-device-detect';
 
 let lastKnownWidth: number | undefined;
+export const minSubtitlePlayerWidth = 200;
 const calculateInitialWidth = () => lastKnownWidth ?? Math.max(350, 0.25 * window.innerWidth);
 
 const lineIntersects = (a1: number, b1: number, a2: number, b2: number) => {
@@ -845,7 +846,7 @@ export default function SubtitlePlayer({
 
     const { width, setWidth, enableResize, isResizing } = useResize({
         initialWidth: calculateInitialWidth,
-        minWidth: 200,
+        minWidth: minSubtitlePlayerWidth,
         maxWidth: maxResizeWidth,
         onResizeStart,
         onResizeEnd,

diff --git a/common/app/components/VideoPlayer.tsx b/common/app/components/VideoPlayer.tsx
@@ -1274,6 +1274,15 @@ export default function VideoPlayer({
         ms: 500,
     });
 
+    // If the video player is taking up the entire screen, then the subtitle player isn't showing
+    // This code assumes some behavior in Player, namely that the subtitle player is automatically hidden
+    // (and therefore the VideoPlayer takes up all the space) when there isn't enough room for the subtitle player
+    // to be displayed.
+    const notEnoughRoomForSubtitlePlayer =
+        !subtitlePlayerHidden &&
+        parent?.document?.body !== undefined &&
+        parent.document.body.clientWidth === document.body.clientWidth;
+
     if (!playerChannelSubscribed) {
         return null;
     }
@@ -1340,7 +1349,9 @@ export default function VideoPlayer({
                 popOutEnabled={!isMobile}
                 playModeEnabled={subtitles && subtitles.length > 0}
                 playMode={playMode}
-                hideSubtitlePlayerToggleEnabled={subtitles?.length > 0 && !popOut && !fullscreen}
+                hideSubtitlePlayerToggleEnabled={
+                    subtitles?.length > 0 && !popOut && !fullscreen && !notEnoughRoomForSubtitlePlayer
+                }
                 subtitlePlayerHidden={subtitlePlayerHidden}
                 onPlay={handlePlay}
                 onPause={handlePause}

diff --git a/common/app/hooks/use-resize.ts b/common/app/hooks/use-resize.ts
@@ -73,10 +73,12 @@ export const useResize = ({ initialWidth, minWidth, maxWidth, onResizeStart, onR
     );
 
     useEffect(() => {
-        if (maxWidth !== 0 && width > maxWidth) {
+        if (minWidth !== 0 && width < minWidth) {
+            setWidth(minWidth);
+        } else if (maxWidth !== 0 && width > maxWidth) {
             setWidth(maxWidth);
         }
-    }, [maxWidth, width]);
+    }, [maxWidth, minWidth, width]);
 
     useEffect(() => {
         document.addEventListener('mouseleave', disableResize);