esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/component/accept.tsx

@@ -0,0 +1,43 @@
+// withHooks
+// noPage
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface ComponentAcceptArgs {
+
+}
+export interface ComponentAcceptProps {
+  onPressAgree: () => void
+  agree: boolean
+  onPressTerm: () => void
+  onPressPrivacy: () => void
+  style?: any
+  testID?: string
+  fontColor?: string
+}
+export default function m(props: ComponentAcceptProps): any {
+  return (
+    <View style={{ margin: 15, marginTop: 0, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+      <ComponentTouchable testID={props.testID} onPress={() => { props.onPressAgree() }}>
+        <View style={[{ height: 20, width: 20, borderRadius: 2, borderColor: props.agree ? LibStyle.colorPrimary : '#8e8e8e', borderWidth: 1, justifyContent: 'center', alignItems: 'center' }, props.style]} >
+          {props.agree && <View style={{ height: 16, width: 16, borderRadius: 2, backgroundColor: props.agree ? props.fontColor ? props.fontColor : LibStyle.colorPrimary : '#8e8e8e' }} />}
+        </View>
+      </ComponentTouchable>
+      <View style={{ marginLeft: 10, flexDirection: 'row', flexWrap: 'wrap', alignContent: 'center', alignItems: 'center' }}>
+        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0 }}>{esp.lang("component/accept", "ask")}</Text>
+        <TouchableOpacity onPress={() => { props.onPressTerm() }}>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", fontWeight: 'bold', color: props.fontColor ? props.fontColor : LibStyle.colorPrimary, letterSpacing: 0 }}>{esp.lang("component/accept", "term")}</Text>
+        </TouchableOpacity>
+        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0 }}>{esp.lang("component/accept", "and")}</Text>
+        <TouchableOpacity onPress={() => { props.onPressPrivacy() }}>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", fontWeight: 'bold', color: props.fontColor ? props.fontColor : LibStyle.colorPrimary, letterSpacing: 0 }}>{esp.lang("component/accept", "privacy")}</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+}

package/modules/component/alert.tsx

@@ -0,0 +1,33 @@
+// withHooks
+
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import React from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface ComponentAlertArgs {
+
+}
+export interface ComponentAlertProps {
+  color: string
+  useIcon?: boolean
+  iconName?: string
+  msg: string
+  style?: any
+}
+
+export default function m(props: ComponentAlertProps): any {
+  return (
+    <View style={[{ margin: 10, backgroundColor: LibUtils.hexToRgba(props.color, 0.1) }, props.style]}>
+      <View style={{ height: 3, backgroundColor: props.color }} />
+      <View style={{ padding: 10, marginRight: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+        {
+          props.useIcon &&
+          <LibIcon name={props.iconName || 'information-outline'} size={18} />
+        }
+        <Text allowFontScaling={false} style={{ marginHorizontal: 10, fontSize: 12, lineHeight: 14, letterSpacing: 0.5, textAlign: 'justify' }}>{props.msg}</Text>
+      </View>
+    </View>
+  )
+}

package/modules/component/avatar.tsx

@@ -0,0 +1,22 @@
+// withHooks
+// noPage
+
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+
+import React from 'react';
+import { View } from 'react-native';
+
+
+export interface ComponentAvatarProps {
+  uri: string,
+  style?: any,
+  borderColor?: string
+}
+export default function m(props: ComponentAvatarProps): any {
+
+  return (
+    <View style={[{ height: 100, borderRadius: 50, width: 100, overflow: 'hidden' }, props.style]} >
+      <LibPicture source={{ uri: props.uri }} style={{ height: 100, borderRadius: 50, width: 100, borderColor: props.borderColor ? props.borderColor : 'white', borderWidth: 3 }} resizeMode="cover" />
+    </View>
+  )
+}

package/modules/component/badge.tsx

@@ -0,0 +1,19 @@
+// withHooks 
+// noPage
+
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export interface ComponentBadgeProps {
+  counter: any
+}
+export default function m(props: ComponentBadgeProps): any {
+  if (props?.counter <= 0) return null
+  return (
+    <View style={{ position: 'absolute', top: 0, right: 0, height: 15, borderRadius: 10, padding: 5, paddingVertical: 2, backgroundColor: LibStyle.colorRed }} >
+      <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 10, letterSpacing: 0, color: "#ffffff" }} >{props?.counter > 99 ? "99+" : String(props?.counter)}</Text>
+    </View>
+  )
+}

package/modules/component/badge2.tsx

@@ -0,0 +1,20 @@
+// withHooks 
+// noPage
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { View } from 'react-native';
+
+
+export interface ComponentBadge2Props {
+
+}
+export default function m(props: ComponentBadge2Props): any {
+  return (
+    <View style={[{ position: 'absolute', top: 0, right: 0, width: 24, height: 24, borderRadius: 15, justifyContent: 'center', alignItems: 'center', backgroundColor: LibStyle.colorRed }, LibStyle.elevation(2)]} >
+      <LibPicture source={esp.assets('icons/ic_trash.png')} style={{ height: 14, width: 14, resizeMode: 'contain' }} />
+    </View>
+  )
+}

package/modules/component/blocked.tsx

@@ -0,0 +1,41 @@
+// withHooks
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { ImageBackground, Linking, Platform, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface ComponentBlockedProps {
+
+}
+export interface ComponentBlockedArgs {
+  msg: string,
+  res: {
+    ios: string,
+    android: string
+    title?: string
+  }
+}
+
+export default function m(props: ComponentBlockedProps): any {
+  const { msg, res } = LibNavigation.getArgsAll(props)
+  const link = Platform.OS == 'ios' ? res.ios : res.android
+
+  return (
+    <ImageBackground source={esp.assets('bg_login.png')} style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <View style={{ padding: 20, borderRadius:5, backgroundColor:'rgba(255,255,255,0.3)' }} >
+        <Text style={{ textAlign: 'center', marginTop: 20, fontSize: 24 }} >{res.title || esp.lang("component/blocked", "block_msg")}</Text>
+        <Text style={{ textAlign: 'center', marginTop: 10, fontSize: 24 * 0.618 }} >{msg}</Text>
+        <TouchableOpacity
+          onPress={() => {
+            Linking.openURL(link)
+          }}
+          style={{ alignItems: 'center', marginTop: 20, borderRadius: 5, paddingVertical: 10, backgroundColor: LibStyle.colorPrimary, padding: 5 }} >
+          <Text>{esp.lang("component/blocked", "update")}</Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  )
+}

package/modules/component/button.tsx

@@ -0,0 +1,37 @@
+// withHooks
+// noPage
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+export interface ComponentButtonProps {
+  icon?: string,
+  label: string,
+  style?: any,
+  fontColor?: string,
+  borderColor?: string,
+  backgroundColor?: string,
+  testID?: any
+  onPress: () => void
+}
+export default function m(props: ComponentButtonProps): any {
+  return (
+    <View>
+      <Pressable testID={props.testID} onPress={() => props.onPress()} style={{ minWidth: '100%', alignSelf: 'center' }}  >
+        {
+          props.icon ?
+            <View style={[{ borderWidth: 1, borderColor: props.borderColor ? props.borderColor : 'rgba(0, 0, 0, 0)', height: 40, borderRadius: 16, backgroundColor: props.backgroundColor || "#6c432c", flexDirection: 'row', alignItems: 'center', paddingHorizontal: 9 }, props.style]} >
+              <LibPicture source={esp.assets(props.icon)} style={{ width: 18, height: 18, resizeMode: 'contain' }} />
+              <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: 'white', flex: 1, marginRight: 30, marginLeft: 10 }} >{props.label}</Text>
+            </View>
+            :
+            <View style={[{ borderWidth: 1, borderColor: props.borderColor ? props.borderColor : 'rgba(0, 0, 0, 0)', height: 40, borderRadius: 17, backgroundColor: props.backgroundColor || "#6c432c", justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 }, props.style]} >
+              <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: props.fontColor ? props.fontColor : 'white', marginRight: 10, marginLeft: 10 }} >{props.label}</Text>
+            </View>
+        }
+      </Pressable>
+    </View>
+  )
+}

package/modules/component/calendar.tsx

@@ -0,0 +1,151 @@
+// withHooks
+// noPage
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDatepicker } from 'esoftplay/cache/lib/datepicker/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { UseDates } from 'esoftplay/cache/use/dates/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import moment from 'esoftplay/moment';
+import React, { useEffect, useRef } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+export interface ComponentCalenderProps {
+  month?: number,
+  year?: number,
+}
+
+export interface CalendaritemProps {
+  date: number,
+  onPress: () => void
+}
+
+const dayNames = [
+  esp.lang("component/calendar", "sun"),
+  esp.lang("component/calendar", "mon"),
+  esp.lang("component/calendar", "tue"),
+  esp.lang("component/calendar", "wed"),
+  esp.lang("component/calendar", "thu"),
+  esp.lang("component/calendar", "fri"),
+  esp.lang("component/calendar", "sat")
+]
+const monthNames = [
+  esp.lang("component/calendar", "jan"),
+  esp.lang("component/calendar", "feb"),
+  esp.lang("component/calendar", "mar"),
+  esp.lang("component/calendar", "apr"),
+  esp.lang("component/calendar", "mei"),
+  esp.lang("component/calendar", "jun"),
+  esp.lang("component/calendar", "jul"),
+  esp.lang("component/calendar", "aug"),
+  esp.lang("component/calendar", "sep"),
+  esp.lang("component/calendar", "oct"),
+  esp.lang("component/calendar", "nov"),
+  esp.lang("component/calendar", "des")]
+const agendaColor = ['#607d8b', '#f44336', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', '#b71c1c', '#880e4f', '#4a148c', '#311b92', '#1a237e', '#01579b', '#006064', '#004d40', '#1b5e20', '#33691e', '#e91e63', '#0d47a1', '#827717', '#f57f17', '#ff6f00', '#e65100', '#bf360c', '#3e2723', '#212121', '#263238']
+const itemSize = (LibStyle.width - 40) / 7
+export default function m(props: ComponentCalenderProps): any {
+  const slidingUp = useRef<LibSlidingup>(null)
+  const [data, setData] = useSafeState<any[]>()
+  let { month, year } = useRef<any>(LibNavigation.getArgsAll(props, { month: props.month, year: props.year })).current
+  /* defaults */
+  if (!year) year = new Date().getFullYear()
+  if (!month) month = new Date().getMonth() + 1
+
+  const dates = data?.map?.((x: any) => x.date) || []
+  const [sDate, setSDate] = useSafeState<any>(moment().localeFormat('YYYY-MM-DD'))
+  const fixMonth = sDate.split('-')[1] - 1
+  const fixYear = sDate.split('-')[0]
+  const normalMonth = fixMonth + 1
+  const [allDates, firstDay] = UseDates({ year: fixYear, month: normalMonth })
+
+  useEffect(() => {
+    new LibCurl('training', { year: fixYear, month: normalMonth },
+      (res, msg) => {
+        setData(res.map((x: any) => ({
+          date: Number(x.date_start.split('-')[2]),
+          detail: x
+        })))
+      },
+      (msg) => {
+
+      }, 1
+    )
+  }, [sDate])
+
+
+  function Item(props: CalendaritemProps): any {
+    return (
+      <View style={{ width: itemSize, height: itemSize, margin: 0, borderWidth: 0, borderRadius: 0, alignItems: 'center', justifyContent: 'center' }} >
+        <Text style={{ fontSize: 15, fontWeight: "normal", fontStyle: "normal", lineHeight: 16, letterSpacing: 0, color: "#444" }} >{props.date}</Text>
+        <View style={{ height: 5, width: 15, borderRadius: 2.5, marginTop: 5, backgroundColor: dates.includes(props.date) ? agendaColor[props.date - 1] : 'transparent' }} />
+      </View>
+    )
+  }
+
+  return (
+    <View >
+      <TouchableOpacity onPress={() => { slidingUp.current?.show() }} style={{ marginHorizontal: 30, marginTop: 30, flexDirection: 'row', alignItems: 'center' }} >
+        <View style={{ marginRight: 30 }} >
+          <LibTextstyle textStyle='title1' text={monthNames[fixMonth]} style={{ fontWeight: 'bold', color: '#333' }} />
+          <LibTextstyle textStyle='title2' text={fixYear} style={{ fontWeight: 'bold', color: '#333' }} />
+        </View>
+        <LibIcon.SimpleLineIcons name="arrow-down" size={20} />
+      </TouchableOpacity>
+      <View style={{ marginBottom: 10, flex: 1 }} >
+        <LibScroll>
+          <View style={{ flexDirection: 'row', marginHorizontal: 20, marginTop: 30, alignSelf: "center", flexWrap: 'wrap' }} >
+            {dayNames.map((day) => <Text style={{ height: itemSize, width: itemSize, fontSize: 20, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#404040" }} >{day}</Text>)}
+            <View style={{ width: firstDay * itemSize }} />
+            {allDates.map((date) => <Item key={date} date={date} onPress={() => { }} />)}
+          </View>
+          {
+            data?.length > 0 &&
+            <>
+              <LibTextstyle textStyle='body' text={esp.lang("component/calendar", "agenda", monthNames[fixMonth])} style={{ fontWeight: 'bold', color: '#333', marginHorizontal: 20, marginTop: 20, marginBottom: 8 }} />
+              {
+                data?.sort((a: any, b: any) => a.date_start > b.date_start ? 1 : a.date_start < b.date_start ? -1 : 0).map?.((x) => (
+                  <TouchableOpacity
+                    onPress={() => { /* LibNavigation.navigate('hmi/training_detail') */ }}
+                    style={{ backgroundColor: 'white', flexDirection: 'row', marginHorizontal: 20, marginVertical: 5, borderRadius: 6, alignItems: 'center', ...LibStyle.elevation(2), paddingHorizontal: 17, paddingVertical: 10 }} >
+                    <LibTextstyle textStyle='title3' text={x.date} style={{ fontWeight: 'bold', color: agendaColor[x.date - 1] }} />
+                    <View style={{ marginLeft: 17, flex: 1 }} >
+                      <LibTextstyle textStyle='footnote' text={(x.detail.title)} style={{ fontWeight: 'bold', color: '#333' }} />
+                      <LibTextstyle textStyle='footnote' text={LibUtils.getDateRange(x.detail.date_start, x.detail.date_end)} style={{ color: '#999', marginBottom: 10 }} />
+                      <LibTextstyle textStyle='caption2' text={x.detail.location_detail} style={{ color: '#999' }} />
+                    </View>
+                    <LibIcon.SimpleLineIcons name='arrow-right-circle' color={LibStyle.colorPrimary} />
+                  </TouchableOpacity>
+                ))
+              }
+            </>
+          }
+        </LibScroll>
+      </View>
+      <LibSlidingup ref={slidingUp} >
+        <View style={{ minHeight: 225 }} >
+          <LibDatepicker
+            minDate={moment().add(-10, 'years').localeFormat('YYYY-MM-DD')}
+            maxDate={moment().add(10, 'years').localeFormat('YYYY-MM-DD')}
+            onDateChange={(date) => {
+              slidingUp.current?.hide()
+              month = Number(date.split('-')[1]) - 1
+              year = Number(date.split('-')[0])
+              setSDate(date)
+              setData([])
+            }}
+            selectedDate={sDate}
+            type='month'
+          />
+        </View>
+      </LibSlidingup>
+    </View>
+  )
+}

package/modules/component/camera.debug.tsx

@@ -0,0 +1,187 @@
+// // withHooks
+// import { useEffect, useMemo, useRef } from 'react';
+
+// import { ComponentCamera_error_view } from 'esoftplay/cache/component/camera_error_view/import';
+// import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+// import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+// import { LibStyle } from 'esoftplay/cache/lib/style/import';
+// import esp from 'esoftplay/esp';
+// import useSafeState from 'esoftplay/state';
+// import * as ImageManipulator from 'expo-image-manipulator';
+// import React from 'react';
+// import { ActivityIndicator, Image, Pressable, Text, View } from 'react-native';
+// import { Camera, useCameraDevices, useCameraFormat, useCameraPermission } from 'react-native-vision-camera';
+
+// export interface CompoenentCameraArgs {
+
+// }
+// export interface CompoenentCameraProps {
+
+// }
+// export default function m(props: CompoenentCameraProps): any {
+//   const { mask, cameraType }: any = esp.mod("lib/navigation").getArgsAll(props)
+//   const camera = useRef<Camera>(null)
+
+//   const [image, setImage] = useSafeState()
+//   const [loading, setLoading] = useSafeState(false)
+//   const [flash, setFlash] = useSafeState<'on' | 'off'>('off')
+//   const [type, setType] = useSafeState<any>(cameraType || "front")
+//   const { hasPermission, requestPermission } = useCameraPermission()
+//   const devices = useCameraDevices();
+//   const device = useMemo(() => {
+//     return devices.find((d) => d.position === type);
+//   }, [devices, type]);
+//   const format = useCameraFormat(device, [
+//     { photoResolution: 'max', "photoAspectRatio": LibStyle.height / LibStyle.width }
+//   ])
+
+//   useEffect(() => {
+//     requestPermission()
+//     return () => esp.mod("lib/navigation").cancelBackResult(esp.mod("lib/navigation").getResultKey(props))
+//   }, [])
+
+//   function handleSwitchCamera() {
+//     setType((t: any) => t == "back" ? "front" : "back")
+//   }
+
+//   if (!hasPermission) return <ComponentCamera_error_view />
+
+//   if (device == null)
+//     return (
+//       <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+//         {/* @ts-ignore */}
+//         <LibPicture source={esp.assets("icons/ic_camera.png")} style={{ width: 100, height: 100, marginBottom: 30 }} resizeMode='contain' tintColor="#9f9f9f" />
+//         <Text style={{ fontFamily: "SFProText", fontSize: 20, color: "#111111" }}>{"No Camera Device Found."}</Text>
+//         <Text style={{ fontFamily: "SFProText", fontSize: 16, color: "#767676", marginTop: 8 }}>{"BBO tidak dapat menemukan kamera kamu"}</Text>
+//         <View style={{ flexDirection: "row", alignItems: "center", marginTop: 4, marginHorizontal: 20 }}>
+//           <Pressable onPress={handleSwitchCamera} style={{ alignItems: 'center', justifyContent: 'center', flexDirection: "row", marginTop: 5 }} >
+//             <Text style={{ fontFamily: "SFProText", fontSize: 16, color: LibStyle.colorPrimary, textAlign: 'center', paddingRight: 5 }}>{`Ubah ke Kamera ${type == "back" ? "Depan" : "Belakang"}`}</Text>
+//             <LibIcon name="refresh" size={20} color={LibStyle.colorPrimary} />
+//           </Pressable>
+//         </View>
+//       </View>
+//     )
+
+//   const MaskView = () => {
+//     return (
+//       <View style={{ position: 'absolute', top: 60, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }} >
+//         <View style={{ width: LibStyle.width / 2, height: LibStyle.height / 3, borderTopLeftRadius: 108, borderTopRightRadius: 108, borderBottomLeftRadius: 95, borderBottomRightRadius: 95, borderRadius: 100, borderWidth: 3, borderStyle: "dotted", borderColor: '#EAECEB', }} />
+//         <View style={{ marginTop: 50, borderWidth: 3, borderStyle: "dotted", borderRadius: 15, borderColor: '#EAECEB', width: LibStyle.width / 2, height: 150 }} />
+//       </View>
+//     )
+//   }
+
+//   return (
+//     <View style={{ flex: 1 }}>
+//       {
+//         !image &&
+//         <Camera
+//           ref={camera}
+//           device={device}
+//           isActive={!image}
+//           photo
+//           format={format}
+//           torch={flash}
+//           style={{ flex: 1, height: LibStyle.width * 16 / 9, width: LibStyle.width }}
+//         />
+//       }
+
+//       <View style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
+//         <View style={{ flex: 1, backgroundColor: 'transparent' }} >
+//           {
+//             image ?
+//               <LibPicture source={{ uri: image }} resizeMode="contain" style={{ margin: 0, height: LibStyle.height, width: LibStyle.width }} />
+//               :
+//               mask ?
+//                 <MaskView />
+//                 :
+//                 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.04)' }} >
+//                   <View style={{ borderWidth: 2, borderColor: 'white', height: (LibStyle.width - 60) * 43 / 27, width: (LibStyle.width - 60), borderStyle: 'dashed', borderRadius: 13, backgroundColor: 'rgba(255,255,255,0.04)' }} />
+//                   <View style={{ marginHorizontal: 25 }}>
+//                     <Text style={{ fontFamily: "Arial", fontSize: 16, lineHeight: 20, color: 'white', alignItems: 'center', textAlign: 'center', padding: 5 }} >{esp.lang("component/camera", "adjust")}</Text>
+//                   </View>
+//                 </View>
+//           }
+//         </View>
+//         {
+//           image ?
+//             <View style={{ paddingVertical: 25, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 40, backgroundColor: 'white' }} >
+//               <Pressable onPress={() => { setImage(undefined) }} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+//                 <LibIcon name="close-circle" size={50} color={LibStyle.colorRed} />
+//               </Pressable>
+//               <View style={{ flex: 1, alignItems: 'center', height: 70, width: 70 }} />
+//               <Pressable onPress={() => { esp.mod("lib/navigation").sendBackResult(image, esp.mod("lib/navigation").getResultKey(props)) }} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+//                 <LibIcon name='check-circle-outline' size={50} color={LibStyle.colorBlue} />
+//               </Pressable>
+//             </View>
+//             :
+//             <View style={{ paddingVertical: 25, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 24, backgroundColor: 'rgba(0,0,0,0.5)' }} >
+//               <Pressable onPress={() => { setFlash(flash == 'off' ? 'on' : 'off') }} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+//                 <LibIcon name={flash == 'off' ? 'flash' : "flash-off"} color='#f9f9f9' />
+//               </Pressable>
+//               <View style={{ flex: 1, alignItems: 'center' }} >
+//                 <Pressable disabled={loading}
+//                   onPress={() => {
+//                     setLoading(true)
+//                     camera.current?.takePhoto({ enableShutterSound: false }).then((value) => {
+//                       const uri = `file://${value.path}`
+//                       console.log(uri)
+//                       if (!mask) {
+//                         forceLandscape({ uri }, (nv) => {
+//                           esp.mod("lib/image").processImage(nv, 2600).then((_v) => {
+//                             console.log({ _v })
+//                             setImage(_v)
+//                             setLoading(false)
+//                           })
+//                         })
+//                       } else
+//                         esp.mod("lib/image").processImage(uri, 2600).then((_v) => {
+//                           console.log({ _v })
+//                           setImage(_v)
+//                           setLoading(false)
+//                         })
+//                     })
+//                   }}>
+//                   <View style={{ alignItems: "center", justifyContent: "center", height: 70, width: 70, borderRadius: 35, backgroundColor: 'red', borderWidth: 7, borderColor: 'darkred', ...LibStyle.elevation(10) }}>
+//                     {
+//                       loading ? <ActivityIndicator size={'large'} color={'black'} /> : null
+//                     }
+//                   </View>
+//                 </Pressable>
+//               </View>
+//               <Pressable onPress={handleSwitchCamera} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+//                 <LibIcon.AntDesign name='sync' color='#f9f9f9' />
+//               </Pressable>
+//             </View>
+//         }
+//       </View>
+//     </View>
+//   )
+
+// }
+// const forceLandscape = (imageUri: any, cb: (landUri: any) => void) => {
+//   Image.getSize(
+//     imageUri.uri,
+//     async (width, height) => {
+//       if (width > height) {
+//         cb(imageUri)
+//       } else {
+//         // Portrait orientation, force to landscape
+//         try {
+//           // Load the image for manipulation
+//           const manipResult = await ImageManipulator.manipulateAsync(
+//             imageUri.uri,
+//             [{ rotate: -90 }], // Rotate the image by 90 degrees (landscape)
+//             { compress: 1, format: ImageManipulator.SaveFormat.JPEG, base64: false }
+//           );
+//           cb(manipResult);
+//         } catch (error) {
+//           console.error('Error manipulating the image:', error);
+//         }
+//       }
+//     },
+//     (error) => {
+//       console.error('Error getting image size:', error);
+//     }
+//   );
+// }