lume/src/_components/XeblogVideo.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import Hls from "npm:hls.js";
import { sha256 } from "npm:js-sha256";

export interface VideoProps {
  path: string;
  vertical?: boolean;
}

export default function Video({ path, vertical }: VideoProps) {
  const streamURL = `https://files.xeiaso.net/${path}/index.m3u8`;
  const id = sha256(streamURL);
  const video = (
    <video id={id} className="not-prose sm:max-h-[50vh] mx-auto" controls>
      <source src={streamURL} type="application/vnd.apple.mpegurl" />
      <source
        src="https://files.xeiaso.net/blog/HLSBROKE.mp4"
        type="video/mp4"
      />
    </video>
  );

  const script = (
    <script type="module">
      {`import execFor from ${`'`}/js/hls.js${`'`};
      
      execFor(${`'`}${id}${`'`}, ${`'`}${streamURL}${`'`});`}
    </script>
  );

  return (
    <>
      {video}
      {script}
      <div className="text-center">
        Want to watch this in your video player of choice? Take this:
        <br />
        <a href={streamURL} rel="noreferrer">
          {streamURL}
        </a>
      </div>
    </>
  );
}