From c046f9ee98093a6f30b983b7a494690b44093de4 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Tue, 15 Feb 2022 14:38:06 -0600
Subject: [PATCH] Add:Edit button and play button on audiobook landing page
 cover #360, Fix:Playback rate controller sending change events

---
 client/components/cards/LazyBookCard.vue        |  4 ++--
 .../controls/PlaybackSpeedControl.vue           |  4 +++-
 client/pages/audiobook/_id/index.vue            | 17 +++++++++++++++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue
index be0a2a9a..1ee3d4a3 100644
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -39,13 +39,13 @@
     <!-- Overlay is not shown if collapsing series in library -->
     <div v-show="!booksInSeries && audiobook && (isHovering || isSelectionMode || isMoreMenuOpen)" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded hidden md:block" :class="overlayWrapperClasslist">
       <div v-show="showPlayButton" class="h-full flex items-center justify-center pointer-events-none">
-        <div class="hover:text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="play">
+        <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="play">
           <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
         </div>
       </div>
 
       <div v-show="showReadButton" class="h-full flex items-center justify-center pointer-events-none">
-        <div class="hover:text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="clickReadEBook">
+        <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="clickReadEBook">
           <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">auto_stories</span>
         </div>
       </div>
diff --git a/client/components/controls/PlaybackSpeedControl.vue b/client/components/controls/PlaybackSpeedControl.vue
index bfa1a282..4494f5de 100644
--- a/client/components/controls/PlaybackSpeedControl.vue
+++ b/client/components/controls/PlaybackSpeedControl.vue
@@ -89,6 +89,8 @@ export default {
       this.showMenu = val
     }
   },
-  mounted() {}
+  mounted() {
+    this.currentPlaybackRate = this.playbackRate
+  }
 }
 </script>
\ No newline at end of file
diff --git a/client/pages/audiobook/_id/index.vue b/client/pages/audiobook/_id/index.vue
index 0fc3c8bb..8264d80f 100644
--- a/client/pages/audiobook/_id/index.vue
+++ b/client/pages/audiobook/_id/index.vue
@@ -5,7 +5,20 @@
         <div class="w-full flex justify-center md:block md:w-52" style="min-width: 208px">
           <div class="relative" style="height: fit-content">
             <covers-book-cover :audiobook="audiobook" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+
+            <!-- Book Progress Bar -->
             <div class="absolute bottom-0 left-0 h-1.5 bg-yellow-400 shadow-sm z-10" :class="userIsRead ? 'bg-success' : 'bg-yellow-400'" :style="{ width: 208 * progressPercent + 'px' }"></div>
+
+            <!-- Book Cover Overlay -->
+            <div class="absolute top-0 left-0 w-full h-full z-10 bg-black bg-opacity-30 opacity-0 hover:opacity-100 transition-opacity" @mousedown.prevent @mouseup.prevent>
+              <div v-show="showPlayButton && !streaming" class="h-full flex items-center justify-center pointer-events-none">
+                <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto cursor-pointer" @click.stop.prevent="startStream">
+                  <span class="material-icons text-4xl">play_circle_filled</span>
+                </div>
+              </div>
+
+              <span class="absolute bottom-2.5 right-2.5 z-10 material-icons text-lg cursor-pointer text-white text-opacity-75 hover:text-opacity-100 hover:scale-110 transform duration-200" @click="showEditCover">edit</span>
+            </div>
           </div>
         </div>
         <div class="flex-grow px-2 py-6 md:py-0 md:px-10">
@@ -378,6 +391,10 @@ export default {
     }
   },
   methods: {
+    showEditCover() {
+      this.$store.commit('setBookshelfBookIds', [])
+      this.$store.commit('showEditModalOnTab', { audiobook: this.audiobook, tab: 'cover' })
+    },
     openEbook() {
       this.$store.commit('showEReader', this.audiobook)
     },