shakebug-react-native 1.0.14

package/src/Screens/AddDetailsScreen.js

@@ -0,0 +1,462 @@
+import { View, Text, TouchableOpacity, Image, TextInput, SafeAreaView, PanResponder, Alert, StyleSheet, Keyboard, LogBox, Platform, StatusBar, NativeModules, BackHandler, DeviceEventEmitter, Dimensions } from 'react-native'
+import React, { useState, useRef, useEffect } from 'react'
+import { launchImageLibrary } from '../../ImageOrVedioPicker/src/index';
+import { AddIssueApi } from '../APIs/AddIssue';
+import { logger, consoleTransport } from "react-native-logs";
+import VideoPlayer from '../../VideoPlayer/index'
+import { useNavigation } from '../Componanats/NavigationContext';
+import { Localization } from '../Componanats/localization';
+import { ActivityIndicator } from 'react-native';
+import { UIManager } from 'react-native';
+import { ScrollView } from 'react-native';
+import KeyboardAvoidingWrapper from '../Componanats/KeyboardAvoidingWrapper';
+import { useGlobalState } from 'shakebug-react-native/src/Componanats/GlobalStateContext';
+import CustomeAlert from 'shakebug-react-native/src/Componanats/CustomAlert';
+import NetInfo from 'shakebug-react-native/NetInfo/src';
+
+
+console.ignoredYellowBox = ["Warning: Each", "Warning: Failed", "Non-serializable"];
+
+LogBox.ignoreLogs([
+    'Non-serializable values were found in the navigation state',
+]);
+
+const { ShakebugSDKCreateThumbnail } = NativeModules;
+
+
+const AddDetailsScreen = ({ media, updateParent, mediaType, themeColor, SDKScreenTitle }) => {
+
+    const { setIsScreenShot, setIsRecordingStart } = useGlobalState()
+
+    const { goBack, navigate, goToScreenAtIndex } = useNavigation();
+
+    const ThemeColor = themeColor ? themeColor : "#1dd3e3";
+
+    const [desc, setDesc] = useState("")
+    const [email, setEmail] = useState("")
+    const [descBorder, setDescBorder] = useState("black")
+    const [EmailBorder, setEmailBorder] = useState('black')
+    const [path, setPath] = useState(media)
+    const [type, setType] = useState(mediaType)
+    const [isLoading, setIsLoading] = useState(false)
+    const [poster, setPoster] = useState("")
+    const title = SDKScreenTitle ? SDKScreenTitle.split(",")[1] : null
+    const [isErrorInAPI, setErrorInAPI] = useState(false)
+    const [isBugReported, setIsBugReported] = useState(false)
+    const [apiMessage, setAPIMessage] = useState("")
+    const [isInternet, setIsInternet] = useState(null)
+
+    // For handel system back navigation
+    useEffect(() => {
+
+        NetInfo.addEventListener(stat => {
+            setIsInternet(stat.isConnected)
+        })
+
+        StatusBar.setHidden(false)
+        const backAction = () => {
+            global.isScreenShotDetected = false
+            setIsScreenShot(false)
+            setIsRecordingStart(false)
+            if (mediaType == "Recordvideo") {
+                global.isShakebugSDKOpen = false
+                global.IsBackground = 'true'
+                goToScreenAtIndex(0)
+            }
+            else {
+                global.IsBackground = 'false'
+                goToScreenAtIndex(1)
+            }
+
+            return true; // Return true to prevent default behavior (exit app)
+        };
+
+        const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
+
+        return () => backHandler.remove(); // Clean up the event listener on unmount
+    }, []);
+
+
+    useEffect(() => {
+        if (mediaType != "img") {
+            setIsLoading(true)
+            generateThumbnail()
+        }
+        if (type == "img") {
+            setIsLoading(false)
+        }
+    }, [type])
+
+    // For ganrate thumbanill image of video
+    const generateThumbnail = async () => {
+        if (type != "img") {
+            try {
+                const response = await ShakebugSDKCreateThumbnail.create({
+                    url: `file://${path}`,
+                    timeStamp: 10000,
+                });
+                if (response.path != "") {
+                    setPoster(response.path)
+                    setIsLoading(false)
+                }
+            } catch (error) {
+                throw new Error(error.message);
+                setIsLoading(false)
+            }
+        }
+    };
+
+    const ref = useRef();
+    const descRef = useRef()
+
+
+    const defaultConfig = {
+        levels: {
+            debug: 0,
+            info: 1,
+            warn: 2,
+            error: 3,
+        },
+        severity: "debug",
+        transport: consoleTransport,
+        transportOptions: {
+            colors: {
+                info: "blueBright",
+                warn: "yellowBright",
+                error: "redBright",
+            },
+        },
+        async: true,
+        dateFormat: "time",
+        printLevel: false,
+        printDate: false,
+        fixedExtLvlLength: false,
+        enabled: global.makeLogEnabled == true ? true : false,
+    };
+
+
+    var log = logger.createLogger(defaultConfig);
+
+    // For open Video picker
+    const openVideoPicker = () => {
+        global.IsBackground = "false"
+
+        const options = {
+            mediaType: 'video',
+            includeBase64: false,
+            selectionLimit: 1
+        };
+
+        launchImageLibrary(options, async (response) => {
+            setIsLoading(true)
+            if (response.didCancel) {
+                setIsLoading(false)
+                global.IsBackground = "fa"
+                // console.log('User cancelled image picker');
+            } else if (response.error) {
+                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 (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 })
+                }
+                else {
+                    setAPIMessage("Invalid selection, Please choose a valid video file")
+                    setErrorInAPI(true)
+                }
+
+            }
+        });
+    };
+
+    // For open image picker
+    const openImagePicker = () => {
+        global.IsBackground = "false"
+        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) {
+                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") {
+                    let imageuri = await response.uri || response.assets?.[0]?.uri;
+                    setIsLoading(false)
+                    if (imageuri != "" || imageuri != undefined) {
+                        setPath(imageuri)
+                        setType("img")
+
+                        if (mediaType != "Recordvideo")
+                            // For update image in FirstScreen
+                            updateParent(
+                                imageuri
+                            )
+                    }
+                }
+                else {
+                    setAPIMessage("Invalid selection, Please choose a valid image file")
+                    setErrorInAPI(true)
+                }
+
+            }
+        });
+    }
+
+    // For report bug
+    const ReportBugFunc = async () => {
+        setIsLoading(true)
+        let EmailReg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        if (desc.trim() == "" || desc.trim() == undefined) {
+            setDescBorder("red")
+            setIsLoading(false)
+        }
+        else if (email != "" && !EmailReg.test(email)) {
+            setEmailBorder("red")
+            setIsLoading(false)
+        }
+        else {
+
+            let isVideo = type == 'img' ? 0 : 1;
+
+
+            if (isInternet != false) {
+                try {
+                    const { success, message } = await AddIssueApi(global.session_id, global.application_id, path, isVideo, desc, email);
+                    if (success) {
+                        setIsLoading(false)
+                        setIsBugReported(true)
+                        setAPIMessage(Localization[global.ShakebugLanguage].BugSubmited)
+                        log.debug("------------------------------------------------------------------------------------------")
+                        log.info('API response:', message);
+                        log.debug("------------------------------------------------------------------------------------------")
+                    } else {
+                        setIsLoading(false)
+                        setAPIMessage("Something went wrong! Please try again later! If problem still presist, please drop mail at support@shakebug.com")
+                        setErrorInAPI(true)
+                        log.debug("------------------------------------------------------------------------------------------")
+                        log.warn('API response:', message);
+                        log.debug("------------------------------------------------------------------------------------------")
+                    }
+                }
+                catch (err) {
+                    setAPIMessage("Something went wrong! Please try again later! If problem still presist, please drop mail at support@shakebug.com")
+                    setErrorInAPI(true)
+                    setIsLoading(false)
+                    log.error("err", err)
+                }
+            }
+            else {
+                setErrorInAPI(true)
+                setAPIMessage(Localization[global.ShakebugLanguage].InterNetConnetionError)
+            }
+
+
+            // Manage submit bug api
+
+
+        }
+    }
+
+    UpdateStatusBar = () => {
+        console.log("here");
+        StatusBar.setHidden(false)
+    }
+
+    return (
+        <SafeAreaView style={{ width: "100%", height: "100%" }}>
+            <StatusBar backgroundColor={ThemeColor} hidden={false} />
+            <KeyboardAvoidingWrapper>
+                <>
+                    <View style={{ width: "100%", height: "100%", backgroundColor: "#ffffff" }}>
+                        <View style={{ height: '6%', padding: 5, paddingHorizontal: 15, backgroundColor: ThemeColor, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                            <TouchableOpacity
+                                style={{
+                                    width: '10%',
+                                    alignItems: 'center'
+                                }}
+                                onPress={() => {
+                                    StatusBar.setHidden(false)
+                                    global.isScreenShotDetected = false
+                                    setIsScreenShot(false)
+                                    setIsRecordingStart(false)
+                                    if (mediaType == "Recordvideo") {
+                                        global.isShakebugSDKOpen = false
+                                        global.IsBackground = 'true'
+                                        goToScreenAtIndex(0)
+                                    }
+                                    else {
+                                        global.IsBackground = 'false'
+                                        goToScreenAtIndex(1)
+                                    }
+                                }}
+                            >
+                                <Image source={require('../Assets/images/close.png')} resizeMode='contain' style={{ width: 30, height: 30 }} />
+                            </TouchableOpacity>
+                            <Text style={{ width: '80%', textAlign: 'center', fontSize: 18, fontWeight: '300', color: 'white' }}>
+                                {title}
+                            </Text>
+                            <TouchableOpacity
+                                style={{
+                                    width: '10%',
+                                    alignItems: 'center'
+                                }}
+                                onPress={() => {
+                                    Keyboard.dismiss()
+                                    ReportBugFunc()
+
+                                }}
+                            >
+                                <Image source={require('../Assets/images/next.png')} resizeMode='contain' style={{ width: 25, height: 25 }} />
+                            </TouchableOpacity>
+                        </View>
+
+                        <TouchableOpacity
+                            style={{ marginHorizontal: 20, marginTop: '3%', borderWidth: descBorder == 'red' ? 2 : 1, height: "20%", paddingHorizontal: 10, borderRadius: 6, borderColor: descBorder, alignItems: 'center' }}
+                            activeOpacity={1}
+                            onPress={() => descRef.current.focus()}
+                        >
+                            <TextInput
+                                ref={descRef}
+                                placeholder={Localization[global.ShakebugLanguage].Description}
+                                placeholderTextColor={"#b2b2b2"}
+                                multiline
+                                style={{
+                                    fontSize: 16,
+                                    color: '#000',
+                                    width: '100%',
+                                    paddingVertical: 8,
+
+                                }}
+                                value={desc}
+                                onChangeText={(e) => {
+                                    setDesc(e)
+                                    setDescBorder("black")
+                                }}
+                            />
+
+                            {descBorder == "red" ? (<View
+                                style={{
+                                    position: 'absolute',
+                                    bottom: 10,
+                                    right: 10,
+                                    alignItems: 'center',
+                                    flexDirection: 'row'
+                                }}
+                            >
+                                <View style={{ width: 20, height: 20, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center', borderRadius: 50 }}>
+                                    <Text style={{ fontSize: 16, fontWeight: '900', textAlign: 'center', textAlignVertical: 'center', color: 'white' }}>!</Text>
+                                </View>
+                                <Text style={{ color: 'red', fontWeight: '500', marginLeft: 5 }}>{Localization[global.ShakebugLanguage].DescriptionError}</Text>
+                            </View>) : null}
+                        </TouchableOpacity>
+
+                        <View style={{ marginHorizontal: 20, marginTop: '2%', borderWidth: EmailBorder == "red" ? 2 : 1, borderColor: EmailBorder, height: '7%', paddingHorizontal: 10, borderRadius: 6 }}>
+                            <TextInput
+                                placeholder={Localization[global.ShakebugLanguage].Email}
+                                placeholderTextColor={"#b2b2b2"}
+                                style={{
+                                    fontSize: 16,
+                                    color: '#000',
+                                    height: '100%',
+                                    width: '100%',
+                                    textAlignVertical: 'center',
+                                }}
+                                value={email}
+                                onChangeText={(val) => {
+                                    setEmail(val)
+                                    setEmailBorder("black")
+                                }}
+                            />
+
+                        </View>
+                        <Text style={{ fontSize: 12, color: 'red', fontWeight: '500', marginRight: '6%', textAlign: 'right' }}>{EmailBorder == "red" ? Localization[global.ShakebugLanguage].EmailError : ""}</Text>
+
+                        <TouchableOpacity activeOpacity={1} onPress={Keyboard.dismiss} style={{ height: Platform.OS == 'ios' ? Dimensions.get('window').height * 0.50 : '52%', width: '100%', marginTop: '0%', justifyContent: 'center', alignItems: 'center' }}>
+                            {type == "img" ?
+                                path != "" && <Image source={{ uri: path }} resizeMode='contain' style={{ width: '100%', height: '100%' }} />
+                                :
+                                <View style={{ width: '100%', height: '100%' }}>
+                                    {poster != "" && <VideoPlayer videoUri={path} img={poster} themeColor={ThemeColor} goToScreenAtIndex={goToScreenAtIndex} goBack={goBack} SDKScreenTitle={SDKScreenTitle} UpdateStatusBar={UpdateStatusBar} />}
+                                </View>}
+                        </TouchableOpacity>
+                        <View style={{ marginTop: '2%', width: '100%', position: 'absolute', bottom: 10 }}>
+                            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginHorizontal: 20 }}>
+                                <TouchableOpacity onPress={() => openImagePicker()}>
+                                    <Text style={{ fontSize: 16, color: ThemeColor, fontWeight: '300' }}>{Localization[global.ShakebugLanguage].ReplaceImage}</Text>
+                                </TouchableOpacity>
+                                <TouchableOpacity
+                                    onPress={() => {
+                                        if (global.AllowVideo == false) {
+                                            setAPIMessage(`You have reached your max video limitation. \n\n Used Videos: ${global.used_video} \nAllowed Videos: ${global.total_video}\n\nPlease visit https://www.shakebug.com website and upgrade your plan.`)
+                                            setErrorInAPI(true)
+                                        }
+                                        else {
+                                            openVideoPicker()
+                                        }
+                                    }}
+                                >
+                                    <Text style={{ fontSize: 16, color: ThemeColor, fontWeight: '300' }}>{Localization[global.ShakebugLanguage].ReplaceVideo}</Text>
+                                </TouchableOpacity>
+                            </View>
+
+                            <View style={{ alignItems: 'flex-end', marginHorizontal: 15, marginTop: '1%' }}>
+                                <Text style={{ fontSize: 16, color: "black" }}>© <Text>ShakeBug v1.0</Text></Text>
+                            </View>
+
+                        </View>
+                    </View>
+
+                    <CustomeAlert
+                        isVisible={isErrorInAPI || isBugReported}
+                        text={apiMessage}
+                        color={themeColor}
+                        OnPrees={() => {
+                            if (isBugReported) {
+                                global.isScreenShotDetected = false;
+                                setIsScreenShot(false)
+                                setIsRecordingStart(false)
+                                goToScreenAtIndex(0)
+                            }
+                            setIsBugReported(false)
+                            setErrorInAPI(false)
+                            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>
+        </SafeAreaView >
+    )
+}
+
+export default AddDetailsScreen