diff options
| -rw-r--r-- | src/lib/media/picker.shared.ts | 23 | ||||
| -rw-r--r-- | src/lib/media/picker.tsx | 27 | ||||
| -rw-r--r-- | src/lib/media/picker.web.tsx | 70 | ||||
| -rw-r--r-- | src/state/models/media/gallery.ts | 2 | ||||
| -rw-r--r-- | src/view/com/util/UserAvatar.tsx | 2 | ||||
| -rw-r--r-- | src/view/com/util/UserBanner.tsx | 2 |
6 files changed, 29 insertions, 97 deletions
diff --git a/src/lib/media/picker.shared.ts b/src/lib/media/picker.shared.ts new file mode 100644 index 000000000..00b09c6b8 --- /dev/null +++ b/src/lib/media/picker.shared.ts @@ -0,0 +1,23 @@ +import { + ImagePickerOptions, + launchImageLibraryAsync, + MediaTypeOptions, +} from 'expo-image-picker' +import {getDataUriSize} from './util' + +export async function openPicker(opts?: ImagePickerOptions) { + const response = await launchImageLibraryAsync({ + exif: false, + mediaTypes: MediaTypeOptions.Images, + quality: 1, + ...opts, + }) + + return (response.assets ?? []).map(image => ({ + mime: 'image/jpeg', + height: image.height, + width: image.width, + path: image.uri, + size: getDataUriSize(image.uri), + })) +} diff --git a/src/lib/media/picker.tsx b/src/lib/media/picker.tsx index 7c6dfcc44..d0ee1ae22 100644 --- a/src/lib/media/picker.tsx +++ b/src/lib/media/picker.tsx @@ -5,12 +5,7 @@ import { } from 'react-native-image-crop-picker' import {RootStoreModel} from 'state/index' import {CameraOpts, CropperOptions} from './types' -import { - ImagePickerOptions, - launchImageLibraryAsync, - MediaTypeOptions, -} from 'expo-image-picker' -import {getDataUriSize} from './util' +export {openPicker} from './picker.shared' /** * NOTE @@ -21,26 +16,6 @@ import {getDataUriSize} from './util' * -prf */ -export async function openPicker( - _store: RootStoreModel, - opts?: ImagePickerOptions, -) { - const response = await launchImageLibraryAsync({ - exif: false, - mediaTypes: MediaTypeOptions.Images, - quality: 1, - ...opts, - }) - - return (response.assets ?? []).map(image => ({ - mime: 'image/jpeg', - height: image.height, - width: image.width, - path: image.uri, - size: getDataUriSize(image.uri), - })) -} - export async function openCamera( _store: RootStoreModel, opts: CameraOpts, diff --git a/src/lib/media/picker.web.tsx b/src/lib/media/picker.web.tsx index 583f78a30..d12685b0c 100644 --- a/src/lib/media/picker.web.tsx +++ b/src/lib/media/picker.web.tsx @@ -1,34 +1,9 @@ /// <reference lib="dom" /> -import {PickerOpts, CameraOpts, CropperOptions} from './types' +import {CameraOpts, CropperOptions} from './types' import {RootStoreModel} from 'state/index' -import {getImageDim} from 'lib/media/manip' -import {extractDataUriMime} from './util' import {Image as RNImage} from 'react-native-image-crop-picker' - -interface PickedFile { - uri: string - path: string - size: number -} - -export async function openPicker( - _store: RootStoreModel, - opts?: PickerOpts, -): Promise<RNImage[]> { - const res = await selectFile(opts) - const dim = await getImageDim(res.uri) - const mime = extractDataUriMime(res.uri) - return [ - { - path: res.uri, - mime, - size: res.size, - width: dim.width, - height: dim.height, - }, - ] -} +export {openPicker} from './picker.shared' export async function openCamera( _store: RootStoreModel, @@ -57,44 +32,3 @@ export async function openCropper( }) }) } - -/** - * Opens the select file dialog in the browser. - * NOTE: - * If in the future someone updates this method to use: - * https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker - * Check that the `showOpenFilePicker` API does not require any permissions - * granted to use. As of this writing, it does not, but that could change - * in the future. If the user does need to go through a permissions granting - * flow, then checkout the usePhotoLibraryPermission() hook in - * src/lib/hooks/usePermissions.ts - * so that it gets appropriately updated. - */ -function selectFile(opts?: PickerOpts): Promise<PickedFile> { - return new Promise((resolve, reject) => { - var input = document.createElement('input') - input.type = 'file' - input.accept = opts?.mediaType === 'photo' ? 'image/*' : '*/*' - input.onchange = e => { - const target = e.target as HTMLInputElement - const file = target?.files?.[0] - if (!file) { - return reject(new Error('Canceled')) - } - - var reader = new FileReader() - reader.readAsDataURL(file) - reader.onload = readerEvent => { - if (!readerEvent.target) { - return reject(new Error('Canceled')) - } - resolve({ - uri: readerEvent.target.result as string, - path: file.name, - size: file.size, - }) - } - } - input.click() - }) -} diff --git a/src/state/models/media/gallery.ts b/src/state/models/media/gallery.ts index 52ef8f375..e53e861e2 100644 --- a/src/state/models/media/gallery.ts +++ b/src/state/models/media/gallery.ts @@ -87,7 +87,7 @@ export class GalleryModel { } async pick() { - const images = await openPicker(this.rootStore, { + const images = await openPicker({ selectionLimit: 4 - this.size, allowsMultipleSelection: true, }) diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx index afe06e0c8..b94cf54e9 100644 --- a/src/view/com/util/UserAvatar.tsx +++ b/src/view/com/util/UserAvatar.tsx @@ -147,7 +147,7 @@ export function UserAvatar({ return } - const items = await openPicker(store, { + const items = await openPicker({ aspect: [1, 1], }) const item = items[0] diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx index e3dfdca81..cce0e839b 100644 --- a/src/view/com/util/UserBanner.tsx +++ b/src/view/com/util/UserBanner.tsx @@ -55,7 +55,7 @@ export function UserBanner({ if (!(await requestPhotoAccessIfNeeded())) { return } - const items = await openPicker(store) + const items = await openPicker() onSelectNewBanner?.( await openCropper(store, { |