feat: Add thumbnail (#75)

yurucam · Apr 10, 2024 · 28d05ab · 28d05ab
2 parents 74e2cfd + 946bfcd
commit 28d05ab
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 0 deletions.
diff --git a/web/src/core/exif-metadata.ts b/web/src/core/exif-metadata.ts
@@ -8,6 +8,7 @@ class ExifMetadata {
   public fNumber: string | undefined;
   public iso: string | undefined;
   public exposureTime: string | undefined;
+  public thumbnail: string | undefined;
 
   constructor(metadata: Tags) {
     console.log(metadata);
@@ -18,6 +19,7 @@ class ExifMetadata {
     this.fNumber = metadata?.FNumber?.description;
     this.iso = metadata?.ISOSpeedRatings?.value?.toString();
     this.exposureTime = metadata?.ExposureTime?.description;
+    this.thumbnail = metadata?.Thumbnail?.base64 ? 'data:image/jpg;base64,' + metadata?.Thumbnail?.base64 : undefined;
   }
 }
 

diff --git a/web/src/core/photo.ts b/web/src/core/photo.ts
@@ -137,6 +137,14 @@ class Photo {
   public set exposureTime(value: string | undefined) {
     this.metadata.exposureTime = value;
   }
+
+  /**
+   * Returns the thumbnail of the camera that took the photo.
+   * @example 'data:image/jpg;base64,...'
+   */
+  public get thumbnail(): string | undefined {
+    return this.metadata.thumbnail;
+  }
 }
 
 export default Photo;
diff --git a/web/src/pages/root/page.tsx b/web/src/pages/root/page.tsx
@@ -53,6 +53,13 @@ const RootPage = () => {
         {photos.map((photo, index) => (
           <ListItem
             key={index}
+            media={
+              <img
+                src={photo.thumbnail}
+                alt={photo.file.name}
+                style={{ width: '5rem', height: '4rem', objectFit: 'cover', borderRadius: '0.5rem' }}
+              />
+            }
             title={photo.file.name}
             subtitle={`${photo.focalLength} ${photo.fNumber} ISO${photo.iso} ${photo.exposureTime}s`}
             text={`${photo.make} ${photo.model} ${photo.lensModel}`}