From 34d5b082f68d61ba43f3b94b4c5199cdc66cb3b0 Mon Sep 17 00:00:00 2001 From: R-J Lim Date: Sat, 4 Jan 2025 10:38:44 +0900 Subject: [PATCH] Prevent subtitles from overlapping with overlay in local video player --- common/app/components/VideoPlayer.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/common/app/components/VideoPlayer.tsx b/common/app/components/VideoPlayer.tsx index 66bfd112..6a08f089 100755 --- 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,10 +270,11 @@ 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 ( @@ -279,8 +282,8 @@ const SubtitleContainer = ({ subtitleSettings, alignment, children }: SubtitleCo 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 && ( - + {topSubtitleElements} )} {bottomSubtitleElements.length > 0 && ( - + {bottomSubtitleElements} )}