Update:Share audio player page background color gradient using fast-average-color on cover image

client/package-lock.json

@@ -16,6 +16,7 @@
         "cron-parser": "^4.7.1",
         "date-fns": "^2.25.0",
         "epubjs": "^0.3.88",
+        "fast-average-color": "^9.4.0",
         "hls.js": "^1.5.7",
         "libarchive.js": "^1.3.0",
         "nuxt": "^2.17.3",
@@ -8219,6 +8220,14 @@
         "node >=0.6.0"
       ]
     },
+    "node_modules/fast-average-color": {
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/fast-average-color/-/fast-average-color-9.4.0.tgz",
+      "integrity": "sha512-bvM8vV6YwK07dPbzFz77zJaBcfF6ABVfgNwaxVgXc2G+o0e/tzLCF9WU8Ryp1r0Nkk6JuJNsWCzbb4cLOMlB+Q==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",

client/package.json

@@ -24,6 +24,7 @@
     "cron-parser": "^4.7.1",
     "date-fns": "^2.25.0",
     "epubjs": "^0.3.88",
+    "fast-average-color": "^9.4.0",
     "hls.js": "^1.5.7",
     "libarchive.js": "^1.3.0",
     "nuxt": "^2.17.3",

client/pages/share/_slug.vue

@@ -1,9 +1,10 @@
 <template>
-  <div id="page-wrapper" class="w-full h-screen max-h-screen overflow-hidden">
+  <div class="w-full h-screen max-h-screen overflow-hidden" :style="{ backgroundColor: coverRgb }">
-    <div class="w-full h-full flex items-center justify-center">
+    <div class="w-screen h-screen absolute inset-0 pointer-events-none" style="background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(38, 38, 38, 1) 80%)"></div>
+    <div class="absolute inset-0 w-screen h-screen flex items-center justify-center z-10">
       <div class="w-full p-2 sm:p-4 md:p-8">
         <div v-if="!isMobileLandscape" :style="{ width: coverWidth + 'px', height: coverHeight + 'px' }" class="mx-auto overflow-hidden rounded-xl my-2">
-          <img :src="coverUrl" class="object-contain w-full h-full" />
+          <img ref="coverImg" :src="coverUrl" class="object-contain w-full h-full" @load="coverImageLoaded" />
         </div>
         <p class="text-2xl lg:text-3xl font-semibold text-center mb-1 line-clamp-2">{{ mediaItemShare.playbackSession.displayTitle || 'No title' }}</p>
         <p v-if="mediaItemShare.playbackSession.displayAuthor" class="text-lg lg:text-xl text-slate-400 font-semibold text-center mb-1 truncate">{{ mediaItemShare.playbackSession.displayAuthor }}</p>
@@ -18,6 +19,7 @@
 
 <script>
 import LocalAudioPlayer from '../../players/LocalAudioPlayer'
+import { FastAverageColor } from 'fast-average-color'
 
 export default {
   layout: 'blank',
@@ -47,7 +49,9 @@ export default {
       totalDuration: 0,
       windowWidth: 0,
       windowHeight: 0,
-      listeningTimeSinceSync: 0
+      listeningTimeSinceSync: 0,
+      coverRgb: null,
+      coverBgIsLight: false
     }
   },
   computed: {
@@ -101,6 +105,19 @@ export default {
     }
   },
   methods: {
+    async coverImageLoaded(e) {
+      if (!this.playbackSession.coverPath) return
+      const fac = new FastAverageColor()
+      fac
+        .getColorAsync(e.target)
+        .then((color) => {
+          this.coverRgb = color.rgba
+          this.coverBgIsLight = color.isLight
+        })
+        .catch((e) => {
+          console.log(e)
+        })
+    },
     playPause() {
       if (!this.localAudioPlayer || !this.hasLoaded) return
       this.localAudioPlayer.playPause()