Prevent subtitles from overlapping with overlay in local video player

killergerbah · Jan 4, 2025 · 34d5b08 · 34d5b08
1 parent 97b93ab
commit 34d5b08
Showing 1 changed file with 13 additions and 5 deletions.
diff --git a/common/app/components/VideoPlayer.tsx b/common/app/components/VideoPlayer.tsx
@@ -52,6 +52,8 @@ import { useSubtitleStyles } from '../hooks/use-subtitle-styles';
 import { useFullscreen } from '../hooks/use-fullscreen';
 import MobileVideoOverlay from '@project/common/components/MobileVideoOverlay';
 
+const overlayContainerHeight = 48;
+
 interface ExperimentalHTMLVideoElement extends HTMLVideoElement {
     readonly audioTracks: any;
 }
@@ -268,19 +270,20 @@ const useSubtitleContainerStyles = makeStyles({
 interface SubtitleContainerProps {
     subtitleSettings: SubtitleSettings;
     alignment: SubtitleAlignment;
+    baseOffset: number;
     children: React.ReactNode;
 }
 
-const SubtitleContainer = ({ subtitleSettings, alignment, children }: SubtitleContainerProps) => {
+const SubtitleContainer = ({ subtitleSettings, alignment, baseOffset, children }: SubtitleContainerProps) => {
     const classes = useSubtitleContainerStyles();
 
     return (
         <div
             className={classes.subtitleContainer}
             style={{
                 ...(alignment === 'bottom'
-                    ? { bottom: subtitleSettings.subtitlePositionOffset }
-                    : { top: subtitleSettings.topSubtitlePositionOffset }),
+                    ? { bottom: subtitleSettings.subtitlePositionOffset + baseOffset }
+                    : { top: subtitleSettings.topSubtitlePositionOffset + baseOffset }),
                 ...(subtitleSettings.subtitlesWidth === -1 ? {} : { width: `${subtitleSettings.subtitlesWidth}%` }),
             }}
         >
@@ -1540,6 +1543,7 @@ export default function VideoPlayer({
             themeType: settings.themeType,
         };
     };
+    const baseBottomSubtitleOffset = !playing() && isMobile ? overlayContainerHeight : 0;
 
     if (!playerChannelSubscribed) {
         return null;
@@ -1579,12 +1583,16 @@ export default function VideoPlayer({
                 onMouseOver={handleVideoMouseOver}
             />
             {topSubtitleElements.length > 0 && (
-                <SubtitleContainer alignment={'top'} subtitleSettings={subtitleSettings}>
+                <SubtitleContainer alignment={'top'} subtitleSettings={subtitleSettings} baseOffset={0}>
                     {topSubtitleElements}
                 </SubtitleContainer>
             )}
             {bottomSubtitleElements.length > 0 && (
-                <SubtitleContainer alignment={'bottom'} subtitleSettings={subtitleSettings}>
+                <SubtitleContainer
+                    alignment={'bottom'}
+                    subtitleSettings={subtitleSettings}
+                    baseOffset={baseBottomSubtitleOffset}
+                >
                     {bottomSubtitleElements}
                 </SubtitleContainer>
             )}