Wire metadata previews through ExifTool store with friendly status messages.

Prefetch ExifTool on upload mount and track pending/loading/ready per file for batch preview loads.

frontend/src/stores/metadata.ts

@@ -1,21 +1,20 @@
-import { parseMetadata } from '@uswriting/exiftool';
-import { defineStore } from 'pinia';
+import { defineStore, storeToRefs } from 'pinia';
 import { ref } from 'vue';
+import { useExiftoolStore } from '@/stores/exiftool';
 import type { MetadataPreviewEntry } from '@/types/metadata/MetadataPreview';
-import { resolveErrorMessage } from '@/utils/resolveErrorMessage';
+
+const EXIFTOOL_PREPARE_ERROR_MESSAGE = 'Could not prepare ExifTool';
+const EXIFTOOL_INITIALIZING_MESSAGE = 'Initializing ExifTool';
+const METADATA_READING_MESSAGE = 'Reading metadata';
+const METADATA_READ_ERROR_MESSAGE = 'Could not read image metadata';
 
 export const useMetadataStore = defineStore('metadata', () => {
     const previewsByKey = ref<Record<string, MetadataPreviewEntry>>({});
 
-    const readExifToolStdout = async (file: File): Promise<string> => {
-        const result = await parseMetadata(file);
+    const exiftoolStore = useExiftoolStore();
 
-        if (!result.success) {
-            throw new Error(result.error);
-        }
-
-        return result.data;
-    };
+    const { initStatus: exiftoolInitStatus } = storeToRefs(exiftoolStore);
+    const { initializeExiftool, readMetadata } = exiftoolStore;
 
     const makeKeyFromFile = (file: File): string => `${file.name}\0${file.size}\0${file.lastModified}`;
 
@@ -28,20 +27,59 @@ export const useMetadataStore = defineStore('metadata', () => {
     const loadPreview = async (file: File): Promise<MetadataPreviewEntry> => {
         const key = makeKeyFromFile(file);
 
-        previewsByKey.value = { ...previewsByKey.value, [key]: { status: 'loading' } };
+        if (exiftoolInitStatus.value === 'error') {
+            const entry: MetadataPreviewEntry = {
+                status: 'error',
+                message: EXIFTOOL_PREPARE_ERROR_MESSAGE
+            };
+
+            previewsByKey.value = { ...previewsByKey.value, [key]: entry };
+
+            return entry;
+        }
+
+        if (exiftoolInitStatus.value === 'ready') {
+            previewsByKey.value = {
+                ...previewsByKey.value,
+                [key]: { status: 'loading', message: METADATA_READING_MESSAGE }
+            };
+        } else {
+            previewsByKey.value = {
+                ...previewsByKey.value,
+                [key]: { status: 'pending', message: EXIFTOOL_INITIALIZING_MESSAGE }
+            };
+
+            try {
+                await initializeExiftool();
+
+                previewsByKey.value = {
+                    ...previewsByKey.value,
+                    [key]: { status: 'loading', message: METADATA_READING_MESSAGE }
+                };
+            } catch {
+                const entry: MetadataPreviewEntry = {
+                    status: 'error',
+                    message: EXIFTOOL_PREPARE_ERROR_MESSAGE
+                };
+
+                previewsByKey.value = { ...previewsByKey.value, [key]: entry };
+
+                return entry;
+            }
+        }
 
         try {
-            const output = await readExifToolStdout(file);
+            const output = await readMetadata(file);
 
             const entry: MetadataPreviewEntry = { status: 'ready', output };
 
             previewsByKey.value = { ...previewsByKey.value, [key]: entry };
 
             return entry;
-        } catch (error) {
+        } catch {
             const entry: MetadataPreviewEntry = {
                 status: 'error',
-                message: resolveErrorMessage(error, 'Could not read image metadata')
+                message: METADATA_READ_ERROR_MESSAGE
             };
 
             previewsByKey.value = { ...previewsByKey.value, [key]: entry };
@@ -50,9 +88,8 @@ export const useMetadataStore = defineStore('metadata', () => {
         }
     };
 
-    const loadPreviews = async (files: readonly File[]): Promise<void> => {
-        await Promise.all(files.map(file => loadPreview(file)));
-    };
+    const loadPreviews = (files: readonly File[]): Promise<MetadataPreviewEntry[]> =>
+        Promise.all(files.map(file => loadPreview(file)));
 
     const clearPreview = (file: File): void => {
         const key = makeKeyFromFile(file);

frontend/src/types/metadata/MetadataPreview.ts

@@ -1,5 +1,6 @@
 export type MetadataPreviewEntry =
     | { status: 'idle' }
-    | { status: 'loading' }
+    | { status: 'pending'; message: string }
+    | { status: 'loading'; message: string }
     | { status: 'ready'; output: string }
     | { status: 'error'; message: string };

frontend/src/views/UploadView.vue

@@ -4,3 +4,16 @@
         <p class="mt-2 text-muted-foreground">Upload UI coming soon.</p>
     </main>
 </template>
+
+<script setup lang="ts">
+import { onBeforeMount } from 'vue';
+import { useExiftoolStore } from '@/stores/exiftool';
+
+const exiftoolStore = useExiftoolStore();
+
+const { initializeExiftool } = exiftoolStore;
+
+onBeforeMount(() => {
+    initializeExiftool();
+});
+</script>