youtube & player apps fixes

1 files changed, 52 insertions, 11 deletions

diff --git a/apps/Player/components/Video.js b/apps/Player/components/Video.js
index 7152967..7028f1f 100644
--- a/apps/Player/components/Video.js
+++ b/apps/Player/components/Video.js
@@ -1,25 +1,66 @@
-import { useRef } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import Splash from 'components/Splash'
+import fetchJson from 'helpers/fetchJson'
 
-const Video = ({ playlist, current, setCurrent }) => {
-  if (!playlist) return null
-
+const Video = ({ playlist, current, setCurrent, audioOnly = false, setDetails }) => {
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(null)
   const videoEl = useRef()
-  const sources = playlist[current]?.sources
 
   const handleEnd = () => {
     setCurrent(current === playlist.length - 1 ? null : current + 1)
   }
 
+  useEffect(() => {
+    setLoading(true)
+    if (current === null) {
+      setData(null)
+      setDetails(d => ({ ...d, show: false }))
+    }
+
+    switch (playlist[current].type.split('_')[0]) {
+      case 'yt':
+        fetchJson('/api/youtube/video', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ id: playlist[current].id })
+        })
+          .then(v => {
+            setData({
+              id: v.videoDetails.videoId,
+              formats: v.formats
+                .filter(v => !v.isHLS && v.hasAudio && (audioOnly ? !v.hasVideo : v.hasVideo))
+                .sort((a, b) => audioOnly ? a.audioBitrate < b.audioBitrate : a.bitrate < b.bitrate)
+            })
+            setDetails(d => ({
+              ...d,
+              title: v.videoDetails.title,
+              description: v.videoDetails.description
+            }))
+          })
+          .catch(() => console.log('error fetching video'))
+          .finally(() => setLoading(false))
+        break
+      default:
+    }
+  }, [playlist && playlist[current].id])
+
   return (
-    sources
+    data && !loading
       ? (
-        <video onEnded={handleEnd} ref={videoEl} key={playlist[current]?.id} controls autoPlay>
+        <video
+          onEnded={handleEnd}
+          ref={videoEl}
+          key={data.id}
+          controls
+          autoPlay
+          style={audioOnly ? { backgroundImage: 'url(' + playlist[current].thumbnail + ')' } : {}}
+        >
           {
-          sources.map(s => (
-            <source src={s.url} type={s.mimeType} key={s.url} />
-          ))
-        }
+            data.formats.map(s => (
+              <source src={s.url} type={s.mimeType} key={s.url} />
+            ))
+          }
           Your browser does not support the video tag.
         </video>
         )