1 files changed, 32 insertions, 0 deletions
diff --git a/apps/Player/components/Video.js b/apps/Player/components/Video.js
new file mode 100644
index 0000000..7152967
--- /dev/null
+++ b/apps/Player/components/Video.js
@@ -0,0 +1,32 @@
+import { useRef } from 'react'
+import Splash from 'components/Splash'
+
+const Video = ({ playlist, current, setCurrent }) => {
+  if (!playlist) return null
+
+  const videoEl = useRef()
+  const sources = playlist[current]?.sources
+
+  const handleEnd = () => {
+    setCurrent(current === playlist.length - 1 ? null : current + 1)
+  }
+
+  return (
+    sources
+      ? (
+        <video onEnded={handleEnd} ref={videoEl} key={playlist[current]?.id} controls autoPlay>
+          {
+          sources.map(s => (
+            <source src={s.url} type={s.mimeType} key={s.url} />
+          ))
+        }
+          Your browser does not support the video tag.
+        </video>
+        )
+      : (
+        <Splash />
+        )
+  )
+}
+
+export default Video