diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/frontend/build.ts | 1 | ||||
| -rw-r--r-- | src/frontend/components/Video.tsx | 40 | ||||
| -rw-r--r-- | src/frontend/deno.lock | 2 | ||||
| -rw-r--r-- | src/frontend/import_map.json | 1 |
4 files changed, 43 insertions, 1 deletions
diff --git a/src/frontend/build.ts b/src/frontend/build.ts index b9d0d6e..3814e88 100644 --- a/src/frontend/build.ts +++ b/src/frontend/build.ts @@ -8,6 +8,7 @@ const result = await esbuild.build({ entryPoints: [ "./components/ConvSnippet.tsx", "./components/MastodonShareButton.tsx", + "./components/Video.tsx", "./components/WASITerm.tsx", ], outdir: Deno.env.get("WRITE_TO") 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; +} diff --git a/src/frontend/deno.lock b/src/frontend/deno.lock index 8c5f04b..fcd3847 100644 --- a/src/frontend/deno.lock +++ b/src/frontend/deno.lock @@ -16,7 +16,6 @@ "https://deno.land/x/denoflate@1.2.1/pkg/denoflate.js": "b9f9ad9457d3f12f28b1fb35c555f57443427f74decb403113d67364e4f2caf4", "https://deno.land/x/denoflate@1.2.1/pkg/denoflate_bg.wasm.js": "d581956245407a2115a3d7e8d85a9641c032940a8e810acbd59ca86afd34d44d", "https://deno.land/x/esbuild@v0.15.10/mod.d.ts": "12e96a8d05c8e2c5638aa9cb09f24222134d437abb2f3f52de0156adb2270719", - "https://deno.land/x/esbuild@v0.15.10/mod.js": "b6076f05f58057025ce0eddb404a4da3b7a0e3768c53f6c87959c8c32240e9cd", "https://deno.land/x/esbuild@v0.17.13/mod.d.ts": "dc279a3a46f084484453e617c0cabcd5b8bd1920c0e562e4ea02dfc828c8f968", "https://deno.land/x/esbuild@v0.17.13/mod.js": "99302be2ce2a11eecd7a0764d970e2a0aa1c2d38d5ffcbb041d360a124c9aabc", "https://deno.land/x/esbuild_deno_loader@0.6.0/deps.ts": "fe86f62cb954edc2580868cdc3292d4446f22cd2c4eedbf8ee26513fdf74e343", @@ -28,6 +27,7 @@ "https://deno.land/x/importmap@0.2.1/_util.ts": "ada9a9618b537e6c0316c048a898352396c882b9f2de38aba18fd3f2950ede89", "https://deno.land/x/importmap@0.2.1/mod.ts": "ae3d1cd7eabd18c01a4960d57db471126b020f23b37ef14e1359bbb949227ade", "https://esm.sh/v113/@bjorn3/browser_wasi_shim@0.2.7/es2022/browser_wasi_shim.mjs": "0d06fb9add2a2e53d8c52e3e5c3b5aa2115fe3ee651021d3ae1fff150a662e4e", + "https://esm.sh/v113/hls.js@1.3.5/es2022/hls.mjs": "60609555f475befdbce80d5e851ddd0ca450ed5541d3ac02eeccc0cadb720e19", "https://esm.sh/v113/xterm-addon-fit@0.7.0/es2022/xterm-addon-fit.mjs": "131a41086e2e41272da58fac19e128029fb0d363103ae5f68bb71c8b7beadcf9", "https://esm.sh/v113/xterm@5.1.0/es2022/xterm.mjs": "e0697e20cbe92d2177abe9fb744457df5c0f89f77a8e8ce7e9515b7d60f5cb57", "https://xena.greedo.xeserv.us/pkg/xeact/v0.69.71/jsx-runtime.js": "a8e0e04c44bbc80bb0a8c59e1d3ee338dd799e25e89792cadb67f00bf4f6ceca", diff --git a/src/frontend/import_map.json b/src/frontend/import_map.json index 5794405..c5c1e27 100644 --- a/src/frontend/import_map.json +++ b/src/frontend/import_map.json @@ -1,6 +1,7 @@ { "imports": { "@bjorn3/browser_wasi_shim": "https://esm.sh/v113/@bjorn3/browser_wasi_shim@0.2.7/es2022/browser_wasi_shim.mjs", + "@hls.js": "https://esm.sh/v113/hls.js@1.3.5/es2022/hls.mjs", "@xterm": "https://esm.sh/v113/xterm@5.1.0/es2022/xterm.mjs", "@xterm/addon-fit": "https://esm.sh/v113/xterm-addon-fit@0.7.0/es2022/xterm-addon-fit.mjs", |