Video screen update to check unhandled promise

ComApp/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@react-native-community/netinfo": "^9.3.7",
-    "@react-native-community/slider": "^4.3.2",
+    "@react-native-community/slider": "4.2.4",
     "@react-native-picker/picker": "^2.4.6",
     "@react-navigation/native": "^6.0.13",
     "@react-navigation/native-stack": "^6.9.0",
@@ -21,7 +21,7 @@
     "axios": "^0.27.2",
     "buffer": "^6.0.3",
     "expo": "^47.0.10",
-    "expo-av": "^13.0.2",
+    "expo-av": "~13.0.3",
     "expo-barcode-scanner": "^11.4.0",
     "expo-splash-screen": "^0.16.2",
     "expo-video-player": "^2.2.0",

ComApp/src/App/Views/VideoScreen.js

@@ -7,6 +7,8 @@ import * as FileSystem from 'expo-file-system';
 // Video
 import { ResizeMode } from 'expo-av';
 import VideoPlayer from 'expo-video-player';
+// Sentry
+import * as Sentry from '@sentry/react-native';
 
 function mapStateToProps(state) {
   return {
@@ -20,39 +22,54 @@ class VideoScreen extends React.Component {
     let width = Dimensions.get('window').width;
     let height = Dimensions.get('window').height;
 
-    // if portrait
+    // * If on portrait
     if (height > width) {
-      let tmpHeight = height;
+      const tmpHeight = height;
       height = width - 150;
       width = tmpHeight + 100;
     } else {
       height = height - 100;
     }
-    return (
-      <View style={{ flex: 1, backgroundColor: 'black' }}>
-        <VideoPlayer
-          defaultControlsVisible={true}
-          fullscreen={{
-            visible: false,
-          }}
-          slider={{
-            minimumTrackTintColor: this.props.mainColor,
-            thumbTintColor: this.props.mainColor,
-          }}
-          style={{
-            height: height,
-            width: width,
-          }}
-          videoProps={{
-            shouldPlay: true,
-            resizeMode: ResizeMode.CONTAIN,
-            source: {
-              uri: FileSystem.documentDirectory + uuid + '.mp4',
-            },
-          }}
-        />
-      </View>
-    );
+    const videoUri = `${FileSystem.documentDirectory}${uuid}.mp4`;
+    console.debug({
+      shouldPlay: true,
+      resizeMode: ResizeMode.CONTAIN,
+      source: {
+        uri: videoUri,
+      },
+    });
+    try {
+      return (
+        <View style={{ flex: 1, backgroundColor: 'black' }}>
+          <VideoPlayer
+            defaultControlsVisible={true}
+            fullscreen={{
+              visible: false,
+            }}
+            slider={{
+              minimumTrackTintColor: this.props.mainColor,
+              thumbTintColor: this.props.mainColor,
+            }}
+            style={{
+              height: height,
+              width: width,
+            }}
+            videoProps={{
+              shouldPlay: true,
+              resizeMode: ResizeMode.CONTAIN,
+              source: {
+                uri: videoUri,
+              },
+            }}
+            errorCallback={e => {
+              console.error(e);
+            }}
+          />
+        </View>
+      );
+    } catch (e) {
+      console.error(e);
+    }
   }
 }