✨ feat: add camera view on Android

Author: baronha

android/src/main/java/com/margelo/nitro/multipleimagepicker/CameraEngine.kt

@@ -3,26 +3,37 @@ package com.margelo.nitro.multipleimagepicker
 import android.content.Context
 import androidx.fragment.app.Fragment
 import com.bumptech.glide.Glide
+import com.facebook.react.bridge.ColorPropConverter
 import com.luck.lib.camerax.SimpleCameraX
 import com.luck.picture.lib.interfaces.OnCameraInterceptListener
 import java.io.File
 
-class CameraEngine(private val appContext: Context, val config: PickerCameraConfig) : OnCameraInterceptListener {
+class CameraEngine(
+    private val appContext: Context,
+    val config: NitroCameraConfig,
+) :
+    OnCameraInterceptListener {
     override fun openCamera(fragment: Fragment, cameraMode: Int, requestCode: Int) {
         val camera = SimpleCameraX.of()
+
+        camera.setImageEngine { context, url, imageView ->
+            Glide.with(context).load(url).into(imageView)
+        }
+
         camera.isAutoRotation(true)
         camera.setCameraMode(cameraMode)
         camera.isDisplayRecordChangeTime(true)
         camera.isManualFocusCameraPreview(true)
         camera.isZoomCameraPreview(true)
-        camera.setOutputPathDir(getSandboxCameraOutputPath())
         camera.setRecordVideoMaxSecond(config.videoMaximumDuration?.toInt() ?: 60)
-
-//        camera.setPermissionDeniedListener(getSimpleXPermissionDeniedListener())
-//        camera.setPermissionDescriptionListener(getSimpleXPermissionDescriptionListener())
-        camera.setImageEngine { context, url, imageView ->
-            Glide.with(context).load(url).into(imageView)
+        camera.setCameraAroundState(config.cameraDevice == CameraDevice.FRONT)
+        camera.setOutputPathDir(getSandboxCameraOutputPath())
+        
+        config.color?.let {
+            val primaryColor = ColorPropConverter.getColor(it, appContext)
+            camera.setCaptureLoadingColor(primaryColor)
         }
+
         camera.start(fragment.requireActivity(), fragment, requestCode)
     }
 

android/src/main/java/com/margelo/nitro/multipleimagepicker/MultipleImagePickerImp.kt

@@ -112,11 +112,21 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
                     setFilterMaxFileSize(it)
                 }
 
-
                 isDisplayCamera(config.camera != null)
 
                 config.camera?.let {
-                    setCameraInterceptListener(CameraEngine(appContext, it))
+                    val cameraConfig = NitroCameraConfig(
+                        mediaType = MediaType.ALL,
+                        presentation = Presentation.FULLSCREENMODAL,
+                        language = Language.SYSTEM,
+                        crop = null,
+                        isSaveSystemAlbum = false,
+                        color = config.primaryColor,
+                        cameraDevice = it.cameraDevice,
+                        videoMaximumDuration = it.videoMaximumDuration
+                    )
+
+                    setCameraInterceptListener(CameraEngine(appContext, cameraConfig))
                 }
             }
             .setImageSpanCount(config.numberOfColumn?.toInt() ?: 3)
@@ -314,31 +324,44 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
         resolved: (result: CameraResult) -> Unit,
         rejected: (reject: Double) -> Unit
     ) {
+        val activity = currentActivity
         val chooseMode = getChooseMode(config.mediaType)
-        val cameraConfig = PickerCameraConfig(
-            cameraDevice = config.cameraDevice,
-            videoMaximumDuration = config.videoMaximumDuration
-        )
 
         PictureSelector
-            .create(currentActivity)
+            .create(activity)
             .openCamera(chooseMode)
             .setLanguage(getLanguage(config.language))
+            .setCameraInterceptListener(CameraEngine(appContext, config))
             .isQuickCapture(true)
-            .setCropEngine(CropEngine(cropOption))
-//            .setOfAllCameraType(chooseMode)
-            .setCameraInterceptListener(CameraEngine(appContext, cameraConfig))
-            .forResult(object : OnResultCallbackListener<LocalMedia?> {
-                override fun onResult(result: java.util.ArrayList<LocalMedia?>?) {
-                    println("camera: $result")
+            .isOriginalControl(true)
+            .apply {
+                if (config.crop != null) {
+                    setCropEngine(CropEngine(cropOption))
+                }
+            }
+            .forResultActivity(object : OnResultCallbackListener<LocalMedia?> {
+                override fun onResult(results: java.util.ArrayList<LocalMedia?>?) {
+                    results?.first()?.let {
+                        val result = getResult(it)
+
+                        resolved(
+                            CameraResult(
+                                path = result.path,
+                                type = result.type,
+                                width = result.width,
+                                height = result.height,
+                                duration = result.duration,
+                                thumbnail = result.thumbnail,
+                                fileName = result.fileName
+                            )
+                        )
+                    }
                 }
 
                 override fun onCancel() {
-                    TODO("Not yet implemented")
+//                    rejected(0.0)
                 }
-
             })
-
     }
 
     private fun getChooseMode(mediaType: MediaType): Int {
@@ -558,7 +581,6 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
             height = item.cropImageHeight.toDouble()
         }
 
-
         val media = Result(
             localIdentifier = item.id.toString(),
             width,

example/src/index.tsx

@@ -96,10 +96,9 @@ export default function App() {
   const onCamera = async () => {
     try {
       const response = await openCamera({
-        crop: true,
-        isSaveSystemAlbum: false,
         mediaType: 'all',
         videoMaximumDuration: 5,
+        color: 'black',
       })
 
       setImages((prev) => {
@@ -449,7 +448,11 @@ export default function App() {
                   description="Enable crop circle functionality."
                 >
                   <Switch
-                    value={options?.crop?.circle}
+                    value={
+                      typeof options.crop === 'boolean'
+                        ? options.crop
+                        : options.crop?.circle
+                    }
                     onValueChange={(value) =>
                       setOptions(
                         'crop',

ios/HybridMultipleImagePicker+Camera.swift

@@ -78,7 +78,7 @@ extension HybridMultipleImagePicker {
                     if let filePath {
                         resolved(CameraResult(path: filePath, type: ResultType.image, width: uiImage.size.width, height: uiImage.size.height, duration: nil, thumbnail: nil, fileName: fileName))
                     } else {
-                        rejected(0)
+                        rejected(1)
                     }
 
                 case .video(let url):

src/index.ts

@@ -126,10 +126,11 @@ export async function openCamera(config?: CameraConfig): Promise<CameraResult> {
       mediaType: 'all',
       allowLocation: true,
       isSaveSystemAlbum: false,
-      color: processColor(config?.color ?? primaryColor) as any,
       ...config,
     } as NitroCameraConfig
 
+    cameraConfig.color = processColor(cameraConfig.color ?? primaryColor) as any
+
     cameraConfig.language = validateLanguage(cameraConfig.language)
 
     if (typeof cameraConfig.crop === 'boolean') {

src/types/camera.ts

@@ -40,12 +40,7 @@ export interface NitroCameraConfig extends PickerCameraConfig {
 export interface CameraConfig
   extends Omit<
     NitroCameraConfig,
-    | 'cameraDevice'
-    | 'mediaType'
-    | 'language'
-    | 'presentation'
-    | 'crop'
-    | 'color'
+    'mediaType' | 'language' | 'presentation' | 'crop' | 'color'
   > {
   /**
    * Type of media to be displayed