Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-10-27 11:18:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
advplyr 2024-07-02 17:40:42 -05:00
parent 4baa89c8e1
commit 5858b64fc6
3 changed files with 31 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/package-lock.json generated
View File

@ -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",

1
client/package.json
View File

@ -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",

25
client/pages/share/_slug.vue
View File

@ -1,9 +1,10 @@
<template>
<div id="page-wrapper" class="w-full h-screen max-h-screen overflow-hidden">
<div class="w-full h-full flex items-center justify-center">
<div class="w-full h-screen max-h-screen overflow-hidden" :style="{ backgroundColor: coverRgb }">
<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()