react-native-timacare 3.3.11 → 3.3.12

package/src/screens/uploadVideo/index.tsx

@@ -1,6 +1,6 @@
 //@ts-nocheck
-import { observer, Observer } from 'mobx-react-lite';
-import React, { useEffect, useRef, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Alert,
   Platform,
@@ -12,7 +12,7 @@ import {
 import { formatDDMMYYY, formatMoney } from '../../utils';
 import { RNCamera } from 'react-native-camera';
 import MButton from '../../components/MButton';
-import { IconBack, IconPause, IconPlay } from '../../assets/icons';
+import { IconPause, IconPlay } from '../../assets/icons';
 import { MText } from '../../components/MText';
 import { useNavigation } from '@react-navigation/native';
 import videoStore from './videoStore';
@@ -21,89 +21,137 @@ import {
   requestMultiple,
   openSettings,
   PERMISSIONS,
-  request,
   RESULTS,
 } from 'react-native-permissions';
 import Loading from '../../components/Loading';
 import MHeader from '../../components/MHeader';
 
+const COUNTDOWN_SECONDS = 3;
+
+const getCameraPermissions = () =>
+  Platform.OS === 'ios'
+    ? [PERMISSIONS.IOS.CAMERA, PERMISSIONS.IOS.MICROPHONE]
+    : [PERMISSIONS.ANDROID.CAMERA, PERMISSIONS.ANDROID.RECORD_AUDIO];
+
 export const Video = observer(function Video(props: any) {
   const navigation = useNavigation();
   const camera = useRef(null);
-  const [count, setCount] = useState(3);
-  const interval = React.useRef(null);
-  const [isRecording, setIsRecording] = React.useState(false);
-  const [isLoading, setIsLoading] = React.useState(false);
-
-  const content = `Hôm nay ngày ${formatDDMMYYY(new Date())} tôi tên là ${
-    props.route.params.loan.fullname
-  } có thực hiện khoản vay tại Tima với số tiền là ${formatMoney(
-    props.route.params.loan.loanAmount
-  )}`;
-
-  let second = 3;
-
-  const requestPermissions = () => {
-    checkMultiple(
-      Platform.OS === 'ios'
-        ? [PERMISSIONS.IOS.CAMERA, PERMISSIONS.IOS.MICROPHONE]
-        : [PERMISSIONS.ANDROID.CAMERA, PERMISSIONS.ANDROID.RECORD_AUDIO]
-    ).then((statuses) => {});
+  const [count, setCount] = useState(COUNTDOWN_SECONDS);
+  const [isRecording, setIsRecording] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const loan = props?.route?.params?.loan;
+  const content = useMemo(() => {
+    return `Hôm nay ngày ${formatDDMMYYY(new Date())} tôi tên là ${
+      loan?.fullname || ''
+    } có thực hiện khoản vay tại Tima với số tiền là ${formatMoney(
+      loan?.loanAmount || 0
+    )}`;
+  }, [loan?.fullname, loan?.loanAmount]);
+
+  const requestPermissions = async () => {
+    const permissions = getCameraPermissions();
+    const statuses = await checkMultiple(permissions);
+    const toRequest = permissions.filter(
+      (permission) => statuses[permission] !== RESULTS.GRANTED
+    );
+
+    if (toRequest.length === 0) return true;
+
+    const requested = await requestMultiple(toRequest);
+    const values = Object.values(requested);
+    const allGranted = values.every((status) => status === RESULTS.GRANTED);
+    const anyBlocked = values.some((status) => status === RESULTS.BLOCKED);
+
+    if (!allGranted) {
+      Alert.alert(
+        'Thông báo',
+        anyBlocked
+          ? 'Vui lòng bật quyền Camera và Micro trong Cài đặt để tiếp tục.'
+          : 'Vui lòng cấp quyền Camera và Micro để tiếp tục.',
+        anyBlocked
+          ? [
+              { text: 'Huỷ' },
+              {
+                text: 'Mở cài đặt',
+                onPress: () => openSettings(),
+              },
+            ]
+          : [{ text: 'OK' }]
+      );
+    }
+
+    return allGranted;
   };
 
   useEffect(() => {
     requestPermissions();
-    interval.current = setInterval(() => {
-      second--;
-      setCount(second);
-      if (second === 0) {
-        clearInterval(interval.current);
-      }
+    setCount(COUNTDOWN_SECONDS);
+    const id = setInterval(() => {
+      setCount((prev) => {
+        if (prev <= 1) {
+          clearInterval(id);
+          return 0;
+        }
+        return prev - 1;
+      });
     }, 1000);
+    return () => clearInterval(id);
   }, []);
 
   const stopRecording = () => {
+    if (!camera.current) return;
     camera.current.stopRecording();
     setIsRecording(false);
-    setIsLoading(true);
   };
 
   const startVideo = async () => {
-    if (!camera) {
+    if (!camera.current || isLoading || isRecording || count > 0) {
       return;
     }
+    const hasPermission = await requestPermissions();
+    if (!hasPermission) return;
+
     setIsRecording(true);
-    const data = await camera.current.recordAsync({
-      ...{
+    try {
+      const data = await camera.current.recordAsync({
         quality: RNCamera.Constants.VideoQuality['480p'],
         videoBitrate: 1500000,
-      },
-      ...(Platform.OS === 'ios'
-        ? { codec: RNCamera.Constants.VideoCodec.H264 }
-        : {}),
-    });
-    let formData = new FormData();
-    formData.append('video', {
-      name: data.uri.split(/[\\/]/).pop(),
-      uri: data.uri,
-      type: 'video/*',
-    });
-    videoStore.uploadVideo(
-      props.route.params.loan.id,
-      formData,
-      () => {
-        setIsLoading(false);
-        Alert.alert('Thông báo', 'Tải video lên thành công', [
-          {
-            text: 'Ok',
-            onPress: () => navigation.goBack(),
-          },
-        ]);
-      },
-      () => {
-        setIsLoading(false);
-      }
-    );
+        ...(Platform.OS === 'ios'
+          ? { codec: RNCamera.Constants.VideoCodec.H264 }
+          : {}),
+      });
+
+      setIsLoading(true);
+      const formData = new FormData();
+      formData.append('video', {
+        name: data.uri.split(/[\\/]/).pop(),
+        uri: data.uri,
+        type: 'video/*',
+      });
+
+      videoStore.uploadVideo(
+        loan?.id,
+        formData,
+        () => {
+          setIsLoading(false);
+          Alert.alert('Thông báo', 'Tải video lên thành công', [
+            {
+              text: 'Ok',
+              onPress: () => navigation.goBack(),
+            },
+          ]);
+        },
+        () => {
+          setIsLoading(false);
+        }
+      );
+    } catch (err) {
+      setIsRecording(false);
+      setIsLoading(false);
+      console.error(err);
+      Alert.alert('Thông báo', 'Không thể quay video. Vui lòng thử lại.');
+    }
   };
 
   return (
@@ -143,7 +191,7 @@ export const Video = observer(function Video(props: any) {
           <RNCamera
             ref={camera}
             style={styles.preview}
-            type="front"
+            type={RNCamera.Constants.Type.front}
             permissionDialogTitle={'Permission to use camera'}
             permissionDialogMessage={
               'We need your permission to use your camera phone'

package/src/screens/uploadVideo/videoStore.tsx

@@ -8,11 +8,9 @@ class Store {
 
   @action
   async uploadVideo(loanID, body, onSuccess?, onError) {
+    this.isLoading = true;
     try {
-      this.isLoading = true;
       const response = await Api.getInstance().uploadVideo(loanID, body);
-      console.log(response);
-      this.isLoading = false;
       if (response.kind === 'ok') {
         if (response.data.meta.errorCode === 200) {
           if (onSuccess) onSuccess();
@@ -21,13 +19,15 @@ class Store {
           if (onError) onError();
         }
       } else {
-        this.isLoading = false;
         Alert.alert('Thông báo', 'Lỗi đã xảy ra. Vui lòng thực hiện lại');
         if (onError) onError();
       }
     } catch (error) {
       console.log(error);
+      Alert.alert('Thông báo', 'Lỗi đã xảy ra. Vui lòng thực hiện lại');
       if (onError) onError();
+    } finally {
+      this.isLoading = false;
     }
   }
 }