file transfer works, sort-of

1 files changed, 80 insertions, 12 deletions

diff --git a/client-web/source/resource/file.ts b/client-web/source/resource/file.ts
index c54abc8..d76961d 100644
--- a/client-web/source/resource/file.ts
+++ b/client-web/source/resource/file.ts
@@ -1,23 +1,32 @@
-import { ebutton, ediv, espan } from "../helper.ts";
+import { ebutton, ediv, espan, sleep } from "../helper.ts";
 import { LocalResource, ResourceHandlerDecl } from "./mod.ts";
 
 export const resource_file: ResourceHandlerDecl = {
     kind: "file",
     new_remote(info, user, enable) {
+        const download_button = ebutton("Download", {
+            onclick: self => {
+                enable()
+                self.textContent = "Downloading…"
+                self.disabled = true
+            }
+        })
         return {
             info,
             el: ediv({},
                 espan(`File: ${JSON.stringify(info.label)}`),
-                ebutton("Download", {
-                    onclick: self => {
-                        enable()
-                        self.disabled = true
-                    }
-                })
+                download_button,
             ),
             on_statechange(_s) { },
-            on_enable(channel, _disable) {
+            on_enable(channel, disable) {
                 if (!(channel instanceof RTCDataChannel)) throw new Error("not a data channel");
+                // TODO stream
+                let position = 0
+                const buffer = new Uint8Array(info.size!)
+
+                const display = transfer_status_el()
+                this.el.appendChild(display.el)
+
                 channel.onopen = _ev => {
                     console.log(`${user.display_name}: channel open`);
                 }
@@ -26,6 +35,25 @@ export const resource_file: ResourceHandlerDecl = {
                 }
                 channel.onclose = _ev => {
                     console.log(`${user.display_name}: channel closed`);
+                    const a = document.createElement("a")
+                    a.href = URL.createObjectURL(new Blob([buffer], { type: "text/plain" }))
+                    a.download = info.label ?? "file"
+                    a.click()
+                    this.el.removeChild(display.el)
+                    download_button.disabled = false
+                    download_button.textContent = "Download"
+                    disable()
+                }
+                channel.onmessage = ev => {
+                    const reader = new FileReader();
+                    reader.onload = function (event) {
+                        const arr = new Uint8Array(event.target!.result as ArrayBuffer);
+                        for (let i = 0; i < arr.length; i++, position++) {
+                            buffer[position] = arr[i]
+                        }
+                        display.status = `${position} / ${info.size}`
+                    };
+                    reader.readAsArrayBuffer(ev.data);
                 }
             }
         }
@@ -57,24 +85,64 @@ function file_res_inner(file: File): LocalResource {
         ),
         on_request(user, create_channel) {
             const channel = create_channel()
+            channel.bufferedAmountLowThreshold = 1 << 16 // this appears to be the buffer size in firefox for reading files
             const reader = file.stream().getReader()
-            console.log(`${user.display_name} started requested file`);
-            channel.onbufferedamountlow = async () => {
+
+            console.log(`${user.display_name} started transfer`);
+            const display = transfer_status_el()
+            transfers_el.appendChild(display.el)
+            display.status = "Waiting for data channel to open…"
+            let position = 0
+
+            const finish = async () => {
+                while (channel.bufferedAmount) {
+                    display.status = `Draining buffers… (buffer: ${channel.bufferedAmount})`
+                    await sleep(10)
+                }
+                return channel.close()
+            }
+            const feed = async () => {
                 const { value: chunk, done } = await reader.read()
-                console.log(chunk, done);
+                if (!chunk) console.warn("no chunk");
+                if (done) return await finish()
+                position += chunk.length
                 channel.send(chunk)
-                if (!done) console.log("transfer done");
+                display.status = `${position} / ${file.size} (buffer: ${channel.bufferedAmount})`
             }
+            const feed_until_full = async () => {
+                // this has to do with a bad browser implementation
+                // https://github.com/w3c/webrtc-pc/issues/1979
+                while (channel.bufferedAmount < channel.bufferedAmountLowThreshold * 2 && channel.readyState == "open") {
+                    await feed()
+                }
+            }
+            channel.onbufferedamountlow = () => feed_until_full()
             channel.onopen = _ev => {
+                display.status = "Buffering…"
                 console.log(`${user.display_name}: channel open`);
+                feed_until_full()
             }
             channel.onerror = _ev => {
                 console.log(`${user.display_name}: channel error`);
             }
+            channel.onclosing = _ev => {
+                display.status = "Channel closing…"
+            }
             channel.onclose = _ev => {
                 console.log(`${user.display_name}: channel closed`);
+                transfers_el.removeChild(display.el)
             }
             return channel
         }
     }
+}
+
+function transfer_status_el() {
+    const status = espan("…")
+    return {
+        el: ediv({ class: "progress" }, status),
+        set status(s: string) {
+            status.textContent = s
+        }
+    }
 }
\ No newline at end of file