Merge pull request #24 from CS428-CT/better-video

Minor modification on video container
CS428-CT · Apr 10, 2021 · 5c397d3 · 5c397d3
2 parents 7605933 + b26f99b
commit 5c397d3
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 20 deletions.
diff --git a/src/constants.js b/src/constants.js
@@ -1,3 +1,3 @@
-export const FILE_SERVER_BASE_URL = 'https://classtranscribe-dev.ncsa.illinois.edu'
+export const FILE_SERVER_BASE_URL = 'https://classtranscribe.illinois.edu'
 export const API_BASE_URL = `${FILE_SERVER_BASE_URL}/api/`
 export const REFERRER_URL = `${FILE_SERVER_BASE_URL}/offering/e740770d-e6fb-4ddb-86ca-a49a8dcc7d28`
diff --git a/src/containers/VideoContainer/VideoContainer.js b/src/containers/VideoContainer/VideoContainer.js
@@ -26,7 +26,7 @@ const VideoContainer = ({ videos, index }) => {
       authorization: `Bearer ${getCurrentAuthenticatedUser()?.authToken}`,
     },
   }
-
+  const [ready, setReady] = React.useState(false)
   const [status, setStatus] = React.useState({
     isMuted: false,
     isPlaying: false,
@@ -40,11 +40,16 @@ const VideoContainer = ({ videos, index }) => {
       rate: 1.0,
     })
     videoRef.current.unloadAsync().then(() => {
-      videoRef.current.loadAsync(
-        videoSource,
-        { positionMillis: (videos[vidIndex].watchHistory?.json?.timestamp || 0) * 1000 },
-        true
-      )
+      setReady(false)
+      videoRef.current
+        .loadAsync(
+          videoSource,
+          { positionMillis: (videos[vidIndex].watchHistory?.json?.timestamp || 0) * 1000 },
+          true
+        )
+        .then(() => {
+          setReady(true)
+        })
     })
   }, [vidIndex])
 
@@ -78,16 +83,19 @@ const VideoContainer = ({ videos, index }) => {
       <View style={styles.input}>
         <Text label="Video URI" value={url} />
       </View>
-      <Video
-        ref={videoRef}
-        style={styles.video}
-        source={videoSource}
-        useNativeControls
-        resizeMode="contain"
-        isLooping
-        onPlaybackStatusUpdate={(status) => setStatus(() => status)}
-      />
-      <Text>{videos[vidIndex].jsonMetadata.title}</Text>
+      <View style={ready ? {} : { display: 'none' }}>
+        <Video
+          ref={videoRef}
+          style={styles.video}
+          source={videoSource}
+          useNativeControls
+          resizeMode="contain"
+          isLooping
+          onPlaybackStatusUpdate={(status) => setStatus(() => status)}
+        />
+      </View>
+      {ready === true ? <></> : <Text>Loading....</Text>}
+      <Text>{videos[vidIndex].name}</Text>
       <View style={styles.buttons}>
         <Button
           mode="contained"
@@ -153,9 +161,7 @@ VideoContainer.propTypes = {
       video: PropTypes.shape({
         video1Path: PropTypes.string.isRequired,
       }).isRequired,
-      jsonMetadata: PropTypes.shape({
-        title: PropTypes.string,
-      }),
+      name: PropTypes.string,
       watchHistory: PropTypes.shape({
         json: PropTypes.shape({
           timestamp: PropTypes.number,