mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-08-05 18:45:47 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Blur Cover Image Background

Browse source 
This patch adds a heavily blurred version of the cover image as
background to the cover image area in the book details.

This looks especially nice on larger devices like tablets.
This commit is contained in:
Lars Kiesow 2023-02-09 23:57:59 +01:00
parent 851d0357a0
commit 1aa852c3dc
No known key found for this signature in database
GPG key ID: 5DAFE8D9C823CE73
1 changed files with 12 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

13
pages/item/_id/index.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="w-full h-full px-3 py-4 overflow-y-auto relative bg-bg">
<div class="w-full h-full px-3 py-4 overflow-y-auto overflow-x-hidden relative bg-bg">
<div class="fixed top-0 left-0 w-full h-full pointer-events-none p-px z-10">
<div class="w-full h-full" :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%)" />
@ -7,6 +7,13 @@
<div class="z-10 relative">
<div class="w-full flex justify-center relative mb-4">
<div style="width: 0; transform: translateX(-50vw); overflow: visible">
<div style="width: 150vw; overflow: hidden">
<div id="coverBg" style="filter: blur(5vw);">
<covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" @imageLoaded="coverImageLoaded" />
</div>
</div>
</div>
<div class="relative" @click="showFullscreenCover = true">
<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>
@ -730,4 +737,8 @@ export default {
width: calc(100% - 64px);
max-width: calc(100% - 64px);
}
#coverBg > div {
width: 150vw !important;
max-width: 150vw !important;
}
</style>