@shopify/shop-minis-react 0.4.0 → 0.4.1

package/src/providers/ImagePickerProvider.tsx

@@ -9,12 +9,29 @@ import React, {
 
 import {useRequestPermissions} from '../hooks/util/useRequestPermissions'
 import {useReportInteraction} from '../internal/useReportInteraction'
+import {resizeImage} from '../internal/utils/resizeImage'
 
+export type ImageQuality = 'low' | 'medium' | 'high' | 'original'
 export type CameraFacing = 'front' | 'back'
+export interface CustomImageQuality {
+  size?: number
+  compression?: number
+}
+
+export interface OpenCameraParams {
+  cameraFacing?: CameraFacing
+  quality?: ImageQuality
+  customQuality?: CustomImageQuality
+}
+
+export interface OpenGalleryParams {
+  quality?: ImageQuality
+  customQuality?: CustomImageQuality
+}
 
 interface ImagePickerContextValue {
-  openCamera: (cameraFacing?: CameraFacing) => Promise<File>
-  openGallery: () => Promise<File>
+  openCamera: (params?: OpenCameraParams) => Promise<File>
+  openGallery: (params?: OpenGalleryParams) => Promise<File>
 }
 
 const ImagePickerContext = createContext<ImagePickerContextValue | null>(null)
@@ -44,7 +61,8 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
     handler: () => void
   } | null>(null)
   const activeOperationRef = useRef<'gallery' | 'camera' | null>(null)
-
+  const qualityRef = useRef<ImageQuality>('medium')
+  const customQualityRef = useRef<CustomImageQuality>(undefined)
   const {requestPermission} = useRequestPermissions()
   const {reportInteraction} = useReportInteraction()
 
@@ -77,26 +95,41 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
       resolveRef.current = null
       rejectRef.current = null
       activeOperationRef.current = null
+      qualityRef.current = 'medium'
+      customQualityRef.current = undefined
     }
   }, [reportInteraction])
 
   const handleFileChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const file = event.target.files?.[0]
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const {target} = event
+      const file = target.files?.[0]
 
       if (file && resolveRef.current) {
-        // Report success based on the active operation
-        if (activeOperationRef.current === 'gallery') {
-          reportInteraction({
-            interactionType: 'image_picker_success',
-          })
-        } else if (activeOperationRef.current === 'camera') {
-          reportInteraction({
-            interactionType: 'camera_success',
+        try {
+          const resizedFile = await resizeImage({
+            file,
+            quality: qualityRef.current,
+            customQuality: customQualityRef.current,
           })
-        }
 
-        resolveRef.current(file)
+          if (activeOperationRef.current === 'gallery') {
+            reportInteraction({
+              interactionType: 'image_picker_success',
+            })
+          } else if (activeOperationRef.current === 'camera') {
+            reportInteraction({
+              interactionType: 'camera_success',
+            })
+          }
+
+          resolveRef.current(resizedFile)
+        } catch (error) {
+          console.warn('Image resize failed, using original:', error)
+          if (resolveRef.current) {
+            resolveRef.current(file)
+          }
+        }
 
         resolveRef.current = null
         rejectRef.current = null
@@ -105,80 +138,90 @@ export function ImagePickerProvider({children}: ImagePickerProviderProps) {
         cleanupCancelHandler()
       }
 
-      event.target.value = ''
+      target.value = ''
     },
     [cleanupCancelHandler, reportInteraction]
   )
 
-  const openGallery = useCallback(() => {
-    return new Promise<File>((resolve, reject) => {
-      rejectPendingPromise()
-      cleanupCancelHandler()
-
-      resolveRef.current = resolve
-      rejectRef.current = reject
-      activeOperationRef.current = 'gallery'
-
-      const input = galleryInputRef.current
+  const openGallery = useCallback(
+    ({quality = 'medium', customQuality}: OpenGalleryParams = {}) => {
+      return new Promise<File>((resolve, reject) => {
+        rejectPendingPromise()
+        cleanupCancelHandler()
 
-      if (!input) {
-        const error = new Error('Gallery input not found')
-        reportInteraction({
-          interactionType: 'image_picker_error',
-          interactionValue: error.message,
-        })
-        reject(error)
-        resolveRef.current = null
-        rejectRef.current = null
-        activeOperationRef.current = null
-        return
-      }
+        qualityRef.current = quality
+        customQualityRef.current = customQuality
+        resolveRef.current = resolve
+        rejectRef.current = reject
+        activeOperationRef.current = 'gallery'
+        const input = galleryInputRef.current
 
-      const handleCancel = () => {
-        if (rejectRef.current) {
-          const error = new Error('User cancelled file selection')
+        if (!input) {
+          const error = new Error('Gallery input not found')
           reportInteraction({
             interactionType: 'image_picker_error',
             interactionValue: error.message,
           })
-          rejectRef.current(error)
+          reject(error)
           resolveRef.current = null
           rejectRef.current = null
           activeOperationRef.current = null
+          return
         }
-        cleanupCancelHandler()
-      }
 
-      input.addEventListener('cancel', handleCancel)
-      activeCancelHandlerRef.current = {input, handler: handleCancel}
+        const handleCancel = () => {
+          if (rejectRef.current) {
+            const error = new Error('User cancelled file selection')
+            reportInteraction({
+              interactionType: 'image_picker_error',
+              interactionValue: error.message,
+            })
+            rejectRef.current(error)
+            resolveRef.current = null
+            rejectRef.current = null
+            activeOperationRef.current = null
+          }
+          cleanupCancelHandler()
+        }
 
-      reportInteraction({
-        interactionType: 'image_picker_open',
-      })
+        input.addEventListener('cancel', handleCancel)
+        activeCancelHandlerRef.current = {input, handler: handleCancel}
 
-      requestPermission({permission: 'CAMERA'})
-        .then(() => {
-          // This will show both Camera and Gallery
-          input.click()
-        })
-        .catch(() => {
-          // Show only Gallery
-          input.click()
+        reportInteraction({
+          interactionType: 'image_picker_open',
         })
-    })
-  }, [
-    rejectPendingPromise,
-    cleanupCancelHandler,
-    requestPermission,
-    reportInteraction,
-  ])
+
+        requestPermission({permission: 'CAMERA'})
+          .then(() => {
+            // This will show both Camera and Gallery
+            input.click()
+          })
+          .catch(() => {
+            // Show only Gallery
+            input.click()
+          })
+      })
+    },
+    [
+      rejectPendingPromise,
+      cleanupCancelHandler,
+      requestPermission,
+      reportInteraction,
+    ]
+  )
 
   const openCamera = useCallback(
-    (cameraFacing: CameraFacing = 'back') => {
+    ({
+      cameraFacing = 'back',
+      quality = 'medium',
+      customQuality,
+    }: OpenCameraParams = {}) => {
       return new Promise<File>((resolve, reject) => {
         rejectPendingPromise()
         cleanupCancelHandler()
 
+        qualityRef.current = quality
+        customQualityRef.current = customQuality
         resolveRef.current = resolve
         rejectRef.current = reject
         activeOperationRef.current = 'camera'