workaround for disabling caption blur to fix flicker issues

src/assets/locales/en.json

@@ -1150,7 +1150,9 @@
     },
     "subtitles": {
       "backgroundLabel": "Background opacity",
-      "backgroundBlurLabel": "Background blur",
+      "backgroundBlurEnabledLabel": "Background blur",
+      "backgroundBlurEnabledDescription": "Disabling caption background blur may fix some flickering issues",
+      "backgroundBlurLabel": "Background blur intensity",
       "colorLabel": "Color",
       "previewQuote": "Convinced life is meaningless, I lack the courage of my conviction.",
       "textSizeLabel": "Text size",

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

@@ -493,16 +493,37 @@ export function CaptionSettingsView({
               value={styling.backgroundOpacity * 100}
               textTransformer={(s) => `${s}%`}
             />
-            <CaptionSetting
-              label={t("settings.subtitles.backgroundBlurLabel")}
-              max={100}
-              min={0}
-              onChange={(v) =>
-                handleStylingChange({ ...styling, backgroundBlur: v / 100 })
-              }
-              value={styling.backgroundBlur * 100}
-              textTransformer={(s) => `${s}%`}
-            />
+            <div className="flex justify-between items-center">
+              <Menu.FieldTitle>
+                {t("settings.subtitles.backgroundBlurEnabledLabel")}
+              </Menu.FieldTitle>
+              <div className="flex justify-center items-center">
+                <Toggle
+                  enabled={styling.backgroundBlurEnabled}
+                  onClick={() =>
+                    handleStylingChange({
+                      ...styling,
+                      backgroundBlurEnabled: !styling.backgroundBlurEnabled,
+                    })
+                  }
+                />
+              </div>
+            </div>
+            <span className="text-xs text-type-secondary">
+              {t("settings.subtitles.backgroundBlurEnabledDescription")}
+            </span>
+            {styling.backgroundBlurEnabled && (
+              <CaptionSetting
+                label={t("settings.subtitles.backgroundBlurLabel")}
+                max={100}
+                min={0}
+                onChange={(v) =>
+                  handleStylingChange({ ...styling, backgroundBlur: v / 100 })
+                }
+                value={styling.backgroundBlur * 100}
+                textTransformer={(s) => `${s}%`}
+              />
+            )}
             <CaptionSetting
               label={t("settings.subtitles.textSizeLabel")}
               max={200}

src/components/player/base/SubtitleView.tsx

@@ -95,7 +95,7 @@ export function CaptionCue({
         fontSize: `${(1.5 * styling.size).toFixed(2)}em`,
         backgroundColor: `rgba(0,0,0,${styling.backgroundOpacity.toFixed(2)})`,
         backdropFilter:
-          styling.backgroundBlur !== 0
+          styling.backgroundBlurEnabled && styling.backgroundBlur !== 0
             ? `blur(${Math.floor(styling.backgroundBlur * 64)}px)`
             : "none",
         fontWeight: styling.bold ? "bold" : "normal",

src/pages/parts/settings/CaptionsPart.tsx

@@ -19,6 +19,7 @@ import { Transition } from "@/components/utils/Transition";
 import { usePlayerStore } from "@/stores/player/store";
 import { usePreferencesStore } from "@/stores/preferences";
 import { SubtitleStyling, useSubtitleStore } from "@/stores/subtitles";
+import { isFirefox } from "@/utils/detectFeatures";
 
 export function CaptionPreview(props: {
   fullscreen?: boolean;
@@ -113,6 +114,7 @@ export function CaptionsPart(props: {
       backgroundOpacity: 0.5,
       size: 1,
       backgroundBlur: 0.5,
+      backgroundBlurEnabled: !isFirefox,
       bold: false,
       verticalPosition: 3,
       fontStyle: "default",
@@ -158,19 +160,41 @@ export function CaptionsPart(props: {
                 value={props.styling.backgroundOpacity * 100}
                 textTransformer={(s) => `${s}%`}
               />
-              <CaptionSetting
-                label={t("settings.subtitles.backgroundBlurLabel")}
-                max={100}
-                min={0}
-                onChange={(v) =>
-                  handleStylingChange({
-                    ...props.styling,
-                    backgroundBlur: v / 100,
-                  })
-                }
-                value={props.styling.backgroundBlur * 100}
-                textTransformer={(s) => `${s}%`}
-              />
+              <div className="flex justify-between items-center">
+                <Menu.FieldTitle>
+                  {t("settings.subtitles.backgroundBlurEnabledLabel")}
+                </Menu.FieldTitle>
+                <div className="flex justify-center items-center">
+                  <Toggle
+                    enabled={props.styling.backgroundBlurEnabled}
+                    onClick={() =>
+                      handleStylingChange({
+                        ...props.styling,
+                        backgroundBlurEnabled:
+                          !props.styling.backgroundBlurEnabled,
+                      })
+                    }
+                  />
+                </div>
+              </div>
+              <span className="text-xs text-type-secondary">
+                {t("settings.subtitles.backgroundBlurEnabledDescription")}
+              </span>
+              {props.styling.backgroundBlurEnabled && (
+                <CaptionSetting
+                  label={t("settings.subtitles.backgroundBlurLabel")}
+                  max={100}
+                  min={0}
+                  onChange={(v) =>
+                    handleStylingChange({
+                      ...props.styling,
+                      backgroundBlur: v / 100,
+                    })
+                  }
+                  value={props.styling.backgroundBlur * 100}
+                  textTransformer={(s) => `${s}%`}
+                />
+              )}
               <CaptionSetting
                 label={t("settings.subtitles.textSizeLabel")}
                 max={200}

src/stores/subtitles/index.ts

@@ -3,6 +3,8 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 
+import { isFirefox } from "@/utils/detectFeatures";
+
 export interface SubtitleStyling {
   /**
    * Text color of subtitles, hex string
@@ -24,6 +26,11 @@ export interface SubtitleStyling {
    */
   backgroundBlur: number;
 
+  /**
+   * whether background blur is enabled (disabled by default on Firefox due to flickering issues)
+   */
+  backgroundBlurEnabled: boolean;
+
   /**
    * bold, boolean
    */
@@ -85,6 +92,7 @@ export const useSubtitleStore = create(
         backgroundOpacity: 0.5,
         size: 1,
         backgroundBlur: 0.5,
+        backgroundBlurEnabled: !isFirefox,
         bold: false,
         verticalPosition: 3,
         fontStyle: "default",
@@ -109,6 +117,8 @@ export const useSubtitleStore = create(
               1,
               Math.max(0, newStyling.backgroundBlur),
             );
+          if (newStyling.backgroundBlurEnabled !== undefined)
+            s.styling.backgroundBlurEnabled = newStyling.backgroundBlurEnabled;
           if (newStyling.color !== undefined)
             s.styling.color = newStyling.color.toLowerCase();
           if (newStyling.size !== undefined)
@@ -135,6 +145,7 @@ export const useSubtitleStore = create(
             backgroundOpacity: 0.5,
             size: 1,
             backgroundBlur: 0.5,
+            backgroundBlurEnabled: !isFirefox,
             bold: false,
             verticalPosition: 3,
             fontStyle: "default",

src/utils/detectFeatures.ts

@@ -6,6 +6,8 @@ export const isSafari = /^((?!chrome|android).)*safari/i.test(
   navigator.userAgent,
 );
 
+export const isFirefox = detect()?.name === "firefox";
+
 let cachedVolumeResult: boolean | null = null;
 export async function canChangeVolume(): Promise<boolean> {
   if (cachedVolumeResult === null) {