shakebug-react-native 1.0.14

package/src/Componanats/ShakeFunction.js

@@ -0,0 +1,562 @@
+import { View, Text, Platform, Image, ImageBackground, NativeModules, DeviceEventEmitter, NativeEventEmitter, StatusBar, PanResponder, Animated, AppState, Dimensions, BackHandler, LogBox, StyleSheet } from 'react-native'
+import React, { useRef, useEffect, useState } from 'react'
+import { SensorTypes, setUpdateIntervalForType, accelerometer } from '../../Sensor/src/index';
+import ViewShot from '../../ScreenShot/src/index';
+import { TouchableOpacity } from 'react-native';
+import RecordScreen from '../../RecordScreen/src/index';
+import { ClearCanvas, RNDrawingView } from '../Screens/StrockView';
+import DeviceInfo, { getBaseOs } from '../../DeviceInfo';
+import { useNavigation } from './NavigationContext';
+
+console.ignoredYellowBox = ["Warning: Each", "Warning: Failed", "Possible", "WARN"];
+
+import { logger, consoleTransport } from "react-native-logs";
+import { ActivityIndicator } from 'react-native';
+import { useGlobalState } from 'shakebug-react-native/src/Componanats/GlobalStateContext';
+
+LogBox.ignoreAllLogs()
+
+const ShakeFunction = ({ children, themeColor, showTutorialScreen, SDKScreenTitle, allowToReportBugByShaking, allowToReportBugByScreenCapture, allowCrashReport }) => {
+
+  const { ShakebugSDKScreenShotDetector, ShakebugSDKSharedPreferencesModule } = NativeModules;
+
+  const { navigate, focusedScreen, goToScreenAtIndex } = useNavigation();
+
+  let isFocused = focusedScreen == "ShakebugHome";
+  const [isLoading, setIsLoading] = useState(false)
+  // const [isScrenShot, setIsScreenShot] = useState(false)
+
+  const { setIsRecordingStart, setIsScreenShot, isScrenShot, isShakebugOpen } = useGlobalState()
+
+  if (Platform.OS == 'android') {
+    ShakebugSDKScreenShotDetector.startObserving();
+
+    useEffect(() => {
+      const subscription = DeviceEventEmitter.addListener('ScreenshotTaken', async () => {
+        if (allowToReportBugByScreenCapture == true) {
+          if (!global.isScreenShotDetected && global.application_id != "" && global.application_id != undefined) {
+            OpenShakebug()
+          }
+        }
+      })
+
+      return () => subscription.remove()
+    }, []);
+  }
+  else {
+    const screenShotEmitter = new NativeEventEmitter(ShakebugSDKScreenShotDetector);
+    useEffect(() => {
+      const subscription = screenShotEmitter.addListener(
+        'ScreenshotTaken',
+        (event) => {
+          if (allowToReportBugByScreenCapture == true) {
+            // setIsScreenShot(true)
+            if (!global.isScreenShotDetected && global.application_id != "" && global.application_id != undefined) {
+              OpenShakebug()
+            }
+          }
+        }
+      );
+
+      return () => subscription.remove();
+    }, []);
+  }
+
+  const ref = useRef();
+  let canvasRef = useRef()
+  const [isShow, setIsShow] = useState()
+  const [time, setTime] = useState("00:00")
+  const [img, setImg] = useState("")
+  const [isDraw, setIsDraw] = useState(false)
+  const startTimeRef = useRef(null);
+  const appState = useRef(AppState.currentState);
+  const [triggered, setTriggred] = useState(global.isTrigger);
+  const [restrictedView, setRestrictedView] = useState([])
+
+  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);
+
+  setUpdateIntervalForType(SensorTypes.accelerometer, 200);
+
+  let iscrashSaveed = ""
+  const BASE_URL = global.ShakebugSDKEndPointURL;
+  const API_KEY = global.ShakebugSDKEndPointURLheaderKey;
+
+
+  useEffect(() => {
+    async function fetchIsFirstTime() {
+      let showTutorialScreenFirstTime = showTutorialScreen;
+      const isVisited = await ShakebugSDKSharedPreferencesModule.getString('isVisited');
+      if (isVisited == "" || isVisited == undefined) {
+        ShakebugSDKSharedPreferencesModule.setString("isVisited", "true")
+      }
+
+      if (showTutorialScreenFirstTime == true || showTutorialScreenFirstTime == undefined) {
+        setTimeout(() => {
+          if ((isVisited != "true" || isVisited == "" || isVisited == undefined)) {
+            navigate("TutorialScreen")
+          }
+        }, 200)
+      }
+    }
+    fetchIsFirstTime();
+  }, []);
+
+
+  useEffect(() => {
+    async function fetchIsFirstTime() {
+      iscrashSaveed = await ShakebugSDKSharedPreferencesModule.getString('iscrashSaveed')
+
+      if (iscrashSaveed.length > 10 && allowCrashReport) {
+
+        let data = JSON.parse(iscrashSaveed)
+
+        const formData = new FormData();
+        formData.append("method", "addIssue");
+        formData.append("description", data["desc"]);
+        formData.append("applicationsid", data["application_id"]);
+        formData.append("session_id", data["session_id"]);
+        formData.append("batteryLevel", data["batteryLevel"]);
+        formData.append("image", "");
+        formData.append("memory", data["memory"]);
+        formData.append("email", "");
+        formData.append("bugtypes", "crashed");
+        formData.append("devicemodel", `${data["architecture"]} -- ${data["model"]}`);
+        formData.append("osversion", data["osversion"]);
+        formData.append("internettype", data["internetType"]);
+        formData.append("created", data["created"]);
+        formData.append("isVideo", 0);
+        formData.append("appversion", data["appversion"]);
+
+
+
+        try {
+          const response = await fetch(BASE_URL, {
+            method: 'POST',
+            headers: {
+              'API-KEY': API_KEY
+            },
+            body: formData,
+          });
+
+          const data = await response.json();
+
+          if (data.code === 200 && data.success === true) {
+            log.info(data.msg)
+            ShakebugSDKSharedPreferencesModule.setString("iscrashSaveed", JSON.stringify({}))
+          } else {
+
+          }
+        }
+        catch (e) {
+          log.error("e", e)
+        }
+      }
+
+    }
+    fetchIsFirstTime();
+  }, []);
+
+
+  const Stop = () => {
+    RecordScreen.stopRecording().then(res => {
+      // setIsScreenShot(true)
+      global.isMic = false;
+      global.isRecordingStart = false;
+      global.IsBackground = "true"
+      setIsShow(false)
+      setIsDraw(false)
+      global.isDraw = false;
+      global.isShow = false;
+      startTimeRef.current = null
+      clearInterval(intervalId);
+      setIsLoading(false)
+      global.isRecording = false;
+      navigate("AddDetailsScreen", { media: res.result.outputURL, mediaType: 'Recordvideo', themeColor: themeColor, SDKScreenTitle: `${SDKScreenTitle}` })
+    })
+      .catch(e => {
+        log.warn("e", e)
+      })
+  }
+
+  useEffect(() => {
+    const handleAppStateChange = (nextAppState) => {
+      if (nextAppState == 'background') {
+        if (Platform.OS == 'ios' && global.isRecording) {
+          Stop()
+        }
+      }
+
+      if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
+        // Calculate the elapsed time when the app comes back to the foreground
+        if (startTimeRef.current && global.isRecording) {
+          const elapsed = Math.floor((Date.now() - startTimeRef.current) / 1000);
+          updateTimer(elapsed);
+        }
+
+      }
+      appState.current = nextAppState;
+    };
+
+    const AppStateListener = AppState.addEventListener('change', handleAppStateChange);
+
+    // Start the interval initially
+    startTimer();
+
+    return () => {
+      // AppState.removeEventListener('change', handleAppStateChange);
+      AppStateListener.remove()
+      clearInterval(intervalId);
+    };
+  }, []);
+
+  const startTimer = () => {
+    startTimeRef.current = Date.now();
+    intervalId = setInterval(() => {
+      if (global.isRecording) {
+        const elapsed = Math.floor((Date.now() - startTimeRef.current) / 1000);
+        updateTimer(elapsed);
+      }
+    }, 1000);
+  };
+
+  const updateTimer = (elapsed) => {
+    const min = Math.floor(elapsed / 60);
+    const sec = parseInt(elapsed % 60);
+
+    if (elapsed == global.videoDuration) {
+      clearInterval(intervalId);
+      setTimeout(() => {
+        Stop()
+      }, 1000)
+    }
+
+    if (elapsed > global.videoDuration) {
+      RecordScreen.stopRecording()
+        .then(() => {
+          global.isMic = false;
+          global.isRecordingStart = false;
+          global.IsBackground = "true"
+          global.isRecording = false;
+          setIsShow(false)
+          setIsDraw(false)
+          global.isDraw = false;
+          global.isShow = false;
+          startTimeRef.current = null
+          clearInterval(intervalId);
+        })
+    }
+
+    const minStr = min < 10 ? `0${min}` : min;
+    const secStr = sec < 10 ? `0${sec}` : sec;
+    setTime(`${minStr}:${secStr}`);
+  };
+
+  useEffect(() => {
+    let xdata = 0;
+    let ydata = 0;
+    let zdata = 0;
+
+    DeviceInfo.isEmulator().then(res => {
+      if (!res && isRecording == false && allowToReportBugByShaking !== false) {
+        const subscription = accelerometer.subscribe(async ({ x, y, z, timestamp }) => {
+          xdata = x;
+          ydata = y;
+          zdata = z;
+
+          let calculate = Math.abs(xdata + ydata + zdata)
+
+          if (global.isTrigger == true && global.isShakebugOpen == false) {
+            setTriggred(true)
+            global.isShakebugOpen = true;
+            setTimeout(() => {
+              OpenShakebug()
+            }, 200)
+          }
+
+          if (Platform.OS == 'android' && global.isRecording == false && global.isTrigger == false) {
+            if (calculate.toFixed(2) >= 18.00) {
+              if (global.isAndroidValid == true && global.application_id != "" && global.application_id != undefined && global.isTrigger == false) {
+                setIsScreenShot(true)
+                const ImgUrl = await ref.current.capture()
+                if (!isShow) {
+                  if (ImgUrl != undefined || ImgUrl != null) {
+                    subscription.unsubscribe();
+                    global.IsBackground = false
+                    global.isShakebugSDKOpen = true
+                    navigate("FirstScreen", { img: `${ImgUrl}`, themeColor: `${themeColor}`, SDKScreenTitle: `${SDKScreenTitle}` })
+                  }
+                  else {
+                    setIsScreenShot(false)
+                  }
+                }
+                xdata = 0;
+                ydata = 0;
+                zdata = 0;
+              }
+            }
+          }
+          else if (Platform.OS == 'ios' && global.isRecording == false && global.isTrigger == false) {
+            if (calculate.toFixed(2) >= 2.00) {
+              if (global.isIOSValid == true && global.application_id != "" && global.application_id != undefined) {
+                setIsScreenShot(true)
+                const ImgUrl = await ref.current.capture()
+                if (ImgUrl != undefined || ImgUrl != null) {
+                  subscription.unsubscribe();
+                  global.isShakebugSDKOpen = true
+                  navigate("FirstScreen", { img: `${ImgUrl}`, themeColor: `${themeColor}`, SDKScreenTitle: `${SDKScreenTitle}` })
+                }
+                else {
+                  setIsScreenShot(false)
+                }
+
+                xdata = 0;
+                ydata = 0;
+                zdata = 0;
+              }
+            }
+          }
+        })
+
+        if (isFocused == false) {
+          subscription.unsubscribe()
+          xdata = 0;
+          ydata = 0;
+          zdata = 0;
+          setTime("00:00")
+          pan.setValue({ x: SCREEN_WIDTH * 0.55, y: SCREEN_HEIGHT * 0.85 });
+        }
+      }
+      else {
+        setInterval(() => {
+          if (global.isTrigger == true && global.isShakebugOpen == false) {
+            global.isShakebugOpen = true;
+            global.isTrigger = true;
+            OpenShakebug()
+          }
+        }, 1000)
+      }
+    })
+
+  }, [isFocused])
+
+  const OpenShakebug = async () => {
+    setIsScreenShot(true)
+    if (global.application_id != "" && global.application_id != undefined && global.session_id != "" && global.session_id != undefined) {
+      const ImgUrl = await ref.current.capture()
+      if (!isShow) {
+        if (ImgUrl != undefined || ImgUrl != null) {
+          global.IsBackground = false
+          global.isScreenShotDetected = true;
+          setTriggred(false)
+          global.isShakebugSDKOpen = true
+          navigate("FirstScreen", { img: `${ImgUrl}`, themeColor: `${themeColor}`, SDKScreenTitle: `${SDKScreenTitle}` })
+        }
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (isScrenShot) {
+      setIsScreenShot(false)
+    }
+    setTimeout(() => {
+      if (global.isRecordingStart == true && global.isRecording != true) {
+        setIsLoading(true)
+        try {
+          RecordScreen.startRecording({
+            mic: global.isMic,
+            fps: 30,
+            bitrate: 1024000,
+          }).then(res => {            
+            setIsLoading(false)
+            if (res == 'started') {
+              setIsRecordingStart(true)
+              if (focusedScreen != "ShakebugHome") {
+                goToScreenAtIndex(0)
+              }
+              global.isRecording = true;
+              StatusBar.setHidden(false)
+              setIsShow(global.isRecording)
+              global.minutes = 0;
+              global.Seconds = 0;
+              startTimeRef.current = null
+              startTimer()
+            }
+            else {              
+              global.isMic = false;
+              global.isRecordingStart = false;
+              OpenShakebug()
+            }
+          })
+            .catch(e => {
+              log.error("e", e)
+              setIsLoading(false)
+            })
+        }
+        catch (e) {
+          log.error("error", e)
+          setIsLoading(false)
+        }
+      }
+    }, 1000)
+
+  }, [isFocused])
+
+
+  const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+  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.98; // 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: SCREEN_WIDTH * 0.55, y: SCREEN_HEIGHT * 0.8 });
+      }
+    })
+  ).current;
+
+  return (
+    <>
+
+      <ViewShot ref={ref} options={{ fileName: "ScreenShort", format: "jpg", quality: 1, }} style={{ width: "100%", height: '100%', backgroundColor: 'white', }}>
+        {isDraw ? (
+          <ImageBackground
+            source={{ uri: img }}
+            style={{
+              alignItems: 'center',
+              width: "100%",
+              height: "100%"
+            }}
+            resizeMode='contain'
+          >
+            <RNDrawingView
+              ref={canvasRef}
+              style={{ width: '100%', height: '100%' }}
+              color={'red'}
+              strokeWidth={Platform.OS == 'android' ? 5 : 3}
+            />
+
+          </ImageBackground>
+        ) : (<View style={{ width: '100%', height: '100%' }}>
+          {children}
+        </View>)}
+
+
+      </ViewShot>
+
+      {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 }} />}
+      {isShow ? (
+        <Animated.View
+          {...panResponder.panHandlers}
+          style={{
+            transform: [{ translateX: pan.x }, { translateY: pan.y }],
+            width: '40%',
+            height: '8%',
+            justifyContent: 'space-evenly',
+            alignItems: 'center',
+            paddingHorizontal: 6,
+            paddingVertical: 6,
+            borderRadius: 18,
+            marginBottom: 10,
+            position: 'absolute',
+            backgroundColor: themeColor,
+            flexDirection: 'row',
+            zIndex: 1
+          }}
+        >
+          <TouchableOpacity
+            onPress={() => Stop()}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <Image source={require("../Assets/images/stopButton.png")} style={{ height: 30, width: 30 }} />
+          </TouchableOpacity>
+
+          <Text style={{ color: "white", fontSize: 18, marginRight: 5, marginLeft: 5, fontWeight: '700' }}>{time}</Text>
+
+          {isDraw == false ? (
+            <TouchableOpacity
+              onPress={async () => {
+                StatusBar.setHidden(false, 'slide')
+                const ImgUrl = await ref.current.capture()
+                if (ImgUrl != undefined || ImgUrl != null) {
+                  setImg(ImgUrl)
+                  setIsDraw(true)
+                }
+              }}
+              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            >
+              <Image source={require("../Assets/images/OpenSketch.png")} style={{ height: 25, width: 25 }} />
+            </TouchableOpacity>
+          ) : (
+            <TouchableOpacity
+              onPress={() => {
+                setIsDraw(false)
+                ClearCanvas(canvasRef)
+              }}
+              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            >
+              <Image source={require("../Assets/images/close.png")} style={{ height: 30, width: 30 }} />
+            </TouchableOpacity>
+          )}
+        </Animated.View>
+      ) : null}
+    </>
+  );
+
+}
+
+export default ShakeFunction;