Update playlist table design to include progress bar on items #914

components/tables/playlist/ItemTableRow.vue

@@ -1,22 +1,25 @@
 <template>
-  <div class="w-full px-2 py-2 overflow-hidden relative">
+  <div class="w-full px-1.5 pb-1.5">
-    <nuxt-link v-if="libraryItem" :to="`/item/${libraryItem.id}`" class="flex items-center w-full">
+    <div class="w-full h-full p-2 rounded-lg relative bg-bg overflow-hidden">
-      <div class="h-full relative" :style="{ width: '50px' }">
+      <nuxt-link v-if="libraryItem" :to="`/item/${libraryItem.id}`" class="flex items-center w-full">
-        <covers-book-cover :library-item="libraryItem" :width="50" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        <div class="h-full relative" :style="{ width: '50px' }">
-      </div>
+          <covers-book-cover :library-item="libraryItem" :width="50" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-      <div class="item-table-content h-full px-2 flex items-center">
-        <div class="max-w-full">
-          <p class="truncate block text-sm">{{ itemTitle }} <span v-if="localLibraryItem" class="material-icons text-success text-base align-text-bottom">download_done</span></p>
-          <p v-if="authorName" class="truncate block text-gray-300 text-xs">{{ authorName }}</p>
-          <p class="text-xxs text-gray-400">{{ itemDuration }}</p>
         </div>
-      </div>
+        <div class="item-table-content h-full px-2 flex items-center">
-      <div class="w-8 min-w-8 flex justify-center">
+          <div class="max-w-full">
-        <button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white border-opacity-20 flex items-center justify-center" @click.stop.prevent="playClick">
+            <p class="truncate block text-sm">{{ itemTitle }} <span v-if="localLibraryItem" class="material-icons text-success text-base align-text-bottom">download_done</span></p>
-          <span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+            <p v-if="authorName" class="truncate block text-gray-300 text-xs">{{ authorName }}</p>
-        </button>
+            <p class="text-xxs text-gray-400">{{ itemDuration }}</p>
-      </div>
+          </div>
-    </nuxt-link>
+        </div>
+        <div class="w-8 min-w-8 flex justify-center">
+          <button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white border-opacity-20 flex items-center justify-center" @click.stop.prevent="playClick">
+            <span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+          </button>
+        </div>
+      </nuxt-link>
+      <div v-if="!isPodcast" class="absolute bottom-0 left-0 h-0.5 shadow-sm z-10" :class="userIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: progressPercent * 100 + '%' }"></div>
+    </div>
   </div>
 </template>
 
@@ -30,10 +33,7 @@ export default {
     }
   },
   data() {
-    return {
+    return {}
-      isProcessingReadUpdate: false,
-      processingRemove: false
-    }
   },
   computed: {
     libraryItem() {
@@ -92,12 +92,6 @@ export default {
     coverWidth() {
       return 50
     },
-    isMissing() {
-      return this.libraryItem.isMissing
-    },
-    isInvalid() {
-      return this.libraryItem.isInvalid
-    },
     showPlayBtn() {
       return !this.isMissing && !this.isInvalid && (this.tracks.length || this.episode)
     },
@@ -107,6 +101,15 @@ export default {
     },
     streamIsPlaying() {
       return this.$store.state.playerIsPlaying && this.isStreaming
+    },
+    userItemProgress() {
+      return this.$store.getters['user/getUserMediaProgress'](this.libraryItem.id, this.episodeId)
+    },
+    userIsFinished() {
+      return !!this.userItemProgress?.isFinished
+    },
+    progressPercent() {
+      return this.userItemProgress ? Math.max(Math.min(1, this.userItemProgress.progress), 0) : 0
     }
   },
   methods: {

components/tables/playlist/PlaylistItemsTable.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="w-full bg-primary bg-opacity-40">
+  <div class="w-full bg-primary/50 rounded-lg">
-    <div class="w-full h-14 flex items-center px-4 bg-primary">
+    <div class="w-full h-14 flex items-center px-3">
-      <p class="pr-4">Playlist Items</p>
+      <p class="pr-2">Playlist Items</p>
 
       <div class="w-6 h-6 md:w-7 md:h-7 bg-white bg-opacity-10 rounded-full flex items-center justify-center">
         <span class="text-xs md:text-sm font-mono leading-none">{{ items.length }}</span>

pages/playlist/_id.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="w-full h-full">
-    <div class="w-full h-full overflow-y-auto px-2 py-6 md:p-8">
+    <div class="w-full h-full overflow-y-auto py-6 md:p-8">
       <div class="w-full flex justify-center">
         <covers-playlist-cover :items="playlistItems" :width="180" :height="180" />
       </div>
-      <div class="flex-grow py-6">
+      <div class="flex-grow px-1 py-6">
-        <div class="flex items-center px-2">
+        <div class="flex items-center px-3">
           <h1 class="text-xl font-sans">
             {{ playlistName }}
           </h1>
@@ -16,7 +16,7 @@
           </ui-btn>
         </div>
 
-        <div class="my-8 max-w-2xl px-2">
+        <div class="my-8 max-w-2xl px-3">
           <p class="text-base text-gray-100">{{ description }}</p>
         </div>