Add internal page iframe modal, fix video scaling, and update max-width

components/IconButton.vue

@@ -6,11 +6,11 @@
                 <Icon name="ion:book-sharp" style="color: white" />
             </button>
 
-            <a v-else-if="type === 'document'" :href="isExternalLink ? link : undefined" :target="isExternalLink ? '_blank' : undefined" :rel="isExternalLink ? 'noopener noreferrer' : undefined" @click="!isExternalLink && openDocument()" class="inline-flex p-1">
+            <a v-else-if="type === 'document'" :href="isExternalLink ? link : undefined" :target="isExternalLink ? '_blank' : undefined" :rel="isExternalLink ? 'noopener noreferrer' : undefined" @click="(isExternalLink || isInternalPage) && openDocument()" class="inline-flex p-1 cursor-pointer">
                 <Icon name="ion:book-sharp" style="color: white" />
             </a>
 
-            <a v-else-if="type === 'buy'" :href="link" :target="newTab ? '_blank' : undefined" :rel="newTab ? 'noopener noreferrer' : undefined" class="inline-flex p-1">
+            <a v-else-if="type === 'buy'" :href="link" :target="newTab ? '_blank' : undefined" :rel="newTab ? 'noopener noreferrer' : undefined" class="inline-flex p-1 cursor-pointer">
                 <Icon name="bxs:purchase-tag" style="color: white" />
             </a>
 
@@ -18,7 +18,7 @@
                 <Icon name="ic:baseline-email" style="color: white" />
             </NuxtLink>
 
-            <a v-else-if="type === 'discogs'" :href="link" :target="newTab ? '_blank' : undefined" :rel="newTab ? 'noopener noreferrer' : undefined" class="inline-flex p-1">
+            <a v-else-if="type === 'discogs'" :href="link" :target="newTab ? '_blank' : undefined" :rel="newTab ? 'noopener noreferrer' : undefined" class="inline-flex p-1 cursor-pointer">
                 <Icon name="simple-icons:discogs" style="color: white" />
             </a>
 
@@ -49,12 +49,18 @@
   const modalStore = useModalStore()
 
   const isExternalLink = computed(() => {
-    return props.link && !props.link.endsWith('.pdf')
+    return props.link && !props.link.endsWith('.pdf') && !props.link.startsWith('/')
+  })
+
+  const isInternalPage = computed(() => {
+    return props.link && props.link.startsWith('/') && !props.link.endsWith('.pdf')
   })
 
   const openDocument = () => {
     if (props.link?.endsWith('.pdf')) {
       modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', props.link)
+    } else if (props.link?.startsWith('/')) {
+      modalStore.setModalProps('document', 'aspect-[1/1.414]', true, '', '', '', '', '', props.link)
     }
   }
 </script>

components/ImageSlider.vue

@@ -1,6 +1,6 @@
 <template>
     <Swiper
-      :autoHeight="false"
+      :autoHeight="true"
       :loop="true"
       :spaceBetween="30"
       :centeredSlides="true"
@@ -16,16 +16,17 @@
       :style="{
         '--swiper-navigation-color': 'rgb(71 85 105)',
         '--swiper-pagination-color': 'rgb(71 85 105)',
-        '--swiper-pagination-top': '0',
+        '--swiper-pagination-bottom': 'auto',
-        '--swiper-navigation-top-offset': '4rem'
+        '--swiper-pagination-top': '1rem',
+        '--swiper-navigation-top-offset': '5rem'
       }"
       :modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]"
-      class="h-full w-full px-12 pt-16"
+      class="h-full flex items-center justify-center"
     >
 
-      <SwiperSlide v-for="(image, index) in gallery" :key="image.id || index" class="!flex !items-start !justify-center !py-8 !bg-zinc-100">
+      <SwiperSlide v-for="image in gallery" class="!flex !items-center !justify-center !h-auto !py-10 !bg-zinc-100">
           <img :src="'/' + bucket + '/' + image.image" 
-          style="max-width: calc(100% - 80px); max-height: calc(85vh - 160px); object-fit: contain;"/>
+          style="max-width: calc(100% - 80px); max-height: 70vh; object-fit: contain;"/>
       </SwiperSlide>
     </Swiper>
   </template>

components/Modal/Modal.vue

@@ -98,7 +98,7 @@ provide('modal', api)
                 class="w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all"
                 :class="{
                   'h-screen': fullscreen,
-                  'max-w-[85vw] rounded-lg': !fullscreen,
+                  'max-w-[min(85vw,1200px)] rounded-lg': !fullscreen,
                 }"
                 :style="!fullscreen ? { maxHeight } : {}"
               >

layouts/default.vue

@@ -39,8 +39,11 @@
         <div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2">
           <iframe :src="modalStore.soundcloudUrl" width="400rem" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
         </div>
-        <div v-if="modalStore.type === 'video'" class="w-full" :class="modalStore.aspect">
+        <div v-if="modalStore.type === 'video'" :class="modalStore.aspect" class="w-full h-full flex items-center justify-center p-4">
-          <iframe :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+          <iframe :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="max-w-full max-h-full"></iframe>
+        </div>
+        <div v-if="modalStore.type === 'document'" class="w-full h-full">
+          <iframe :src="modalStore.iframeUrl" width="100%" height="100%" frameborder="0"></iframe>
         </div>
         <div v-if="modalStore.type === 'pdf'" class="flex flex-col h-full">
           <iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0'" width="100%" height="100%" frameborder="0" :class="[modalStore.soundcloudUrl ? 'max-h-[calc(85vh-60px)]' : 'max-h-[calc(85vh-2rem)]', 'flex-grow']"></iframe>
@@ -48,8 +51,8 @@
             <iframe :src="modalStore.soundcloudUrl" width="400rem" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
           </div>
         </div>
-        <div v-if="modalStore.type === 'pdf' || modalStore.type === 'image'" class="absolute bottom-2 right-2 z-10">
+        <div v-if="modalStore.type === 'pdf' || modalStore.type === 'image' || modalStore.type === 'document'" class="absolute bottom-2 right-2 z-10">
-          <a :href="modalStore.type === 'pdf' ? modalStore.pdfUrl : '/' + modalStore.bucket + '/' + modalStore.gallery[0]?.image" target="_blank" rel="noopener noreferrer" class="p-2 bg-gray-600 rounded-lg inline-flex items-center justify-center">
+          <a :href="modalStore.type === 'pdf' ? modalStore.pdfUrl : modalStore.type === 'image' ? '/' + modalStore.bucket + '/' + modalStore.gallery[0]?.image : modalStore.type === 'document' ? modalStore.iframeUrl : undefined" target="_blank" rel="noopener noreferrer" class="p-2 bg-gray-600 rounded-lg inline-flex items-center justify-center pointer-events-auto">
             <Icon name="mdi:open-in-new" class="w-5 h-5 text-white" />
           </a>
         </div>

stores/ModalStore.js

@@ -1,9 +1,9 @@
 import {defineStore} from "pinia";
 
 export const useModalStore = defineStore("ModalStore", {
-    state: () => ({"type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid": "", "pdfUrl": "", "soundcloudUrl": ""}),
+    state: () => ({"type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid": "", "pdfUrl": "", "soundcloudUrl": "", "iframeUrl": ""}),
     actions: {
-        setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid, pdfUrl, soundcloudUrl) {
+        setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid, pdfUrl, soundcloudUrl, iframeUrl) {
           this.type = type
           this.aspect = aspect
           this.isOpen = isOpen
@@ -12,6 +12,7 @@ export const useModalStore = defineStore("ModalStore", {
           this.vimeo_trackid = vimeo_trackid
           this.pdfUrl = pdfUrl
           this.soundcloudUrl = soundcloudUrl
+          this.iframeUrl = iframeUrl
         }
       }
 })