shakebug-react-native 1.0.14

package/src/Screens/FirstScreen.js

@@ -0,0 +1,629 @@
+import { Alert, Image, ImageBackground, Linking, PermissionsAndroid, Platform, SafeAreaView, StatusBar, Text, TouchableOpacity, View, TextInput, Keyboard, PanResponder, Animated, StyleSheet, KeyboardAvoidingView, BackHandler, Dimensions } from 'react-native'
+import React, { useEffect, useRef, useState } from 'react'
+import { ClearCanvas, RNDrawingView } from './StrockView.js';
+import ViewShot from '../../ScreenShot/src/index.js';
+import { launchImageLibrary } from '../../ImageOrVedioPicker/src/index';
+import { logger, consoleTransport } from "react-native-logs";
+import { NativeModules } from 'react-native';
+import { useNavigation } from '../../src/Componanats/NavigationContext';
+import { Localization } from '../../src/Componanats/localization';
+import { ActivityIndicator } from 'react-native';
+import DeviceInfo from '../../DeviceInfo';
+import { useGlobalState } from '../Componanats/GlobalStateContext.js';
+import CustomeAlert from 'shakebug-react-native/src/Componanats/CustomAlert.js';
+
+console.disableYellowBox = true;
+console.ignoredYellowBox = ["Warning: Each", "Warning: Failed", "Possible"];
+
+const FirstScreen = ({ img, themeColor, SDKScreenTitle }) => {
+
+  const { setIsScreenShot, setIsRecordingStart } = useGlobalState()
+
+  const ThemeColor = themeColor ? themeColor : "#1dd3e3";
+
+  const { goBack, navigate, goToScreenAtIndex, focusedScreen } = useNavigation();
+
+  const [selectd, setSelected] = useState(2)
+  let canvasRef = useRef()
+  const ref = useRef();
+  const [image, setImage] = useState(img);
+  const [addTextView, setAddTextView] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [text, setText] = useState("")
+  const [margin, setMargin] = useState(0)
+  const [isDraw, setIsDraw] = useState(true)
+  const [isShow, setIsShow] = useState(false)
+  const [isAlert, setIsAlert] = useState(false)
+  const [isAlertText, setIsAlertText] = useState("")
+  
+  const isFocused = focusedScreen == "AddDetailsScreen"
+
+  let title = SDKScreenTitle ? SDKScreenTitle.split(",")[0] : ""
+
+  useEffect(() => {
+    StatusBar.setHidden(false, 'slide');
+    global.isScreenShotDetected = true;
+    const backAction = () => {
+      global.isTrigger = false
+      global.isShakebugOpen = false
+      global.isScreenShotDetected = false
+      global.isScreeenShotTaken = false
+      global.isShakebugSDKOpen = false
+      setIsScreenShot(false)
+      setIsRecordingStart(false)
+      goToScreenAtIndex(0)
+      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
+  }, []);
+
+  const { RNCameraPermission } = NativeModules
+
+  const [keyboardOpen, setKeyboardOpen] = useState(true);
+
+  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 geting event while keybord open and close
+  Keyboard.addListener('keyboardDidShow', () => {
+    setKeyboardOpen(true);
+  })
+
+  Keyboard.addListener('keyboardDidHide', () => {
+    setKeyboardOpen(false);
+  })
+
+  UpdateStatusBar = () => {
+    StatusBar.setHidden(false)
+  }
+
+  // open Video picker to choose video
+  const openVideoPicker = () => {
+    const options = {
+      mediaType: 'video',
+      includeBase64: false,
+      selectionLimit: 1
+    };
+
+    launchImageLibrary(options, async (response) => {
+      setIsLoading(true)
+      if (response.didCancel) {
+        setIsLoading(false)
+      } else if (response.error) {
+        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") {
+          setIsLoading(false)
+          navigate("TrimVideoScreen", { video: `${vedioUri}`, Type: "video", themeColor: `${ThemeColor}`, SDKScreenTitle: `${SDKScreenTitle}`, UpdateStatusBar: UpdateStatusBar, updateParent: updateImage })
+        }
+        else {
+          setIsAlertText("Invalid selection, Please choose a valid video file")
+          setIsAlert(true)
+        }
+      }
+    });
+  };
+
+
+  // For update image while change from Add details screen
+  const updateImage = (data) => {
+    ClearCanvas(canvasRef)
+    setText("")
+    setImage(data)
+  }
+
+
+  useEffect(() => {
+    global.IsBackground = 'false'
+    Keyboard.addListener('keyboardDidShow', () => {
+      setMargin("-10%")
+    })
+  }, [])
+
+  const ScreenRecord = (ismic) => {
+    global.isMic = ismic;
+    global.isRecordingStart = true;
+    setIsScreenShot(false)
+    goToScreenAtIndex(0)
+  }
+
+  const RecordVideo = async () => {
+    Alert.alert(
+      Localization[global.ShakebugLanguage].RecordAudio,
+      "",
+      [
+        {
+          text: Localization[global.ShakebugLanguage].No,
+          onPress: (() => {
+            setIsLoading(true)
+            if (Platform.OS == 'ios') {
+              RNCameraPermission.checkCameraPermissionStatus().then(res => {
+                if (res == "denied") {
+                  Alert.alert(
+                    "",
+                    Localization[global.ShakebugLanguage].AudioPermission,
+                    [
+                      {
+                        text: Localization[global.ShakebugLanguage].No,
+                        style: 'cancel'
+                      },
+                      {
+                        text: Localization[global.ShakebugLanguage].Yes,
+                        style: 'default',
+                        onPress: (() => {
+                          Linking.openSettings()
+                        })
+                      }
+                    ]
+                  )
+                }
+                else if (res == "granted") {
+                  setIsLoading(true)
+                  ScreenRecord(false)
+                }
+              })
+            }
+            else {
+              ScreenRecord(false)
+            }
+
+          }),
+          style: 'cancel'
+        },
+        {
+          'text': Localization[global.ShakebugLanguage].Yes,
+          onPress: (() => {
+
+            if (Platform.OS == 'android') {
+              PermissionsAndroid.request(
+                PermissionsAndroid.PERMISSIONS.RECORD_AUDIO
+              ).then(res => {
+                if (res == 'granted') {
+                  setIsLoading(true)
+                  ScreenRecord(true)
+                }
+                else if (res == 'denied') {
+                  setIsLoading(true)
+                  ScreenRecord(false)
+                }
+                else {
+                  Alert.alert(
+                    "",
+                    Localization[global.ShakebugLanguage].AudioPermission,
+                    [
+                      {
+                        text: Localization[global.ShakebugLanguage].No,
+                        onPress: (() => {
+                          setIsLoading(true)
+                          ScreenRecord(false)
+                        }),
+                        style: 'cancel'
+                      },
+                      {
+                        text: Localization[global.ShakebugLanguage].Yes,
+                        onPress: (() => {
+                          setIsLoading(true)
+                          Linking.openSettings()
+                        })
+                      }
+                    ]
+                  )
+                }
+              })
+            }
+            else {
+              setIsLoading(true)
+              RNCameraPermission.checkCameraPermissionStatus().then(res => {
+                if (res == "denied") {
+                  Alert.alert(
+                    "",
+                    Localization[global.ShakebugLanguage].AudioPermission,
+                    [
+                      {
+                        text: Localization[global.ShakebugLanguage].No,
+                        style: 'cancel'
+                      },
+                      {
+                        text: Localization[global.ShakebugLanguage].Yes,
+                        style: 'default',
+                        onPress: (() => {
+                          Linking.openSettings()
+                        })
+                      }
+                    ]
+                  )
+                }
+                else if (res == "granted") {
+                  setIsLoading(true)
+                  ScreenRecord(true)
+                }
+              })
+            }
+          })
+        }
+      ]
+    )
+  }
+
+
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const BOUNDARY_X_MIN = 0;
+  const BOUNDARY_X_MAX = Dimensions.get('window').width * 0.6; // Set your max boundary for x
+  const BOUNDARY_Y_MIN = 0;
+  const BOUNDARY_Y_MAX = Dimensions.get('window').height * 0.75; // Set your max boundary for y
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onPanResponderMove: (event, gestureState) => {
+        // Calculate the new x and y values within the boundaries
+        let newX = Math.max(BOUNDARY_X_MIN, Math.min(BOUNDARY_X_MAX, gestureState.dx + pan.x._offset));
+        let newY = Math.max(BOUNDARY_Y_MIN, Math.min(BOUNDARY_Y_MAX, gestureState.dy + pan.y._offset));
+
+        pan.setValue({ x: newX - pan.x._offset, y: newY - pan.y._offset });
+      },
+      onPanResponderRelease: () => {
+        pan.flattenOffset();
+      },
+      onPanResponderGrant: () => {
+        pan.setOffset({
+          x: pan.x._value,
+          y: pan.y._value
+        });
+        pan.setValue({ x: 0, y: 0 });
+      }
+    })
+  ).current;
+
+
+  return (
+    <SafeAreaView style={{ width: "100%", height: "100%" }}>
+      <StatusBar backgroundColor={ThemeColor} />
+      <View style={{ width: "100%", height: "100%", backgroundColor: "#181818" }}>
+        <View style={{ height: '6%', padding: 5, paddingHorizontal: 15, backgroundColor: ThemeColor, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+          <TouchableOpacity
+            style={{
+              width: '10%',
+              alignItems: 'center'
+            }}
+            onPress={() => {
+              global.isTrigger = false
+              global.isShakebugOpen = false
+              global.IsBackground = 'true'
+              global.isScreeenShotTaken = false
+              setIsScreenShot(false)
+              setIsRecordingStart(false)
+              goToScreenAtIndex(0)
+              global.isScreenShotDetected = false
+              global.isShakebugSDKOpen = false
+            }}
+          >
+            <Image source={require('../Assets/images/close.png')} resizeMode='contain' style={{ width: 30, height: 30 }} />
+          </TouchableOpacity>
+          <Text style={{ width: '80%', height: '80%', fontSize: 18, fontWeight: '300', color: 'white', textAlign: 'center' }}>
+            {title}
+          </Text>
+          <TouchableOpacity
+            style={{
+              width: '10%',
+              alignItems: 'center'
+            }}
+            onPress={async () => {
+              const ImgUrl = await ref.current.capture()
+              if (ImgUrl != undefined || ImgUrl != null) {
+                global.IsBackground = 'true'
+                navigate("AddDetailsScreen", { media: `${ImgUrl}`, updateParent: updateImage, mediaType: 'img', themeColor: ThemeColor, SDKScreenTitle: `${SDKScreenTitle}` })
+              }
+
+            }}
+          >
+            <Image source={require('../Assets/images/next.png')} resizeMode='contain' style={{ width: 25, height: 25 }} />
+          </TouchableOpacity>
+        </View>
+        <View style={{ position: 'relative', height: Platform.OS == 'android' ? '78%' : Dimensions.get('window').height * 0.75, backgroundColor: '#181818', width: '100%', alignItems: 'center', paddingTop: 8 }}>
+          <ViewShot ref={ref} options={{ fileName: "ScreenShort", format: "jpg", quality: 1 }} style={{ width: Platform.OS == 'android' ? "77%" : '73%', height: '100%' }}>
+
+            {text.trim().length > 0 ?
+              <Animated.View
+                style={[
+                  styles.card,
+                  {
+                    transform: pan.getTranslateTransform(),
+                    opacity: 1,
+                    borderWidth: isShow ? 1 : 0
+                  },
+                ]}
+
+              >
+                <TouchableOpacity
+                  style={{
+                    width: '100%',
+                    height: '100%'
+                  }}
+                  activeOpacity={1}
+                  onPress={() => setIsShow(!isShow)}
+                >
+                  <Text
+                    onLongPress={() => {
+                      setIsShow(!isShow)
+                    }}
+                    {...panResponder.panHandlers}
+                    style={{
+                      fontSize: 20,
+                      fontWeight: 'bold',
+                      backgroundColor: 'white',
+                      borderRadius: 8,
+                      padding: 5,
+                      color: selectd == 1 ? "black" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black',
+                    }}>{text}</Text>
+                </TouchableOpacity>
+
+                {isShow ? <TouchableOpacity
+                  activeOpacity={1}
+                  onPress={() => setText("")}
+                  style={{ position: 'absolute', top: '-25%', left: '-15%', width: 20, height: 20, zIndex: 1 }}>
+                  <Image source={require("../Assets/images/RemoveTextView.png")} style={{ width: '100%', height: '100%' }} resizeMode='contain' />
+                </TouchableOpacity> : null}
+              </Animated.View>
+              : null}
+            <ImageBackground
+              source={{ uri: image }}
+              style={{
+                alignItems: 'center',
+                width: "100%",
+                height: "100%"
+              }}
+              resizeMode='contain'
+            >
+
+              <RNDrawingView
+                ref={canvasRef}
+                style={{ width: '100%', height: '100%' }}
+                color={selectd == 1 ? "black" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black'}
+                strokeWidth={Platform.OS == 'android' ? 5 : 3}
+              />
+
+            </ImageBackground>
+          </ViewShot>
+
+        </View>
+        <View style={{ margin: 10, marginHorizontal: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+          <TouchableOpacity
+            style={{ backgroundColor: ThemeColor, padding: 8, width: '45%', alignItems: 'center' }}
+            onPress={() => {
+              global.IsBackground = 'false'
+              if (global.AllowVideo == false) {
+                setIsAlertText(`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.`)
+                setIsAlert(true)
+              }
+              else {
+                DeviceInfo.isEmulator()
+                  .then(res => {
+                    if (res != true || Platform.OS != 'ios') {
+                      RecordVideo()
+                    }
+                    else {
+                      setIsAlertText("Only real device is supported for recording video")
+                      setIsAlert(true)
+                    }
+                  })
+              }
+            }}
+          >
+            <Text style={{ color: 'white' }}>{Localization[global.ShakebugLanguage].RecordVideo}</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={{ backgroundColor: ThemeColor, padding: 8, width: '45%', alignItems: 'center' }}
+            onPress={() => {
+              if (global.AllowVideo == false) {
+                setIsAlertText(`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.`)
+                setIsAlert(true)
+              }
+              else {
+                openVideoPicker()
+              }
+            }}
+          >
+            <Text style={{ color: 'white' }}>{Localization[global.ShakebugLanguage].ChooseVideo}</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginHorizontal: 15 }}>
+          <TouchableOpacity
+            onPress={() => {
+              setIsDraw(true)
+              setSelected(1)
+            }}
+          >
+            <Image source={selectd == 1 ? require('../Assets/images/borderdBlack.png') : require('../Assets/images/black.png')} resizeMode='contain' style={{ width: 30, height: 30 }} />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => setSelected(2)}
+          >
+            <Image source={selectd == 2 ? require('../Assets/images/borderdRed.png') : require('../Assets/images/red.png')} resizeMode='contain' style={{ width: 30, height: 30 }} />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => setSelected(3)}
+          >
+            <Image source={selectd == 3 ? require('../Assets/images/borderdGreen.png') : require('../Assets/images/green.png')} resizeMode='contain' style={{ width: 30, height: 30 }} />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => setSelected(4)}
+          >
+            <Image source={selectd == 4 ? require('../Assets/images/borderdBlue.png') : require('../Assets/images/blue.png')} resizeMode='contain' style={{ width: 30, height: 30 }} />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => setSelected(5)}
+          >
+            <Image source={selectd == 5 ? require('../Assets/images/borderdYellow.png') : require('../Assets/images/yellow.png')} resizeMode='contain' style={{ width: 30, height: 30 }} />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => setAddTextView(true)}
+          >
+            <Image source={require('../Assets/images/text_icon.png')} resizeMode='contain' style={{ width: 30, height: 30 }} />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={{ backgroundColor: ThemeColor, padding: 5 }} onPress={() => ClearCanvas(canvasRef)}>
+            <Image source={require('../Assets/images/clear.png')} resizeMode='contain' style={{ width: 30, height: 30 }} />
+          </TouchableOpacity>
+        </View>
+      </View >
+
+      {addTextView ? (<View style={{ flex: 1, position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, backgroundColor: 'black', opacity: 0.93, alignItems: 'center' }}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={styles.container}
+        >
+          <View style={styles.innerContainer}>
+            <TextInput
+              style={{
+                width: '90%',
+                alignSelf: 'center',
+                height: '70%',
+                paddingHorizontal: 10,
+                textAlign: 'center',
+                textAlignVertical: 'center',
+                marginTop: 30,
+                fontSize: 18,
+                color: selectd == 1 ? "white" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black'
+              }}
+              autoFocus
+              multiline
+              placeholder="Type here..."
+              placeholderTextColor="#b2b2b2"
+              cursorColor={selectd == 1 ? "white" : selectd == 2 ? 'red' : selectd == 3 ? 'green' : selectd == 4 ? '#1dd3e3' : selectd == 5 ? "yellow" : 'black'}
+              value={text}
+              onChangeText={(e) => setText(e)}
+            />
+          </View>
+          <TouchableOpacity
+            style={keyboardOpen ? styles.buttonShifted : styles.button}
+            onPress={() => {
+              setIsShow(false)
+              setAddTextView(false)
+            }}
+          >
+            <Text style={{ color: 'white' }}>{Localization[global.ShakebugLanguage].Done}</Text>
+          </TouchableOpacity>
+        </KeyboardAvoidingView>
+      </View>) : null}
+
+      <View
+        style={{
+          backgroundColor: 'black', // Change this color as per your preference
+          height: Platform.OS == 'android' ? 0 : 45,
+        }}
+      />
+
+      {isLoading &&
+        <View
+          style={{
+            ...StyleSheet.absoluteFillObject,
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+          }}
+        />
+      }
+
+      <CustomeAlert
+        isVisible={isAlert}
+        text={isAlertText}
+        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 >
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    width: 'auto',
+    height: 'auto',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    paddingHorizontal: 6,
+    paddingVertical: 6,
+    borderRadius: 8,
+    marginBottom: 10,
+    position: 'absolute',
+    zIndex: 1,
+    backgroundColor: '#fff',
+    elevation: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.8,
+    shadowRadius: 1,
+  },
+  container: {
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  innerContainer: {
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+  },
+  input: {
+    width: '90%',
+    height: '80%',
+    marginBottom: 10,
+    paddingHorizontal: 10,
+    textAlign: 'center',
+    marginTop: 10,
+    color: "white"
+  },
+  button: {
+    width: '90%',
+    marginTop: "20%",
+    backgroundColor: 'black',
+    borderWidth: 1,
+    borderColor: 'white',
+    padding: 10,
+    borderRadius: 20,
+    alignItems: 'center'
+  },
+  buttonShifted: {
+    width: '90%',
+    backgroundColor: 'black',
+    borderWidth: 1,
+    borderColor: 'white',
+    padding: 10,
+    borderRadius: 20,
+    alignItems: 'center'
+  },
+});
+export default FirstScreen