Move raw cover preview to a separate global component, fix item page cover overlay show on hover

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">

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

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>