Merge pull request #1 from EvanProgramming/copilot/fix-gallery-page-preview-exif

Use manifest-backed EXIF in Gallery preview with runtime fallback

Author: EvanProgramming

scripts/protect-images.mjs

@@ -2,6 +2,7 @@ import crypto from 'node:crypto'
 import fs from 'node:fs/promises'
 import os from 'node:os'
 import path from 'node:path'
+import exifr from 'exifr'
 import sharp from 'sharp'
 
 const ROOT = process.cwd()
@@ -18,6 +19,7 @@ const BACKUP_BASE = process.env.PHOTO_ORIGINAL_BACKUP
   ? path.resolve(process.env.PHOTO_ORIGINAL_BACKUP)
   : path.join(os.homedir(), 'Documents', 'evangong.tech-originals')
 const BACKUP_MARKER = '.photo-originals.json'
+const PUBLIC_EXIF_FIELDS = ['Make', 'Model', 'LensModel', 'DateTimeOriginal', 'FocalLength', 'FNumber', 'ExposureTime', 'ISO']
 
 function usage() {
   console.log(`Usage: npm run images:protect -- --check|--apply
@@ -112,6 +114,27 @@ function outputFormat(repoPath) {
   return 'jpeg'
 }
 
+function normalizeExifValue(value) {
+  if (value == null) return null
+  if (value instanceof Date) return value.toISOString()
+  if (typeof value === 'string') {
+    const trimmed = value.trim()
+    return trimmed || null
+  }
+  if (typeof value === 'number') return Number.isFinite(value) ? value : null
+  return null
+}
+
+function pickPublicExif(exif) {
+  if (!exif || typeof exif !== 'object') return null
+  const picked = {}
+  for (const field of PUBLIC_EXIF_FIELDS) {
+    const normalized = normalizeExifValue(exif[field])
+    if (normalized != null) picked[field] = normalized
+  }
+  return Object.keys(picked).length ? picked : null
+}
+
 async function renderDerivative(sourcePath, repoPath) {
   const sourceBuffer = await fs.readFile(sourcePath)
   const normalized = await sharp(sourceBuffer)
@@ -275,6 +298,8 @@ async function apply() {
     const relativePath = toRepoPath(repoFile)
     const sourcePath = path.join(backupDir, ...relativePath.split('/'))
     const sourceBuffer = await fs.readFile(sourcePath)
+    const sourceExif = await exifr.parse(sourceBuffer, { gps: false, icc: false, xmp: false }).catch(() => null)
+    const publicExif = pickPublicExif(sourceExif)
     const derivative = await renderDerivative(sourcePath, relativePath)
     const temporaryPath = `${repoFile}.protected.tmp`
 
@@ -291,6 +316,7 @@ async function apply() {
       width: metadata.width,
       height: metadata.height,
       format: metadata.format,
+      ...(publicExif ? { exif: publicExif } : {}),
     })
   }
 

src/components/DomeGallery/DomeGallery.jsx

@@ -80,8 +80,8 @@ function formatNumber(n, digits = 1) {
   return String(parseFloat(fixed));
 }
 
-function renderExifRows(exif) {
-  const rows = [
+function getExifRows(exif) {
+  return [
     { label: 'Camera', value: formatCamera(exif) },
     { label: 'Lens', value: exif?.LensModel?.trim() },
     { label: 'Date', value: formatDate(exif?.DateTimeOriginal) },
@@ -90,17 +90,23 @@ function renderExifRows(exif) {
     { label: 'Shutter', value: formatExposureTime(exif?.ExposureTime) },
     { label: 'ISO', value: exif?.ISO != null ? String(Number(exif.ISO)) : '' }
   ].filter(r => r.value);
+}
 
+function renderExifRows(exif) {
+  const rows = getExifRows(exif);
   if (rows.length === 0) return '<div class="dg-exif-empty">No EXIF data available</div>';
 
   return rows
     .map(r => `<div class="dg-exif-row"><span class="dg-exif-label">${r.label}</span><span class="dg-exif-value">${r.value}</span></div>`)
     .join('');
 }
 
-async function loadExifPanel(rawSrc, overlay) {
+async function loadExifPanel(rawSrc, overlay, seededExif = null) {
   try {
-    const exif = await exifr.parse(rawSrc, { gps: false, icc: false, xmp: false });
+    let exif = seededExif;
+    if (!getExifRows(exif).length) {
+      exif = await exifr.parse(rawSrc, { gps: false, icc: false, xmp: false });
+    }
     if (!exif) return;
     const panel = document.createElement('div');
     panel.className = 'dg-exif-panel';
@@ -143,7 +149,8 @@ function buildItems(pool, seg) {
       alt: image.alt || '',
       width: image.width,
       height: image.height,
-      sizes: image.sizes
+      sizes: image.sizes,
+      exif: image.exif || null
     };
   });
 
@@ -168,7 +175,8 @@ function buildItems(pool, seg) {
     alt: usedImages[i].alt,
     width: usedImages[i].width,
     height: usedImages[i].height,
-    sizes: usedImages[i].sizes
+    sizes: usedImages[i].sizes,
+    exif: usedImages[i].exif
   }));
 }
 
@@ -577,6 +585,14 @@ export default function DomeGallery({
       overlay.style.transformOrigin = 'top left';
       overlay.style.transition = `transform ${enlargeTransitionMs}ms ease, opacity ${enlargeTransitionMs}ms ease`;
       const rawSrc = parent.dataset.src || el.querySelector('img')?.src || '';
+      let seededExif = null;
+      if (parent.dataset.exif) {
+        try {
+          seededExif = JSON.parse(parent.dataset.exif);
+        } catch {
+          seededExif = null;
+        }
+      }
       const imgWrap = document.createElement('div');
       imgWrap.className = 'enlarge__image-wrap';
       const img = document.createElement('img');
@@ -645,7 +661,7 @@ export default function DomeGallery({
             overlay.removeEventListener('transitionend', cleanupSecond);
             overlay.style.transition = prevTransition;
             overlay.classList.add('enlarge--ready');
-            loadExifPanel(rawSrc, overlay);
+            loadExifPanel(rawSrc, overlay, seededExif);
           };
           overlay.addEventListener('transitionend', cleanupSecond, { once: true });
         };
@@ -710,6 +726,7 @@ export default function DomeGallery({
                 key={`${it.x},${it.y},${i}`}
                 className="item"
                 data-src={it.src}
+                data-exif={it.exif ? JSON.stringify(it.exif) : undefined}
                 data-offset-x={it.x}
                 data-offset-y={it.y}
                 data-size-x={it.sizeX}

src/components/Gallery/galleryData.test.js

@@ -116,6 +116,10 @@ describe('galleryData', () => {
         expect(img.width).toBeGreaterThan(0)
         expect(img.height).toBeGreaterThan(0)
         expect(img.sizes).toContain('vw')
+        expect(img).toHaveProperty('exif')
+        if (img.exif !== null) {
+          expect(typeof img.exif).toBe('object')
+        }
       })
     })
 

src/data/photoCatalog.js

@@ -7,6 +7,29 @@ const CATEGORY_LABELS = {
   Miscellaneous: 'Miscellaneous'
 }
 
+function normalizeExif(exif) {
+  if (!exif || typeof exif !== 'object') return null
+
+  const normalized = {}
+  const allowedFields = ['Make', 'Model', 'LensModel', 'DateTimeOriginal', 'FocalLength', 'FNumber', 'ExposureTime', 'ISO']
+
+  for (const field of allowedFields) {
+    const value = exif[field]
+    if (value == null) continue
+    if (typeof value === 'string') {
+      const trimmed = value.trim()
+      if (trimmed) normalized[field] = trimmed
+      continue
+    }
+    if (typeof value === 'number' && Number.isFinite(value)) {
+      normalized[field] = value
+      continue
+    }
+  }
+
+  return Object.keys(normalized).length > 0 ? normalized : null
+}
+
 const publicPhotos = manifest.assets
   .filter(asset => asset.path.startsWith('public/Photography/'))
   .map(asset => {
@@ -19,7 +42,8 @@ const publicPhotos = manifest.assets
       category: category.toLowerCase(),
       width: asset.width,
       height: asset.height,
-      sizes: '(max-width: 640px) 46vw, (max-width: 1200px) 30vw, 420px'
+      sizes: '(max-width: 640px) 46vw, (max-width: 1200px) 30vw, 420px',
+      exif: normalizeExif(asset.exif)
     }
   })
   .sort((a, b) => a.src.localeCompare(b.src))