3 files changed, 85 insertions, 0 deletions
diff --git a/bv1/codec-web/web/.gitignore b/bv1/codec-web/web/.gitignore
new file mode 100644
index 0000000..93d7118
--- /dev/null
+++ b/bv1/codec-web/web/.gitignore
@@ -0,0 +1,2 @@
+/codec_web*
+/bundle*
diff --git a/bv1/codec-web/web/index.html b/bv1/codec-web/web/index.html
new file mode 100644
index 0000000..b572671
--- /dev/null
+++ b/bv1/codec-web/web/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>bv1 web player</title>
+        <script defer async src="./bundle.js" type="module"></script>
+    </head>
+    <body>
+        <noscript>need js</noscript>
+        <p>loading…</p>
+    </body>
+</html>
diff --git a/bv1/codec-web/web/main.ts b/bv1/codec-web/web/main.ts
new file mode 100644
index 0000000..b1b1df7
--- /dev/null
+++ b/bv1/codec-web/web/main.ts
@@ -0,0 +1,69 @@
+/// <reference lib="dom" />
+
+import init, { decode_frame, decode_init } from "./codec_web.js"
+console.log("init wasm");
+await init()
+console.log("done");
+
+index("..")
+
+async function index(url: string) {
+    const res = await fetch(url)
+    if (!res.ok) throw new Error("not ok");
+    document.body.innerHTML = await res.text();
+    const h1 = document.createElement("h1")
+    h1.textContent = "bv1 web player"
+    document.body.prepend(h1)
+    document.body.querySelectorAll("a").forEach(e => {
+        const u = url + "/" + e.textContent
+        e.onclick = ev => {
+            ev.preventDefault()
+            if (!u.endsWith(".bv1")) return alert("thats not bv1!")
+            document.body.innerHTML = ""
+            play(u.toString())
+        }
+    })
+}
+
+async function play(url: string) {
+    decode_init(1920, 1080)
+    document.body.innerText = "downloading…"
+    const res = await fetch(url)
+    if (!res.ok) throw new Error("not ok");
+    let buf: Uint8Array | undefined = new Uint8Array(await res.arrayBuffer())
+    document.body.innerText = ""
+
+    const canvas = document.createElement("canvas")
+    canvas.width = 1920
+    canvas.height = 1080
+    document.body.append(canvas)
+    document.body.style.backgroundColor = "#111"
+    const ctx = canvas.getContext("2d")!
+    let debug = false;
+
+    document.body.addEventListener("keydown", ev => {
+        if (ev.code == "KeyD") debug = !debug;
+    })
+
+    setInterval(() => {
+        const frame = decode_frame(buf ?? new Uint8Array(), debug);
+        buf = undefined
+
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const data = imageData.data;
+
+        for (let y = 0; y < 1080; y++) {
+            for (let x = 0; x < 1920; x++) {
+                const ti = (x + y * 1920) * 4;
+                const si = (x + y * 1920) * 3;
+                data[ti + 0] = frame[si + 0]
+                data[ti + 1] = frame[si + 1]
+                data[ti + 2] = frame[si + 2]
+                data[ti + 3] = 255
+            }
+        }
+
+        ctx.putImageData(imageData, 0, 0);
+
+    }, 1000 / 30)
+}