update subtitle defaults

src/assets/locales/en.json

@@ -1159,8 +1159,8 @@
       "title": "Subtitles",
       "textBoldLabel": "Bold text",
       "verticalPositionLabel": "Vertical position",
-      "default": "Default",
+      "high": "High",
-      "low": "Low",
+      "low": "Default",
       "textStyle": {
         "title": "Text style",
         "default": "Default",

src/components/player/atoms/settings/CaptionSettingsView.tsx

@@ -12,6 +12,7 @@ import { useProgressBar } from "@/hooks/useProgressBar";
 import { usePlayerStore } from "@/stores/player/store";
 import { usePreferencesStore } from "@/stores/preferences";
 import { SubtitleStyling, useSubtitleStore } from "@/stores/subtitles";
+import { isFirefox } from "@/utils/detectFeatures";
 
 export function ColorOption(props: {
   color: string;
@@ -423,10 +424,12 @@ export function CaptionSettingsView({
   const resetSubStyling = () => {
     subtitleStore.updateStyling({
       color: "#ffffff",
-      backgroundOpacity: 0.5,
+      backgroundOpacity: 0.25,
-      size: 1,
+      size: 0.75,
-      backgroundBlur: 0.5,
+      backgroundBlur: 0.25,
+      backgroundBlurEnabled: !isFirefox,
       bold: false,
+      verticalPosition: 1,
       fontStyle: "default",
       borderThickness: 1,
     });
@@ -635,23 +638,6 @@ export function CaptionSettingsView({
                 {t("settings.subtitles.verticalPositionLabel")}
               </Menu.FieldTitle>
               <div className="flex justify-center items-center space-x-2">
-                <button
-                  type="button"
-                  className={classNames(
-                    "px-3 py-1 rounded transition-colors duration-100",
-                    styling.verticalPosition === 3
-                      ? "bg-video-context-buttonFocus"
-                      : "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50",
-                  )}
-                  onClick={() =>
-                    handleStylingChange({
-                      ...styling,
-                      verticalPosition: 3,
-                    })
-                  }
-                >
-                  {t("settings.subtitles.default")}
-                </button>
                 <button
                   type="button"
                   className={classNames(
@@ -669,6 +655,23 @@ export function CaptionSettingsView({
                 >
                   {t("settings.subtitles.low")}
                 </button>
+                <button
+                  type="button"
+                  className={classNames(
+                    "px-3 py-1 rounded transition-colors duration-100",
+                    styling.verticalPosition === 3
+                      ? "bg-video-context-buttonFocus"
+                      : "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50",
+                  )}
+                  onClick={() =>
+                    handleStylingChange({
+                      ...styling,
+                      verticalPosition: 3,
+                    })
+                  }
+                >
+                  {t("settings.subtitles.high")}
+                </button>
               </div>
             </div>
             <Button

src/pages/parts/settings/CaptionsPart.tsx

@@ -116,7 +116,7 @@ export function CaptionsPart(props: {
       backgroundBlur: 0.5,
       backgroundBlurEnabled: !isFirefox,
       bold: false,
-      verticalPosition: 3,
+      verticalPosition: 1,
       fontStyle: "default",
       borderThickness: 1,
     });
@@ -327,23 +327,6 @@ export function CaptionsPart(props: {
                   {t("settings.subtitles.verticalPositionLabel")}
                 </Menu.FieldTitle>
                 <div className="flex justify-center items-center space-x-2">
-                  <button
-                    type="button"
-                    className={classNames(
-                      "px-3 py-1 rounded transition-colors duration-100",
-                      props.styling.verticalPosition === 3
-                        ? "bg-video-context-buttonFocus"
-                        : "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50",
-                    )}
-                    onClick={() =>
-                      handleStylingChange({
-                        ...props.styling,
-                        verticalPosition: 3,
-                      })
-                    }
-                  >
-                    {t("settings.subtitles.default")}
-                  </button>
                   <button
                     type="button"
                     className={classNames(
@@ -361,6 +344,23 @@ export function CaptionsPart(props: {
                   >
                     {t("settings.subtitles.low")}
                   </button>
+                  <button
+                    type="button"
+                    className={classNames(
+                      "px-3 py-1 rounded transition-colors duration-100",
+                      props.styling.verticalPosition === 3
+                        ? "bg-video-context-buttonFocus"
+                        : "bg-video-context-buttonFocus bg-opacity-0 hover:bg-opacity-50",
+                    )}
+                    onClick={() =>
+                      handleStylingChange({
+                        ...props.styling,
+                        verticalPosition: 3,
+                      })
+                    }
+                  >
+                    {t("settings.subtitles.high")}
+                  </button>
                 </div>
               </div>
               <Button

src/stores/subtitles/index.ts

@@ -94,7 +94,7 @@ export const useSubtitleStore = create(
         backgroundBlur: 0.5,
         backgroundBlurEnabled: !isFirefox,
         bold: false,
-        verticalPosition: 3,
+        verticalPosition: 1,
         fontStyle: "default",
         borderThickness: 1,
       },
@@ -147,7 +147,7 @@ export const useSubtitleStore = create(
             backgroundBlur: 0.5,
             backgroundBlurEnabled: !isFirefox,
             bold: false,
-            verticalPosition: 3,
+            verticalPosition: 1,
             fontStyle: "default",
             borderThickness: 1,
           };