feat: expose more photo metadata (#1203)

* improve SavedPhoto type

* WIP

* wip: accounting for potentially updated schema

* cleanup

* remove unused exif helper function

* update displayed storage size

* update expo-image dep declaration

* changes based on feedback

* fix type errors

* remove todo comment

Author: achou11

messages/en.json

@@ -1278,13 +1278,25 @@
   "screens.OnboardingPrivacyPolicy.shareDiagnostics": {
     "message": "Share Diagnostic Information"
   },
-  "screens.PhotoPreviewModal.DeletePhoto.headerButtonText": {
+  "screens.PhotoPreviewModal.headerButtonText": {
     "message": "Delete Photo"
   },
-  "screens.PhotoPreviewModal.DeletePhoto.navTitle": {
+  "screens.PhotoPreviewModal.imageStorageSize": {
+    "description": "Image size in megabytes",
+    "message": "{value} MB"
+  },
+  "screens.PhotoPreviewModal.landscape": {
+    "description": "Describes image layout when taking photo horizontally",
+    "message": "Landscape"
+  },
+  "screens.PhotoPreviewModal.navTitle": {
     "message": "Photo Info"
   },
-  "screens.PhotoPreviewModal.DeletePhoto.validatedByCoMapeo": {
+  "screens.PhotoPreviewModal.portrait": {
+    "description": "Describes image layout when taking photo vertically",
+    "message": "Portrait"
+  },
+  "screens.PhotoPreviewModal.validatedByCoMapeo": {
     "message": "Validated by CoMapeo"
   },
   "screens.PrivacyPolicy.aboutAwana": {

package-lock.json

@@ -66,6 +66,7 @@
     "expo-file-system": "18.0.12",
     "expo-font": "13.0.4",
     "expo-image-manipulator": "13.0.6",
+    "expo-image": "2.0.7",
     "expo-localization": "16.0.1",
     "expo-location": "18.0.10",
     "expo-secure-store": "14.0.1",

package.json

@@ -6,8 +6,7 @@ export const THUMBNAIL_QUALITY = 30;
 export const PREVIEW_SIZE = 1200;
 export const PREVIEW_QUALITY = 30;
 
-export type SavedPhoto = Omit<Attachment, 'type'> & {
-  type: 'photo';
+export type SavedPhoto = Extract<Attachment, {type: 'photo'}> & {
   deleted?: boolean;
 };
 

src/frontend/contexts/PhotoPromiseContext/types.ts

@@ -2,12 +2,14 @@ import * as v from 'valibot';
 
 import type {PhotoEXIF} from '../sharedTypes';
 
+export type PhotoLayout = 'horizontal' | 'vertical';
+
 export const PhotoEXIFSchema = v.object({
   ApertureValue: v.optional(v.number()),
   ExposureTime: v.optional(v.number()),
   Flash: v.optional(v.number()),
-  FocalLength: v.optional(v.number()),
   FNumber: v.optional(v.number()),
+  FocalLength: v.optional(v.number()),
   ISOSpeedRatings: v.optional(v.number()),
   ImageLength: v.optional(v.number()),
   ImageWidth: v.optional(v.number()),
@@ -18,3 +20,32 @@ export const PhotoEXIFSchema = v.object({
 } satisfies Required<{
   [field in keyof PhotoEXIF]: v.GenericSchema<PhotoEXIF[field]>;
 }>) satisfies v.GenericSchema<PhotoEXIF>;
+
+/**
+ * Describes the layout of the photo based on its EXIF orientation tag value.
+ *
+ * @param exifOrientation Value of EXIF orientation tag
+ * @returns The layout
+ */
+export function getPhotoLayout(exifOrientation: number): PhotoLayout {
+  // See "Orientation" tag in https://exiftool.org/TagNames/EXIF.html
+  // Helpful explainer: https://www.ameto.de/blog/exif-orientation-primer/
+
+  switch (exifOrientation) {
+    case 1:
+    case 2:
+    case 3:
+    case 4: {
+      return 'horizontal';
+    }
+    case 5:
+    case 6:
+    case 7:
+    case 8: {
+      return 'vertical';
+    }
+    default: {
+      throw new Error(`Invalid orientation value: ${exifOrientation}`);
+    }
+  }
+}

src/frontend/lib/exif.ts

@@ -1,5 +1,6 @@
 import * as FileSystem from 'expo-file-system';
 import * as DocumentPicker from 'expo-document-picker';
+import {Image as ExpoImage} from 'expo-image';
 
 // @ts-expect-error Only null when on web https://github.com/expo/expo/issues/5558
 export const DOCUMENT_DIRECTORY: string = FileSystem.documentDirectory;
@@ -53,3 +54,37 @@ export async function selectFile({
 
   return asset;
 }
+
+/**
+ * Returns the storage size of an image rendered using `expo-image`.
+ * This is specific to Expo because their `Image` component uses the Expo file system abstraction for caching.
+ *
+ * @param imageURL The URL of the image.
+ *
+ * @returns The storage size of the image, in bytes.
+ */
+export async function getExpoImageStorageSize(
+  imageURL: string,
+): Promise<number> {
+  let fileInfo: FileSystem.FileInfo;
+
+  if (imageURL.startsWith('file://')) {
+    fileInfo = await FileSystem.getInfoAsync(imageURL, {size: true});
+  } else {
+    const cachePath = await ExpoImage.getCachePathAsync(imageURL);
+
+    if (!cachePath) {
+      throw new Error(`Could not get size for image at ${imageURL}`);
+    }
+
+    fileInfo = await FileSystem.getInfoAsync(`file://${cachePath}`, {
+      size: true,
+    });
+  }
+
+  if (!fileInfo.exists) {
+    throw new Error(`Could not get size for image at ${imageURL}`);
+  }
+
+  return fileInfo.size;
+}