From 32616aa4416b4eac6493191812d8ef0d35919b99 Mon Sep 17 00:00:00 2001
From: MxMarx <ruby.e.marx@gmail.com>
Date: Mon, 23 Oct 2023 20:37:51 -0700
Subject: [PATCH 1/2] show a modal with cover images when clicked

---
 client/components/app/StreamContainer.vue |  2 +-
 client/components/covers/BookCover.vue    | 19 ++++++++++++++++++-
 client/pages/item/_id/index.vue           |  8 ++++----
 client/store/globals.js                   |  4 ++--
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/client/components/app/StreamContainer.vue b/client/components/app/StreamContainer.vue
index 1aecbf4e..3439910f 100644
--- a/client/components/app/StreamContainer.vue
+++ b/client/components/app/StreamContainer.vue
@@ -2,7 +2,7 @@
   <div v-if="streamLibraryItem" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 md:h-40 z-50 bg-primary px-2 md:px-4 pb-1 md:pb-4 pt-2">
     <div id="videoDock" />
     <nuxt-link v-if="!playerHandler.isVideo" :to="`/item/${streamLibraryItem.id}`" class="absolute left-2 top-2 md:left-4 cursor-pointer">
-      <covers-book-cover :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
+      <covers-book-cover :expand-on-click="true" :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
     </nuxt-link>
     <div class="flex items-start mb-6 md:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
       <div class="min-w-0">
diff --git a/client/components/covers/BookCover.vue b/client/components/covers/BookCover.vue
index be39ae3c..810baa43 100644
--- a/client/components/covers/BookCover.vue
+++ b/client/components/covers/BookCover.vue
@@ -5,7 +5,14 @@
         <div class="absolute cover-bg" ref="coverBg" />
       </div>
 
-      <img v-if="libraryItem" 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 ? 'object-contain' : 'object-fill'" />
+      <img v-if="libraryItem" ref="cover" :src="fullCoverUrl" loading="lazy" draggable="false" @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 ? 'object-contain' : 'object-fill'" @click="clickCover" />
+
+      <modals-modal v-if="libraryItem && expandOnClick" v-model="showImageModal" name="cover" :width="'90%'" :height="'90%'" :contentMarginTop="0">
+        <div class="w-full h-full" @click="showImageModal = false">
+          <img loading="lazy" :src="rawCoverUrl" class="w-full h-full z-10 object-scale-down" />
+        </div>
+      </modals-modal>
+
       <div v-show="loading && libraryItem" class="absolute top-0 left-0 h-full w-full flex items-center justify-center">
         <p class="text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
         <div class="absolute top-2 right-2">
@@ -43,10 +50,12 @@ export default {
       type: Number,
       default: 120
     },
+    expandOnClick: Boolean,
     bookCoverAspectRatio: Number
   },
   data() {
     return {
+      showImageModal: false,
       loading: true,
       imageFailed: false,
       showCoverBg: false,
@@ -102,6 +111,11 @@ export default {
       var store = this.$store || this.$nuxt.$store
       return store.getters['globals/getLibraryItemCoverSrc'](this.libraryItem, this.placeholderUrl)
     },
+    rawCoverUrl() {
+      if (!this.libraryItem) return null
+      var store = this.$store || this.$nuxt.$store
+      return store.getters['globals/getLibraryItemCoverSrc'](this.libraryItem, null, true)
+    },
     cover() {
       return this.media.coverPath || this.placeholderUrl
     },
@@ -132,6 +146,9 @@ export default {
     }
   },
   methods: {
+    clickCover() {
+      this.showImageModal = true
+    },
     setCoverBg() {
       if (this.$refs.coverBg) {
         this.$refs.coverBg.style.backgroundImage = `url("${this.fullCoverUrl}")`
diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue
index 0f4f17b2..eff240f7 100644
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@@ -3,21 +3,21 @@
     <div class="w-full h-full overflow-y-auto px-2 py-6 lg:p-8">
       <div class="flex flex-col lg:flex-row max-w-6xl mx-auto">
         <div class="w-full flex justify-center lg:block lg:w-52" style="min-width: 208px">
-          <div class="relative" style="height: fit-content">
-            <covers-book-cover :library-item="libraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+          <div class="relative group" style="height: fit-content">
+            <covers-book-cover class="relative group-hover:brightness-75 transition" :expand-on-click="true" :library-item="libraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
 
             <!-- Item Progress Bar -->
             <div v-if="!isPodcast" class="absolute bottom-0 left-0 h-1.5 shadow-sm z-10" :class="userIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: 208 * progressPercent + 'px' }"></div>
 
             <!-- Item Cover Overlay -->
-            <div class="absolute top-0 left-0 w-full h-full z-10 bg-black bg-opacity-30 opacity-0 hover:opacity-100 transition-opacity" @mousedown.prevent @mouseup.prevent>
+            <div class="absolute top-0 left-0 w-full h-full z-10 pointer-events-none">
               <div v-show="showPlayButton && !isStreaming" class="h-full flex items-center justify-center pointer-events-none">
                 <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto cursor-pointer" @click.stop.prevent="playItem">
                   <span class="material-icons text-4xl">play_circle_filled</span>
                 </div>
               </div>
 
-              <span class="absolute bottom-2.5 right-2.5 z-10 material-icons text-lg cursor-pointer text-white text-opacity-75 hover:text-opacity-100 hover:scale-110 transform duration-200" @click="showEditCover">edit</span>
+              <span class="absolute bottom-2.5 right-2.5 z-10 material-icons text-lg cursor-pointer text-white text-opacity-75 hover:text-opacity-100 hover:scale-110 transform duration-200 pointer-events-auto" @click="showEditCover">edit</span>
             </div>
           </div>
         </div>
diff --git a/client/store/globals.js b/client/store/globals.js
index a202d685..44b35f88 100644
--- a/client/store/globals.js
+++ b/client/store/globals.js
@@ -80,7 +80,7 @@ export const state = () => ({
 })
 
 export const getters = {
-  getLibraryItemCoverSrc: (state, getters, rootState, rootGetters) => (libraryItem, placeholder = null) => {
+  getLibraryItemCoverSrc: (state, getters, rootState, rootGetters) => (libraryItem, placeholder = null, raw = false) => {
     if (!placeholder) placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`
     if (!libraryItem) return placeholder
     const media = libraryItem.media
@@ -94,7 +94,7 @@ export const getters = {
     const libraryItemId = libraryItem.libraryItemId || libraryItem.id // Workaround for /users/:id page showing media progress covers
 
     if (process.env.NODE_ENV !== 'production') { // Testing
-      return `http://localhost:3333${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}`
+      return `http://localhost:3333${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}${raw ? '&raw=1' : ''}`
     }
 
     return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}`

From 6278bb86651d2148750d92cf87f4de56a187a3b6 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Fri, 27 Oct 2023 16:51:44 -0500
Subject: [PATCH 2/2] Move raw cover preview to a separate global component,
 fix item page cover overlay show on hover

---
 client/components/app/StreamContainer.vue     |  6 ++--
 client/components/covers/BookCover.vue        | 16 ++-------
 .../modals/RawCoverPreviewModal.vue           | 33 +++++++++++++++++++
 client/layouts/default.vue                    |  1 +
 client/pages/item/_id/index.vue               |  4 +--
 client/store/globals.js                       |  9 +++++
 6 files changed, 51 insertions(+), 18 deletions(-)
 create mode 100644 client/components/modals/RawCoverPreviewModal.vue

diff --git a/client/components/app/StreamContainer.vue b/client/components/app/StreamContainer.vue
index 3439910f..e9b6969d 100644
--- a/client/components/app/StreamContainer.vue
+++ b/client/components/app/StreamContainer.vue
@@ -1,9 +1,9 @@
 <template>
   <div v-if="streamLibraryItem" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 md:h-40 z-50 bg-primary px-2 md:px-4 pb-1 md:pb-4 pt-2">
     <div id="videoDock" />
-    <nuxt-link v-if="!playerHandler.isVideo" :to="`/item/${streamLibraryItem.id}`" class="absolute left-2 top-2 md:left-4 cursor-pointer">
-      <covers-book-cover :expand-on-click="true" :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
-    </nuxt-link>
+    <div class="absolute left-2 top-2 md:left-4 cursor-pointer">
+      <covers-book-cover expand-on-click :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
+    </div>
     <div class="flex items-start mb-6 md:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : isSquareCover ? 'pl-18 sm:pl-24' : 'pl-12 sm:pl-16'">
       <div class="min-w-0">
         <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm sm:text-lg block truncate">
diff --git a/client/components/covers/BookCover.vue b/client/components/covers/BookCover.vue
index 810baa43..a2a4cc2f 100644
--- a/client/components/covers/BookCover.vue
+++ b/client/components/covers/BookCover.vue
@@ -7,12 +7,6 @@
 
       <img v-if="libraryItem" ref="cover" :src="fullCoverUrl" loading="lazy" draggable="false" @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 ? 'object-contain' : 'object-fill'" @click="clickCover" />
 
-      <modals-modal v-if="libraryItem && expandOnClick" v-model="showImageModal" name="cover" :width="'90%'" :height="'90%'" :contentMarginTop="0">
-        <div class="w-full h-full" @click="showImageModal = false">
-          <img loading="lazy" :src="rawCoverUrl" class="w-full h-full z-10 object-scale-down" />
-        </div>
-      </modals-modal>
-
       <div v-show="loading && libraryItem" class="absolute top-0 left-0 h-full w-full flex items-center justify-center">
         <p class="text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
         <div class="absolute top-2 right-2">
@@ -55,7 +49,6 @@ export default {
   },
   data() {
     return {
-      showImageModal: false,
       loading: true,
       imageFailed: false,
       showCoverBg: false,
@@ -111,11 +104,6 @@ export default {
       var store = this.$store || this.$nuxt.$store
       return store.getters['globals/getLibraryItemCoverSrc'](this.libraryItem, this.placeholderUrl)
     },
-    rawCoverUrl() {
-      if (!this.libraryItem) return null
-      var store = this.$store || this.$nuxt.$store
-      return store.getters['globals/getLibraryItemCoverSrc'](this.libraryItem, null, true)
-    },
     cover() {
       return this.media.coverPath || this.placeholderUrl
     },
@@ -147,7 +135,9 @@ export default {
   },
   methods: {
     clickCover() {
-      this.showImageModal = true
+      if (this.expandOnClick && this.libraryItem) {
+        this.$store.commit('globals/setRawCoverPreviewModal', this.libraryItem.id)
+      }
     },
     setCoverBg() {
       if (this.$refs.coverBg) {
diff --git a/client/components/modals/RawCoverPreviewModal.vue b/client/components/modals/RawCoverPreviewModal.vue
new file mode 100644
index 00000000..b8147aa7
--- /dev/null
+++ b/client/components/modals/RawCoverPreviewModal.vue
@@ -0,0 +1,33 @@
+<template>
+  <modals-modal v-model="show" name="cover" :width="'90%'" :height="'90%'" :contentMarginTop="0">
+    <div class="w-full h-full" @click="show = false">
+      <img loading="lazy" :src="rawCoverUrl" class="w-full h-full z-10 object-scale-down" />
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.globals.showRawCoverPreviewModal
+      },
+      set(val) {
+        this.$store.commit('globals/setShowRawCoverPreviewModal', val)
+      }
+    },
+    selectedLibraryItemId() {
+      return this.$store.state.globals.selectedLibraryItemId
+    },
+    rawCoverUrl() {
+      return this.$store.getters['globals/getLibraryItemCoverSrcById'](this.selectedLibraryItemId, null, true)
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
\ No newline at end of file
diff --git a/client/layouts/default.vue b/client/layouts/default.vue
index df8f754a..c3cc3484 100644
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -19,6 +19,7 @@
     <modals-authors-edit-modal />
     <modals-batch-quick-match-model />
     <modals-rssfeed-open-close-modal />
+    <modals-raw-cover-preview-modal />
     <prompt-confirm />
     <readers-reader />
   </div>
diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue
index eff240f7..657d564d 100644
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@@ -4,13 +4,13 @@
       <div class="flex flex-col lg:flex-row max-w-6xl mx-auto">
         <div class="w-full flex justify-center lg:block lg:w-52" style="min-width: 208px">
           <div class="relative group" style="height: fit-content">
-            <covers-book-cover class="relative group-hover:brightness-75 transition" :expand-on-click="true" :library-item="libraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+            <covers-book-cover class="relative group-hover:brightness-75 transition cursor-pointer" expand-on-click :library-item="libraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
 
             <!-- Item Progress Bar -->
             <div v-if="!isPodcast" class="absolute bottom-0 left-0 h-1.5 shadow-sm z-10" :class="userIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: 208 * progressPercent + 'px' }"></div>
 
             <!-- Item Cover Overlay -->
-            <div class="absolute top-0 left-0 w-full h-full z-10 pointer-events-none">
+            <div class="absolute top-0 left-0 w-full h-full z-10 opacity-0 group-hover:opacity-100 pointer-events-none">
               <div v-show="showPlayButton && !isStreaming" class="h-full flex items-center justify-center pointer-events-none">
                 <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto cursor-pointer" @click.stop.prevent="playItem">
                   <span class="material-icons text-4xl">play_circle_filled</span>
diff --git a/client/store/globals.js b/client/store/globals.js
index 44b35f88..961dd52e 100644
--- a/client/store/globals.js
+++ b/client/store/globals.js
@@ -11,6 +11,7 @@ export const state = () => ({
   showViewPodcastEpisodeModal: false,
   showRSSFeedOpenCloseModal: false,
   showConfirmPrompt: false,
+  showRawCoverPreviewModal: false,
   confirmPromptOptions: null,
   showEditAuthorModal: false,
   rssFeedEntity: null,
@@ -20,6 +21,7 @@ export const state = () => ({
   selectedCollection: null,
   selectedAuthor: null,
   selectedMediaItems: [],
+  selectedLibraryItemId: null,
   isCasting: false, // Actively casting
   isChromecastInitialized: false, // Script loadeds
   showBatchQuickMatchModal: false,
@@ -156,6 +158,13 @@ export const mutations = {
     state.confirmPromptOptions = options
     state.showConfirmPrompt = true
   },
+  setShowRawCoverPreviewModal(state, val) {
+    state.showRawCoverPreviewModal = val
+  },
+  setRawCoverPreviewModal(state, libraryItemId) {
+    state.selectedLibraryItemId = libraryItemId
+    state.showRawCoverPreviewModal = true
+  },
   setEditCollection(state, collection) {
     state.selectedCollection = collection
     state.showEditCollectionModal = true