BlobView: image preview

src/components/ModalComponent.vue

@@ -20,7 +20,7 @@
 <script setup lang="ts">
 import { nextTick, watch } from 'vue';
 
-import LoadingSpinner from './LoadingSpinner.vue';
+import LoadingSpinner from '@/components/LoadingSpinner.vue';
 
 const props = defineProps({
   show: {

src/components/files/BlobView.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="blob-view">
-    <div class="card">
+    <div v-if="previewLoading" class="absolute-center">
+      <LoadingSpinner />
+      Loading preview ...
+    </div>
+
+    <img v-else-if="previewImage" class="img-preview" :alt="basename" :src="previewImage" />
+
+    <div v-else class="card no-preview">
       <div class="card-content">
         <div class="media">
           <div class="media-content">
@@ -22,26 +29,61 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useToast } from 'vue-toast-notification';
 import { useRouter } from 'vue-router';
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { faFile } from '@fortawesome/free-solid-svg-icons';
 
+import LoadingSpinner from '@/components/LoadingSpinner.vue';
+
 import { Workspace } from '@/services/workspace';
+import * as opfs from '@/services/opfs';
 import * as utils from '@/utils';
 
 import type { IBlobVersion } from '@/services/types';
 
 const toast = useToast();
 const router = useRouter();
 
+const previewLoading = ref(false);
+const previewImage = ref<string | null>(null);
+
 const props = defineProps<{
   version: IBlobVersion;
   path: string;
   basename: string;
 }>();
 
+onMounted(async () => {
+  try {
+    previewLoading.value = true;
+
+    const isImage = utils.isExtensionType(props.path, 'image');
+    const isPdf = utils.isExtensionType(props.path, 'pdf');
+
+    // Load the file into the OPFS
+    if (isImage || isPdf) {
+      const proj = await Workspace.setupAndGetActiveProj(router);
+      const path = await proj.syncFs(props.path);
+      const handle = await opfs.getFileHandle(path);
+
+      if (isImage) await loadImagePreview(handle);
+    }
+  } catch (err) {
+    console.warn(`Error loading preview for ${props.path}`, err);
+  } finally {
+    previewLoading.value = false;
+  }
+});
+
+onUnmounted(() => {
+  if (previewImage.value) {
+    URL.revokeObjectURL(previewImage.value);
+  }
+});
+
 async function exportFile() {
   try {
     const proj = await Workspace.setupAndGetActiveProj(router);
@@ -51,6 +93,11 @@ async function exportFile() {
     toast.error(`Error exporting ${props.path}: ${err}`);
   }
 }
+
+async function loadImagePreview(handle: FileSystemFileHandle) {
+  const file = await handle.getFile();
+  previewImage.value = URL.createObjectURL(file);
+}
 </script>
 
 <style scoped lang="scss">
@@ -60,7 +107,19 @@ async function exportFile() {
   position: relative;
   display: block;
 
-  .card {
+  img.img-preview {
+    padding: 10px;
+    position: relative;
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    object-fit: contain;
+    margin: 0 auto;
+  }
+
+  .no-preview {
     text-align: center;
     position: relative;
     max-width: 400px;

src/services/workspace.ts

@@ -136,8 +136,14 @@ export class Workspace {
     const wksp = await Workspace.setupOrRedir(router);
     if (!wksp) throw new Error('Workspace not found');
 
-    const proj = wksp.proj.active;
-    if (!proj) throw new Error('Project not found');
+    if (wksp.proj.active) return wksp.proj.active;
+
+    // No active project, try to get it from the URL
+    const projName = router.currentRoute.value.params.project as string;
+    if (!projName) throw new Error('No project name provided');
+
+    const proj = await wksp.proj.get(projName);
+    await proj.activate();
     return proj;
   }
 }

src/views/ProjectFileView.vue

@@ -37,6 +37,7 @@
 
     <BlobView
       v-else-if="contentBlob"
+      :key="filepath"
       :version="contentBlob"
       :path="filepath"
       :basename="basename"