Playback settings
diff --git a/src/components/player/base/SubtitleView.tsx b/src/components/player/base/SubtitleView.tsx
index 858f17aa..81463326 100644
--- a/src/components/player/base/SubtitleView.tsx
+++ b/src/components/player/base/SubtitleView.tsx
@@ -9,8 +9,15 @@ import {
} from "@/components/player/utils/captions";
import { Transition } from "@/components/Transition";
import { usePlayerStore } from "@/stores/player/store";
+import { SubtitleStyling, useSubtitleStore } from "@/stores/subtitles";
-export function CaptionCue({ text }: { text?: string }) {
+export function CaptionCue({
+ text,
+ styling,
+}: {
+ text?: string;
+ styling: SubtitleStyling;
+}) {
const textWithNewlines = (text || "").replaceAll(/\r?\n/g, "
");
// https://www.w3.org/TR/webvtt1/#dom-construction-rules
@@ -22,7 +29,14 @@ export function CaptionCue({ text }: { text?: string }) {
});
return (
-
+
s.progress.time);
const srtData = usePlayerStore((s) => s.caption.selected?.srtData);
+ const styling = useSubtitleStore((s) => s.styling);
const parsedCaptions = useMemo(
() => (srtData ? parseSubtitles(srtData) : []),
@@ -55,7 +70,11 @@ export function SubtitleRenderer() {
return (
{visibileCaptions.map(({ start, end, content }, i) => (
-
+
))}
);
diff --git a/src/stores/subtitles/index.ts b/src/stores/subtitles/index.ts
new file mode 100644
index 00000000..40787e42
--- /dev/null
+++ b/src/stores/subtitles/index.ts
@@ -0,0 +1,62 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+
+export interface SubtitleStyling {
+ /**
+ * Text color of subtitles, hex string
+ */
+ color: string;
+
+ /**
+ * size percentage, ranges between 0 and 2
+ */
+ size: number;
+
+ /**
+ * background opacity, ranges between 0 and 1
+ */
+ backgroundOpacity: number;
+}
+
+export interface SubtitleStore {
+ enabled: boolean;
+ lastSelectedLanguage: string | null;
+ styling: SubtitleStyling;
+ updateStyling(newStyling: Partial): void;
+ setLanguage(language: string | null): void;
+}
+
+// TODO add migration from previous stored settings
+export const useSubtitleStore = create(
+ persist(
+ immer((set) => ({
+ enabled: false,
+ lastSelectedLanguage: null,
+ styling: {
+ color: "#ffffff",
+ backgroundOpacity: 0.5,
+ size: 1,
+ },
+ updateStyling(newStyling) {
+ set((s) => {
+ if (newStyling.backgroundOpacity !== undefined)
+ s.styling.backgroundOpacity = newStyling.backgroundOpacity;
+ if (newStyling.color !== undefined)
+ s.styling.color = newStyling.color.toLowerCase();
+ if (newStyling.size !== undefined)
+ s.styling.size = Math.min(2, Math.max(0.1, newStyling.size));
+ });
+ },
+ setLanguage(lang) {
+ set((s) => {
+ s.enabled = !!lang;
+ if (lang) s.lastSelectedLanguage = lang;
+ });
+ },
+ })),
+ {
+ name: "__MW::subtitles",
+ }
+ )
+);
diff --git a/tailwind.config.js b/tailwind.config.js
index d68a6aa6..b5a0e701 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -137,7 +137,10 @@ module.exports = {
border: "#141D23",
buttonFocus: "#202836",
flagBg: "#202836",
+ inputBg: "#202836",
cardBorder: "#1B262E",
+ slider: "#8787A8",
+ sliderFilled: "#A75FC9",
type: {
main: "#617A8A",