Merge pull request #569 from lkiesow/blurred-cover-bg

Blur Cover Image Background

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)

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,8 +7,15 @@
 
     <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" />
+          <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>
@@ -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>