From 74b488ad0f00235642cfb987b775da1af5adfb9c Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Fri, 3 Nov 2023 13:00:45 -0500
Subject: [PATCH] Update playlist table design to include progress bar on items
 #914

---
 components/tables/playlist/ItemTableRow.vue   | 57 ++++++++++---------
 .../tables/playlist/PlaylistItemsTable.vue    |  6 +-
 pages/playlist/_id.vue                        |  8 +--
 3 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/components/tables/playlist/ItemTableRow.vue b/components/tables/playlist/ItemTableRow.vue
index 2e054442..c2a46e7b 100644
--- a/components/tables/playlist/ItemTableRow.vue
+++ b/components/tables/playlist/ItemTableRow.vue
@@ -1,22 +1,25 @@
 <template>
-  <div class="w-full px-2 py-2 overflow-hidden relative">
-    <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" />
-      </div>
-      <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 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" />
         </div>
-      </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 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="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 {
-      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: {
diff --git a/components/tables/playlist/PlaylistItemsTable.vue b/components/tables/playlist/PlaylistItemsTable.vue
index 9a2d5ce0..292fe270 100644
--- a/components/tables/playlist/PlaylistItemsTable.vue
+++ b/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>
diff --git a/pages/playlist/_id.vue b/pages/playlist/_id.vue
index ac076773..b6623fca 100644
--- a/pages/playlist/_id.vue
+++ b/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>