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

components/tables/playlist/ItemTableRow.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="w-full px-2 py-2 overflow-hidden relative">
+  <div class="w-full px-1.5 pb-1.5">
+    <div class="w-full h-full p-2 rounded-lg relative bg-bg overflow-hidden">
       <nuxt-link v-if="libraryItem" :to="`/item/${libraryItem.id}`" class="flex items-center w-full">
         <div class="h-full relative" :style="{ width: '50px' }">
           <covers-book-cover :library-item="libraryItem" :width="50" :book-cover-aspect-ratio="bookCoverAspectRatio" />
@@ -17,6 +18,8 @@
           </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 {
-      isProcessingReadUpdate: false,
-      processingRemove: false
-    }
+    return {}
   },
   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 h-14 flex items-center px-4 bg-primary">
-      <p class="pr-4">Playlist Items</p>
+  <div class="w-full bg-primary/50 rounded-lg">
+    <div class="w-full h-14 flex items-center px-3">
+      <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 items-center px-2">
+      <div class="flex-grow px-1 py-6">
+        <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>