esoftplay 0.0.243 → 0.0.244

package/bin/build.js

@@ -330,22 +330,20 @@ export default function App() {
 			'expo-file-system',
 			'expo-font',
 			'expo-image',
-			'expo-image-manipulator',
-			'expo-image-picker',
 			'expo-linear-gradient',
 			'expo-media-library',
 			'expo-notifications',
 			'expo-status-bar',
 			'expo-splash-screen',
 			'expo-secure-store',
-			// 'expo-sqlite',
 			'expo-updates',
 			'immhelper',
 			'dayjs',
 			'react-fast-compare',
 			'react-native-gesture-handler',
 			'react-native-awesome-gallery',
-			// 'react-native-fast-image',
+			'react-native-global-exception-handler',
+			'react-native-image-crop-picker',
 			'react-native-keyboard-controller',
 			'react-native-mmkv',
 			'react-native-pan-pinch-view',

package/modules/lib/image.tsx

@@ -1,18 +1,16 @@
+//[moved] change native cropper
 // noPage
 import { LibComponent } from 'esoftplay/cache/lib/component/import';
 import { LibCurl } from 'esoftplay/cache/lib/curl/import';
 import { LibIcon } from 'esoftplay/cache/lib/icon/import';
-import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
 import { LibProgress } from 'esoftplay/cache/lib/progress/import';
 import { LibStyle } from 'esoftplay/cache/lib/style/import';
 import esp from 'esoftplay/esp';
 import useGlobalState from 'esoftplay/global';
 import { CameraView } from 'expo-camera';
-import * as ImageManipulator from 'expo-image-manipulator';
-import { SaveFormat } from 'expo-image-manipulator';
-import * as ImagePicker from 'expo-image-picker';
 import React from 'react';
-import { ActivityIndicator, Alert, Image, Platform, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, Image, TouchableOpacity, View } from 'react-native';
+import ImagePicker from "react-native-image-crop-picker";
 const { height, width } = LibStyle;
 
 
@@ -103,200 +101,83 @@ class m extends LibComponent<LibImageProps, LibImageState> {
   }
 
 
-  /** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/image.md#showCropper) untuk melihat dokumentasi*/
-  static showCropper(uri: string, forceCrop: boolean, ratio: string, message: string, result: (x: any) => void): void {
-    LibNavigation.navigateForResult("lib/image_crop", { image: uri, forceCrop, ratio, message }, 81793).then(result)
+  private static ratio2Size(ratio: string, maxDimension: number = 1200): [width: number, height: number] {
+    if (maxDimension <= 0 || !isFinite(maxDimension)) {
+      console.error("Invalid maxDimension provided, returning [0, 0].");
+      return [0, 0];
+    }
+    
+    const parts = ratio?.split(":");
+    if (parts?.length !== 2) {
+      return [maxDimension, maxDimension];
+    }
+
+    const [aspectRatioWidth, aspectRatioHeight] = parts.map(Number);
+
+    if (isNaN(aspectRatioWidth) || isNaN(aspectRatioHeight) || aspectRatioWidth <= 0 || aspectRatioHeight <= 0) {
+      return [maxDimension, maxDimension];
+    }
+
+    if (aspectRatioWidth > aspectRatioHeight) {
+      const width = maxDimension;
+      const height = (aspectRatioHeight / aspectRatioWidth) * width;
+      return [width, height];
+    } else {
+      const height = maxDimension;
+      const width = (aspectRatioWidth / aspectRatioHeight) * height;
+      return [width, height];
+    }
   }
 
   /** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/image.md#fromCamera) untuk melihat dokumentasi*/
   static fromCamera(options?: LibImageCameraOptions): Promise<string> {
     return new Promise((_r) => {
-      const timer = setTimeout(async () => {
-        const cameraPermission = await ImagePicker.getCameraPermissionsAsync();
-        var finalStatus = cameraPermission.status
-        if (finalStatus !== 'granted') {
-          const { status } = await ImagePicker.requestCameraPermissionsAsync();
-          finalStatus = status
-        }
-        if (finalStatus === 'granted') {
-          const rollPermission = await ImagePicker.getMediaLibraryPermissionsAsync();
-          finalStatus = rollPermission.status
-          if (finalStatus !== 'granted') {
-            const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
-            finalStatus = status
-          }
-        }
-        if (finalStatus != 'granted') {
-          Alert.alert(esp.lang("lib/image", "cam_title", esp.appjson().expo.name), esp.lang("lib/image", "cam_msg", esp.appjson().expo.name))
-        }
-        ImagePicker.launchCameraAsync({
-          allowsEditing: Platform.OS != 'ios' && options && options.crop ? true : false,
-          aspect: options?.crop?.ratio?.split(':').map((x) => Number(x)),
-          quality: 1,
-          presentationStyle: ImagePicker.UIImagePickerPresentationStyle.FULL_SCREEN
-        }).then(async (res: any) => {
-          if (!res)
-            res = ImagePicker?.getPendingResultAsync()
-          if (!res?.cancelled) {
-            let result: any = undefined
-            let hasUri = res?.uri
-            if (hasUri) {
-              result = res
-            } else if (res?.assets?.[0]) {
-              result = { ...res, ...res.assets[0] }
-            }
-            if (Platform.OS == 'ios' && options && options.crop) {
-              m.showCropper(result?.uri, options?.crop?.forceCrop, options?.crop?.ratio, options?.crop?.message, async (x) => {
-                let imageUri = await m.processImage(x, options?.maxDimension)
-                m.setResult(imageUri)
-                _r(imageUri)
-              })
-            } else {
-              let imageUri = await m.processImage(result, options?.maxDimension)
-              m.setResult(imageUri)
-              _r(imageUri)
-            }
-          }
-        })
-        clearTimeout(timer)
-      }, 1);
+      const [w, h] = m.ratio2Size(options?.crop?.ratio)
+      ImagePicker.openCamera({
+        width: w,
+        height: h,
+        cropping: true,
+      }).then(async (image) => {
+        let imageUri = await m.processImage(image.path, options?.maxDimension)
+        m.setResult(imageUri)
+        _r(imageUri)
+      });
+
     })
   }
 
   /** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/image.md#fromGallery) untuk melihat dokumentasi*/
   static fromGallery(options?: LibImageGalleryOptions): Promise<string | string[]> {
-    return new Promise((_r) => {
-      const timer = setTimeout(async () => {
-        const { status } = await ImagePicker.getMediaLibraryPermissionsAsync();
-        var finalStatus = status
-        if (finalStatus !== 'granted') {
-          const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
-          finalStatus = status
-        }
-        if (finalStatus != 'granted') {
-          Alert.alert(esp.lang("lib/image", "gallery_title"), esp.lang("lib/image", "gallery_msg"))
-          return
+    const [w, h] = m.ratio2Size(options?.crop?.ratio)
+    return new Promise(async (_r) => {
+      ImagePicker.openPicker({
+        width: w,
+        height: h,
+        cropping: true,
+      }).then(async (z) => {
+        if (z) {
+          let imageUri = await m.processImage(z.path, options?.maxDimension)
+          m.setResult(imageUri)
+          _r(imageUri)
         }
-        let max = 0
-        if (options?.multiple == true) {
-          max = options?.max || 0
-        } else {
-          max = 1
-        }
-        if (max == 1) {
-          ImagePicker.launchImageLibraryAsync({
-            presentationStyle: ImagePicker.UIImagePickerPresentationStyle.FULL_SCREEN,
-            allowsEditing: Platform.OS != 'ios' && options && options.crop ? true : false,
-            aspect: options?.crop?.ratio?.split(':').map((x) => Number(x)),
-            quality: 1,
-          }).then(async (z: any) => {
-            if (!z.cancelled) {
-              let x: any = undefined
-              let hasUri = z?.uri
-              if (hasUri) {
-                x = z
-              } else if (z?.assets?.[0]) {
-                x = { ...z, ...z.assets[0] }
-              }
-              if (Platform.OS == 'ios' && options && options.crop) {
-                m.showCropper(x.uri, options.crop.forceCrop, options.crop.ratio, options.crop?.message, async (x) => {
-                  let imageUri = await m.processImage(x, options?.maxDimension)
-                  m.setResult(imageUri)
-                  _r(imageUri)
-                })
-              } else {
-                let imageUri = await m.processImage(x, options?.maxDimension)
-                m.setResult(imageUri)
-                _r(imageUri)
-              }
-            }
-          })
-          return
-        }
-        LibNavigation.navigateForResult("lib/image_multi", { max: max }).then((x: any[]) => {
-          let a: string[] = []
-          x.forEach(async (t: any, i) => {
-            if (i == 0) {
-              LibProgress.show(esp.lang("lib/image", "wait"))
-            }
-            var wantedMaxSize = options?.maxDimension || 1280
-            var rawheight = t.height
-            var rawwidth = t.width
-            var ratio = rawwidth / rawheight
-            if (rawheight > rawwidth) {
-              var wantedwidth = wantedMaxSize * ratio;
-              var wantedheight = wantedMaxSize;
-            } else {
-              var wantedwidth = wantedMaxSize;
-              var wantedheight = wantedMaxSize / ratio;
-            }
-            const manipImage = await ImageManipulator.manipulateAsync(
-              t.uri,
-              [{ resize: { width: wantedwidth, height: wantedheight } }],
-              { format: SaveFormat.JPEG }
-            );
-            new LibCurl().upload('image_upload', "image", String(manipImage.uri), 'image/jpeg',
-              (res: any, msg: string) => {
-                a.push(String(res));
-                if (a.length == x.length) {
-                  if (max == 1) {
-                    _r(res)
-                  } else {
-                    _r(a)
-                  }
-                  LibProgress.hide()
-                }
-              },
-              (msg: any) => {
-                console.log(msg.message, "NOOO")
-                if (x.length - 1 == i)
-                  LibProgress.hide()
-              }, 1)
-          });
-        })
-        clearTimeout(timer)
-      }, 1)
+      });
     })
   }
 
   /** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/image.md#processImage) untuk melihat dokumentasi*/
   static processImage(result: any, maxDimension?: number): Promise<string> {
     return new Promise((r) => {
-      if (!result.cancelled) {
+      if (result) {
         LibProgress.show(esp.lang("lib/image", "wait_upload"))
-        var wantedMaxSize = maxDimension || 1280
-        var rawheight = result.height
-        var rawwidth = result.width
-        let doResize = false
-        if (wantedMaxSize < Math.max(rawheight, rawwidth)) {
-          doResize = true
-          var ratio = rawwidth / rawheight
-          if (rawheight > rawwidth) {
-            var wantedwidth = wantedMaxSize * ratio;
-            var wantedheight = wantedMaxSize;
-          } else {
-            var wantedwidth = wantedMaxSize;
-            var wantedheight = wantedMaxSize / ratio;
-          }
-        }
-
-        const timer = setTimeout(async () => {
-          const manipImage = await ImageManipulator.manipulateAsync(
-            result.uri,
-            doResize ? [{ resize: { width: wantedwidth, height: wantedheight } }] : [],
-            { format: SaveFormat.JPEG, compress: 1.0 }
-          );
-          new LibCurl().upload('image_upload', "image", String(manipImage.uri), 'image/jpeg',
-            (res: any, msg: string) => {
-              r(res);
-              LibProgress.hide()
-            },
-            (msg: any) => {
-              LibProgress.hide()
-              r(msg.message);
-            }, 1)
-          clearTimeout(timer)
-        }, 1);
+        new LibCurl().upload('image_upload', "image", String(result), 'image/jpeg',
+          (res: any, msg: string) => {
+            r(res);
+            LibProgress.hide()
+          },
+          (msg: any) => {
+            LibProgress.hide()
+            r(msg.message);
+          }, 1)
       }
     })
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esoftplay",
-  "version": "0.0.243",
+  "version": "0.0.244",
   "description": "embedding data from esoftplay framework (web based) into mobile app",
   "main": "cache/index.js",
   "types": "../../index.d.ts",

package/modules/lib/image_crop.tsx

@@ -1,263 +0,0 @@
-// withHooks
-import esp from 'esoftplay/esp';
-import useSafeState from 'esoftplay/state';
-
-import * as ImageManipulator from "expo-image-manipulator";
-import { useEffect, useRef } from 'react';
-import { Image, Pressable, Text, TouchableOpacity, View } from 'react-native';
-import PanPinchView from "react-native-pan-pinch-view";
-
-
-export interface LibImage_cropProps {
-
-}
-
-/** Klik [disini](https://github.com/dev-esoftplay/mobile-docs/blob/main/modules/lib/image_crop.md) untuk melihat dokumentasi*/
-export default function m(props: LibImage_cropProps): any {
-  const LibIcon = useRef(esp.mod("lib/icon")).current
-  const LibNavigation = useRef(esp.mod("lib/navigation")).current
-  const LibProgress = useRef(esp.mod("lib/progress")).current
-  const LibStatusbar = useRef(esp.mod("lib/statusbar")).current
-  const LibStyle = useRef(esp.mod("lib/style")).current
-  const LibTextstyle = useRef(esp.mod("lib/textstyle")).current
-  const LibToastProperty = useRef(esp.modProp("lib/toast")).current
-
-  const { image, ratio, forceCrop, message } = LibNavigation.getArgsAll(props)
-  const [_image, setImage] = useSafeState(image)
-  const [counter, setCounter] = useSafeState(0)
-  const [size, setSize] = useSafeState(LibStyle.width)
-  const [hint, setHint] = useSafeState(true)
-  const [cropCount, setCropCount] = useSafeState(0)
-
-  const _ratio = ratio && ratio.includes(":") ? ratio.split(":") : [3, 2]
-  const maxRatio = Math.max(_ratio)
-  const marginTop = 60 + LibStyle.STATUSBAR_HEIGHT
-  const viewRef = useRef<any>(null)
-  const imageRef = useRef<any>(null)
-
-
-  const minimalRatioSize = (LibStyle.width / size).toFixed(1) == (_ratio[0] / _ratio[1]).toFixed(1) ? LibStyle.width : Math.min(LibStyle.width, size)
-
-  let ratioSize = [minimalRatioSize, minimalRatioSize]
-  if (maxRatio == _ratio[0]) {
-    ratioSize[0] = _ratio[0] / _ratio[1] * minimalRatioSize
-  } else {
-    ratioSize[1] = _ratio[1] / _ratio[0] * minimalRatioSize
-  }
-
-
-
-  function resize(image: string) {
-    LibProgress.show(esp.lang("lib/image_crop", "waiting"))
-    Image.getSize(image, async (actualWidth, actualHeight) => {
-      var wantedMaxSize = 900
-      var rawheight = actualHeight
-      var rawwidth = actualWidth
-      var ratio = rawwidth / rawheight
-      if (rawheight > rawwidth) {
-        var wantedwidth = wantedMaxSize * ratio;
-        var wantedheight = wantedMaxSize;
-      } else {
-        var wantedwidth = wantedMaxSize;
-        var wantedheight = wantedMaxSize / ratio;
-      }
-      const manipImage = await ImageManipulator.manipulateAsync(
-        image,
-        [{ resize: { width: wantedwidth, height: wantedheight } }],
-        { format: ImageManipulator.SaveFormat.JPEG }
-      );
-      setImage(manipImage.uri)
-      LibProgress.hide()
-    }, () => { LibProgress.hide() })
-  }
-
-  useEffect(() => {
-    resize(_image)
-  }, [])
-
-  useEffect(() => {
-    Image.getSize(_image, async (actualWidth, actualHeight) => {
-      const h = actualHeight * LibStyle.width / actualWidth
-      setSize(h)
-    }, () => { })
-  }, [_image])
-
-  useEffect(() => {
-    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
-  }, [])
-
-  function reset() {
-    LibNavigation.replace('lib/image_crop', LibNavigation.getArgsAll(props))
-  }
-
-  function capture() {
-    LibProgress.show(esp.lang("lib/image_crop", "waiting_crop"))
-    let crop = {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-      pageX: 0,
-      pageY: 0
-    }
-    let img = {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-      pageX: 0,
-      pageY: 0
-    }
-    Image.getSize(_image, (actualWidth, actualHeight) => {
-      viewRef.current?.measure((...vls: number[]) => {
-        crop = {
-          x: vls[0],
-          y: vls[1],
-          width: vls[2],
-          height: vls[3],
-          pageX: vls[4],
-          pageY: vls[5]
-        }
-        imageRef.current?.measure((...vls: number[]) => {
-          img = {
-            x: vls[0],
-            y: vls[1],
-            width: vls[2],
-            height: vls[3],
-            pageX: vls[4],
-            pageY: vls[5]
-          }
-
-          let fixPageY = crop.pageY - marginTop
-
-          if (crop.pageX < 0) {
-            // cropWidth = cropWidth + crop.pageX
-            crop.pageX = 0
-          }
-          if (fixPageY < 0) {
-            // cropHeight = cropHeight + fixPageY
-            fixPageY = 0
-          }
-          let scale = actualWidth / img.width
-          let totalCropWidth = (crop.pageX + crop.width)
-          let totalCropHeight = (fixPageY + crop.height)
-          let cropWidth = totalCropWidth > img.width ? img.width - crop.pageX : crop.width
-          let cropHeight = totalCropHeight > img.height ? img.height - fixPageY : crop.height
-          // if (totalCropHeight > img.height) {
-          //   fixPageY = img.height - fixPageY
-          // }
-          // if (totalCropWidth > img.width) {
-          //   crop.pageX = img.width - crop.width
-          // }
-
-          const cropOption = {
-            originX: scale * (crop.pageX > img.width ? 0 : crop.pageX),
-            originY: scale * ((fixPageY) > img.height ? 0 : (fixPageY)),
-            width: (scale * cropWidth) > 0 ? (scale * cropWidth) : 0,
-            height: (scale * cropHeight) > 0 ? (scale * cropHeight) : 0,
-          }
-
-
-          ImageManipulator.manipulateAsync(
-            _image,
-            [{
-              crop: cropOption
-            }],
-            { compress: 1, format: ImageManipulator.SaveFormat.PNG }
-          ).then((x) => {
-            if (x.uri) {
-              setImage(x.uri)
-              setCropCount(cropCount + 1)
-            }
-            LibProgress.hide()
-          }).catch(() => {
-            LibProgress.hide()
-            LibToastProperty.show(esp.lang("lib/image_crop", "alert_out"))
-          })
-        })
-      })
-    }, () => {
-      LibProgress.hide()
-    })
-  }
-  return (
-    <View style={{ flex: 1, backgroundColor: "#000" }} key={counter}  >
-      <LibStatusbar style="light" />
-      <View style={{ marginTop: LibStyle.STATUSBAR_HEIGHT, height: 50, flexDirection: "row", justifyContent: 'space-between' }} >
-        <TouchableOpacity
-          onPress={() => LibNavigation.back()}
-          style={{ height: 50, width: 50, alignItems: 'center', justifyContent: 'center' }} >
-          <LibIcon name="close" color={'white'} />
-        </TouchableOpacity>
-        <View style={{ flexDirection: "row" }} >
-          <TouchableOpacity
-            onPress={reset}
-            style={{ height: 50, width: 50, alignItems: 'center', justifyContent: 'center' }} >
-            <LibIcon name="undo" color={'white'} />
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={capture}
-            style={{ height: 50, width: 50, alignItems: 'center', justifyContent: 'center' }} >
-            <LibIcon name="crop" color={'white'} />
-          </TouchableOpacity>
-        </View>
-      </View>
-      <View style={{ flex: 1 }} >
-
-        <Image
-          ref={imageRef}
-          style={{ resizeMode: "contain", height: size, width: LibStyle.width }} source={{ uri: _image }} />
-        <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }} >
-          <PanPinchView
-            key={_image}
-            minScale={0.5}
-            containerDimensions={{
-              width: LibStyle.width,
-              height: size,
-            }}
-            contentDimensions={{
-              width: ratioSize[0],
-              height: ratioSize[1]
-            }}
-            // style={{ backgroundColor: "transparent", flex: undefined, width: LibStyle.height * 100, height: LibStyle.height * 100, alignSelf: 'center', justifyContent: 'center' }}
-            maxScale={2}>
-            {/* <> */}
-            {/* <View style={{ backgroundColor: "rgba(0,0,0,0.5 )", flex: 1 }} />
-            <View style={{ flexDirection: "row" }} >
-              <View style={{ backgroundColor: "rgba(0,0,0,0.5 )", flex: 1 }} /> */}
-            <View ref={viewRef} style={{ height: ratioSize[1], width: ratioSize[0], backgroundColor: 'transparent', borderWidth: 1, borderColor: "white", borderStyle: 'dashed', zIndex: 100 }} >
-              <View style={{ flex: 1, backgroundColor: 'transparent', borderWidth: 1, borderColor: "black", borderStyle: 'dashed' }} />
-            </View>
-            {/* <View style={{ backgroundColor: "rgba(0,0,0,0.5 )", flex: 1 }} />
-            </View>
-            <View style={{ backgroundColor: "rgba(0,0,0,0.5 )", flex: 1 }} /> */}
-            {/* </> */}
-          </PanPinchView>
-        </View>
-
-        {
-          // hint &
-          <Pressable
-            onPress={() => setHint(!hint)}
-            style={{ opacity: hint ? 1 : 0, position: 'absolute', left: 0, right: 0, bottom: 50, backgroundColor: 'rgba(0,0,0,0.5)', alignItems: 'center', justifyContent: 'center', padding: 30 }} >
-            <Text style={{ color: "white", textAlign: 'center' }} >{message || esp.lang("lib/image_crop", "text_msg")}</Text>
-          </Pressable>
-        }
-        {
-          (!forceCrop || cropCount > 0) &&
-          <View style={{ position: "absolute", bottom: 10, left: 0, right: 0 }} >
-            <TouchableOpacity
-              onPress={() => {
-                Image.getSize(_image, (width, height) => {
-                  LibNavigation.sendBackResult({ uri: _image, width, height }, LibNavigation.getResultKey(props))
-                }, () => { })
-              }}
-              style={{ height: 50, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(255,255,255,0.3)' }} >
-              <LibTextstyle textStyle="body" text={esp.lang("lib/image_crop", "btn_save")} style={{ color: "white" }} />
-            </TouchableOpacity>
-          </View>
-        }
-      </View>
-    </View>
-  )
-}