diff --git a/components/Media.js b/components/Media.js index cfc5b63..4ba22e3 100644 --- a/components/Media.js +++ b/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 ? : <>); + const video2 = hlsUrl ? : <>; const iframe = iframeSrc.length ? { } {video} + {video2} {iframe} ); diff --git a/components/Post.js b/components/Post.js index b10285b..ab49327 100644 --- a/components/Post.js +++ b/components/Post.js @@ -69,7 +69,7 @@ let Post = (props) => { {cleanContent} - + : News diff --git a/components/VideoPlayer.js b/components/VideoPlayer.js index ec74b11..9c1d740 100644 --- a/components/VideoPlayer.js +++ b/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 (