feat: add some better exif

src/components/ImageGallery.svelte

@@ -145,12 +145,21 @@
         console.log("Error loading", image);
       });
 
-      let exif = null;
+      let exif = [];
 
       try {
-        let rawExif = image.getAttribute("data-exif");
+        const rawExif = image.getAttribute("data-exif");
-        exif = JSON.parse(rawExif);
+        const exifData = JSON.parse(rawExif);
-        console.log(exif);
+        if (exifData) {
+          exif = [
+            "Model" in exifData ? exifData.Model : "",
+            "FocalLength" in exifData
+              ? exifData.FocalLength.replace(" mm", "mm")
+              : "",
+            "FNumber" in exifData ? exifData.FNumber : "",
+            "ExposureTime" in exifData ? exifData.ExposureTime : "",
+          ];
+        }
       } catch (error) {
         // No biggie
       }
@@ -229,22 +238,8 @@
     </div>
     {#if images[currentIndex].exif}
       {@const exif = images[currentIndex].exif}
-      <div class="exif" on:click={() => console.log(exif)}>
+      <div class="exif">
-        {#if "FocalLength" in exif}
+        {exif.join(" | ")}
-          {exif.FocalLength} |
-        {/if}
-
-        {#if "FNumber" in exif}
-          <i>f</i>{exif.FNumber} |
-        {/if}
-
-        {#if "ExposureTime" in exif}
-          {exif.ExposureTime.replace(" s", "s")} |
-        {/if}
-
-        {#if "Date" in exif}
-          {exif.Date}
-        {/if}
       </div>
     {/if}
   {/if}

src/helpers/image.ts

@@ -34,6 +34,7 @@ export async function generateThumbHash(image: { width: number, height: number }
 const allowedExif = [
   "ApertureValue",
   "DateTimeOriginal",
+  "ShutterSpeedValue",
   "ExposureTime",
   "ApertureValue",
   "FNumber",
@@ -42,6 +43,8 @@ const allowedExif = [
   "GPSLongitude",
   "GPSAltitude",
   "IsoSpeedRatings",
+  "Make",
+  "Model",
 ];
 
 export async function getExifData(image: ImageMetadata) {
@@ -56,7 +59,7 @@ export async function getExifData(image: ImageMetadata) {
     for (const key of allowedExif) {
       if (!tags[key]) continue;
       hasExif = true;
-      out[key] = tags[key].description;
+      out[key] = tags[key]?.description;
     }
 
     return hasExif ? out : undefined;