perf&fix: some arrays to sets, defaulting state

frontend/src/plugins/remote/auth.ts

@@ -333,14 +333,14 @@ class RemotePluginAuth extends CommonStore<AuthState> {
   };
 
   public constructor() {
-    super('auth', {
+    super('auth', () => ({
       servers: [],
       currentServerIndex: -1,
       currentUserIndex: -1,
       users: [],
       rememberMe: true,
       accessTokens: {}
-    }, 'localStorage');
+    }), 'localStorage');
     void this.refreshCurrentUserInfo();
     void this._refreshServers();
   }

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

@@ -81,11 +81,11 @@ class ClientSettingsStore extends SyncedStore<ClientSettingsState> {
   };
 
   public constructor() {
-    super('clientSettings', {
+    super('clientSettings', () => ({
       typography: 'default',
       darkMode: 'auto',
       locale: 'auto'
-    }, 'localStorage');
+    }), 'localStorage');
     /**
      * == WATCHERS ==
      */

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

@@ -34,20 +34,20 @@ class SubtitleSettingsStore extends SyncedStore<SubtitleSettingsState> {
   public state = this._state;
 
   public constructor() {
-    super('subtitleSettings', {
+    super('subtitleSettings', () => ({
       enabled: false,
       fontFamily: 'auto',
       fontSize: 1.5,
       positionFromBottom: 10,
       backdrop: true,
       stroke: false
-    }, 'localStorage', [
+    }), 'localStorage', new Set([
       'enabled',
       'fontSize',
       'positionFromBottom',
       'backdrop',
       'stroke'
-    ]);
+    ]));
 
     /**
      * == WATCHERS ==

frontend/src/store/playback-manager.ts

@@ -1013,7 +1013,7 @@ class PlaybackManagerStore extends CommonStore<PlaybackManagerState> {
   };
 
   public constructor() {
-    super('playbackManager', {
+    super('playbackManager', () => ({
       status: PlaybackStatus.Stopped,
       currentSourceUrl: undefined,
       currentItemIndex: undefined,
@@ -1034,7 +1034,7 @@ class PlaybackManagerStore extends CommonStore<PlaybackManagerState> {
       playbackInitiator: undefined,
       playbackInitMode: InitMode.Unknown,
       playbackSpeed: 1
-    });
+    }));
     /**
      * Logic is divided by concerns and scope. Watchers for callbacks
      * that rely on the same variables might not be together. Categories:

frontend/src/store/player-element.ts

@@ -334,10 +334,10 @@ class PlayerElementStore extends CommonStore<PlayerElementState> {
   };
 
   public constructor() {
-    super('playerElement', {
+    super('playerElement', () => ({
       isStretched: false,
       currentExternalSubtitleTrack: undefined
-    });
+    }));
 
     /**
      * * Move user to the fullscreen page when starting video playback by default

frontend/src/store/super/common-store.ts

@@ -15,12 +15,12 @@ export abstract class CommonStore<T extends object> {
   }
 
   protected readonly _reset = (): void => {
-    Object.assign(this._state, this._defaultState);
+    Object.assign(this._state, this._defaultState());
   };
 
-  protected constructor(storeKey: string, defaultState: T, persistence?: Persistence) {
+  protected constructor(storeKey: string, defaultState: () => T, persistence?: Persistence) {
     this._storeKey = storeKey;
-    this._defaultState = () => defaultState;
+    this._defaultState = defaultState;
 
     let storage;
 

frontend/src/store/super/synced-store.ts

@@ -12,7 +12,7 @@ import { i18n } from '@/plugins/i18n';
 
 export abstract class SyncedStore<T extends object> extends CommonStore<T> {
   private readonly _clientSyncName = 'vue';
-  private readonly _syncedKeys: (keyof T)[] = [];
+  private readonly _syncedKeys: Set<(keyof T)>;
   private readonly _effectScope = new EffectScope();
   /**
    * Serializes custom pref values for storage as string
@@ -130,27 +130,19 @@ export abstract class SyncedStore<T extends object> extends CommonStore<T> {
    *
    * @param keys - The keys to be synced with the server. If not provided, all keys will be synced
    */
-  protected constructor(storeKey: string, defaultState: T, persistence?: Persistence, keys?: (keyof T)[]) {
+  protected constructor(storeKey: string, defaultState: () => T, persistence?: Persistence, keys?: Set<(keyof T)>) {
     super(storeKey, defaultState, persistence);
-    this._syncedKeys = keys ?? [];
+    this._syncedKeys = keys ?? new Set(Object.keys(defaultState()) as (keyof T)[]);
 
-    if (!this._syncedKeys.length) {
+    this._effectScope.run(() => {
-      for (const key in defaultState) {
+      if (keys?.size) {
-        this._syncedKeys.push(key);
+        for (const key of keys) {
-      }
-    }
-
-    if (keys?.length) {
-      for (const key of keys) {
-        this._effectScope.run(() => {
           watchDeep(() => this._state[key], this._updateState);
-        });
+        }
-      }
+      } else {
-    } else {
-      this._effectScope.run(() => {
         watchDeep(() => this._state, this._updateState);
-      });
+      }
-    }
+    });
 
     /**
      * Trigger sync when the user logs in

frontend/src/store/task-manager.ts

@@ -106,10 +106,10 @@ class TaskManagerStore extends CommonStore<TaskManagerState> {
   };
 
   public constructor() {
-    super('taskManager', {
+    super('taskManager', () => ({
       tasks: [],
       finishedTasksTimeout: 5000
-    }, 'sessionStorage');
+    }), 'sessionStorage');
 
     /**
      * Handle refresh progress update for library items