refactor: use generator function for generic worker, computeds in stores, simplifications

frontend/src/components/Buttons/FilterButton.vue

@@ -286,7 +286,7 @@ async function refreshItems(): Promise<void> {
   try {
     const response = (
       await remote.sdk.newUserApi(getFilterApi).getQueryFiltersLegacy({
-        userId: remote.auth.currentUserId,
+        userId: remote.auth.currentUserId.value,
         parentId: item.Id,
         includeItemTypes: [item.Type]
       })

frontend/src/components/Buttons/Playback/NextTrackButton.vue

@@ -2,7 +2,7 @@
   <VBtn
     v-bind="$attrs"
     icon
-    :disabled="!playbackManager.nextItem"
+    :disabled="!playbackManager.nextItem.value"
     @click="playbackManager.setNextItem">
     <VIcon v-bind="$attrs">
       <IMdiSkipNext />

frontend/src/components/Buttons/Playback/PlayPauseButton.vue

@@ -2,7 +2,7 @@
   <VBtn
     v-bind="$attrs"
     icon
-    :loading="playbackManager.isBuffering"
+    :loading="playbackManager.isBuffering.value"
     @click="playbackManager.playPause">
     <VIcon
       v-bind="$attrs"
@@ -18,9 +18,9 @@ import { computed } from 'vue';
 import { PlaybackStatus, playbackManager } from '@/store/playback-manager';
 
 const playPauseIcon = computed(() => {
-  if (playbackManager.isPaused) {
+  if (playbackManager.isPaused.value) {
     return IMdiPlayCircleOutline;
-  } else if (playbackManager.status === PlaybackStatus.Error) {
+  } else if (playbackManager.status.value === PlaybackStatus.Error) {
     return IMdiExclamation;
   }
 

frontend/src/components/Buttons/Playback/PlaybackSettingsButton.vue

@@ -32,11 +32,11 @@
             </VCol>
             <VCol :cols="8">
               <MediaStreamSelector
-                v-if="playbackManager.currentItemAudioTracks"
-                :media-streams="playbackManager.currentItemAudioTracks"
+                v-if="playbackManager.currentItemAudioTracks.value"
+                :media-streams="playbackManager.currentItemAudioTracks.value"
                 type="Audio"
-                :default-stream-index="playbackManager.currentAudioStreamIndex"
-                @input="playbackManager.currentAudioStreamIndex = $event" />
+                :default-stream-index="playbackManager.currentAudioTrack.value?.Index"
+                @input="playbackManager.currentAudioTrack.value = $event ?? -1" />
             </VCol>
           </VRow>
           <VRow
@@ -47,13 +47,13 @@
             </VCol>
             <VCol :cols="8">
               <MediaStreamSelector
-                v-if="playbackManager.currentItemSubtitleTracks"
-                :media-streams="playbackManager.currentItemSubtitleTracks"
+                v-if="playbackManager.currentItemSubtitleTracks.value"
+                :media-streams="playbackManager.currentItemSubtitleTracks.value"
                 type="Subtitle"
                 :default-stream-index="
-                  playbackManager.currentSubtitleStreamIndex
+                  playbackManager.currentSubtitleTrack.value?.Index
                 "
-                @input="playbackManager.currentSubtitleStreamIndex = $event" />
+                @input="playbackManager.currentSubtitleTrack.value = $event ?? -1" />
             </VCol>
           </VRow>
           <VRow align="center">
@@ -80,7 +80,7 @@
               :cols="8"
               class="text-right">
               <VSwitch
-                v-model="playerElement.isStretched.value"
+                v-model="playerElement.state.value.isStretched"
                 color="primary"
                 hide-details />
             </VCol>
@@ -110,11 +110,11 @@
 
 const _playbackSpeed = shallowRef<PlaybackSpeedValue>();
 const playbackSpeed = computed({
   get: () => {
-    const playbackSpeedIndex = defaultPlaybackSpeeds.indexOf(playbackManager.playbackSpeed);
+    const playbackSpeedIndex = defaultPlaybackSpeeds.indexOf(playbackManager.playbackSpeed.value);
 
     if (isUndef(_playbackSpeed.value)) {
-      return playbackSpeedIndex === -1 ? String(playbackManager.playbackSpeed) : playbackItems.value[playbackSpeedIndex];
+      return playbackSpeedIndex === -1 ? String(playbackManager.playbackSpeed.value) : playbackItems.value[playbackSpeedIndex];
     } else {
       return _playbackSpeed.value;
     }
@@ -123,7 +123,7 @@
     _playbackSpeed.value = val;
 
     if (validationRules.every(rule => rule(val) === true)) {
-      playbackManager.playbackSpeed = isObj(val) ? val.speed : Number(val);
+      playbackManager.playbackSpeed.value = isObj(val) ? val.speed : Number(val);
     }
   }
 });
@@ -148,7 +148,7 @@
  */
 function onFocus(e: boolean): void {
   if (!e) {
-    const playbackSpeedIndex = defaultPlaybackSpeeds.indexOf(playbackManager.playbackSpeed);
+    const playbackSpeedIndex = defaultPlaybackSpeeds.indexOf(playbackManager.playbackSpeed.value);
 
     if (playbackSpeedIndex !== -1) {
       _playbackSpeed.value = playbackItems.value[playbackSpeedIndex];

frontend/src/components/Buttons/Playback/RepeatButton.vue

@@ -2,7 +2,7 @@
   <VBtn
     v-bind="$attrs"
     icon
-    :color="playbackManager.isRepeating ? 'primary' : undefined"
+    :color="playbackManager.isRepeating.value ? 'primary' : undefined"
     @click="playbackManager.toggleRepeatMode">
     <VIcon
       v-bind="$attrs"
@@ -17,7 +17,7 @@ import { computed } from 'vue';
 import { RepeatMode, playbackManager } from '@/store/playback-manager';
 
 const repeatIcon = computed(() =>
-  playbackManager.repeatMode === RepeatMode.RepeatOne
+  playbackManager.repeatMode.value === RepeatMode.RepeatOne
     ? IMdiRepeatOnce
     : IMdiRepeat
 );

frontend/src/components/Buttons/Playback/ShuffleButton.vue

@@ -2,7 +2,7 @@
   <VBtn
     v-bind="$attrs"
     icon
-    :color="playbackManager.isShuffling ? 'primary' : undefined"
+    :color="playbackManager.isShuffling.value ? 'primary' : undefined"
     @click="playbackManager.toggleShuffle">
     <VIcon v-bind="$attrs">
       <IMdiShuffle />

frontend/src/components/Buttons/QueueButton.vue

@@ -20,18 +20,18 @@
             <template #prepend>
               <VAvatar>
                 <BlurhashImage
-                  v-if="playbackManager.initiator"
-                  :item="playbackManager.initiator" />
+                  v-if="playbackManager.initiator.value"
+                  :item="playbackManager.initiator.value" />
                 <VIcon
                   v-else
                   :icon="modeIcon" />
               </VAvatar>
             </template>
             <template #subtitle>
-              {{ getTotalEndsAtTime(playbackManager.queue) }} -
+              {{ getTotalEndsAtTime(playbackManager.queue.value) }} -
               {{
                 $t('queueItems', {
-                  items: playbackManager.queue.length
+                  items: playbackManager.queueLength.value
                 })
               }}
             </template>
@@ -91,42 +91,38 @@
 
 const sourceText = computed(() => {
   /**
    * TODO: Properly refactor this once search and other missing features are implemented, as discussed in
    * https://github.com/jellyfin/jellyfin-vue/pull/609
    */
   const unknownSource = t('unknown');
+  const isFromAlbum = playbackManager.currentItem.value?.AlbumId
+    === playbackManager.initiator.value?.Id;
+  const substitution = {
+    item: playbackManager.initiator.value?.Name
+  };
 
-  switch (playbackManager.playbackInitMode) {
+  switch (playbackManager.playbackInitMode.value) {
     case InitMode.Unknown: {
       return unknownSource;
     }
     case InitMode.Item: {
-      return playbackManager.currentItem?.AlbumId
-        === playbackManager.initiator?.Id
-        ? t('playingFrom', {
-            item: playbackManager.initiator?.Name
-          })
+      return isFromAlbum
+        ? t('playingFrom', substitution)
         : unknownSource;
     }
     case InitMode.Shuffle: {
       return t('playinginShuffle');
     }
     case InitMode.ShuffleItem: {
-      return playbackManager.currentItem?.AlbumId
-        === playbackManager.initiator?.Id
-        ? t('playingItemInShuffle', {
-            item: playbackManager.initiator?.Name
-          })
+      return isFromAlbum
+        ? t('playingItemInShuffle', substitution)
         : unknownSource;
     }
-    default: {
-      return '';
-    }
   }
 });
 
 const modeIcon = computed(() =>
-  playbackManager.playbackInitMode === InitMode.Shuffle
+  playbackManager.playbackInitMode.value === InitMode.Shuffle
     ? IMdiShuffle
     : IMdiPlaylistMusic
 );

frontend/src/components/Buttons/SubtitleSelectionButton.vue

@@ -3,11 +3,11 @@
     icon
     class="align-self-center"
     :disabled="
-      !playbackManager.currentItemParsedSubtitleTracks ||
-        playbackManager.currentItemParsedSubtitleTracks.length === 0
+      !playerElement.currentItemParsedSubtitleTracks.value ||
+        playerElement.currentItemParsedSubtitleTracks.value.length === 0
     ">
     <VIcon>
-      <IMdiClosedCaption v-if="playbackManager.currentSubtitleTrack" />
+      <IMdiClosedCaption v-if="playbackManager.currentSubtitleTrack.value" />
       <IMdiClosedCaptionOutline v-else />
     </VIcon>
     <VTooltip
@@ -23,13 +23,13 @@
           v-for="track of tracks"
           :key="track.srcIndex"
           :append-icon="
-            track.srcIndex === playbackManager.currentSubtitleStreamIndex
+            track.srcIndex === playbackManager.currentSubtitleTrack.value?.Index
               ? IMdiCheck
               : undefined
           "
           :title="track.label"
           @click="
-            playbackManager.currentSubtitleStreamIndex = track.srcIndex
+            playbackManager.currentSubtitleTrack.value = track.srcIndex
           " />
       </VList>
     </VMenu>
@@ -42,18 +42,19 @@ import IMdiCheck from 'virtual:icons/mdi/check';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { playbackManager } from '@/store/playback-manager';
+import { playerElement } from '@/store/player-element';
 
 const menuModel = defineModel<boolean>();
 
 const { t } = useI18n();
 
 const tracks = computed(() => {
-  const subs = playbackManager.currentItemParsedSubtitleTracks;
+  const subs = playerElement.currentItemParsedSubtitleTracks.value;
 
   return [
     {
       label: t('disabled'),
-      srcIndex: undefined,
+      srcIndex: -1,
       type: SubtitleDeliveryMethod.External
     },
     ...(subs ?? [])

frontend/src/components/Forms/AddServerForm.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import { shallowRef, unref } from 'vue';
+import { shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { remote } from '@/plugins/remote';
@@ -53,7 +53,7 @@ import { jsonConfig } from '@/utils/external-config';
 const router = useRouter();
 const i18n = useI18n();
 const valid = shallowRef(false);
-const previousServerLength = unref(remote.auth.servers.length);
+const previousServerLength = remote.auth.addedServers.value;
 const serverUrl = shallowRef('');
 const loading = shallowRef(false);
 

frontend/src/components/Forms/LoginForm.vue

@@ -8,8 +8,9 @@
         v-if="!user"
         v-model="login.username"
         variant="outlined"
-        autofocus
+
         hide-details
+        autofocus
         :label="$t('username')"
         :rules="rules" />
       <VTextField
@@ -41,7 +42,7 @@
             {{ $t('changeServer') }}
           </VBtn>
           <VBtn
-            v-else-if="remote.auth.currentServer?.PublicUsers.length"
+            v-else-if="remote.auth.currentServer.value?.PublicUsers.length"
             block
             size="large"
             variant="elevated"

frontend/src/components/Item/Card/ItemCard.vue

@@ -110,7 +110,7 @@
  * or the episode name of an item (SX EY - Episode Name)
  * or the album artist
  */
 const cardSubtitle = computed(() => {
   switch (item.Type) {
     case BaseItemKind.Episode: {
       return !isNil(item.ParentIndexNumber) && !isNil(item.IndexNumber) && !isNil(item.Name)
@@ -187,6 +187,6 @@
  * Gets the library update progress
  */
 const refreshProgress = computed(
-  () => taskManager.getTask(item.Id || '')?.progress
+  () => taskManager.getTask(item.Id ?? '')?.progress
 );
 </script>

frontend/src/components/Item/Identify/IdentifyDialog.vue

@@ -145,7 +145,7 @@
     }
   ];
 
-  if (!['BoxSet', 'Person'].includes(item.Type || '')) {
+  if (!['BoxSet', 'Person'].includes(item.Type ?? '')) {
     result.push({
       key: 'search-year',
       title: t('year'),
@@ -189,7 +189,7 @@
   return result;
 });
 /**
  * TODO: Refactor to remove this use of structuredClone
  */
 const fieldsInputs = ref<IdentifyField[]>(
   structuredClone(toRaw(searchFields.value))