Update:Library item page use bg gradient of primary cover image color

components/app/AudioPlayer.vue

@@ -182,10 +182,6 @@ export default {
     }
   },
   computed: {
-    bgColor() {
-      if (!this.coverRgb) return 'rgb(55, 56, 56)'
-      return `rgb(${this.coverRgb.r},${this.coverRgb.g},${this.coverRgb.b})`
-    },
     menuItems() {
       var items = [
         {

pages/item/_id.vue

@@ -1,8 +1,13 @@
 <template>
-  <div class="w-full h-full px-3 py-4 overflow-y-auto">
+  <div class="w-full h-full px-3 py-4 overflow-y-auto relative bg-bg">
+    <div class="absolute top-0 left-0 w-full h-full pointer-events-none z-0" :style="{ backgroundColor: coverRgb }">
+      <div class="w-full h-full absolute top-0 left-0" style="background: linear-gradient(169deg, rgba(0, 0, 0, 0.4) 0%, rgba(55, 56, 56, 1) 80%)" />
+    </div>
+
+    <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" />
+          <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>
         </div>
 
@@ -130,11 +135,13 @@
 
       <modals-fullscreen-cover v-model="showFullscreenCover" :library-item="libraryItem" />
     </div>
+  </div>
 </template>
 
 <script>
 import { Dialog } from '@capacitor/dialog'
 import { AbsFileSystem, AbsDownloader } from '@/plugins/capacitor'
+import { FastAverageColor } from 'fast-average-color'
 
 export default {
   async asyncData({ store, params, redirect, app }) {
@@ -174,7 +181,9 @@ export default {
       showSelectLocalFolder: false,
       showMoreMenu: false,
       showDetailsModal: false,
-      showFullscreenCover: false
+      showFullscreenCover: false,
+      coverRgb: 'rgb(55, 56, 56)',
+      coverBgIsLight: false
     }
   },
   computed: {
@@ -376,6 +385,20 @@ export default {
     }
   },
   methods: {
+    async coverImageLoaded(fullCoverUrl) {
+      if (!fullCoverUrl) return
+
+      const fac = new FastAverageColor()
+      fac
+        .getColorAsync(fullCoverUrl)
+        .then((color) => {
+          this.coverRgb = color.rgba
+          this.coverBgIsLight = color.isLight
+        })
+        .catch((e) => {
+          console.log(e)
+        })
+    },
     moreMenuAction(action) {
       this.showMoreMenu = false
       if (action === 'manageLocal') {