shakebug-react-native 2.4.8 → 2.4.10

package/src/Screens/AddDetailsScreen.js

@@ -12,6 +12,7 @@ import { ScrollView } from 'react-native';
 import KeyboardAvoidingWrapper from '../Componanats/KeyboardAvoidingWrapper';
 import { useGlobalState } from '../Componanats/GlobalStateContext';
 import CustomeAlert from '../Componanats/CustomAlert';
+import LoadingModal from '../Componanats/LoadingModal';
 import NetInfo from '../../NetInfo/src';
 import DeviceInfo from '../../DeviceInfo';
 
@@ -92,10 +93,11 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
             try {
 
                 const { create: createThumbnail } = CreateThumbnail;
+                const cleanVideoPath = path ? path.replace('file://', '') : '';
 
                 const thumbnail = await createThumbnail({
-                    url: `file://${path}`,
-                    timeStamp: 10000,
+                    url: `file://${cleanVideoPath}`,
+                    timeStamp: 1000,
                 })
 
                 if (thumbnail) {
@@ -145,6 +147,7 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
     // For open Video picker
     const openVideoPicker = () => {
         global.IsBackground = "false"
+        setIsLoading(true)
 
         const options = {
             mediaType: 'video',
@@ -153,26 +156,26 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
         };
 
         launchImageLibrary(options, async (response) => {
-            setIsLoading(true)
             if (response.didCancel) {
                 setIsLoading(false)
-                global.IsBackground = "fa"
+                global.IsBackground = "false"
                 // console.log('User cancelled image picker');
-            } else if (response.error) {
+            } else if (response.error || response.errorCode) {
                 setIsLoading(false)
                 global.IsBackground = "true"
                 // console.log('Image picker error: ', response.error);
             } else {
-                setIsLoading(false)
                 global.IsBackground = "true"
                 let videoUri = await response.uri || response.assets?.[0]?.uri;
-                if (response.assets?.[0]?.type.slice(0, 5).trim() == "video") {
+                if (response.assets?.[0]?.type?.slice(0, 5).trim() == "video") {
                     if (mediaType == "img")
                         navigate("TrimVideoScreen", { video: `${videoUri}`, Type: "imgReplacedWithVideo", themeColor: ThemeColor, SDKScreenTitle: SDKScreenTitle, UpdateStatusBar: UpdateStatusBar, updateParent: updateParent })
                     else
                         navigate("TrimVideoScreen", { video: `${videoUri}`, Type: "videoReplacedWithVideo", themeColor: ThemeColor, SDKScreenTitle: SDKScreenTitle, UpdateStatusBar: UpdateStatusBar, updateParent: updateParent })
+                    setIsLoading(false)
                 }
                 else {
+                    setIsLoading(false)
                     setAPIMessage("Invalid selection, Please choose a valid video file")
                     setErrorInAPI(true)
                 }
@@ -184,25 +187,24 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
     // For open image picker
     const openImagePicker = () => {
         global.IsBackground = "false"
+        setIsLoading(true)
         const options = {
             mediaType: 'photo',
             includeBase64: false,
             selectionLimit: 1
         };
         launchImageLibrary(options, async (response) => {
-            setIsLoading(true)
             if (response.didCancel) {
                 setIsLoading(false)
                 global.IsBackground = "true"
                 // console.log('User cancelled image picker');
-            } else if (response.error) {
+            } else if (response.error || response.errorCode) {
                 setIsLoading(false)
                 global.IsBackground = "true"
                 // console.log('Image picker error: ', response.error);
             } else {
-
                 global.IsBackground = "true"
-                if (response.assets?.[0]?.type.slice(0, 5).trim() == "image") {
+                if (response.assets?.[0]?.type?.slice(0, 5).trim() == "image") {
                     let imageuri = await response.uri || response.assets?.[0]?.uri;
                     setIsLoading(false)
                     if (imageuri != "" || imageuri != undefined) {
@@ -217,6 +219,7 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
                     }
                 }
                 else {
+                    setIsLoading(false)
                     setAPIMessage("Invalid selection, Please choose a valid image file")
                     setErrorInAPI(true)
                 }
@@ -285,14 +288,18 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
     }
 
     return (
-        <SafeAreaView style={{ flex: 1, backgroundColor: ThemeColor }}>
+        <View style={{ flex: 1, backgroundColor: '#fff' }}>
             <StatusBar backgroundColor={ThemeColor} hidden={false} barStyle="dark-content" />
-            <View style={{
-                flex: 1,
-                backgroundColor: "#fff",
-                paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
-                paddingBottom: Platform.OS === 'android' ? 48 : 0 // Standard bottom navigation bar height
-            }}>
+            <SafeAreaView style={{ flex: 0, backgroundColor: ThemeColor }} />
+            {Platform.OS === 'android' && StatusBar.currentHeight ? (
+                <View style={{ height: StatusBar.currentHeight, backgroundColor: ThemeColor }} />
+            ) : null}
+            <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
+                <View style={{
+                    flex: 1,
+                    backgroundColor: "#fff",
+                    paddingBottom: Platform.OS === 'android' ? 48 : 0 // Standard bottom navigation bar height
+                }}>
                 <KeyboardAvoidingWrapper>
                     <>
                         <View style={{ height: '6%', padding: 5, paddingHorizontal: 15, backgroundColor: ThemeColor, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
@@ -427,7 +434,7 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
                                 </TouchableOpacity>
                             </View>
 
-                            <View style={{ alignItems: 'flex-end', marginHorizontal: 15, marginTop: '1%' }}>
+                            <View style={{ alignItems: 'flex-end', marginHorizontal: 15, marginTop: '0.5%' }}>
                                 <Text style={{ fontSize: 12, color: "gray", fontWeight: '300' }}>© <Text>ShakeBug v{global.sdk_version}</Text></Text>
                             </View>
 
@@ -437,7 +444,7 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
                         <CustomeAlert
                             isVisible={isErrorInAPI || isBugReported}
                             text={apiMessage}
-                            color={themeColor}
+                            color={ThemeColor}
                             OnPrees={() => {
                                 if (isBugReported) {
                                     global.isScreenShotDetected = false;
@@ -450,24 +457,13 @@ const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScree
                                 setIsLoading(false)
                             }}
                         />
-
-
-                        {isLoading &&
-                            <View
-                                style={{
-                                    ...StyleSheet.absoluteFillObject,
-                                    backgroundColor: 'rgba(0, 0, 0, 0.4)',
-                                }}
-                            />
-                        }
-
-                        {isLoading &&
-                            <ActivityIndicator size={'large'} color={themeColor} collapsable={true} style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, elevation: 2 }} />}
                     </>
                 </KeyboardAvoidingWrapper>
             </View>
 
         </SafeAreaView>
+        <LoadingModal visible={isLoading} color={ThemeColor} />
+        </View>
     )
 }
 

package/src/Screens/FirstScreen.js

@@ -11,6 +11,7 @@ import { ActivityIndicator } from 'react-native';
 import DeviceInfo from '../../DeviceInfo';
 import { useGlobalState } from '../Componanats/GlobalStateContext.js';
 import CustomeAlert from '../Componanats/CustomAlert.js';
+import LoadingModal from '../Componanats/LoadingModal.js';
 
 console.disableYellowBox = true;
 console.ignoredYellowBox = ["Warning: Each", "Warning: Failed", "Possible"];
@@ -108,6 +109,7 @@ const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
 
   // open Video picker to choose video
   const openVideoPicker = () => {
+    setIsLoading(true)
     const options = {
       mediaType: 'video',
       includeBase64: false,
@@ -115,19 +117,19 @@ const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
     };
 
     launchImageLibrary(options, async (response) => {
-      setIsLoading(true)
       if (response.didCancel) {
         setIsLoading(false)
-      } else if (response.error) {
+      } else if (response.error || response.errorCode) {
         setIsLoading(false)
         // console.log('Image picker error: ', response.error);
       } else {
         let vedioUri = await response.uri || response.assets?.[0]?.uri;
-        if (response.assets?.[0]?.type.slice(0, 5).trim() == "video") {
+        if (response.assets?.[0]?.type?.slice(0, 5).trim() == "video") {
           setIsLoading(false)
           navigate("TrimVideoScreen", { video: `${vedioUri}`, Type: "video", themeColor: `${ThemeColor}`, SDKScreenTitle: `${SDKScreenTitle}`, UpdateStatusBar: UpdateStatusBar, updateParent: updateImage })
         }
         else {
+          setIsLoading(false)
           setIsAlertText("Invalid selection, Please choose a valid video file")
           setIsAlert(true)
         }
@@ -310,13 +312,16 @@ const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
   // backgroundColor: "#181818"
 
   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: ThemeColor }}>
-        <StatusBar backgroundColor={ThemeColor} barStyle="dark-content" />
-        
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <StatusBar backgroundColor={ThemeColor} barStyle="dark-content" />
+      <SafeAreaView style={{ flex: 0, backgroundColor: ThemeColor }} />
+      {Platform.OS === 'android' && StatusBar.currentHeight ? (
+        <View style={{ height: StatusBar.currentHeight, backgroundColor: ThemeColor }} />
+      ) : null}
+      <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
         <View style={{
           flex: 1,
           backgroundColor: "#e4fdfd",
-          paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
           paddingBottom: Platform.OS === 'android' ? 48 : 0 // Standard bottom navigation bar height
         }}>
 
@@ -548,28 +553,19 @@ const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
           </KeyboardAvoidingView>
         </View>) : null}
 
-        {isLoading &&
-          <View
-            style={{
-              ...StyleSheet.absoluteFillObject,
-              backgroundColor: 'rgba(0, 0, 0, 0.4)',
-            }}
-          />
-        }
-
         <CustomeAlert
           isVisible={isAlert}
           text={isAlertText}
-          color={themeColor}
+          color={ThemeColor}
           OnPrees={() => {
             setIsAlert(false)
             setIsAlertText("")
           }}
         />
 
-        {isLoading && <ActivityIndicator size={'large'} color={themeColor} collapsable={true} style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, elevation: 2 }} />}
-
       </SafeAreaView>
+      <LoadingModal visible={isLoading} color={ThemeColor} />
+    </View>
   )
 }
 

package/src/Screens/Shakebug.js

@@ -63,7 +63,7 @@ global.isScreeenShotTaken = false;
 global.restrictedViews = [];
 global.currentScreen = ""
 global.isShakebugSDKOpen = false;
-global.sdk_version = "2.4.8";
+global.sdk_version = "2.4.10";
 global.app_lunch_count = 0;
 global.POPUP_LAUNCH_THRESHOLD = 3;
 global.POPUP_COOLDOWN_DAYS = 2;
@@ -101,33 +101,25 @@ const NavigationContainer = ({ screens, setFocusedScreen }) => {
     );
   }
 
-  const currentScreen =
-    navigationState[navigationState.length - 1];
-
-
-  const ScreenComponent = screens[currentScreen.name];
-
-
-  if (!ScreenComponent) {
-    return (
-      <View
-        style={{
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-          backgroundColor: 'red',
-        }}
-      >
-        <Text style={{ color: 'white', fontSize: 20 }}>
-          Screen Not Found: {currentScreen.name}
-        </Text>
-      </View>
-    );
-  }
-
   return (
     <View style={{ flex: 1, backgroundColor: 'white' }}>
-      <ScreenComponent {...(currentScreen.params || {})} />
+      {navigationState.map((screen, index) => {
+        const ScreenComponent = screens[screen.name];
+        if (!ScreenComponent) return null;
+
+        const isFocused = index === navigationState.length - 1;
+        return (
+          <View
+            key={index}
+            style={[
+              StyleSheet.absoluteFillObject,
+              { display: isFocused ? 'flex' : 'none', width: '100%', height: '100%' }
+            ]}
+          >
+            <ScreenComponent {...(screen.params || {})} />
+          </View>
+        );
+      })}
     </View>
   );
 };

package/src/Screens/TrimVideoScreen.js

@@ -1,26 +1,27 @@
-import { NativeEventEmitter, NativeModules, Platform, SafeAreaView, StatusBar } from 'react-native'
+import { DeviceEventEmitter, NativeEventEmitter, NativeModules, Platform, SafeAreaView, StatusBar, View } from 'react-native'
 import React, { useEffect, useState } from 'react'
-import { showEditor } from 'react-native-video-trim';
+import { showEditor } from '../../trimVideo/src/index';
 import { useNavigation } from '../Componanats/NavigationContext';
 import { Localization } from '../Componanats/localization';
+import LoadingModal from '../Componanats/LoadingModal';
 
 console.ignoredYellowBox = ["Warning: Each", "Warning: Failed"];
 
-
-
 const TrimVideoScreen = ({ video, themeColor, SDKScreenTitle, Type, UpdateStatusBar, updateParent }) => {
 
   const { goToScreenAtIndex, navigate, goBack } = useNavigation();
+  const [loading, setLoading] = useState(true);
 
+  const ThemeColor = themeColor ? themeColor : "#1dd3e3";
 
   // For display video trimmer
   useEffect(() => {
     StatusBar.setHidden(true)
 
     const uri = video; // your path
-    const trimmedUri = uri.replace('file://', '');
+    const cleanUri = uri.replace('file://', '');
 
-    showEditor(Platform.OS == 'android' ? trimmedUri : video, {
+    showEditor(cleanUri, {
       saveButtonText: Localization[global.ShakebugLanguage].Choose,
       cancelButtonText: Localization[global.ShakebugLanguage].Cancel,
       trimmingText: Localization[global.ShakebugLanguage].TrimmingText,
@@ -38,50 +39,64 @@ const TrimVideoScreen = ({ video, themeColor, SDKScreenTitle, Type, UpdateStatus
       saveDialogConfirmText: Localization[global.ShakebugLanguage].Yes
     });
 
-    const eventEmitter = new NativeEventEmitter(NativeModules.VideoTrim);
-    const subscription = eventEmitter.addListener('VideoTrim', (event) => {
+    const handleVideoTrimEvent = (event) => {
       switch (event.name) {
         case 'onShow': {
+          setLoading(false);
           break;
         }
         case 'onHide': {
           break;
         }
         case 'onStartTrimming': {
+          // The native side displays "Trimming video..." dialog, so we don't need a React Native loader here
           break;
         }
         case 'onFinishTrimming': {
-          global.IsBackground = 'true'
-          UpdateStatusBar()
+          global.IsBackground = 'true';
+          UpdateStatusBar();
           navigate("AddDetailsScreen", { media: `${event.outputPath}`, mediaType: 'video', themeColor: themeColor, SDKScreenTitle: SDKScreenTitle, updateParent: updateParent });
           return;
         }
         case 'onCancel': {
-          UpdateStatusBar()
+          UpdateStatusBar();
           if (Type == "video") {
-            goToScreenAtIndex(1)
-          }
-          else if (Type == "imgReplacedWithVideo") {
-            goBack()
-          }
-          else if (Type == "videoReplacedWithVideo") {
-            goToScreenAtIndex(3)
+            goToScreenAtIndex(1);
+          } else if (Type == "imgReplacedWithVideo") {
+            goBack();
+          } else if (Type == "videoReplacedWithVideo") {
+            goToScreenAtIndex(3);
           }
           return;
-          break;
         }
         case 'onError': {
+          setLoading(false);
           break;
         }
       }
-    });
+    };
+
+    let subscription;
+    if (Platform.OS === 'android') {
+      subscription = DeviceEventEmitter.addListener('VideoTrim', handleVideoTrimEvent);
+    } else {
+      const videoTrimModule = NativeModules.ShakebugSDKVideoTrim || NativeModules.VideoTrim;
+      const eventEmitter = new NativeEventEmitter(videoTrimModule);
+      subscription = eventEmitter.addListener('VideoTrim', handleVideoTrimEvent);
+    }
 
     return () => {
-      subscription.remove();
+      if (subscription && subscription.remove) {
+        subscription.remove();
+      }
     };
   }, [])
 
-  return;
+  return (
+    <View style={{ flex: 1, backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' }}>
+      <LoadingModal visible={loading} color={ThemeColor} />
+    </View>
+  );
 }
 
 export default TrimVideoScreen;

package/src/index.tsx

@@ -22,10 +22,10 @@ export interface ShakebugViewProps {
   changeSDKScreenTitle?: string[];
   allowToReportBugByShakingMobile?: boolean;
   allowToReportBugByScreenCapture?: boolean;
-  allowCrashReport: boolean;
-  makeLogEnabled: boolean;
-  ShakebugLanguage: 'ENGLISH' | 'HINDI' | 'GUJARATI' | 'ARABIC' | 'CHINESE' | 'DUTCH' | 'FRENCH' | 'GERMAN' | 'GREEK' | 'INDONESIAN' | 'ITALIAN' | 'JAPANESE' | 'KOREAN' | 'RUSSIAN' | 'SPANISH' | 'TURKISH' | 'UKRAINIAN' | 'MARATHI' | 'TAMIL' | 'TELUGU';
-  setShakebugSDKEndPointURL: string[];
+  allowCrashReport?: boolean;
+  makeLogEnabled?: boolean;
+  ShakebugLanguage?: 'ENGLISH' | 'HINDI' | 'GUJARATI' | 'ARABIC' | 'CHINESE' | 'DUTCH' | 'FRENCH' | 'GERMAN' | 'GREEK' | 'INDONESIAN' | 'ITALIAN' | 'JAPANESE' | 'KOREAN' | 'RUSSIAN' | 'SPANISH' | 'TURKISH' | 'UKRAINIAN' | 'MARATHI' | 'TAMIL' | 'TELUGU';
+  setShakebugSDKEndPointURL?: string[];
 }
 
 

package/trimVideo/src/index.tsx

@@ -1,13 +1,13 @@
 import { NativeModules, PermissionsAndroid, Platform } from 'react-native';
 
 const LINKING_ERROR =
-  `The package 'react-native-video-trim' doesn't seem to be linked. Make sure: \n\n` +
+  `The native module 'ShakebugSDKVideoTrim' is not linked. Make sure: \n\n` +
   Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
   '- You rebuilt the app after installing the package\n' +
   '- You are not using Expo Go\n';
 
-const VideoTrim = NativeModules.ShakebugSDKVideoTrim
-  ? NativeModules.ShakebugSDKVideoTrim
+const VideoTrim = NativeModules.ShakebugSDKVideoTrim || NativeModules.VideoTrim
+  ? (NativeModules.ShakebugSDKVideoTrim || NativeModules.VideoTrim)
   : new Proxy(
       {},
       {
@@ -21,6 +21,7 @@ export interface EditorConfig {
   saveToPhoto?: boolean;
   removeAfterSavedToPhoto?: boolean;
   maxDuration?: number;
+  minDuration?: number;
   cancelButtonText?: string;
   saveButtonText?: string;
   enableCancelDialog?: boolean;
@@ -34,15 +35,9 @@ export interface EditorConfig {
   saveDialogCancelText?: string;
   saveDialogConfirmText?: string;
   trimmingText?: string;
+  fullScreenModalIOS?: boolean;
 }
 
-/**
- * Delete a file
- *
- * @param {string} videoPath: absolute non-empty file path to edit
- * @param {EditorConfig} config: editor configuration
- * @returns {void} A **Promise** which resolves `void`
- */
 export async function showEditor(
   filePath: string,
   config: EditorConfig = {}
@@ -54,19 +49,17 @@ export async function showEditor(
   const { saveToPhoto = true } = config;
   const outputPath = await VideoTrim.showEditor(filePath, config);
 
-  if (Platform.OS === 'android') {
+  if (Platform.OS === 'android' && outputPath) {
     if (saveToPhoto) {
       try {
         if (Platform.Version >= 33) {
-          // since android 13 it's not needed to request permission for write storage: https://github.com/facebook/react-native/issues/36714#issuecomment-1491338276
           await VideoTrim.saveVideo(outputPath);
-
           if (config.removeAfterSavedToPhoto) {
             deleteFile(outputPath);
           }
         } else {
           const granted = await PermissionsAndroid.request(
-            PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE!,
+            PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
             {
               title: 'Video Trimmer Photos Access Required',
               message: 'Grant access to your Photos to write output Video',
@@ -77,65 +70,36 @@ export async function showEditor(
           );
           if (granted === PermissionsAndroid.RESULTS.GRANTED) {
             await VideoTrim.saveVideo(outputPath);
-
             if (config.removeAfterSavedToPhoto) {
               deleteFile(outputPath);
             }
-          } else {
-            throw new Error('Photos Library permission denied');
           }
         }
       } catch (err) {
-        throw err;
+        console.warn(err);
       } finally {
         VideoTrim.hideDialog();
       }
-    } else {
-      VideoTrim.hideDialog();
     }
   }
 }
 
-/**
- * Delete a file
- *
- * @param {string} filePath: absolute non-empty file path to check if editable
- * @returns {Promise} A **Promise** which resolves `true` if editable
- */
 export function isValidVideo(filePath: string): Promise<boolean> {
-  if (!filePath?.trim().length) {
-    throw new Error('File path cannot be empty!');
-  }
   return VideoTrim.isValidVideo(filePath);
 }
 
-/**
- * Clean output files generated at all time
- *
- * @returns {Promise<string[]>} A **Promise** which resolves to array of files
- */
 export function listFiles(): Promise<string[]> {
   return VideoTrim.listFiles();
 }
 
-/**
- * Clean output files generated at all time
- *
- * @returns {Promise} A **Promise** which resolves to number of deleted files
- */
 export function cleanFiles(): Promise<number> {
   return VideoTrim.cleanFiles();
 }
 
-/**
- * Delete a file
- *
- * @param {string} filePath: absolute non-empty file path to delete
- * @returns {Promise} A **Promise** which resolves `true` if successful
- */
 export function deleteFile(filePath: string): Promise<boolean> {
-  if (!filePath?.trim().length) {
-    throw new Error('File path cannot be empty!');
-  }
   return VideoTrim.deleteFile(filePath);
 }
+
+export function closeEditor(): void {
+  return VideoTrim.hideDialog();
+}