feat: don't apply subtitle settings if customization is disabled

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>

frontend/locales/en.json

@@ -108,6 +108,7 @@
   "editMetadata": "Edit metadata",
   "editPerson": "Edit person",
   "enablePermission": "Enable Permission",
+  "enableSubtitles": "Customize the subtitle appearance",
   "enableUPNP": "Enable UPnP",
   "endsAt": "Ends at {time}",
   "eps": "EPs",

frontend/src/components/Playback/PlayerElement.vue

@@ -15,16 +15,17 @@
         :loop="playbackManager.isRepeatingOnce"
         :class="{ 'uno-object-fill': playerElement.isStretched.value }"
         @loadeddata="onLoadedData">
+        <SubtitleTrack
+          v-if="subtitleSettings.state.enabled && playerElement.currentExternalSubtitleTrack?.parsed !== undefined" />
         <track
           v-for="sub in playbackManager.currentItemVttParsedSubtitleTracks"
+          v-else
           :key="`${playbackManager.currentSourceUrl}-${sub.srcIndex}`"
           kind="subtitles"
           :label="sub.label"
           :srclang="sub.srcLang"
           :src="sub.src">
       </Component>
-      <SubtitleTrack
-        v-if="mediaElementRef && playerElement.currentExternalSubtitleTrack?.parsed !== undefined" />
     </Teleport>
   </template>
 </template>
@@ -43,6 +44,7 @@ import { playbackManager } from '@/store/playback-manager';
 import { playerElement, videoContainerRef } from '@/store/player-element';
 import { getImageInfo } from '@/utils/images';
 import { isNil } from '@/utils/validation';
+import { subtitleSettings } from '@/store/client-settings/subtitle-settings';
 
 const { t } = useI18n();
 let busyWebAudio = false;

frontend/src/components/Playback/SubtitleTrack.vue

@@ -1,9 +1,6 @@
 <template>
   <div
-    class="uno-absolute uno-bottom-0 uno-left-0 uno-w-full uno-text-center"
-    :label="playerElement.currentExternalSubtitleTrack?.label"
-    :srclang="playerElement.currentExternalSubtitleTrack?.srcLang"
-    :src="playerElement.currentExternalSubtitleTrack?.src">
+    class="uno-absolute uno-bottom-0 uno-left-0 uno-w-full uno-text-center">
     <span
       class="uno-inline-block uno-pb-10px uno-color-white"
       :class="{ 'stroked': subtitleSettings.state.stroke }"

frontend/src/components/Selectors/FontSelector.vue

@@ -40,7 +40,7 @@
     v-model="_model"
     v-bind="$attrs"
     :items="selection"
-    :disabled="!isQueryLocalFontsSupported || !fontAccess" />
+    :disabled="!isQueryLocalFontsSupported || !fontAccess || disabled" />
 </template>
 
 <script setup lang="ts">
@@ -55,6 +55,7 @@ const { appWide } = defineProps<{
    * If this font selector is used for selecting the typography for the whole app
    */
   appWide?: boolean;
+  disabled?: boolean;
 }>();
 
 const model = defineModel<string | undefined>();

frontend/src/pages/settings/subtitles.vue

@@ -8,33 +8,43 @@
       <VCol
         md="6"
         class="uno-pb-4 uno-pt-0">
+        <VSwitch
+          v-model="subtitleSettings.state.enabled"
+          :label="$t('enableSubtitles')" />
         <FontSelector
           v-model="subtitleSettings.state.fontFamily"
-          :label="$t('subtitleFont')" />
+          :label="$t('subtitleFont')"
+          :disabled="!subtitleSettings.state.enabled" />
 
         <VSlider
           v-model="subtitleSettings.state.fontSize"
           :label="$t('fontSize')"
           :min="1"
           :max="4.5"
-          :step="0.1" />
+          :step="0.1"
+          :disabled="!subtitleSettings.state.enabled" />
 
         <VSlider
           v-model="subtitleSettings.state.positionFromBottom"
           :label="$t('positionFromBottom')"
           :min="0"
           :max="30"
-          :step="1" />
+          :step="1"
+          :disabled="!subtitleSettings.state.enabled" />
 
         <VCheckbox
           v-model="subtitleSettings.state.backdrop"
-          :label="$t('backdrop')" />
+          :label="$t('backdrop')"
+          :disabled="!subtitleSettings.state.enabled" />
 
         <VCheckbox
           v-model="subtitleSettings.state.stroke"
-          :label="$t('stroke')" />
+          :label="$t('stroke')"
+          :disabled="!subtitleSettings.state.enabled" />
 
-        <SubtitleTrack preview />
+        <SubtitleTrack
+          v-if="subtitleSettings.state.enabled"
+          preview />
       </VCol>
     </template>
   </SettingsPage>

frontend/src/store/client-settings/subtitle-settings.ts

@@ -9,6 +9,11 @@ import type { TypographyChoices } from '@/store';
  */
 
 export interface SubtitleSettingsState {
+  /**
+   * Whether the customization of the subtitles is enabled or not
+   * @default: false
+   */
+  enabled: boolean;
   /**
    * default: Default application typography.
    *
@@ -30,6 +35,7 @@ class SubtitleSettingsStore extends SyncedStore<SubtitleSettingsState> {
 
   public constructor() {
     super('subtitleSettings', {
+      enabled: false,
       fontFamily: 'auto',
       fontSize: 1.5,
       positionFromBottom: 10,