Add:Tap cover to show fullscreen cover image #224

components/modals/FullscreenCover.vue

@@ -0,0 +1,74 @@
+<template>
+  <modals-modal v-model="show" width="100%" height="100%" max-width="100%">
+    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
+      <covers-book-cover :library-item="libraryItem" :width="width" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      width: 0
+    }
+  },
+  watch: {
+    show(val) {
+      if (val) {
+        this.setWidth()
+        this.setListeners()
+      } else {
+        this.removeListeners()
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['getBookCoverAspectRatio']
+    }
+  },
+  methods: {
+    screenOrientationChange() {
+      setTimeout(this.setWidth, 50)
+    },
+    setListeners() {
+      screen.orientation.addEventListener('change', this.screenOrientationChange)
+    },
+    removeListeners() {
+      screen.orientation.removeEventListener('change', this.screenOrientationChange)
+    },
+    setWidth() {
+      if (window.innerHeight > window.innerWidth) {
+        this.width = window.innerWidth
+      } else {
+        this.width = window.innerHeight / this.bookCoverAspectRatio
+      }
+    }
+  },
+  mounted() {
+    this.setWidth()
+  }
+}
+</script>
+
+<style>
+.filter-modal-wrapper {
+  max-height: calc(100% - 320px);
+}
+</style>

components/modals/Modal.vue

@@ -6,7 +6,7 @@
       <span class="material-icons text-4xl">close</span>
     </div>
     <slot name="outer" />
-    <div ref="content" style="max-width: 90%; min-height: 200px" class="relative text-white max-h-screen" :style="{ height: modalHeight, width: modalWidth }" v-click-outside="clickBg">
+    <div ref="content" style="min-height: 200px" class="relative text-white max-h-screen" :style="{ height: modalHeight, width: modalWidth, maxWidth: maxWidth }" v-click-outside="clickBg">
       <slot />
     </div>
   </div>
@@ -28,6 +28,10 @@ export default {
     height: {
       type: [String, Number],
       default: 'unset'
+    },
+    maxWidth: {
+      type: String,
+      default: '90%'
     }
   },
   data() {

pages/item/_id.vue

@@ -2,7 +2,7 @@
   <div class="w-full h-full px-3 py-4 overflow-y-auto">
     <div class="flex">
       <div class="w-16">
-        <div class="relative">
+        <div class="relative" @click="showFullscreenCover = true">
           <covers-book-cover :library-item="libraryItem" :width="64" :book-cover-aspect-ratio="bookCoverAspectRatio" />
           <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: 64 * progressPercent + 'px' }"></div>
         </div>
@@ -112,6 +112,8 @@
     <modals-dialog v-model="showMoreMenu" title="" :items="moreMenuItems" @action="moreMenuAction" />
 
     <modals-item-details-modal v-model="showDetailsModal" :library-item="libraryItem" />
+
+    <modals-fullscreen-cover v-model="showFullscreenCover" :library-item="libraryItem" />
   </div>
 </template>
 
@@ -156,7 +158,8 @@ export default {
       isProcessingReadUpdate: false,
       showSelectLocalFolder: false,
       showMoreMenu: false,
-      showDetailsModal: false
+      showDetailsModal: false,
+      showFullscreenCover: false
     }
   },
   computed: {