From 75cfb77c8b64bb801b9752cb71548a72e3f36f55 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Sat, 7 Sep 2024 11:20:15 -0600
Subject: [PATCH 1/3] new subtitle text colors

---
 .../player/atoms/settings/CaptionSettingsView.tsx      | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx
index 884233a9..25dbe1e7 100644
--- a/src/components/player/atoms/settings/CaptionSettingsView.tsx
+++ b/src/components/player/atoms/settings/CaptionSettingsView.tsx
@@ -214,7 +214,15 @@ export function CaptionSetting(props: {
   );
 }
 
-export const colors = ["#ffffff", "#b0b0b0", "#80b1fa", "#e2e535"];
+export const colors = [
+  "#ffffff",
+  "#b0b0b0",
+  "#80b1fa",
+  "#e2e535",
+  "#202020",
+  "#00ff00",
+  "#ff0000",
+];
 
 export function CaptionSettingsView({
   id,

From 07daebdf8617b9ac5550511ebac15b3f1c301b64 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Mon, 9 Sep 2024 23:31:38 -0600
Subject: [PATCH 2/3] Custom colors

---
 .../atoms/settings/CaptionSettingsView.tsx    | 69 ++++++++++++-------
 src/pages/parts/settings/CaptionsPart.tsx     | 53 +++++++++++---
 2 files changed, 88 insertions(+), 34 deletions(-)

diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx
index 25dbe1e7..5bbbb433 100644
--- 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,15 +214,7 @@ export function CaptionSetting(props: {
   );
 }
 
-export const colors = [
-  "#ffffff",
-  "#b0b0b0",
-  "#80b1fa",
-  "#e2e535",
-  "#202020",
-  "#00ff00",
-  "#ff0000",
-];
+export const colors = ["#ffffff", "#80b1fa", "#e2e535", "#10B239FF"];
 
 export function CaptionSettingsView({
   id,
@@ -233,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 (
     <>
@@ -278,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>
@@ -287,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}%`}
         />
@@ -295,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}%`}
         />
@@ -304,22 +311,32 @@ 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 */}
+            <input
+              type="color"
+              value={styling.color}
+              onChange={(e) => {
+                const color = e.target.value;
+                handleStylingChange({ ...styling, color });
+              }}
+              className="w-10 h-10 border rounded-md cursor-pointer"
+            />
           </div>
         </div>
       </Menu.Section>
diff --git a/src/pages/parts/settings/CaptionsPart.tsx b/src/pages/parts/settings/CaptionsPart.tsx
index 78638248..22bdcf4e 100644
--- 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,34 @@ 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 */}
+              <input
+                type="color"
+                value={props.styling.color}
+                onChange={(e) => {
+                  const color = e.target.value;
+                  handleStylingChange({ ...props.styling, color });
+                  subtitleStore.updateStyling({
+                    ...props.styling,
+                    color,
+                  });
+                }}
+                className="w-10 h-10 border rounded-md cursor-pointer"
+              />
             </div>
           </div>
         </div>

From 61238a708185f4f53853a8e99a2d7d7e4fd0d489 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Mon, 9 Sep 2024 23:41:23 -0600
Subject: [PATCH 3/3] prettier color picker

---
 .../atoms/settings/CaptionSettingsView.tsx    | 24 ++++++++------
 src/pages/parts/settings/CaptionsPart.tsx     | 32 +++++++++++--------
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx
index 5bbbb433..67589d98 100644
--- a/src/components/player/atoms/settings/CaptionSettingsView.tsx
+++ b/src/components/player/atoms/settings/CaptionSettingsView.tsx
@@ -328,15 +328,21 @@ export function CaptionSettingsView({
               />
             ))}
             {/* Add Color Picker */}
-            <input
-              type="color"
-              value={styling.color}
-              onChange={(e) => {
-                const color = e.target.value;
-                handleStylingChange({ ...styling, color });
-              }}
-              className="w-10 h-10 border rounded-md cursor-pointer"
-            />
+            <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>
diff --git a/src/pages/parts/settings/CaptionsPart.tsx b/src/pages/parts/settings/CaptionsPart.tsx
index 22bdcf4e..77758ed8 100644
--- a/src/pages/parts/settings/CaptionsPart.tsx
+++ b/src/pages/parts/settings/CaptionsPart.tsx
@@ -168,19 +168,25 @@ export function CaptionsPart(props: {
                 />
               ))}
               {/* Add Color Picker */}
-              <input
-                type="color"
-                value={props.styling.color}
-                onChange={(e) => {
-                  const color = e.target.value;
-                  handleStylingChange({ ...props.styling, color });
-                  subtitleStore.updateStyling({
-                    ...props.styling,
-                    color,
-                  });
-                }}
-                className="w-10 h-10 border rounded-md cursor-pointer"
-              />
+              <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>