Update:Add play button to collections and playlist table #666

components/app/AudioPlayerContainer.vue

@@ -214,6 +214,8 @@ export default {
         if (startTime !== undefined && startTime !== null) {
           // seek to start time
           AbsAudioPlayer.seek({ value: Math.floor(startTime) })
+        } else if (this.$refs.audioPlayer) {
+          this.$refs.audioPlayer.play()
         }
         return
       }

components/tables/collection/BookTableRow.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="w-full px-2 py-2 overflow-hidden relative">
-    <nuxt-link v-if="book" :to="`/item/${book.id}`" class="flex w-full">
+    <nuxt-link v-if="book" :to="`/item/${book.id}`" class="flex items-center w-full">
       <div class="h-full relative" :style="{ width: bookWidth + 'px' }">
         <covers-book-cover :library-item="book" :width="bookWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
       </div>
-      <div class="flex-grow book-table-content h-full px-2 flex items-center">
+      <div class="book-table-content h-full px-2 flex items-center">
         <div class="max-w-full">
           <p class="truncate block text-sm">{{ bookTitle }}</p>
           <p class="truncate block text-gray-400 text-xs">{{ bookAuthor }}</p>
           <p class="text-xxs text-gray-500">{{ bookDuration }}</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>
 </template>
@@ -31,6 +36,9 @@ export default {
     }
   },
   computed: {
+    libraryItemId() {
+      return this.book.id
+    },
     media() {
       return this.book.media || {}
     },
@@ -59,22 +67,29 @@ export default {
     isMissing() {
       return this.book.isMissing
     },
-    isIncomplete() {
+    isInvalid() {
-      return this.book.isIncomplete
+      return this.book.isInvalid
-    },
-    numTracks() {
-      return this.book.numTracks
-    },
-    isStreaming() {
-      return this.$store.getters['getIsItemStreaming'](this.book.id)
     },
     showPlayBtn() {
-      return !this.isMissing && !this.isIncomplete && !this.isStreaming && this.numTracks
+      return !this.isMissing && !this.isInvalid && this.tracks.length
+    },
+    isStreaming() {
+      return this.$store.getters['getIsEpisodeStreaming'](this.libraryItemId)
+    },
+    streamIsPlaying() {
+      return this.$store.state.playerIsPlaying && this.isStreaming
     }
   },
   methods: {
-    clickEdit() {
+    async playClick() {
-      this.$emit('edit', this.book)
+      await this.$hapticsImpact()
+      if (this.streamIsPlaying) {
+        this.$eventBus.$emit('pause-item')
+      } else {
+        this.$eventBus.$emit('play-item', {
+          libraryItemId: this.libraryItemId
+        })
+      }
     }
   },
   mounted() {}
@@ -83,7 +98,7 @@ export default {
 
 <style>
 .book-table-content {
-  width: calc(100% - 50px);
+  width: calc(100% - 82px);
-  max-width: calc(100% - 50px);
+  max-width: calc(100% - 82px);
 }
 </style>

components/tables/playlist/ItemTableRow.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="w-full px-2 py-2 overflow-hidden relative">
-    <nuxt-link v-if="libraryItem" :to="`/item/${libraryItem.id}`" class="flex w-full">
+    <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="flex-grow item-table-content h-full px-2 flex items-center">
+      <div class="item-table-content h-full px-2 flex items-center">
         <div class="max-w-full">
           <p class="truncate block text-sm">{{ itemTitle }}</p>
           <p class="truncate block text-gray-400 text-xs">{{ bookAuthorName }}</p>
           <p class="text-xxs text-gray-500">{{ 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>
 </template>
@@ -83,21 +88,36 @@ export default {
     isInvalid() {
       return this.libraryItem.isInvalid
     },
-    isStreaming() {
-      return this.$store.getters['getIsItemStreaming'](this.item.id)
-    },
     showPlayBtn() {
-      return !this.isMissing && !this.isInvalid && !this.isStreaming && (this.tracks.length || this.episode)
+      return !this.isMissing && !this.isInvalid && (this.tracks.length || this.episode)
+    },
+    isStreaming() {
+      return this.$store.getters['getIsEpisodeStreaming'](this.libraryItem.id, this.episodeId)
+    },
+    streamIsPlaying() {
+      return this.$store.state.playerIsPlaying && this.isStreaming
+    }
+  },
+  methods: {
+    async playClick() {
+      await this.$hapticsImpact()
+      if (this.streamIsPlaying) {
+        this.$eventBus.$emit('pause-item')
+      } else {
+        this.$eventBus.$emit('play-item', {
+          libraryItemId: this.libraryItem.id,
+          episodeId: this.episodeId
+        })
+      }
     }
   },
-  methods: {},
   mounted() {}
 }
 </script>
 
 <style>
 .item-table-content {
-  width: calc(100% - 50px);
+  width: calc(100% - 82px);
-  max-width: calc(100% - 50px);
+  max-width: calc(100% - 82px);
 }
 </style>