WIP

2025-03-14 00:18:00 +01:00
parent 1f9b3958b7
commit 48d370ec43
4 changed files with 153 additions and 11 deletions
@@ -10,6 +10,7 @@ export default [
      globals: {
        ...globals.browser,
        lucide: "readonly",
+        Peer: "readonly",
      },
    },
  },
@@ -4,10 +4,11 @@
 <head>
  <meta charset="UTF-8" />
  <!-- TODO: 1. rename app -->
-  <title>Change this you moron</title>
+  <title>File Whizz</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="material-colors.css" />
  <script src="https://unpkg.com/lucide@0"></script>
+  <script src="https://unpkg.com/peerjs@1.5.4/dist/peerjs.min.js"></script>
  <script type="importmap">
      {
        "imports": {
@@ -31,11 +32,27 @@
  <main id="app" style="display: none">
    <!-- TODO: 1. rename app -->
    <h1>
-      <i icon="package"></i>
-      Vue-Boilerplate
+      <i icon="file-volume-2"></i>
+      File Whizz
    </h1>
    <br />
-    <p v-html="content"></p>
+    <div>
+      <label>Local ID</label><br>
+      <input readonly :value="localId" /><br><br>
+      <label>Remote ID</label><br>
+      <input v-model="remoteId" @change="connect">
+      <br>
+      <br>
+      Initialized: <b>{{ peer ? 'OK' : '...'}}</b><br>
+      Opened: <b>{{ localId ? 'OK' : '...'}}</b><br>
+      Connection: <b>{{ connection ? 'OK' : '...'}}</b><br>
+      File data: <b>{{ data ? 'OK' : '...'}}</b>
+      <br>
+      <br>
+      <input type="file" @change="fileChange" />
+      <br>
+      <input type="submit" @click.prevent="start" :disabled="!data || !remoteId" />
+    </div>
    <br />
    <small class="footer">
      <i icon="at-sign"></i>&nbsp;<a href="https://github.com/klemek" target="_blank">klemek</a>
@@ -12,22 +12,28 @@ const utils = {
  },
 };

+const MAX_CHUNK_SIZE = 1024 * 1024; // 1024 KB
+
 const app = createApp({
  data() {
    return {
-      content:
-        "Fill this page with <i>whatever</i> you're going to develop.<br><b>Then enjoy!</b>",
+      peer: null,
+      localId: null,
+      remoteId: null,
+      connection: null, // TODO multiple connections
+      data: null, // TODO multiple file
+      streamEnqueue: null,
+      streamClose: null,
    };
  },
-  computed: {
-    currentYear() {
-      return new Date().getFullYear();
-    },
-  },
+  computed: {},
  watch: {},
  updated() {
    utils.updateIcons();
  },
+  beforeMount() {
+    this.initApp();
+  },
  mounted() {
    setTimeout(this.showApp);
    utils.updateIcons();
@@ -36,6 +42,120 @@ const app = createApp({
    showApp() {
      document.getElementById("app").setAttribute("style", "");
    },
+    connect() {
+      if (this.remoteId) {
+        this.connection = this.peer.connect(this.remoteId);
+      }
+    },
+    initPeer() {
+      this.peer = new Peer({
+        config: {
+          iceServers: [{ urls: ["stun:stun.l.google.com:19302"] }],
+        },
+      });
+      this.peer.on("open", this.peerOpen);
+      this.peer.on("connection", this.peerConnection);
+      this.peer.on("close", this.peerClose);
+      this.peer.on("disconnected", this.peerDisconnected);
+      this.peer.on("error", this.peerError);
+    },
+    peerOpen(id) {
+      this.localId = id;
+    },
+    peerConnection(conn) {
+      this.connection = conn;
+      this.remoteId = conn.peer;
+    },
+    peerClose() {
+      this.peer = null;
+      setTimeout(this.initPeer);
+    },
+    peerDisconnected() {
+      this.peer.reconnect();
+    },
+    peerError(err) {
+      // TODO handle error
+    },
+    connData(data) {
+      switch (data.type) {
+        case "start":
+          ReadableStream({
+            start(ctrl) {
+              this.streamEnqueue = (chunk) => ctrl.enqueue(chunk);
+              this.streamClose = () => ctrl.close();
+            },
+          });
+          break;
+        case "chunk":
+          if (this.streamEnqueue) {
+            this.streamEnqueue(data.bytes);
+          }
+          break;
+        case "end":
+          if (this.streamClose) {
+            this.streamClose();
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    connOpen() {
+      // TODO handle conn open
+    },
+    connClose() {
+      this.connection = null;
+      // TODO handle conn close
+    },
+    connError() {
+      // TODO handle error
+    },
+    fileChange(event) {
+      console.log(event.target.files[0]);
+      const file = event.target.files[0]; // TODO multiple files
+      if (!file) {
+        return;
+      }
+      this.data = null;
+      const reader = new FileReader();
+      reader.onload = () => {
+        this.data = reader.result;
+      };
+      reader.onerror = (err) => {
+        console.error(err);
+      };
+      reader.onloadstart = () => {
+        console.log("reading");
+      };
+      reader.onloadend = () => {
+        console.log("read");
+      };
+      reader.readAsArrayBuffer(file); // TODO check ArrayBuffer.prototype.maxByteLength
+    },
+    start() {
+      this.connection.send({
+        type: "start",
+      });
+      for (
+        let index = 0;
+        index < this.data.byteLength;
+        index += MAX_CHUNK_SIZE
+      ) {
+        this.connection.send({
+          type: "chunk",
+          bytes: this.data.slice(
+            index * MAX_CHUNK_SIZE,
+            Math.min(this.data.byteLength, (index + 1) * MAX_CHUNK_SIZE),
+          ),
+        });
+      }
+      this.connection.send({
+        type: "end",
+      });
+    },
+    initApp() {
+      this.initPeer();
+    },
  },
 });

@@ -212,3 +212,7 @@ h6 .lucide {
 .footer {
  opacity: 50%;
 }
+
+input {
+  width: 100%;
+}