Fix user avatar and banner selector on web (#490)

src/lib/media/picker.web.tsx

@@ -14,7 +14,7 @@ interface PickedFile {
 
 export async function openPicker(
   _store: RootStoreModel,
-  opts: PickerOpts,
+  opts?: PickerOpts,
 ): Promise<RNImage[]> {
   const res = await selectFile(opts)
   const dim = await getImageDim(res.uri)
@@ -70,11 +70,11 @@ export async function openCropper(
  *   src/lib/hooks/usePermissions.ts
  * so that it gets appropriately updated.
  */
-function selectFile(opts: PickerOpts): Promise<PickedFile> {
+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.accept = opts?.mediaType === 'photo' ? 'image/*' : '*/*'
     input.onchange = e => {
       const target = e.target as HTMLInputElement
       const file = target?.files?.[0]

src/view/com/util/UserAvatar.tsx

@@ -79,7 +79,10 @@ export function UserAvatar({
         if (!(await requestPhotoAccessIfNeeded())) {
           return
         }
-        const items = await openPicker(store)
+        const items = await openPicker(store, {
+          mediaType: 'photo',
+          multiple: false,
+        })
 
         onSelectNewAvatar?.(
           await openCropper(store, {

src/view/com/util/UserBanner.tsx

@@ -38,9 +38,7 @@ export function UserBanner({
         }
         onSelectNewBanner?.(
           await openCamera(store, {
-            // compressImageMaxWidth: 3000, TODO needed?
             width: 3000,
-            // compressImageMaxHeight: 1000, TODO needed?
             height: 1000,
           }),
         )
@@ -54,14 +52,15 @@ export function UserBanner({
         if (!(await requestPhotoAccessIfNeeded())) {
           return
         }
-        const items = await openPicker(store)
+        const items = await openPicker(store, {
+          mediaType: 'photo',
+          multiple: false,
+        })
         onSelectNewBanner?.(
           await openCropper(store, {
             mediaType: 'photo',
             path: items[0].path,
-            // compressImageMaxWidth: 3000, TODO needed?
             width: 3000,
-            // compressImageMaxHeight: 1000, TODO needed?
             height: 1000,
           }),
         )