diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index 88373318..df617411 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -766,7 +766,10 @@ "previewQuote": "Convinced life is meaningless, I lack the courage of my conviction.", "textSizeLabel": "Text size", "title": "Subtitles", - "textBoldLabel": "Bold text" + "textBoldLabel": "Bold text", + "verticalPositionLabel": "Vertical position", + "default": "Default", + "low": "Low" }, "unsaved": "You have unsaved changes... ฅ^•ﻌ•^ฅ" }, diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx index d953fbf0..ab4b5d05 100644 --- a/src/components/player/atoms/settings/CaptionSettingsView.tsx +++ b/src/components/player/atoms/settings/CaptionSettingsView.tsx @@ -325,6 +325,47 @@ export function CaptionSettingsView({ onChange={(v) => handleStylingChange({ ...styling, size: v / 100 })} value={styling.size * 100} /> +
+ + {t("settings.subtitles.verticalPositionLabel")} + +
+ + +
+
{t("settings.subtitles.colorLabel")} diff --git a/src/components/player/base/SubtitleView.tsx b/src/components/player/base/SubtitleView.tsx index 7e50ec17..531b6fe8 100644 --- a/src/components/player/base/SubtitleView.tsx +++ b/src/components/player/base/SubtitleView.tsx @@ -1,4 +1,3 @@ -import classNames from "classnames"; import { useMemo } from "react"; import { @@ -123,6 +122,7 @@ export function SubtitleView(props: { controlsShown: boolean }) { const captionAsTrack = usePlayerStore((s) => s.caption.asTrack); const display = usePlayerStore((s) => s.display); const isCasting = display?.getType() === "casting"; + const styling = useSubtitleStore((s) => s.styling); if (captionAsTrack || !caption || isCasting) return null; @@ -133,10 +133,12 @@ export function SubtitleView(props: { controlsShown: boolean }) { show >
diff --git a/src/pages/parts/settings/CaptionsPart.tsx b/src/pages/parts/settings/CaptionsPart.tsx index 02f35255..607260e5 100644 --- a/src/pages/parts/settings/CaptionsPart.tsx +++ b/src/pages/parts/settings/CaptionsPart.tsx @@ -53,7 +53,12 @@ export function CaptionPreview(props: { -
+
+
+ + {t("settings.subtitles.verticalPositionLabel")} + +
+ + +
+
{t("settings.subtitles.textBoldLabel")} diff --git a/src/stores/subtitles/index.ts b/src/stores/subtitles/index.ts index b917d870..053feebb 100644 --- a/src/stores/subtitles/index.ts +++ b/src/stores/subtitles/index.ts @@ -28,6 +28,11 @@ export interface SubtitleStyling { * bold, boolean */ bold: boolean; + + /** + * vertical position percentage, ranges between 1 and 3 (rem) + */ + verticalPosition: number; } export interface SubtitleStore { @@ -70,6 +75,7 @@ export const useSubtitleStore = create( size: 1, backgroundBlur: 0.5, bold: false, + verticalPosition: 3, }, showDelayIndicator: false, resetSubtitleSpecificSettings() { @@ -95,6 +101,11 @@ export const useSubtitleStore = create( if (newStyling.size !== undefined) s.styling.size = Math.min(10, Math.max(0.01, newStyling.size)); if (newStyling.bold !== undefined) s.styling.bold = newStyling.bold; + if (newStyling.verticalPosition !== undefined) + s.styling.verticalPosition = Math.min( + 100, + Math.max(0, newStyling.verticalPosition), + ); }); }, resetStyling() { @@ -105,6 +116,7 @@ export const useSubtitleStore = create( size: 1, backgroundBlur: 0.5, bold: false, + verticalPosition: 3, }; }); },