5 files changed, 43 insertions, 47 deletions
diff --git a/src/lib/media/alt-text.ts b/src/lib/media/alt-text.ts
deleted file mode 100644
index 4109f667a..000000000
--- a/src/lib/media/alt-text.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {RootStoreModel} from 'state/index'
-import {ImageModel} from 'state/models/media/image'
-
-export async function openAltTextModal(
-  store: RootStoreModel,
-  image: ImageModel,
-) {
-  store.shell.openModal({
-    name: 'alt-text-image',
-    image,
-  })
-}
diff --git a/src/lib/media/image-sizes.ts b/src/lib/media/image-sizes.ts
new file mode 100644
index 000000000..4ea95ea23
--- /dev/null
+++ b/src/lib/media/image-sizes.ts
@@ -0,0 +1,34 @@
+import {Image} from 'react-native'
+import type {Dimensions} from 'lib/media/types'
+
+const sizes: Map<string, Dimensions> = new Map()
+const activeRequests: Map<string, Promise<Dimensions>> = new Map()
+
+export function get(uri: string): Dimensions | undefined {
+  return sizes.get(uri)
+}
+
+export async function fetch(uri: string): Promise<Dimensions> {
+  const Dimensions = sizes.get(uri)
+  if (Dimensions) {
+    return Dimensions
+  }
+
+  const prom =
+    activeRequests.get(uri) ||
+    new Promise<Dimensions>(resolve => {
+      Image.getSize(
+        uri,
+        (width: number, height: number) => resolve({width, height}),
+        (err: any) => {
+          console.error('Failed to fetch image dimensions for', uri, err)
+          resolve({width: 0, height: 0})
+        },
+      )
+    })
+  activeRequests.set(uri, prom)
+  const res = await prom
+  activeRequests.delete(uri)
+  sizes.set(uri, res)
+  return res
+}
diff --git a/src/lib/media/picker.e2e.tsx b/src/lib/media/picker.e2e.tsx
index 9805c3464..096667479 100644
--- a/src/lib/media/picker.e2e.tsx
+++ b/src/lib/media/picker.e2e.tsx
@@ -1,4 +1,3 @@
-import {RootStoreModel} from 'state/index'
 import {Image as RNImage} from 'react-native-image-crop-picker'
 import RNFS from 'react-native-fs'
 import {CropperOptions} from './types'
@@ -22,18 +21,15 @@ async function getFile() {
   })
 }
 
-export async function openPicker(_store: RootStoreModel): Promise<RNImage[]> {
+export async function openPicker(): Promise<RNImage[]> {
   return [await getFile()]
 }
 
-export async function openCamera(_store: RootStoreModel): Promise<RNImage> {
+export async function openCamera(): Promise<RNImage> {
   return await getFile()
 }
 
-export async function openCropper(
-  _store: RootStoreModel,
-  opts: CropperOptions,
-): Promise<RNImage> {
+export async function openCropper(opts: CropperOptions): Promise<RNImage> {
   return {
     path: opts.path,
     mime: 'image/jpeg',
diff --git a/src/lib/media/picker.tsx b/src/lib/media/picker.tsx
index d0ee1ae22..bf531c981 100644
--- a/src/lib/media/picker.tsx
+++ b/src/lib/media/picker.tsx
@@ -3,23 +3,10 @@ import {
   openCropper as openCropperFn,
   Image as RNImage,
 } from 'react-native-image-crop-picker'
-import {RootStoreModel} from 'state/index'
 import {CameraOpts, CropperOptions} from './types'
 export {openPicker} from './picker.shared'
 
-/**
- * NOTE
- * These methods all include the RootStoreModel as the first param
- * because the web versions require it. The signatures have to remain
- * equivalent between the different forms, but the store param is not
- * used here.
- * -prf
- */
-
-export async function openCamera(
-  _store: RootStoreModel,
-  opts: CameraOpts,
-): Promise<RNImage> {
+export async function openCamera(opts: CameraOpts): Promise<RNImage> {
   const item = await openCameraFn({
     width: opts.width,
     height: opts.height,
@@ -39,10 +26,7 @@ export async function openCamera(
   }
 }
 
-export async function openCropper(
-  _store: RootStoreModel,
-  opts: CropperOptions,
-) {
+export async function openCropper(opts: CropperOptions) {
   const item = await openCropperFn({
     ...opts,
     forceJpg: true, // ios only
diff --git a/src/lib/media/picker.web.tsx b/src/lib/media/picker.web.tsx
index d12685b0c..995a0c95f 100644
--- a/src/lib/media/picker.web.tsx
+++ b/src/lib/media/picker.web.tsx
@@ -1,25 +1,19 @@
 /// <reference lib="dom" />
 
 import {CameraOpts, CropperOptions} from './types'
-import {RootStoreModel} from 'state/index'
 import {Image as RNImage} from 'react-native-image-crop-picker'
 export {openPicker} from './picker.shared'
+import {unstable__openModal} from '#/state/modals'
 
-export async function openCamera(
-  _store: RootStoreModel,
-  _opts: CameraOpts,
-): Promise<RNImage> {
+export async function openCamera(_opts: CameraOpts): Promise<RNImage> {
   // const mediaType = opts.mediaType || 'photo' TODO
   throw new Error('TODO')
 }
 
-export async function openCropper(
-  store: RootStoreModel,
-  opts: CropperOptions,
-): Promise<RNImage> {
+export async function openCropper(opts: CropperOptions): Promise<RNImage> {
   // TODO handle more opts
   return new Promise((resolve, reject) => {
-    store.shell.openModal({
+    unstable__openModal({
       name: 'crop-image',
       uri: opts.path,
       onSelect: (img?: RNImage) => {