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);