Top / bottom setting for individual subtitles (#508)

* extension: Add topSubtitleParams as a separate container * settings + extension: assign subtitle tracks to their position * add topOffset setting * fix blur not working * localise * cleanup * test fixes * only render respective overlays if they're actually enabled * subtitlesElementOverlay => bottomSubtitlesElementOverlay * update cacheHtml() * subtitlePositionOffset => bottomSubtitlePositionOffset * review comments * pretty * test fixes * remove file comitted by mistake * review comments: fix track disappearing
killergerbah · Oct 18, 2024 · b39cef5 · b39cef5
1 parent 0b29719
commit b39cef5
Show file tree

Hide file tree

Showing 22 changed files with 274 additions and 161 deletions.
diff --git a/common/app/components/VideoPlayer.tsx b/common/app/components/VideoPlayer.tsx
@@ -344,9 +344,12 @@ export default function VideoPlayer({
     const [subtitlePlayerHidden, setSubtitlePlayerHidden] = useState<boolean>(false);
     const [appBarHidden, setAppBarHidden] = useState<boolean>(playbackPreferences.theaterMode);
     const [subtitleAlignment, setSubtitleAlignment] = useState<SubtitleAlignment>(subtitleSettings.subtitleAlignment);
-    const [subtitlePositionOffset, setSubtitlePositionOffset] = useState<number>(
+    const [bottomSubtitlePositionOffset, setBottomSubtitlePositionOffset] = useState<number>(
         subtitleSettings.subtitlePositionOffset
     );
+    const [topSubtitlePositionOffset, setTopSubtitlePositionOffset] = useState<number>(
+        subtitleSettings.topSubtitlePositionOffset
+    );
     const showSubtitlesRef = useRef<IndexedSubtitleModel[]>([]);
     showSubtitlesRef.current = showSubtitles;
     const clock = useMemo<Clock>(() => new Clock(), []);
@@ -369,7 +372,8 @@ export default function VideoPlayer({
 
     useEffect(() => {
         setSubtitleAlignment(subtitleSettings.subtitleAlignment);
-        setSubtitlePositionOffset(subtitleSettings.subtitlePositionOffset);
+        setBottomSubtitlePositionOffset(subtitleSettings.subtitlePositionOffset);
+        setTopSubtitlePositionOffset(subtitleSettings.topSubtitlePositionOffset);
     }, [subtitleSettings]);
 
     const autoPauseContext = useMemo(() => {
@@ -1319,8 +1323,8 @@ export default function VideoPlayer({
                 <div
                     style={{
                         ...(subtitleAlignment === 'bottom'
-                            ? { bottom: subtitlePositionOffset }
-                            : { top: subtitlePositionOffset }),
+                            ? { bottom: bottomSubtitlePositionOffset }
+                            : { top: topSubtitlePositionOffset }),
                         ...(subtitleSettings.subtitlesWidth === -1
                             ? {}
                             : { width: `${subtitleSettings.subtitlesWidth}%` }),

diff --git a/common/app/hooks/use-playback-preferences.ts b/common/app/hooks/use-playback-preferences.ts
@@ -4,13 +4,32 @@ import PlaybackPreferences from '../services/playback-preferences';
 import ChromeExtension from '../services/chrome-extension';
 
 export const usePlaybackPreferences = (settings: SubtitleSettings & MiscSettings, extension: ChromeExtension) => {
-    const { rememberSubtitleOffset, lastSubtitleOffset, subtitleAlignment, subtitlePositionOffset } = settings;
+    const {
+        rememberSubtitleOffset,
+        lastSubtitleOffset,
+        subtitleAlignment,
+        subtitlePositionOffset,
+        topSubtitlePositionOffset,
+    } = settings;
     return useMemo(
         () =>
             new PlaybackPreferences(
-                { rememberSubtitleOffset, lastSubtitleOffset, subtitleAlignment, subtitlePositionOffset },
+                {
+                    rememberSubtitleOffset,
+                    lastSubtitleOffset,
+                    subtitleAlignment,
+                    subtitlePositionOffset,
+                    topSubtitlePositionOffset,
+                },
                 extension
             ),
-        [rememberSubtitleOffset, lastSubtitleOffset, subtitleAlignment, subtitlePositionOffset, extension]
+        [
+            rememberSubtitleOffset,
+            lastSubtitleOffset,
+            subtitleAlignment,
+            subtitlePositionOffset,
+            topSubtitlePositionOffset,
+            extension,
+        ]
     );
 };
diff --git a/common/app/services/playback-preferences.ts b/common/app/services/playback-preferences.ts
@@ -13,6 +13,7 @@ interface PlaybackPrefSettings {
     lastSubtitleOffset: number;
     subtitleAlignment: SubtitleAlignment;
     subtitlePositionOffset: number;
+    topSubtitlePositionOffset: number;
 }
 
 export default class PlaybackPreferences {

diff --git a/common/app/services/video-channel.ts b/common/app/services/video-channel.ts
@@ -399,7 +399,8 @@ export default class VideoChannel {
             imageBasedSubtitleScaleFactor,
             subtitleAlignment,
             subtitleTracksV2,
-            subtitlePositionOffset,
+            subtitlePositionOffset: bottomSubtitlePositionOffset,
+            topSubtitlePositionOffset,
             subtitlesWidth,
         } = settings;
         const message: SubtitleSettingsToVideoMessage = {
@@ -420,7 +421,8 @@ export default class VideoChannel {
                 imageBasedSubtitleScaleFactor,
                 subtitleAlignment,
                 subtitleTracksV2,
-                subtitlePositionOffset,
+                subtitlePositionOffset: bottomSubtitlePositionOffset,
+                topSubtitlePositionOffset,
                 subtitlesWidth,
             },
         };

diff --git a/common/components/SettingsForm.tsx b/common/components/SettingsForm.tsx
@@ -790,8 +790,8 @@ export default function SettingsForm({
         track3Field,
         ankiFieldSettings,
         subtitlePreview,
-        subtitlePositionOffset,
-        subtitleAlignment,
+        subtitlePositionOffset: subtitlePositionOffset,
+        topSubtitlePositionOffset,
         subtitlesWidth,
         audioPaddingStart,
         audioPaddingEnd,
@@ -852,6 +852,7 @@ export default function SettingsForm({
         subtitleFontFamily,
         subtitleCustomStyles,
         subtitleBlur,
+        subtitleAlignment,
     } = textSubtitleSettingsForTrack(settings, selectedSubtitleAppearanceTrack);
 
     const handleAddCustomField = useCallback(
@@ -1870,6 +1871,42 @@ export default function SettingsForm({
                             </Tooltip>
                         )}
 
+                        {subtitleAlignment !== undefined && (
+                            <>
+                                <FormLabel className={classes.top} component="legend">
+                                    {t('settings.subtitleAlignment')}
+                                </FormLabel>
+                                <RadioGroup row>
+                                    <LabelWithHoverEffect
+                                        control={
+                                            <Radio
+                                                checked={subtitleAlignment === 'bottom'}
+                                                value={'bottom'}
+                                                onChange={(event) =>
+                                                    event.target.checked &&
+                                                    handleSubtitleTextSettingChanged('subtitleAlignment', 'bottom')
+                                                }
+                                            />
+                                        }
+                                        label={t('settings.subtitleAlignmentBottom')}
+                                    />
+                                    <LabelWithHoverEffect
+                                        control={
+                                            <Radio
+                                                checked={subtitleAlignment === 'top'}
+                                                value={'top'}
+                                                onChange={(event) =>
+                                                    event.target.checked &&
+                                                    handleSubtitleTextSettingChanged('subtitleAlignment', 'top')
+                                                }
+                                            />
+                                        }
+                                        label={t('settings.subtitleAlignmentTop')}
+                                    />
+                                </RadioGroup>
+                            </>
+                        )}
+
                         {subtitleCustomStyles !== undefined && (
                             <>
                                 {subtitleCustomStyles.map((customStyle, index) => {
@@ -1909,39 +1946,6 @@ export default function SettingsForm({
 
                         {selectedSubtitleAppearanceTrack === undefined && (
                             <>
-                                <div className={classes.subtitleSetting}>
-                                    <FormLabel className={classes.top} component="legend">
-                                        {t('settings.subtitleAlignment')}
-                                    </FormLabel>
-                                    <RadioGroup row>
-                                        <LabelWithHoverEffect
-                                            control={
-                                                <Radio
-                                                    checked={subtitleAlignment === 'bottom'}
-                                                    value={'bottom'}
-                                                    onChange={(event) =>
-                                                        event.target.checked &&
-                                                        handleSettingChanged('subtitleAlignment', 'bottom')
-                                                    }
-                                                />
-                                            }
-                                            label={t('settings.subtitleAlignmentBottom')}
-                                        />
-                                        <LabelWithHoverEffect
-                                            control={
-                                                <Radio
-                                                    checked={subtitleAlignment === 'top'}
-                                                    value={'top'}
-                                                    onChange={(event) =>
-                                                        event.target.checked &&
-                                                        handleSettingChanged('subtitleAlignment', 'top')
-                                                    }
-                                                />
-                                            }
-                                            label={t('settings.subtitleAlignmentTop')}
-                                        />
-                                    </RadioGroup>
-                                </div>
                                 <div className={classes.subtitleSetting}>
                                     <TextField
                                         className={classes.textField}
@@ -1959,6 +1963,23 @@ export default function SettingsForm({
                                         }
                                     />
                                 </div>
+                                <div className={classes.subtitleSetting}>
+                                    <TextField
+                                        className={classes.textField}
+                                        type="number"
+                                        color="secondary"
+                                        fullWidth
+                                        label={t('settings.topSubtitlePositionOffset')}
+                                        value={topSubtitlePositionOffset}
+                                        inputProps={{
+                                            min: 0,
+                                            step: 1,
+                                        }}
+                                        onChange={(e) =>
+                                            handleSettingChanged('topSubtitlePositionOffset', Number(e.target.value))
+                                        }
+                                    />
+                                </div>
                                 {(!extensionInstalled || extensionSupportsSubtitlesWidthSetting) && (
                                     <div className={classes.subtitleSetting}>
                                         <TextField

diff --git a/common/components/SubtitlePreview.tsx b/common/components/SubtitlePreview.tsx
@@ -58,6 +58,7 @@ const SubtitlePreviewInput = ({ text, className, textSubtitleSettings, onTextCha
         subtitleFontFamily,
         subtitleCustomStyles,
         subtitleBlur,
+        subtitleAlignment,
     } = textSubtitleSettings;
 
     const subtitlePreviewStyles = useMemo(
@@ -75,6 +76,7 @@ const SubtitlePreviewInput = ({ text, className, textSubtitleSettings, onTextCha
                 subtitleFontFamily,
                 subtitleCustomStyles,
                 subtitleBlur,
+                subtitleAlignment,
             }),
         [
             subtitleColor,
@@ -89,6 +91,7 @@ const SubtitlePreviewInput = ({ text, className, textSubtitleSettings, onTextCha
             subtitleFontFamily,
             subtitleCustomStyles,
             subtitleBlur,
+            subtitleAlignment,
         ]
     );
 

diff --git a/common/locales/de.json b/common/locales/de.json
@@ -317,6 +317,7 @@
         "subtitleShadowThickness": "Subtitle Shadow Thickness",
         "subtitleOutlineThicknessHelperText": "Adds an outline around subtitle text. If this causes overlapping lines, try using a different font.",
         "subtitlePositionOffset": "Untertitelabstand vom unteren Bildschirmrand",
+        "topSubtitlePositionOffset": "Untertitelabstand vom oberer Bildschirmrand",
         "subtitleAlignment": "Untertitel-Position",
         "subtitleAlignmentBottom": "Unten",
         "subtitleAlignmentTop": "Oben",

diff --git a/common/locales/en.json b/common/locales/en.json
@@ -317,6 +317,7 @@
         "subtitleShadowThickness": "Subtitle Shadow Thickness",
         "subtitleOutlineThicknessHelperText": "Adds an outline around subtitle text. If this causes overlapping lines, try using a different font.",
         "subtitlePositionOffset": "Subtitle position offset from bottom",
+        "topSubtitlePositionOffset": "Subtitle position offset from top",
         "subtitleAlignment": "Subtitle Alignment",
         "subtitleAlignmentBottom": "Bottom",
         "subtitleAlignmentTop": "Top",

diff --git a/common/locales/es.json b/common/locales/es.json
@@ -317,7 +317,8 @@
         "subtitleShadowThickness": "Grosor del Sombreado de los Subtítulos",
         "subtitleOutlineThicknessHelperText": "Agrega un contorno al texto de los subtítulos. Si esto causa líneas superpuestas, trata de usar otra fuente.",
         "subtitlePositionOffset": "Distancia de los subtítulos desde el borde inferior",
-        "subtitleAlignment": "Alineación de Subtítulos",
+        "subtitleAlignment": "Subtitle position offset from bottom",
+        "topSubtitlePositionOffset": "Subtitle position offset from top",
         "subtitleAlignmentBottom": "Inferior",
         "subtitleAlignmentTop": "Superior",
         "subtitleBlur": "Desenfoque de subtítulos",

diff --git a/common/locales/ja.json b/common/locales/ja.json
@@ -316,7 +316,8 @@
         "subtitleShadowColor": "字幕の影の色",
         "subtitleShadowThickness": "字幕の影の太さ",
         "subtitleOutlineThicknessHelperText": "字幕に縁取りが追加される。縁取りの線が重なっているように見える場合、別のフォントを試してみてください。",
-        "subtitlePositionOffset": "字幕表示位置の調整",
+        "subtitlePositionOffset": "Subtitle position offset from bottom",
+        "topSubtitlePositionOffset": "Subtitle position offset from top",
         "subtitleAlignment": "字幕の表示位置",
         "subtitleAlignmentBottom": "下部",
         "subtitleAlignmentTop": "上部",

diff --git a/common/locales/pl.json b/common/locales/pl.json
@@ -316,7 +316,8 @@
         "subtitleShadowColor": "Kolor cienia napisów",
         "subtitleShadowThickness": "Wielkość cienia napisów",
         "subtitleOutlineThicknessHelperText": "Dodaje obwódkę wokół napisów. Jeżeli to ustawienie powoduje nakładanie się linii tekstu, spróbuj użyć innej czcionki.",
-        "subtitlePositionOffset": "Przesunięcie pozycji napisów",
+        "subtitlePositionOffset": "Subtitle position offset from bottom",
+        "topSubtitlePositionOffset": "Subtitle position offset from top",
         "subtitleAlignment": "Wyrównanie napisów",
         "subtitleAlignmentBottom": "Dół",
         "subtitleAlignmentTop": "Góra",

diff --git a/common/locales/pt_BR.json b/common/locales/pt_BR.json
@@ -317,6 +317,7 @@
         "subtitleShadowThickness": "Expessura da sombra da legenda",
         "subtitleOutlineThicknessHelperText": "Adiciona um contorno ao redor do texto da legenda. Se isso causar sobreposição de linhas, tente usar uma fonte diferente.",
         "subtitlePositionOffset": "Deslocamento da posição da legenda a partir da parte inferior",
+        "topSubtitlePositionOffset": "Deslocamento da posição da legenda a partir da parte superior",
         "subtitleAlignment": "Alinhamento da legenda",
         "subtitleAlignmentBottom": "Inferior",
         "subtitleAlignmentTop": "Superior",

diff --git a/common/locales/ru.json b/common/locales/ru.json
@@ -317,6 +317,7 @@
         "subtitleShadowThickness": "Толщина тени субтитров",
         "subtitleOutlineThicknessHelperText": "Добавляет контур вокруг текста субтитров. Если это приводит к перекрытию строк, попробуйте использовать другой шрифт.",
         "subtitlePositionOffset": "Отступ субтитров от нижнего края",
+        "topSubtitlePositionOffset": "Отступ субтитров от верхнего края",
         "subtitleAlignment": "Выравнивание субтитров",
         "subtitleAlignmentBottom": "По нижнему краю",
         "subtitleAlignmentTop": "По верхнему краю",

diff --git a/common/locales/zh_CN.json b/common/locales/zh_CN.json
@@ -317,6 +317,7 @@
         "subtitleShadowThickness": "Subtitle Shadow Thickness",
         "subtitleOutlineThicknessHelperText": "在字幕文本周围添加轮廓线。如果这会导致线条重叠，请尝试使用其他字体。",
         "subtitlePositionOffset": "字幕位置从底部偏移",
+        "topSubtitlePositionOffset": "字幕位置从顶部偏移",
         "subtitleAlignment": "字幕对齐方式",
         "subtitleAlignmentBottom": "底部",
         "subtitleAlignmentTop": "顶部",

diff --git a/common/settings/settings-import-export.test.ts b/common/settings/settings-import-export.test.ts
@@ -57,12 +57,13 @@ it('validates exported settings', () => {
                 subtitleBackgroundOpacity: 0,
                 subtitleFontFamily: 'ToppanBunkyuMidashiGothicStdN-ExtraBold',
                 subtitleBlur: true,
+                subtitleAlignment: 'bottom',
                 subtitleCustomStyles: [],
             },
         ],
         subtitlePreview: 'アあ安Aa',
         subtitlePositionOffset: 71,
-        subtitleAlignment: 'bottom',
+        topSubtitlePositionOffset: 71,
         audioPaddingStart: 0,
         audioPaddingEnd: 500,
         maxImageWidth: 480,

diff --git a/common/settings/settings-import-export.ts b/common/settings/settings-import-export.ts
@@ -185,6 +185,9 @@ const settingsSchema = {
         subtitlePositionOffset: {
             type: 'number',
         },
+        topSubtitlePositionOffset: {
+            type: 'number',
+        },
         subtitleAlignment: {
             type: 'string',
         },