mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-07-22 11:54:32 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

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
Download patch file Download diff file Expand all files Collapse all files

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()