From c575119a90a028dd109434a4b8889adceac3df93 Mon Sep 17 00:00:00 2001
From: Melonai <einebeere@gmail.com>
Date: Fri, 4 Jun 2021 19:42:42 +0200
Subject: Signaling event processing

---
 assets/src/components/DataPicker.svelte        | 14 -----
 assets/src/components/IncomingRequests.svelte  | 19 ------
 assets/src/components/Request.svelte           | 17 ------
 assets/src/components/RequestPage.svelte       | 17 ++++++
 assets/src/components/Share.svelte             | 20 -------
 assets/src/components/SharePage.svelte         | 20 +++++++
 assets/src/components/share/DataPicker.svelte  | 16 +++++
 assets/src/components/share/Request.svelte     | 31 ++++++++++
 assets/src/components/share/Requests.svelte    | 20 +++++++
 assets/src/entries/request.ts                  |  4 +-
 assets/src/entries/share.ts                    |  4 +-
 assets/src/network/channel/connection.ts       |  2 +
 assets/src/network/channel/messages/handler.ts | 49 ++++++++++-----
 assets/src/network/channel/request.ts          | 10 +++-
 assets/src/network/channel/share.ts            | 28 ++++++++-
 assets/src/network/transfer/transfer.ts        | 82 ++++++++++++++++++++++++--
 assets/src/stores/requests.ts                  |  4 +-
 17 files changed, 258 insertions(+), 99 deletions(-)
 delete mode 100644 assets/src/components/DataPicker.svelte
 delete mode 100644 assets/src/components/IncomingRequests.svelte
 delete mode 100644 assets/src/components/Request.svelte
 create mode 100644 assets/src/components/RequestPage.svelte
 delete mode 100644 assets/src/components/Share.svelte
 create mode 100644 assets/src/components/SharePage.svelte
 create mode 100644 assets/src/components/share/DataPicker.svelte
 create mode 100644 assets/src/components/share/Request.svelte
 create mode 100644 assets/src/components/share/Requests.svelte

(limited to 'assets/src')

diff --git a/assets/src/components/DataPicker.svelte b/assets/src/components/DataPicker.svelte
deleted file mode 100644
index 433018d..0000000
--- a/assets/src/components/DataPicker.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-    import data from "../stores/data";
-
-    let value = "";
-
-    const submit = () => {
-        data.set(value);
-    };
-</script>
-
-<form on:submit|preventDefault={submit}>
-    <input type="text" bind:value />
-    <input type="submit" value="Submit" />
-</form>
diff --git a/assets/src/components/IncomingRequests.svelte b/assets/src/components/IncomingRequests.svelte
deleted file mode 100644
index bf08ffe..0000000
--- a/assets/src/components/IncomingRequests.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-    import { getOwnToken, start, Type } from "../network/channel/connection";
-
-    import requests from "../stores/requests";
-
-    const startPromise = start(Type.SHARE);
-
-    // TODO: Switch to store-based state updates.
-</script>
-
-{#await startPromise}
-    <h3>Fetching token...</h3>
-{:then}
-    <h3>Your token is <b>{getOwnToken()}</b>.</h3>
-
-    {#each $requests as request}
-        <p>{JSON.stringify(request)}</p>
-    {/each}
-{/await}
diff --git a/assets/src/components/Request.svelte b/assets/src/components/Request.svelte
deleted file mode 100644
index 0c0b111..0000000
--- a/assets/src/components/Request.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-    import { start, Type } from "../network/channel/connection";
-
-    // TODO: Switch to store-based state updates.
-
-    start(Type.REQUEST);
-</script>
-
-<main>
-    <h1>Requesting</h1>
-</main>
-
-<style>
-    h1 {
-        font-size: 4em;
-    }
-</style>
diff --git a/assets/src/components/RequestPage.svelte b/assets/src/components/RequestPage.svelte
new file mode 100644
index 0000000..0c0b111
--- /dev/null
+++ b/assets/src/components/RequestPage.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { start, Type } from "../network/channel/connection";
+
+    // TODO: Switch to store-based state updates.
+
+    start(Type.REQUEST);
+</script>
+
+<main>
+    <h1>Requesting</h1>
+</main>
+
+<style>
+    h1 {
+        font-size: 4em;
+    }
+</style>
diff --git a/assets/src/components/Share.svelte b/assets/src/components/Share.svelte
deleted file mode 100644
index 5ea55b2..0000000
--- a/assets/src/components/Share.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-    import data from "../stores/data";
-    import DataPicker from "./DataPicker.svelte";
-    import IncomingRequests from "./IncomingRequests.svelte";
-</script>
-
-<main>
-    <h1>Sharing</h1>
-    {#if !$data.locked}
-        <DataPicker />
-    {:else}
-        <IncomingRequests />
-    {/if}
-</main>
-
-<style>
-    h1 {
-        font-size: 4em;
-    }
-</style>
diff --git a/assets/src/components/SharePage.svelte b/assets/src/components/SharePage.svelte
new file mode 100644
index 0000000..d951288
--- /dev/null
+++ b/assets/src/components/SharePage.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import data from "../stores/data";
+    import DataPicker from "./share/DataPicker.svelte";
+    import IncomingRequests from "./share/Requests.svelte";
+</script>
+
+<main>
+    <h1>Sharing</h1>
+    {#if !$data.locked}
+        <DataPicker />
+    {:else}
+        <IncomingRequests />
+    {/if}
+</main>
+
+<style>
+    h1 {
+        font-size: 4em;
+    }
+</style>
diff --git a/assets/src/components/share/DataPicker.svelte b/assets/src/components/share/DataPicker.svelte
new file mode 100644
index 0000000..6e8dbd4
--- /dev/null
+++ b/assets/src/components/share/DataPicker.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import data from "../../stores/data";
+
+    let value = "";
+
+    const submit = () => {
+        data.set(value);
+    };
+
+    // TODO: Accept data other than text.
+</script>
+
+<form on:submit|preventDefault={submit}>
+    <input type="text" bind:value />
+    <input type="submit" value="Submit" />
+</form>
diff --git a/assets/src/components/share/Request.svelte b/assets/src/components/share/Request.svelte
new file mode 100644
index 0000000..26002ae
--- /dev/null
+++ b/assets/src/components/share/Request.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { offer } from "../../network/transfer/transfer";
+
+    export let token: string;
+
+    async function accept() {
+        const transfer = await offer(token);
+    }
+
+    function decline() {}
+</script>
+
+<div class="container">
+    <span>{token}</span>
+    <div class="buttons">
+        <button on:click={accept}>Accept</button>
+        <button on:click={decline}>X</button>
+    </div>
+</div>
+
+<style>
+    .container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .buttons {
+        display: flex;
+    }
+</style>
diff --git a/assets/src/components/share/Requests.svelte b/assets/src/components/share/Requests.svelte
new file mode 100644
index 0000000..509d7be
--- /dev/null
+++ b/assets/src/components/share/Requests.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { getOwnToken, start, Type } from "../../network/channel/connection";
+
+    import requests from "../../stores/requests";
+    import Request from "./Request.svelte";
+
+    const startPromise = start(Type.SHARE);
+
+    // TODO: Switch to store-based state updates.
+</script>
+
+{#await startPromise}
+    <h3>Fetching token...</h3>
+{:then}
+    <h3>Your token is <b>{getOwnToken()}</b>.</h3>
+
+    {#each $requests as request}
+        <Request token={request} />
+    {/each}
+{/await}
diff --git a/assets/src/entries/request.ts b/assets/src/entries/request.ts
index 74f84da..6b8a79f 100644
--- a/assets/src/entries/request.ts
+++ b/assets/src/entries/request.ts
@@ -1,6 +1,6 @@
-import Request from "../components/Request.svelte";
+import RequestPage from "../components/RequestPage.svelte";
 
-const app = new Request({
+const app = new RequestPage({
     target: document.getElementById("app"),
     props: {},
 });
diff --git a/assets/src/entries/share.ts b/assets/src/entries/share.ts
index d0279f1..2704a62 100644
--- a/assets/src/entries/share.ts
+++ b/assets/src/entries/share.ts
@@ -1,6 +1,6 @@
-import Share from "../components/Share.svelte";
+import SharePage from "../components/SharePage.svelte";
 
-const app = new Share({
+const app = new SharePage({
     target: document.getElementById("app"),
     props: {},
 });
diff --git a/assets/src/network/channel/connection.ts b/assets/src/network/channel/connection.ts
index 59eb633..e1ed2d1 100644
--- a/assets/src/network/channel/connection.ts
+++ b/assets/src/network/channel/connection.ts
@@ -54,6 +54,8 @@ export async function start(type: Type.REQUEST | Type.SHARE) {
     type === Type.SHARE
         ? await startShare(connection)
         : await startRequest(connection);
+
+    updateState(ConnectionState.CONNECTED)
 }
 
 export function send(event: string, data: any): Push {
diff --git a/assets/src/network/channel/messages/handler.ts b/assets/src/network/channel/messages/handler.ts
index f7a00d2..cc8f005 100644
--- a/assets/src/network/channel/messages/handler.ts
+++ b/assets/src/network/channel/messages/handler.ts
@@ -1,4 +1,4 @@
-import { getChannel } from "../connection";
+import type { Channel } from "phoenix";
 import type { AnyMessage } from "./messages";
 
 export type Handlers = {
@@ -14,7 +14,10 @@ export type TokenHandler<Message extends AnyMessage> = {
     [token: string]: Handler<Message>;
 };
 
-export type Handler<Message extends AnyMessage> = (message?: Message) => void;
+export type Handler<Message extends AnyMessage> = (
+    message?: Message,
+    unregister?: UnregisterHandler
+) => void;
 
 export type UnregisterHandler = () => void;
 
@@ -45,17 +48,12 @@ export function registerTokenHandler<Message extends AnyMessage>(
         const directHandlers = eventHandler.directHandlers;
         directHandlers.push(handler);
 
-        unregister = () => {
-            const index = directHandlers.findIndex(h => h === handler);
-            directHandlers.splice(index, 1);
-        };
+        unregister = makeDirectUnregister(directHandlers, handler);
     } else {
         const tokenHandler = eventHandler.tokenHandler;
         tokenHandler[token] = handler;
 
-        unregister = () => {
-            delete tokenHandler[token];
-        };
+        unregister = makeTokenUnregister(tokenHandler, token);
     }
 
     return unregister;
@@ -80,16 +78,35 @@ function handleEvent<Message extends AnyMessage>(
     if (message["token"] !== undefined) {
         const token = message["token"];
 
-        const handler: Handler<Message> = eventHandler.tokenHandler[token];
+        const tokenHandler = eventHandler.tokenHandler;
+        const handler: Handler<Message> = tokenHandler[token];
 
-        if (handler === undefined) {
-            throw new Error("Received message for an unknown token.");
+        if (handler !== undefined) {
+            handler(message, makeTokenUnregister(tokenHandler, token));
         }
-
-        handler(message);
     }
 
-    for (const handler of eventHandler.directHandlers) {
-        handler(message);
+    const directHandlers = eventHandler.directHandlers;
+    for (const handler of directHandlers) {
+        handler(message, makeDirectUnregister(directHandlers, handler));
     }
 }
+
+function makeDirectUnregister<Message extends AnyMessage>(
+    directHandlers: Handler<Message>[],
+    handler: Handler<Message>
+): UnregisterHandler {
+    return () => {
+        const index = directHandlers.findIndex(h => h === handler);
+        directHandlers.splice(index, 1);
+    };
+}
+
+function makeTokenUnregister<Message extends AnyMessage>(
+    tokenHandler: TokenHandler<Message>,
+    token: string
+): UnregisterHandler {
+    return () => {
+        delete tokenHandler[token];
+    };
+}
diff --git a/assets/src/network/channel/request.ts b/assets/src/network/channel/request.ts
index dd18aab..f5145fb 100644
--- a/assets/src/network/channel/request.ts
+++ b/assets/src/network/channel/request.ts
@@ -1,5 +1,7 @@
 import getShareToken from "../../utils/getShareToken";
-import type { Connection } from "./connection";
+import { answer } from "../transfer/transfer";
+import { Connection, on } from "./connection";
+import type { RequestAcceptedMessage } from "./messages/messages";
 import { joinRequestChannel } from "./socket";
 
 export async function startRequest(connection: Connection) {
@@ -9,4 +11,10 @@ export async function startRequest(connection: Connection) {
         getShareToken()
     );
     connection.channel = requestChannel;
+
+    on("request_accepted", onRequestAccepted);
+}
+
+async function onRequestAccepted(message: RequestAcceptedMessage) {
+    await answer(message);
 }
diff --git a/assets/src/network/channel/share.ts b/assets/src/network/channel/share.ts
index f93e8cb..6dbf0cd 100644
--- a/assets/src/network/channel/share.ts
+++ b/assets/src/network/channel/share.ts
@@ -1,5 +1,10 @@
 import requests from "../../stores/requests";
-import type { Connection } from "./connection";
+import { Connection, on, onWithToken } from "./connection";
+import type { UnregisterHandler } from "./messages/handler";
+import type {
+    NewRequestMessage,
+    RequestCancelledMessage,
+} from "./messages/messages";
 import { joinShareChannel } from "./socket";
 
 export async function startShare(connection: Connection) {
@@ -8,4 +13,23 @@ export async function startShare(connection: Connection) {
         connection.token
     );
     connection.channel = shareChannel;
-}
\ No newline at end of file
+
+    on("new_request", onNewRequest);
+}
+
+function onNewRequest(message: NewRequestMessage) {
+    const token = message.token;
+
+    requests.addRequest(token);
+
+    onWithToken("request_cancelled", token, onRequestCancelled);
+}
+
+function onRequestCancelled(
+    message: RequestCancelledMessage,
+    unregister: UnregisterHandler
+) {
+    const token = message.token;
+    requests.removeRequest(token);
+    unregister();
+}
diff --git a/assets/src/network/transfer/transfer.ts b/assets/src/network/transfer/transfer.ts
index 26d2534..1cc029b 100644
--- a/assets/src/network/transfer/transfer.ts
+++ b/assets/src/network/transfer/transfer.ts
@@ -1,4 +1,10 @@
-import { send } from "../channel/connection";
+import { onWithToken, send } from "../channel/connection";
+import type { UnregisterHandler } from "../channel/messages/handler";
+import type {
+    ShareAcceptedMessage,
+    RequestIceCandidateMessage,
+    ShareIceCandidateMessage,
+} from "../channel/messages/messages";
 
 export enum TransferType {
     OFFER,
@@ -11,20 +17,44 @@ export type Transfer = {
     type: TransferType;
 };
 
+const servers = {
+    iceServers: [
+        {
+            urls: [
+                "stun:stun1.l.google.com:19302",
+                "stun:stun2.l.google.com:19302",
+            ],
+        },
+    ],
+    iceCandidatePoolSize: 10,
+};
+
 export async function offer(request_token: string): Promise<Transfer> {
     const transfer = createTransfer(TransferType.OFFER);
 
     const offer = await transfer.pc.createOffer();
     transfer.pc.setLocalDescription(offer);
 
-    // TODO: Start waiting for remote answer
+    transfer.pc.onicecandidate = event => {
+        const candidate = event.candidate;
+        if (event.candidate !== null) {
+            send("ice_candidate", { candidate, token: request_token });
+        }
+    };
 
     send("accept_request", {
-        request: request_token,
+        token: request_token,
         sdp: offer.sdp,
         type: offer.type,
     });
 
+    onWithToken(
+        "share_accepted",
+        request_token,
+        (message: ShareAcceptedMessage, unregister) =>
+            onShareAccepted(transfer, message, unregister)
+    );
+
     return transfer;
 }
 
@@ -39,6 +69,13 @@ export async function answer(
     const answer = await transfer.pc.createAnswer();
     transfer.pc.setLocalDescription(answer);
 
+    transfer.pc.onicecandidate = event => {
+        const candidate = event.candidate;
+        if (event.candidate !== null) {
+            send("ice_candidate", { candidate });
+        }
+    };
+
     send("accept_share", {
         sdp: offer.sdp,
         type: offer.type,
@@ -48,15 +85,50 @@ export async function answer(
 }
 
 function createTransfer(type: TransferType): Transfer {
-    const pc = new RTCPeerConnection(null);
+    const pc = new RTCPeerConnection(servers);
     const channel = pc.createDataChannel("channel", {
         negotiated: true,
         id: 0,
     });
 
+    channel.onopen = e => console.log("ooooyeeee");
+
     return {
         pc,
         channel,
         type,
     };
-}
\ No newline at end of file
+}
+
+function onShareAccepted(
+    transfer: Transfer,
+    message: ShareAcceptedMessage,
+    unregister: UnregisterHandler
+) {
+    const token = message.token;
+    transfer.pc.setRemoteDescription(message);
+
+    const unregisterIce = onWithToken(
+        "ice_candidate",
+        token,
+        (message: RequestIceCandidateMessage) =>
+            onIncomingIceCandidate(transfer, message)
+    );
+
+    transfer.pc.onicegatheringstatechange = event => {
+        const connection = event.target as any;
+        console.log(connection.iceGatheringState);
+        if (connection.iceGatheringState === "complete") {
+            unregisterIce();
+        }
+    };
+
+    unregister();
+}
+
+function onIncomingIceCandidate(
+    transfer: Transfer,
+    message: ShareIceCandidateMessage | RequestIceCandidateMessage
+) {
+    transfer.pc.addIceCandidate(message.candidate);
+}
diff --git a/assets/src/stores/requests.ts b/assets/src/stores/requests.ts
index e80eb2b..1dc8cb2 100644
--- a/assets/src/stores/requests.ts
+++ b/assets/src/stores/requests.ts
@@ -1,11 +1,13 @@
 import { writable } from "svelte/store";
 
 const createRequestStore = () => {
-    const { subscribe, update } = writable([]);
+    const { subscribe, update } = writable<string[]>([]);
 
     return {
         subscribe,
         addRequest: request => update(state => [request, ...state]),
+        removeRequest: request =>
+            update(state => state.filter(r => r !== request)),
     };
 };
 
-- 
cgit 1.4.1