diff --git a/common/app/components/Player.tsx b/common/app/components/Player.tsx index 6db0b15f..fcedab0b 100755 --- 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 (
@@ -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 index cb436568..300c29f4 100755 --- 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 index 8ee5cf3e..c0bb8de1 100755 --- 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 index 11d4a63a..52abab74 100644 --- 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);