Merge 7dba435a22 into e93887a62a

2024-12-20 14:37:43 +01:00 · 2024-09-17 12:22:12 +01:00 · 2024-09-17 12:22:12 +01:00 · 1e18d3f08e
commit 1e18d3f08e
parent e93887a62a 7dba435a22
2 changed files with 100 additions and 26 deletions
--- a/src/components/player/atoms/settings/CaptionSettingsView.tsx
+++ b/src/components/player/atoms/settings/CaptionSettingsView.tsx
@ -7,7 +7,7 @@ import { Icon, Icons } from "@/components/Icon";
 import { Menu } from "@/components/player/internals/ContextMenu";
 import { useOverlayRouter } from "@/hooks/useOverlayRouter";
 import { useProgressBar } from "@/hooks/useProgressBar";
-import { useSubtitleStore } from "@/stores/subtitles";
+import { SubtitleStyling, useSubtitleStore } from "@/stores/subtitles";

 export function ColorOption(props: {
  color: string;
@ -214,7 +214,7 @@ export function CaptionSetting(props: {
  );
 }

-export const colors = ["#ffffff", "#b0b0b0", "#80b1fa", "#e2e535"];
+export const colors = ["#ffffff", "#80b1fa", "#e2e535", "#10B239FF"];

 export function CaptionSettingsView({
  id,
@ -225,12 +225,21 @@ export function CaptionSettingsView({
 }) {
  const { t } = useTranslation();
  const router = useOverlayRouter(id);
-  const styling = useSubtitleStore((s) => s.styling);
-  const overrideCasing = useSubtitleStore((s) => s.overrideCasing);
-  const delay = useSubtitleStore((s) => s.delay);
-  const setOverrideCasing = useSubtitleStore((s) => s.setOverrideCasing);
-  const setDelay = useSubtitleStore((s) => s.setDelay);
-  const updateStyling = useSubtitleStore((s) => s.updateStyling);
+  const subtitleStore = useSubtitleStore();
+  const styling = subtitleStore.styling;
+  const overrideCasing = subtitleStore.overrideCasing;
+  const delay = subtitleStore.delay;
+  const setOverrideCasing = subtitleStore.setOverrideCasing;
+  const setDelay = subtitleStore.setDelay;
+  const updateStyling = subtitleStore.updateStyling;
+
+  useEffect(() => {
+    subtitleStore.updateStyling(styling);
+  }, [styling, subtitleStore]);
+
+  const handleStylingChange = (newStyling: SubtitleStyling) => {
+    updateStyling(newStyling);
+  };

  return (
    <>
@ -270,7 +279,9 @@ export function CaptionSettingsView({
          <div className="flex justify-center items-center">
            <Toggle
              enabled={styling.bold}
-              onClick={() => updateStyling({ bold: !styling.bold })}
+              onClick={() =>
+                handleStylingChange({ ...styling, bold: !styling.bold })
+              }
            />
          </div>
        </div>
@ -279,7 +290,9 @@ export function CaptionSettingsView({
          label={t("settings.subtitles.backgroundLabel")}
          max={100}
          min={0}
-          onChange={(v) => updateStyling({ backgroundOpacity: v / 100 })}
+          onChange={(v) =>
+            handleStylingChange({ ...styling, backgroundOpacity: v / 100 })
+          }
          value={styling.backgroundOpacity * 100}
          textTransformer={(s) => `${s}%`}
        />
@ -287,7 +300,9 @@ export function CaptionSettingsView({
          label={t("settings.subtitles.backgroundBlurLabel")}
          max={100}
          min={0}
-          onChange={(v) => updateStyling({ backgroundBlur: v / 100 })}
+          onChange={(v) =>
+            handleStylingChange({ ...styling, backgroundBlur: v / 100 })
+          }
          value={styling.backgroundBlur * 100}
          textTransformer={(s) => `${s}%`}
        />
@ -296,22 +311,38 @@ export function CaptionSettingsView({
          max={200}
          min={1}
          textTransformer={(s) => `${s}%`}
-          onChange={(v) => updateStyling({ size: v / 100 })}
+          onChange={(v) => handleStylingChange({ ...styling, size: v / 100 })}
          value={styling.size * 100}
        />
        <div className="flex justify-between items-center">
          <Menu.FieldTitle>
            {t("settings.subtitles.colorLabel")}
          </Menu.FieldTitle>
-          <div className="flex justify-center items-center">
-            {colors.map((v) => (
+          <div className="flex justify-center items-center space-x-2">
+            {colors.map((color) => (
              <ColorOption
-                onClick={() => updateStyling({ color: v })}
-                color={v}
-                active={styling.color === v}
-                key={v}
+                key={color}
+                color={color}
+                active={styling.color === color}
+                onClick={() => handleStylingChange({ ...styling, color })}
              />
            ))}
+            {/* Add Color Picker */}
+            <div className="relative inline-block">
+              <input
+                type="color"
+                value={styling.color}
+                onChange={(e) => {
+                  const color = e.target.value;
+                  handleStylingChange({ ...styling, color });
+                }}
+                className="absolute opacity-0 cursor-pointer w-10 h-10"
+              />
+              <div
+                className="w-10 h-10 border-2 border-gray-300 rounded-full"
+                style={{ backgroundColor: styling.color }}
+              />
+            </div>
          </div>
        </div>
      </Menu.Section>
--- a/src/pages/parts/settings/CaptionsPart.tsx
+++ b/src/pages/parts/settings/CaptionsPart.tsx
@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";

@ -14,7 +14,7 @@ import { Menu } from "@/components/player/internals/ContextMenu";
 import { CaptionCue } from "@/components/player/Player";
 import { Heading1 } from "@/components/utils/Text";
 import { Transition } from "@/components/utils/Transition";
-import { SubtitleStyling } from "@/stores/subtitles";
+import { SubtitleStyling, useSubtitleStore } from "@/stores/subtitles";

 export function CaptionPreview(props: {
  fullscreen?: boolean;
@ -78,6 +78,17 @@ export function CaptionsPart(props: {
  const { t } = useTranslation();
  const [fullscreenPreview, setFullscreenPreview] = useState(false);

+  const subtitleStore = useSubtitleStore();
+
+  useEffect(() => {
+    subtitleStore.updateStyling(props.styling);
+  }, [props.styling, subtitleStore, subtitleStore.updateStyling]);
+
+  const handleStylingChange = (newStyling: SubtitleStyling) => {
+    props.setStyling(newStyling);
+    subtitleStore.updateStyling(newStyling);
+  };
+
  return (
    <div>
      <Heading1 border>{t("settings.subtitles.title")}</Heading1>
@ -88,7 +99,10 @@ export function CaptionsPart(props: {
            max={100}
            min={0}
            onChange={(v) =>
-              props.setStyling({ ...props.styling, backgroundOpacity: v / 100 })
+              handleStylingChange({
+                ...props.styling,
+                backgroundOpacity: v / 100,
+              })
            }
            value={props.styling.backgroundOpacity * 100}
            textTransformer={(s) => `${s}%`}
@ -98,7 +112,10 @@ export function CaptionsPart(props: {
            max={100}
            min={0}
            onChange={(v) =>
-              props.setStyling({ ...props.styling, backgroundBlur: v / 100 })
+              handleStylingChange({
+                ...props.styling,
+                backgroundBlur: v / 100,
+              })
            }
            value={props.styling.backgroundBlur * 1}
            textTransformer={(s) => `${s}%`}
@ -109,7 +126,10 @@ export function CaptionsPart(props: {
            min={1}
            textTransformer={(s) => `${s}%`}
            onChange={(v) =>
-              props.setStyling({ ...props.styling, size: v / 100 })
+              handleStylingChange({
+                ...props.styling,
+                size: v / 100,
+              })
            }
            value={props.styling.size * 100}
          />
@ -121,7 +141,7 @@ export function CaptionsPart(props: {
              <Toggle
                enabled={props.styling.bold}
                onClick={() =>
-                  props.setStyling({
+                  handleStylingChange({
                    ...props.styling,
                    bold: !props.styling.bold,
                  })
@ -133,17 +153,40 @@ export function CaptionsPart(props: {
            <Menu.FieldTitle>
              {t("settings.subtitles.colorLabel")}
            </Menu.FieldTitle>
-            <div className="flex justify-center items-center">
+            <div className="flex justify-center items-center space-x-2">
              {colors.map((v) => (
                <ColorOption
                  onClick={() =>
-                    props.setStyling({ ...props.styling, color: v })
+                    handleStylingChange({
+                      ...props.styling,
+                      color: v,
+                    })
                  }
                  color={v}
                  active={props.styling.color === v}
                  key={v}
                />
              ))}
+              {/* Add Color Picker */}
+              <div className="relative">
+                <input
+                  type="color"
+                  value={props.styling.color}
+                  onChange={(e) => {
+                    const color = e.target.value;
+                    handleStylingChange({ ...props.styling, color });
+                    subtitleStore.updateStyling({
+                      ...props.styling,
+                      color,
+                    });
+                  }}
+                  className="absolute opacity-0 cursor-pointer w-8 h-8"
+                />
+                <div
+                  className="w-8 h-8 border-2 border-gray-300 rounded-full"
+                  style={{ backgroundColor: props.styling.color }}
+                />
+              </div>
            </div>
          </div>
        </div>