move video component to a dynamic Xeact component

Signed-off-by: Xe Iaso <me@xeiaso.net>

1 files changed, 40 insertions, 0 deletions

diff --git a/src/frontend/components/Video.tsx b/src/frontend/components/Video.tsx
new file mode 100644
index 0000000..812e6bd
--- /dev/null
+++ b/src/frontend/components/Video.tsx
@@ -0,0 +1,40 @@
+// @jsxImportSource xeact
+// @jsxRuntime automatic
+
+import Hls from "@hls.js";
+
+export interface VideoProps {
+  path: string;
+}
+
+export default function Video({ path }: VideoProps) {
+  const streamURL =
+    `https://cdn.xeiaso.net/file/christine-static/${path}/index.m3u8`;
+  const video = (
+    <video style="width:100%" controls>
+      <source src={streamURL} type="application/vnd.apple.mpegurl" />
+      <source
+        src="https://cdn.xeiaso.net/file/christine-static/blog/HLSBROKE.mp4"
+        type="video/mp4"
+      />
+    </video>
+  );
+
+  if (Hls.isSupported()) {
+    const hls = new Hls();
+    hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+      console.log("video and hls.js are now bound together !");
+    });
+    hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
+      console.log(
+        "manifest loaded, found " + data.levels.length + " quality level",
+      );
+    });
+    hls.loadSource(streamURL);
+    hls.attachMedia(video);
+  } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+    video.src = streamURL;
+  }
+
+  return video;
+}