From 1aa852c3dcf2366311ed58258ce852de26fab814 Mon Sep 17 00:00:00 2001
From: Lars Kiesow <lkiesow@uos.de>
Date: Thu, 9 Feb 2023 23:57:59 +0100
Subject: [PATCH 1/2] Blur Cover Image Background

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.
---
 pages/item/_id/index.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/pages/item/_id/index.vue b/pages/item/_id/index.vue
index 7a4dd278..773c105a 100644
--- a/pages/item/_id/index.vue
+++ b/pages/item/_id/index.vue
@@ -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>

From f362db385536e5856880c10c90574093bdf0a205 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Thu, 9 Feb 2023 18:13:30 -0600
Subject: [PATCH 2/2] Add prop to BookCover to not show a background

---
 components/covers/BookCover.vue | 9 +++++----
 pages/item/_id/index.vue        | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/components/covers/BookCover.vue b/components/covers/BookCover.vue
index a23fd83f..d1f5ee7e 100644
--- a/components/covers/BookCover.vue
+++ b/components/covers/BookCover.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="relative rounded-sm overflow-hidden" :style="{ height: height + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }">
-    <div class="w-full h-full relative bg-bg">
+    <div class="w-full h-full relative" :class="{ 'bg-bg': !noBg }">
       <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
         <div class="absolute cover-bg" ref="coverBg" />
       </div>
 
-      <img v-if="fullCoverUrl" ref="cover" :src="fullCoverUrl" loading="lazy" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? 1 : 0 }" :class="showCoverBg && hasCover ? 'object-contain' : 'object-fill'" />
+      <img v-if="fullCoverUrl" ref="cover" :src="fullCoverUrl" loading="lazy" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? 1 : 0 }" :class="(showCoverBg && hasCover) || noBg ? 'object-contain' : 'object-fill'" />
 
       <div v-show="loading && libraryItem" class="absolute top-0 left-0 h-full w-full flex items-center justify-center">
         <p class="font-book text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
@@ -48,7 +48,8 @@ export default {
     },
     bookCoverAspectRatio: Number,
     downloadCover: String,
-    raw: Boolean
+    raw: Boolean,
+    noBg: Boolean
   },
   data() {
     return {
@@ -156,7 +157,7 @@ export default {
       this.$nextTick(() => {
         this.imageReady = true
       })
-      if (this.$refs.cover && this.cover !== this.placeholderUrl) {
+      if (!this.noBg && this.$refs.cover && this.cover !== this.placeholderUrl) {
         var { naturalWidth, naturalHeight } = this.$refs.cover
         var aspectRatio = naturalHeight / naturalWidth
         var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
diff --git a/pages/item/_id/index.vue b/pages/item/_id/index.vue
index 773c105a..b165d51e 100644
--- a/pages/item/_id/index.vue
+++ b/pages/item/_id/index.vue
@@ -9,13 +9,13 @@
       <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);">
+            <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" />
+          <covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" no-bg @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>
         </div>
       </div>