Adds support for hsl videos

components/Media.js

@@ -9,11 +9,19 @@ const videoIdF = (content) => {
     let vimeoTag = content.match(/@vimeo:[0-9]+/);
     let youtubeTag = content.match(/@youtube:[0-z]+/);
     if (!vimeoTag && !youtubeTag) return [];
-    let tag = youtubeTag || vimeoTag;
+    let tag = youtubeTag || vimeoTag || hslTag;
     tag = tag[0].substring(1);
     return tag.split(':');
 };
 
+const hlsIdF = (content) => {
+    let hslTag = content.match(/@hls:.+\w/);
+    if (!hslTag) return '';
+    let tag = hslTag;
+    tag = tag[0].substring(5);
+    return tag;
+};
+
 const imagesTagF = (content) => {
     let images = content.match(/@image:[0-z|/|.|]+/g);
     if (!images) return [];
@@ -40,6 +48,7 @@ let Media = (props) => {
     const imagesTag = imagesTagF(props.content);
     const imageStyle = imagesTag.length == 1 ? styles.image : styles.multipleImage;
     const videosId = videoIdF(props.content);
+    const hlsUrl = hlsIdF(props.content);
     const iframeSrc = iframeTagF(props.content) || [];
     const [videosFiles, setVideosFiles] = useState([]);
     const [poster, setPoster] = useState('');
@@ -68,6 +77,7 @@ let Media = (props) => {
             )
     ) :
         (videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : <></>);
+    const video2 = hlsUrl ? <VideoPlayer videoUrl={hlsUrl} postId={props.postId} /> : <></>;
     const iframe = iframeSrc.length ?
         <WebView
             style={styles.iframe}
@@ -99,6 +109,7 @@ let Media = (props) => {
                     </View>
             }
             {video}
+            {video2}
             {iframe}
         </View>
     );

components/Post.js

@@ -69,7 +69,7 @@ let Post = (props) => {
                                 </Text>
                             </Text>
                             <Text style={{ fontSize: 18 }}>{cleanContent}</Text>
-                            <Media content={post.content} />
+                            <Media content={post.content} postId={post._id} />
                         </View> :
                         <View>
                             <Chip icon="new-releases" style={{ width: 100 }} >News</Chip>

components/VideoPlayer.js

@@ -5,20 +5,29 @@ 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;
+  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);
     });
-  const video = React.useRef(null);
+    if(videoUrl) chosenVideo.push({link: videoUrl});
-  const [status, setStatus] = React.useState({});
+    console.log(chosenVideo);
+    setChosenVideo(chosenVideo);
+  }, [videoUrl, postId]);
 
   const onLoad = ()=>{
-    if(!viewer.data[videoId]) return 0;
+    if(!viewer.data[postId]) return 0;
-    console.log(videoId + " loaded")
+    console.log(postId + " loaded")
-    video.current.setPositionAsync(viewer.data[videoId].time*1000);
+    video.current.setPositionAsync(viewer.data[postId].time*1000);
   };
   
   return (
@@ -26,7 +35,7 @@ const VideoPlayer = ({ videosFiles, videoId, poster }) => {
       ref={video}
       style={styles.video}
       source={{
-        uri: chosenVideo[chosenVideo.length-1].link,
+        uri: chosenVideo.length ? chosenVideo[chosenVideo.length-1].link : '',
       }}
       useNativeControls
       shouldPlay={true}