✨ feat: doing handle open camera capture

Author: baronha

MultipleImagePicker.podspec

@@ -28,7 +28,8 @@ Pod::Spec.new do |s|
 
 
   s.dependency "HXPhotoPicker/Picker", "4.2.3"
-  s.dependency "HXPhotoPicker/Editor/Lite", "4.2.3"
+  s.dependency "HXPhotoPicker/Editor", "4.2.3"
+  s.dependency "HXPhotoPicker/Camera", "4.2.3"
 
   s.pod_target_xcconfig = {
     # C++ compiler flags, mainly for folly.

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

@@ -34,4 +34,12 @@ class MultipleImagePicker : HybridMultipleImagePickerSpec() {
         pickerModule.openPreview(media, index.toInt(), config)
     }
 
+    override fun openCamera(
+        config: NitroCameraConfig,
+        resolved: (result: CameraResult) -> Unit,
+        rejected: (reject: Double) -> Unit
+    ) {
+        pickerModule.openCamera(config, resolved, rejected)
+    }
+
 }

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

@@ -73,11 +73,7 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
         setStyle() // set style for UI
         handleSelectedAssets(config)
 
-        val chooseMode = when (config.mediaType) {
-            MediaType.VIDEO -> SelectMimeType.ofVideo()
-            MediaType.IMAGE -> SelectMimeType.ofImage()
-            else -> SelectMimeType.ofAll()
-        }
+        val chooseMode = getChooseMode(config.mediaType)
 
         val maxSelect = config.maxSelect?.toInt() ?: 20
         val maxVideo = config.maxVideo?.toInt() ?: 20
@@ -312,6 +308,45 @@ class MultipleImagePickerImp(reactContext: ReactApplicationContext?) :
         return OnCustomLoadingListener { context -> LoadingDialog(context) }
     }
 
+    @ReactMethod
+    fun openCamera(
+        config: NitroCameraConfig,
+        resolved: (result: CameraResult) -> Unit,
+        rejected: (reject: Double) -> Unit
+    ) {
+        val chooseMode = getChooseMode(config.mediaType)
+        val cameraConfig = PickerCameraConfig(
+            cameraDevice = config.cameraDevice,
+            videoMaximumDuration = config.videoMaximumDuration
+        )
+
+        PictureSelector
+            .create(currentActivity)
+            .openCamera(chooseMode)
+//            .setLanguage(getLanguage(config.language))
+            .isQuickCapture(true)
+            .setCameraInterceptListener(CameraEngine(appContext, cameraConfig))
+            .forResult(object : OnResultCallbackListener<LocalMedia?> {
+                override fun onResult(result: java.util.ArrayList<LocalMedia?>?) {
+                    println("camera: $result")
+                }
+
+                override fun onCancel() {
+                    TODO("Not yet implemented")
+                }
+
+            })
+
+    }
+
+    private fun getChooseMode(mediaType: MediaType): Int {
+        return when (mediaType) {
+            MediaType.VIDEO -> SelectMimeType.ofVideo()
+            MediaType.IMAGE -> SelectMimeType.ofImage()
+            else -> SelectMimeType.ofAll()
+        }
+    }
+
 
     private fun getLanguage(language: Language): Int {
         return when (language) {

example/src/components/Button.tsx

@@ -9,18 +9,35 @@ import { Text } from './Text'
 
 interface Props extends TouchableOpacityProps {
   children: React.ReactNode | string
+  type?: 'full' | 'outline'
 }
 
-export function Button({ children, style: containerStyle, onPress }: Props) {
+export function Button({
+  children,
+  style: containerStyle,
+  onPress,
+  type = 'full',
+}: Props) {
   const { foreground, background } = useTheme()
+  const isFull = type === 'full'
 
   return (
     <TouchableOpacity
-      style={[style.button, containerStyle, { backgroundColor: foreground }]}
+      style={[
+        style.button,
+        containerStyle,
+        // eslint-disable-next-line react-native/no-inline-styles
+        {
+          backgroundColor: isFull ? foreground : 'transparent',
+          borderColor: isFull ? 'transparent' : foreground,
+        },
+      ]}
       onPress={onPress}
     >
       {typeof children === 'string' ? (
-        <Text style={[style.text, { color: background }]}>{children}</Text>
+        <Text style={[style.text, { color: isFull ? background : foreground }]}>
+          {children}
+        </Text>
       ) : (
         children
       )}
@@ -32,6 +49,7 @@ const style = StyleSheet.create({
   button: {
     padding: 12,
     alignItems: 'center',
+    borderWidth: 1.5,
   },
   text: {
     fontFamily: 'Avenir',

example/src/components/Row.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { StyleSheet, ViewProps, ViewStyle } from 'react-native'
-import { View } from './View'
+import { StyleSheet, ViewStyle } from 'react-native'
+import { View, ViewProps } from './View'
 
 export interface RowProps extends ViewProps {
   alignItems?: ViewStyle['alignItems']

example/src/components/View.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { View as RNView, ViewProps } from 'react-native'
+import { View as RNView, ViewProps as RNViewProps } from 'react-native'
 import useTheme from '../hook/useTheme'
 
-interface Props extends ViewProps {
+export interface ViewProps extends RNViewProps {
   level?: 0 | 1 | 2 | 3
   flex?: number
 }
@@ -12,7 +12,7 @@ export function View({
   style: containerStyle,
   level = 0,
   flex,
-}: Props) {
+}: ViewProps) {
   const theme = useTheme()
   const backgroundColor = !level
     ? theme.background

example/src/index.tsx

@@ -22,6 +22,7 @@ import {
   Config,
   openCropper,
   openPreview,
+  openCamera,
 } from '@baronha/react-native-multiple-image-picker'
 import { useImmer } from 'use-immer'
 import { StatusBar } from 'expo-status-bar'
@@ -92,6 +93,18 @@ export default function App() {
     }
   }
 
+  const onCamera = async () => {
+    try {
+      const response = await openCamera()
+
+      console.log('response: ', response)
+
+      layoutEffect()
+    } catch (e) {
+      console.log('e: ', e)
+    }
+  }
+
   const onCrop = async () => {
     try {
       console.log('images: ', images)
@@ -550,9 +563,14 @@ export default function App() {
       </KeyboardAvoidingView>
 
       <View level={2}>
-        <Button style={style.buttonOpen} onPress={onPicker}>
-          Open Picker
-        </Button>
+        <Row style={style.bottom} level={2} gap={12}>
+          <Button type="outline" onPress={onCamera}>
+            Open Camera
+          </Button>
+          <Button style={style.openPicker} onPress={onPicker}>
+            Open Picker
+          </Button>
+        </Row>
         <SafeAreaView />
       </View>
     </Container>
@@ -643,4 +661,11 @@ const style = StyleSheet.create({
     borderRadius: 6,
     borderWidth: 1,
   },
+  bottom: {
+    padding: 16,
+    paddingHorizontal: 24,
+  },
+  openPicker: {
+    flex: 1,
+  },
 })

ios/HybridMultipleImagePicker+Camera.swift

@@ -8,7 +8,55 @@
 import HXPhotoPicker
 
 extension HybridMultipleImagePicker {
-//    func setCameraConfig(config: Camera) {
-//        //
-//    }
+    func openCamera(config: NitroCameraConfig, resolved: @escaping ((CameraResult) -> Void), rejected: @escaping ((Double) -> Void)) throws {
+        var cameraConfig = CameraConfiguration()
+
+        cameraConfig.videoMaximumDuration = config.videoMaximumDuration ?? 60
+
+        cameraConfig.modalPresentationStyle = self.setPresentation(config.presentation)
+
+        cameraConfig.editor.modalPresentationStyle = .fullScreen
+
+        if let crop = config.crop {
+            let editor = PickerCropConfig(circle: crop.circle, ratio: crop.ratio, defaultRatio: crop.defaultRatio, freeStyle: crop.freeStyle)
+            cameraConfig.editor = setCropConfig(editor)
+        } else {
+            cameraConfig.allowsEditing = false
+        }
+
+        cameraConfig.languageType = setLocale(language: config.language)
+        cameraConfig.isSaveSystemAlbum = config.isSaveSystemAlbum ?? false
+        cameraConfig.allowLocation = config.allowLocation ?? true
+
+        switch Int(config.cameraDevice.rawValue) {
+        case 0:
+            cameraConfig.position = .front
+        default:
+            cameraConfig.position = .back
+        }
+
+        DispatchQueue.main.async {
+            Photo.capture(cameraConfig) { result, _, _ in
+                print("result: ", result)
+            }
+        }
+    }
+
+    func setCameraConfig(_ options: PickerCameraConfig) -> SystemCameraConfiguration {
+        var config = SystemCameraConfiguration()
+
+        config.editExportPreset = .highQuality
+        config.videoQuality = .typeHigh
+
+        switch Int(options.cameraDevice.rawValue) {
+        case 0:
+            config.cameraDevice = .front
+        default:
+            config.cameraDevice = .rear
+        }
+
+        config.videoMaximumDuration = options.videoMaximumDuration ?? 60
+
+        return config
+    }
 }

ios/HybridMultipleImagePicker+Config.swift

@@ -124,19 +124,7 @@ extension HybridMultipleImagePicker {
         if let cameraOption = options.camera {
             photoList.allowAddCamera = true
 
-            var cameraConfig = SystemCameraConfiguration()
-
-            cameraConfig.editExportPreset = .highQuality
-            cameraConfig.videoQuality = .typeHigh
-
-            switch Int(cameraOption.cameraDevice.rawValue) {
-            case 0:
-                cameraConfig.cameraDevice = .front
-            default:
-                cameraConfig.cameraDevice = .rear
-            }
-
-            cameraConfig.videoMaximumDuration = cameraOption.videoMaximumDuration ?? 60
+            var cameraConfig = setCameraConfig(cameraOption)
 
             photoList.cameraType = .system(cameraConfig)
         } else {
@@ -149,12 +137,7 @@ extension HybridMultipleImagePicker {
         setLanguage(options)
         setTheme(options)
 
-        switch Int(options.presentation.rawValue) {
-        case 1:
-            config.modalPresentationStyle = .formSheet
-        default:
-            config.modalPresentationStyle = .fullScreen
-        }
+        config.modalPresentationStyle = setPresentation(options.presentation)
     }
 
     private func setTheme(_ options: NitroConfig) {
@@ -203,6 +186,19 @@ extension HybridMultipleImagePicker {
         config.photoList.cell.customSelectableCellClass = nil
     }
 
+    func setPresentation(_ presentation: Presentation?) -> UIModalPresentationStyle {
+        if let presentation {
+            switch Int(presentation.rawValue) {
+            case 1:
+                return .formSheet
+            default:
+                return .fullScreen
+            }
+        }
+
+        return .fullScreen
+    }
+
     private func setLanguage(_ options: NitroConfig) {
         if let text = options.text {
             if let finish = text.finish {

nitrogen/generated/android/MultipleImagePickerOnLoad.cpp

@@ -15,6 +15,7 @@
 #include "JFunc_void_std__vector_Result_.hpp"
 #include "JFunc_void_double.hpp"
 #include "JFunc_void_CropResult.hpp"
+#include "JFunc_void_CameraResult.hpp"
 #include <NitroModules/JNISharedPtr.hpp>
 #include <NitroModules/DefaultConstructableObject.hpp>
 
@@ -32,6 +33,8 @@ int initialize(JavaVM* vm) {
     margelo::nitro::multipleimagepicker::JFunc_void_double::registerNatives();
     margelo::nitro::multipleimagepicker::JFunc_void_CropResult::registerNatives();
     margelo::nitro::multipleimagepicker::JFunc_void_double::registerNatives();
+    margelo::nitro::multipleimagepicker::JFunc_void_CameraResult::registerNatives();
+    margelo::nitro::multipleimagepicker::JFunc_void_double::registerNatives();
 
     // Register Nitro Hybrid Objects
     HybridObjectRegistry::registerHybridObjectConstructor(