Adds support for hsl videos

components/VideoPlayer.js

@@ -5,28 +5,37 @@ import API from '../API';
 import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
 
-const VideoPlayer = ({ videosFiles, videoId, poster }) => {
+const VideoPlayer = ({ videosFiles, postId, poster, videoUrl }) => {
   const gState = useSnapshot(GlobalState);
   const viewer = gState.me;
-  let chosenVideo = []; 
-  videosFiles.forEach((f) => {
-    if (f.rendition === 'adaptive') chosenVideo.push(f);
-  });
   const video = React.useRef(null);
   const [status, setStatus] = React.useState({});
+  const [chosenVideo, setChosenVideo] = React.useState([]);
+  
+
+  React.useEffect(()=>{
+    let chosenVideo = []; 
+    if(videosFiles)
+    videosFiles.forEach((f) => {
+      if (f.rendition === 'adaptive') chosenVideo.push(f);
+    });
+    if(videoUrl) chosenVideo.push({link: videoUrl});
+    console.log(chosenVideo);
+    setChosenVideo(chosenVideo);
+  }, [videoUrl, postId]);
 
   const onLoad = ()=>{
-    if(!viewer.data[videoId]) return 0;
-    console.log(videoId + " loaded")
-    video.current.setPositionAsync(viewer.data[videoId].time*1000);
+    if(!viewer.data[postId]) return 0;
+    console.log(postId + " loaded")
+    video.current.setPositionAsync(viewer.data[postId].time*1000);
   };
-
+  
   return (
     <Video
       ref={video}
       style={styles.video}
       source={{
-        uri: chosenVideo[chosenVideo.length-1].link,
+        uri: chosenVideo.length ? chosenVideo[chosenVideo.length-1].link : '',
       }}
       useNativeControls
       shouldPlay={true}