feat: preview other file type than images

Author: stafyniaksacha

src/module.ts

@@ -50,6 +50,7 @@ export default defineNuxtModule({
         })
       })
 
+      // we need to locate the root public dir
       nuxt.options.runtimeConfig.mediaViewer = {
         publicRoot: resolve(nuxt.options.rootDir, 'public')
       }

src/runtime/components/MediaGalleryItem.vue

@@ -1,30 +1,42 @@
 <script setup lang="ts">
-import { keyToPath } from '../shared'
+import { onMounted, ref } from 'vue'
+import { keyToPath, type AssetStats } from '../shared'
 
 const props = defineProps<{
   assetKey: string
 }>()
 
-function onImageError (event: Event) {
-  // fetch asset stats
-  console.log(props.assetKey, event)
+const isImage = ref(true)
+const fileStat = ref<AssetStats>()
 
-  // show an icon from the mimetype
-}
+onMounted(() => {
+  // check if image loads, the @error.once seems to be cached
+  const image = new Image()
+  image.onerror = async () => {
+    image.onerror = null
+    fileStat.value = await $fetch(`/_media-viewer/stats?key=${props.assetKey}`)
+    isImage.value = false
+  }
+  image.src = keyToPath(props.assetKey)
+})
 </script>
 
 <template>
-  <NuxtLink :key="assetKey" :to="`#${assetKey}`" class="transition-all  hover:scale-150">
+  <NuxtLink :key="props.assetKey" :to="`#${props.assetKey}`" class="transition-all prevent-drag hover:scale-150">
     <img
-      :src="`${keyToPath(assetKey, true)}?h=300`"
-      :title="keyToPath(assetKey)"
+      v-if="isImage"
+      :src="`${keyToPath(props.assetKey, true)}?h=300`"
+      :title="keyToPath(props.assetKey)"
       width="100"
       loading="lazy"
       decoding="async"
       draggable="false"
       class="prevent-drag rounded border select-none pointer-events-none border-slate-100 w-[150px] h-[150px] preview bg-white object-scale-down"
-      @error.once="onImageError"
     >
+    <div v-else class="rounded flex flex-col justify-center border select-none pointer-events-none border-slate-100 w-[150px] h-[150px] preview bg-white object-scale-down">
+      <div class="truncate w-full text-center">{{ fileStat?.name }}</div>
+      <div class="truncate w-full text-center text-sm text-slate-400">{{ fileStat?.mimetype }}</div>
+    </div>
   </NuxtLink>
 </template>
 

src/runtime/components/MediaPreviewImage.vue

@@ -2,15 +2,16 @@
 import { ref, computed, inject, watchEffect, onBeforeUnmount, watch } from 'vue'
 // @ts-ignore
 import { useRoute } from '#app'
-import { keyToPath } from '../shared'
+import { keyToPath, PreviewState } from '../shared'
 
 const route = useRoute()
 
 const imageRef = ref()
 const mode = ref<'scale' | 'real'>('scale')
 const selectedAssetKey = computed(() => route.hash ? route.hash.substring(1) : '')
 
-const previewState = inject<any>('previewState')
+const previewState = inject<PreviewState>('previewState')
+const isImage = computed(() => previewState?.stats?.mimetype?.startsWith('image/'))
 
 const dragging = ref(false)
 const offsetX = ref(0)
@@ -60,18 +61,22 @@ watch(mode, () => {
 
 <template>
   <div class="relative overflow-hidden rounded-l border-slate-100 border-r preview w-7/12 flex items-center justify-center">
+    <div v-if="!isImage" class="rounded flex flex-col justify-center border select-none pointer-events-none border-slate-100 w-[150px] h-[150px] bg-white object-scale-down">
+      <div class="truncate w-full text-center">{{ previewState?.stats?.name }}</div>
+      <div class="truncate w-full text-center text-sm text-slate-400">{{ previewState?.stats?.mimetype }}</div>
+    </div>
     <span
-      v-if="mode === 'real'"
+      v-else-if="mode === 'real'"
       ref="imageRef"
       class="prevent-drag block absolute max-w-none origin-top-left hover:cursor-grab active:cursor-grabbing"
       tabindex="0"
       :style="{
         left: `${offsetX}px`,
         top: `${offsetY}px`,
-        width: `${previewState.targetWidth}px`,
-        height: `${previewState.targetHeight}px`,
+        width: `${previewState?.targetWidth ?? 0}px`,
+        height: `${previewState?.targetHeight ?? 0}px`,
       }"
-      v-html="previewState.snippet"
+      v-html="previewState?.snippet"
     />
     <img
       v-else
@@ -83,23 +88,25 @@ watch(mode, () => {
       <div>
         <button
           type="button"
-          class=" text-sm py-1 px-3 rounded-l border-r-0 border border-slate-100 hover:bg-indigo-400 hover:text-white"
+          class=" text-sm py-1 px-3 rounded-l border-r-0 border border-slate-100 disabled:opacity-60 disabled:cursor-not-allowed active:hover:bg-indigo-400 active:hover:text-white"
           :class="[
             mode === 'scale' && 'bg-indigo-400 text-white',
             mode !== 'scale' && 'bg-white',
           ]"
           @click="mode = 'scale'"
+          :disabled="!isImage"
         >
           Overview
         </button>
         <button
           type="button"
-          class=" text-sm py-1 px-3 rounded-r bg-white border border-slate-100 hover:bg-indigo-400 hover:text-white"
+          class=" text-sm py-1 px-3 rounded-r bg-white border border-slate-100 disabled:opacity-60 disabled:cursor-not-allowed active:hover:bg-indigo-400 active:hover:text-white"
           :class="[
             mode === 'real' && 'bg-indigo-400 text-white',
             mode !== 'real' && 'bg-white',
           ]"
           @click="mode = 'real'"
+          :disabled="!isImage"
         >
           Realtime preview
         </button>

src/runtime/pages/index.vue

@@ -33,7 +33,7 @@ const directoriesKeysPrefix = computed(() => {
       return parts.join(':')
     })
     .reduce((acc, item) => {
-      if (!acc.includes(item)) {
+      if (item !== 'root:public' && !acc.includes(item)) {
         acc.push(item)
       }
       return acc

src/runtime/shared/keys.ts

@@ -1,7 +1,7 @@
 // replace an unstorage key 'root:public:xxx' to a path '/xxx
 export function keyToPath (key: string, ipxPrefix?: boolean): string {
   return key.replace(/:/g, '/').replace(
-    'root/public/',
-    ipxPrefix ? '/_ipx/' : '/'
+    'root/public',
+    ipxPrefix ? '/_ipx' : ''
   )
 }