refactor: extract all subtitle setting functionality to new store

frontend/src/components/Playback/SubtitleTrack.vue

@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { clientSettings } from '@/store/client-settings';
+import { subtitleSettings } from '@/store/client-settings';
 import { mediaControls } from '@/store';
 import { playerElement } from '@/store/player-element';
 import { isNil } from '@/utils/validation';
@@ -72,7 +72,7 @@ const currentSubtitle = computed(() =>
  * reactive to client subtitle appearance settings
  */
 const subtitleStyle = computed(() => {
-  const subtitleAppearance = clientSettings.subtitleAppearance;
+  const subtitleAppearance = subtitleSettings.subtitleAppearance;
 
   return {
     fontFamily: `${subtitleAppearance.fontFamily} !important`,

frontend/src/pages/settings/subtitles.vue

@@ -9,29 +9,29 @@
         md="6"
         class="pt-0 pb-4">
         <FontSelector
-          v-model="clientSettings.subtitleAppearance.fontFamily"
+          v-model="subtitleSettings.subtitleAppearance.fontFamily"
           :label="$t('subtitleFont')" />
 
         <VSlider
-          v-model="clientSettings.subtitleAppearance.fontSize"
+          v-model="subtitleSettings.subtitleAppearance.fontSize"
           :label="$t('fontSize')"
           :min="1"
           :max="4.5"
           :step="0.1" />
 
         <VSlider
-          v-model="clientSettings.subtitleAppearance.positionFromBottom"
+          v-model="subtitleSettings.subtitleAppearance.positionFromBottom"
           :label="$t('positionFromBottom')"
           :min="0"
           :max="30"
           :step="1" />
 
         <VCheckbox
-          v-model="clientSettings.subtitleAppearance.backdrop"
+          v-model="subtitleSettings.subtitleAppearance.backdrop"
           :label="$t('backdrop')" />
 
         <VCheckbox
-          v-model="clientSettings.subtitleAppearance.stroke"
+          v-model="subtitleSettings.subtitleAppearance.stroke"
           :label="$t('stroke')" />
 
         <SubtitleTrack :preview-text="$t('subtitlePreviewText')" />
@@ -42,7 +42,7 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { clientSettings } from '@/store/client-settings';
+import { subtitleSettings } from '@/store/client-settings';
 
 const { t } = useI18n();
 </script>

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

@@ -8,7 +8,6 @@ import { remote } from '@/plugins/remote';
 import { vuetify } from '@/plugins/vuetify';
 import { sealed } from '@/utils/validation';
 import { SyncedStore } from '@/store/super/synced-store';
-import { useFont } from '@/composables/use-font';
 
 /**
  * == INTERFACES AND TYPES ==
@@ -18,20 +17,12 @@ import { useFont } from '@/composables/use-font';
 export interface ClientSettingsState {
   darkMode: 'auto' | boolean;
   locale: string;
-  subtitleAppearance: {
-    fontFamily: string;
-    fontSize: number;
-    positionFromBottom: number;
-    backdrop: boolean;
-    stroke: boolean;
-  };
 }
 
 @sealed
 class ClientSettingsStore extends SyncedStore<ClientSettingsState> {
   private readonly _browserPrefersDark = usePreferredDark();
   private readonly _navigatorLanguage = useNavigatorLanguage();
-  private readonly _bodyFont = useFont();
   private readonly _BROWSER_LANGUAGE = computed<string>(() => {
     const rawString = this._navigatorLanguage.language.value ?? '';
     /**
@@ -42,8 +33,6 @@ class ClientSettingsStore extends SyncedStore<ClientSettingsState> {
     return cleanString[0];
   });
 
-  private readonly _BODY_FONT = this._bodyFont.currentFont;
-
   public set locale(newVal: string) {
     this._state.locale
       = i18n.availableLocales.includes(newVal) && newVal !== 'auto'
@@ -63,14 +52,6 @@ class ClientSettingsStore extends SyncedStore<ClientSettingsState> {
     return this._state.darkMode;
   }
 
-  public set subtitleAppearance(newVal: ClientSettingsState['subtitleAppearance']) {
-    this._state.subtitleAppearance = newVal;
-  }
-
-  public get subtitleAppearance(): ClientSettingsState['subtitleAppearance'] {
-    return this._state.subtitleAppearance;
-  }
-
   public readonly currentTheme = computed(() => {
     const dark = 'dark';
     const light = 'light';
@@ -89,24 +70,10 @@ class ClientSettingsStore extends SyncedStore<ClientSettingsState> {
     vuetify.locale.current.value = i18n.locale.value;
   };
 
-  private readonly _updateSubtitleFontFamily = (): void => {
-    this.subtitleAppearance.fontFamily
-      = this.subtitleAppearance.fontFamily === 'auto'
-        ? this._BODY_FONT.value
-        : this.subtitleAppearance.fontFamily;
-  };
-
   public constructor() {
     super('clientSettings', {
       darkMode: 'auto',
-      locale: 'auto',
-      subtitleAppearance: {
-        fontFamily: 'auto',
-        fontSize: 1.5,
-        positionFromBottom: 10,
-        backdrop: true,
-        stroke: false
-      }
+      locale: 'auto'
     }, 'localStorage');
     /**
      * == WATCHERS ==
@@ -120,11 +87,6 @@ class ClientSettingsStore extends SyncedStore<ClientSettingsState> {
       this._updateLocale
     );
 
-    /**
-     * Font family changes
-     */
-    watchImmediate(this._BODY_FONT, this._updateSubtitleFontFamily);
-
     /**
      * Vuetify theme change
      */
@@ -146,4 +108,4 @@ class ClientSettingsStore extends SyncedStore<ClientSettingsState> {
   }
 }
 
-export const clientSettings = new ClientSettingsStore();
+export default new ClientSettingsStore();

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

@@ -0,0 +1,2 @@
+export { default as clientSettings } from '@/store/client-settings/client-settings.ts';
+export { default as subtitleSettings } from '@/store/client-settings/subtitle-settings.ts';

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

@@ -0,0 +1,74 @@
+import { watchImmediate } from '@vueuse/core';
+import { watch } from 'vue';
+import { remote } from '@/plugins/remote';
+import { sealed } from '@/utils/validation';
+import { SyncedStore } from '@/store/super/synced-store';
+import { useFont } from '@/composables/use-font';
+
+/**
+ * == INTERFACES AND TYPES ==
+ */
+
+interface SubtitleApperance {
+  fontFamily: string;
+  fontSize: number;
+  positionFromBottom: number;
+  backdrop: boolean;
+  stroke: boolean;
+}
+
+export interface SubtitleSettingsState {
+  subtitleAppearance: SubtitleApperance;
+}
+
+@sealed
+class SubtitleSettingsStore extends SyncedStore<SubtitleSettingsState> {
+  private readonly _bodyFont = useFont();
+
+  public set subtitleAppearance(newVal: SubtitleSettingsState['subtitleAppearance']) {
+    this._state.subtitleAppearance = newVal;
+  }
+
+  public get subtitleAppearance(): SubtitleSettingsState['subtitleAppearance'] {
+    return this._state.subtitleAppearance;
+  }
+
+  private readonly _updateSubtitleFontFamily = (): void => {
+    this.subtitleAppearance.fontFamily
+        = this.subtitleAppearance.fontFamily === 'auto'
+        ? this._bodyFont.currentFont.value
+        : this.subtitleAppearance.fontFamily;
+  };
+
+  public constructor() {
+    super('subtitleSettings', {
+      subtitleAppearance: {
+        fontFamily: 'auto',
+        fontSize: 1.5,
+        positionFromBottom: 10,
+        backdrop: true,
+        stroke: false
+      }
+    }, 'localStorage');
+
+    /**
+     * == WATCHERS ==
+     */
+
+    /**
+     * Font family changes
+     */
+    watchImmediate(this._bodyFont.currentFont, this._updateSubtitleFontFamily);
+
+    watch(
+      () => remote.auth.currentUser,
+      () => {
+        if (!remote.auth.currentUser) {
+          this._reset();
+        }
+      }, { flush: 'post' }
+    );
+  }
+}
+
+export default new SubtitleSettingsStore();

frontend/tsconfig.json

@@ -20,6 +20,7 @@
     "verbatimModuleSyntax": true,
     "incremental": true,
     "tsBuildInfoFile": "../node_modules/.cache/tsconfig.tsbuildinfo",
+    "allowImportingTsExtensions": true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]