From 5482b30324d0639dc6b8a0708c153cb3af27bade Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Thu, 12 Jan 2023 17:04:47 -0600
Subject: [PATCH] Update:Play button color and increase cover size on item page

---
 components/app/AudioPlayer.vue | 14 ++++++++------
 pages/item/_id.vue             | 23 +++++++++++++++++++----
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue
index ba6186ff..25db5f55 100644
--- a/components/app/AudioPlayer.vue
+++ b/components/app/AudioPlayer.vue
@@ -41,8 +41,8 @@
     </div>
 
     <div class="title-author-texts absolute z-30 left-0 right-0 overflow-hidden" @click="clickTitleAndAuthor">
-      <p class="title-text font-book truncate">{{ title }}</p>
-      <p class="author-text text-white text-opacity-75 truncate">by {{ authorName }}</p>
+      <p class="title-text truncate">{{ title }}</p>
+      <p class="author-text text-white text-opacity-75 truncate">{{ authorName }}</p>
     </div>
 
     <div id="playerContent" class="playerContainer w-full z-20 absolute bottom-0 left-0 right-0 p-2 pointer-events-auto transition-all" :style="{ backgroundColor: showFullscreen ? '' : coverRgb }" @click="clickContainer">
@@ -69,8 +69,10 @@
         <div class="flex items-center justify-center">
           <span v-show="showFullscreen && !lockUi" class="material-icons next-icon text-white text-opacity-75 cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpChapterStart">first_page</span>
           <span v-show="!lockUi" class="material-icons jump-icon text-white cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpBackwards">{{ jumpBackwardsIcon }}</span>
-          <div class="play-btn cursor-pointer shadow-sm flex items-center justify-center rounded-full text-primary mx-4" :class="{ 'animate-spin': seekLoading, 'bg-accent': !isLocalPlayMethod, 'bg-success': isLocalPlayMethod }" @mousedown.prevent @mouseup.prevent @click.stop="playPauseClick">
-            <span v-if="!isLoading" class="material-icons">{{ seekLoading ? 'autorenew' : !isPlaying ? 'play_arrow' : 'pause' }}</span>
+          <div class="play-btn cursor-pointer shadow-sm flex items-center justify-center rounded-full text-primary mx-4 relative overflow-hidden" :style="{ backgroundColor: coverRgb }" :class="{ 'animate-spin': seekLoading }" @mousedown.prevent @mouseup.prevent @click.stop="playPauseClick">
+            <div v-if="!coverBgIsLight" class="absolute top-0 left-0 w-full h-full bg-white bg-opacity-15 pointer-events-none" />
+
+            <span v-if="!isLoading" class="material-icons" :class="{ 'text-white': coverRgb && !coverBgIsLight }">{{ seekLoading ? 'autorenew' : !isPlaying ? 'play_arrow' : 'pause' }}</span>
             <widgets-spinner-icon v-else class="h-8 w-8" />
           </div>
           <span v-show="!lockUi" class="material-icons jump-icon text-white cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpForward">{{ jumpForwardIcon }}</span>
@@ -959,10 +961,10 @@ export default {
   pointer-events: auto;
 }
 .fullscreen .title-author-texts .title-text {
-  font-size: clamp(0.8rem, calc(var(--cover-image-height) / 260 * 20), 1.2rem);
+  font-size: clamp(0.8rem, calc(var(--cover-image-height) / 260 * 20), 1.5rem);
 }
 .fullscreen .title-author-texts .author-text {
-  font-size: clamp(0.6rem, calc(var(--cover-image-height) / 260 * 16), 1rem);
+  font-size: clamp(0.6rem, calc(var(--cover-image-height) / 260 * 16), 1.1rem);
 }
 
 #playerControls {
diff --git a/pages/item/_id.vue b/pages/item/_id.vue
index 6b422129..32eef515 100644
--- a/pages/item/_id.vue
+++ b/pages/item/_id.vue
@@ -7,11 +7,11 @@
     <div class="z-10 relative">
       <div class="w-full flex justify-center relative mb-2">
         <div class="relative" @click="showFullscreenCover = true">
-          <covers-book-cover :library-item="libraryItem" :width="175" :book-cover-aspect-ratio="bookCoverAspectRatio" @imageLoaded="coverImageLoaded" />
-          <div v-if="!isPodcast" class="absolute bottom-0 left-0 h-1 shadow-sm z-10" :class="userIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: 175 * progressPercent + 'px' }"></div>
+          <covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" @imageLoaded="coverImageLoaded" />
+          <div v-if="!isPodcast" class="absolute bottom-0 left-0 h-1 shadow-sm z-10" :class="userIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: coverWidth * progressPercent + 'px' }"></div>
         </div>
 
-        <button class="absolute top-0 right-0 px-1 outline-none" @click="moreButtonPress">
+        <button class="absolute top-0 right-0 px-1 outline-none z-20" @click="moreButtonPress">
           <span class="material-icons text-xl">more_vert</span>
         </button>
       </div>
@@ -183,7 +183,8 @@ export default {
       showDetailsModal: false,
       showFullscreenCover: false,
       coverRgb: 'rgb(55, 56, 56)',
-      coverBgIsLight: false
+      coverBgIsLight: false,
+      windowWidth: 0
     }
   },
   computed: {
@@ -382,6 +383,14 @@ export default {
       }
 
       return items
+    },
+    coverWidth() {
+      let width = this.windowWidth - 94
+      if (width > 325) return 325
+      else if (width < 0) return 175
+
+      if (width * this.bookCoverAspectRatio > 325) width = 325 / this.bookCoverAspectRatio
+      return width
     }
   },
   methods: {
@@ -641,14 +650,20 @@ export default {
       if (this.libraryItem.libraryId !== libraryId) {
         this.$router.replace('/bookshelf')
       }
+    },
+    windowResized() {
+      this.windowWidth = window.innerWidth
     }
   },
   mounted() {
+    this.windowWidth = window.innerWidth
+    window.addEventListener('resize', this.windowResized)
     this.$eventBus.$on('library-changed', this.libraryChanged)
     this.$eventBus.$on('new-local-library-item', this.newLocalLibraryItem)
     this.$socket.$on('item_updated', this.itemUpdated)
   },
   beforeDestroy() {
+    window.removeEventListener('resize', this.windowResized)
     this.$eventBus.$off('library-changed', this.libraryChanged)
     this.$eventBus.$off('new-local-library-item', this.newLocalLibraryItem)
     this.$socket.$off('item_updated', this.itemUpdated)