From 2f3a9a5d969a22bdd11d3a8043f3fd0e829236fc Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 5 Jul 2025 18:06:24 -0500
Subject: [PATCH] Update play button on list book to check if player is
 starting

---
 components/cards/LazyListBookCard.vue | 21 ++++++++++++++++++---
 components/readers/Reader.vue         |  1 +
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/components/cards/LazyListBookCard.vue b/components/cards/LazyListBookCard.vue
index 7453f524..f58f507f 100644
--- a/components/cards/LazyListBookCard.vue
+++ b/components/cards/LazyListBookCard.vue
@@ -30,8 +30,13 @@
         </p>
       </div>
       <div v-if="showPlayButton" class="absolute top-0 bottom-0 right-0 h-full flex items-center justify-center z-20 pr-1">
-        <button type="button" class="p-2 rounded-full bg-fg-muted/50" @click.stop.prevent="play">
-          <span class="material-symbols text-2xl fill text-white">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
+        <button type="button" class="relative rounded-full bg-fg-muted/50" :class="{ 'p-2': !playerIsStartingForThisMedia }" @click.stop.prevent="play">
+          <span v-if="!playerIsStartingForThisMedia" class="material-symbols text-2xl fill text-white">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
+          <div v-else class="p-2 text-fg w-10 h-10 flex items-center justify-center bg-fg-muted/80 rounded-full overflow-hidden">
+            <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
+            </svg>
+          </div>
         </button>
       </div>
 
@@ -234,6 +239,14 @@ export default {
     playerIsPlaying() {
       return this.store.state.playerIsPlaying && (this.isStreaming || this.isPlaying)
     },
+    playerIsStartingPlayback() {
+      // Play has been pressed and waiting for native play response
+      return this.store.state.playerIsStartingPlayback
+    },
+    playerIsStartingForThisMedia() {
+      const mediaId = this.store.state.playerStartingPlaybackMediaId
+      return mediaId === this.libraryItemId
+    },
     isCasting() {
       return this.store.state.isCasting
     },
@@ -312,6 +325,8 @@ export default {
       this.$emit('select', this.libraryItem)
     },
     async play() {
+      if (this.playerIsStartingPlayback) return
+
       const hapticsImpact = this.$hapticsImpact || this.$nuxt.$hapticsImpact
       if (hapticsImpact) {
         await hapticsImpact()
@@ -332,7 +347,7 @@ export default {
           libraryItemId = this.localLibraryItem.id
         }
 
-        this.store.commit('setPlayerIsStartingPlayback', libraryItemId)
+        this.store.commit('setPlayerIsStartingPlayback', this.libraryItemId)
         eventBus.$emit('play-item', { libraryItemId, serverLibraryItemId: this.libraryItemId })
       }
     },
diff --git a/components/readers/Reader.vue b/components/readers/Reader.vue
index 137457a4..b1318617 100644
--- a/components/readers/Reader.vue
+++ b/components/readers/Reader.vue
@@ -260,6 +260,7 @@ export default {
       return null
     },
     ebookFile() {
+      if (!this.media) return null
       // ebook file id is passed when reading a supplementary ebook
       if (this.ebookFileId) {
         return this.selectedLibraryItem.libraryFiles.find((lf) => lf.ino === this.ebookFileId)