move play queue server side

tamland · Oct 21, 2024 · b94c447 · b94c447
1 parent f5709b9
commit b94c447
Show file tree

Hide file tree

Showing 6 changed files with 357 additions and 278 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -50,6 +50,7 @@ watch(
       return Promise.all([
         useFavouriteStore().load(),
         usePlaylistStore().load(),
+        playerStore.dispatch('player/loadQueue'),
       ])
     }
   })

diff --git a/src/player/Player.vue b/src/player/Player.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="{'visible': visible}" class="player elevated d-flex">
+  <div :class="{'visible': track}" class="player elevated d-flex">
     <div class="flex-fill">
       <ProgressBar v-if="track" style="margin-bottom: -5px; margin-top: -9px" />
 
@@ -145,9 +145,6 @@
       }
     },
     computed: {
-      visible() {
-        return this.$store.state.player.queue.length > 0
-      },
       isPlaying() {
         return this.$store.state.player.isPlaying
       },

diff --git a/src/player/Queue.vue b/src/player/Queue.vue
@@ -13,38 +13,40 @@
         </b-button>
       </div>
     </div>
-    <BaseTable v-if="tracks.length > 0">
-      <BaseTableHead>
-        <th class="text-left d-none d-lg-table-cell">
-          Artist
-        </th>
-        <th class="text-left d-none d-md-table-cell">
-          Album
-        </th>
-        <th class="text-right d-none d-md-table-cell">
-          Duration
-        </th>
-      </BaseTableHead>
-      <tbody>
-        <tr v-for="(item, index) in tracks" :key="index"
-            :class="{'active': index === queueIndex}"
-            :draggable="true" @dragstart="dragstart(item.id, $event)"
-            @click="play(index)">
-          <CellTrackNumber :active="index === queueIndex && isPlaying" :value="item.track" />
-          <CellTitle :track="item" />
-          <CellArtist :track="item" />
-          <CellAlbum :track="item" />
-          <CellDuration :track="item" />
-          <CellActions :track="item">
-            <b-dropdown-divider />
-            <ContextMenuItem icon="x" variant="danger" @click="remove(index)">
-              Remove
-            </ContextMenuItem>
-          </CellActions>
-        </tr>
-      </tbody>
-    </BaseTable>
-    <EmptyIndicator v-else />
+    <ContentLoader v-slot :loading="loading">
+      <BaseTable v-if="tracks.length > 0">
+        <BaseTableHead>
+          <th class="text-left d-none d-lg-table-cell">
+            Artist
+          </th>
+          <th class="text-left d-none d-md-table-cell">
+            Album
+          </th>
+          <th class="text-right d-none d-md-table-cell">
+            Duration
+          </th>
+        </BaseTableHead>
+        <tbody>
+          <tr v-for="(item, index) in tracks" :key="index"
+              :class="{'active': index === queueIndex}"
+              :draggable="true" @dragstart="dragstart(item.id, $event)"
+              @click="play(index)">
+            <CellTrackNumber :active="index === queueIndex && isPlaying" :value="item.track" />
+            <CellTitle :track="item" />
+            <CellArtist :track="item" />
+            <CellAlbum :track="item" />
+            <CellDuration :track="item" />
+            <CellActions :track="item">
+              <b-dropdown-divider />
+              <ContextMenuItem icon="x" variant="danger" @click="remove(index)">
+                Remove
+              </ContextMenuItem>
+            </CellActions>
+          </tr>
+        </tbody>
+      </BaseTable>
+      <EmptyIndicator v-else />
+    </ContentLoader>
   </div>
 </template>
 <script lang="ts">
@@ -70,6 +72,9 @@
       BaseTable,
     },
     computed: {
+      loading() {
+        return this.$store.state.player.queue === null
+      },
       isPlaying() {
         return this.$store.getters['player/isPlaying']
       },