handle room joins without page reload.

1 files changed, 45 insertions, 23 deletions

diff --git a/client-web/source/index.ts b/client-web/source/index.ts
index 796937a..8bc7edc 100644
--- a/client-web/source/index.ts
+++ b/client-web/source/index.ts
@@ -13,8 +13,10 @@ import { load_params, PREFS } from "./preferences/mod.ts";
 import { SignalingConnection } from "./protocol/mod.ts";
 import { Room } from "./room.ts"
 import { control_bar, info_br } from "./menu.ts";
+import { Chat } from "./chat.ts"
 
 export const VERSION = "1.0.0"
+window.onload = () => main()
 
 export interface ClientConfig {
     appearance?: {
@@ -37,19 +39,29 @@ export interface User {
     stream: MediaStream,
 }
 
-window.onload = () => main()
-window.onhashchange = () => {
-    // TODO might just destroy room object and create a new one, but cleanup probably wont work. lets reload instead
-    window.location.reload()
+
+export interface AppState {
+    conn: SignalingConnection,
+    room?: Room
+    chat: Chat,
+    center: HTMLElement
 }
-window.onbeforeunload = ev => {
-    if (r.local_user.resources.size != 0 && PREFS.enable_onbeforeunload) {
-        ev.preventDefault()
-        return ev.returnValue = "You have local resources shared. Really quit?"
+
+function set_room(state: AppState, secret: string, rtc_config: RTCConfiguration) {
+    if (state.room) {
+        state.center.removeChild(state.room.element)
+        state.room.destroy()
+    }
+    if (secret.length < 8) log({ scope: "crypto", warn: true }, "Room name is very short. E2EE is insecure!")
+    if (secret.split("#").length > 1) document.title = `${secret.split("#")[0]} | keks-meet`
+    state.room = new Room(state.conn, state.chat, rtc_config)
+    state.chat.room = state.room
+    state.conn.join(secret)
+    state.room.on_ready = () => {
+        state.center.prepend(state.room!.element)
     }
 }
 
-let r: Room;
 export async function main() {
     document.body.append(LOGGER_CONTAINER)
     log("*", "loading client config")
@@ -59,19 +71,22 @@ export async function main() {
     log("*", "config loaded. starting")
 
     document.body.querySelectorAll(".loading").forEach(e => e.remove())
-    const room_secret = load_params().rsecret
 
-    if (!globalThis.isSecureContext) log({ scope: "*", warn: true }, "This page is not in a 'Secure Context'")
+    if (!globalThis.isSecureContext) log({ scope: "*", warn: true }, "This page is not a 'Secure Context'")
     if (!globalThis.RTCPeerConnection) return log({ scope: "webrtc", error: true }, "WebRTC not supported.")
     if (!globalThis.crypto.subtle) return log({ scope: "crypto", error: true }, "SubtleCrypto not availible")
     if (!globalThis.navigator.serviceWorker) log({ scope: "*", warn: true }, "Your browser does not support the Service Worker API, forced automatic updates are unavoidable.")
-    if (room_secret.length < 8) log({ scope: "crypto", warn: true }, "Room name is very short. e2ee is insecure!")
-    if (room_secret.length == 0) return window.location.href = "/" // send them back to the start page
-    if (PREFS.warn_redirect) log({ scope: "crypto", warn: true }, "You were redirected from the old URL format. The server knows the room secret now - e2ee is insecure!")
+    if (PREFS.warn_redirect) log({ scope: "crypto", warn: true }, "You were redirected from the old URL format. The server knows the room secret now - E2EE is insecure!")
+
 
-    if (room_secret.split("#").length > 1) document.title = `${room_secret.split("#")[0]} | keks-meet`
+    const sud = e("div", { class: "side-ui" })
+    const state: AppState = {
+        chat: new Chat(),
+        conn: await (new SignalingConnection().connect()),
+        center: e("div", { class: "main" }, info_br(), sud)
+    };
+    document.body.append(state.center, control_bar(state, sud))
 
-    const conn = await (new SignalingConnection().connect())
     const rtc_config: RTCConfiguration = {
         iceCandidatePoolSize: 10,
         iceServers: [{
@@ -81,15 +96,22 @@ export async function main() {
         }]
     }
 
-    r = new Room(conn, rtc_config)
+    setup_keybinds(state)
 
-    setup_keybinds(r)
-    r.on_ready = () => {
-        const sud = e("div", { class: "side-ui" })
-        const center = e("div", { class: "main" }, r.element, info_br(), sud)
-        document.body.append(center, control_bar(r, sud))
+    const room_secret = load_params().rsecret
+    if (room_secret.length != 0) {
+        set_room(state, room_secret, rtc_config)
+    }
+    window.onhashchange = () => {
+        const new_secret = load_params().rsecret;
+        set_room(state, new_secret, rtc_config)
+    }
+    window.onbeforeunload = ev => {
+        if (state.room && state.room.local_user.resources.size != 0 && PREFS.enable_onbeforeunload) {
+            ev.preventDefault()
+            return ev.returnValue = "You have local resources shared. Really quit?"
+        }
     }
 
     if (globalThis.navigator.serviceWorker) init_serviceworker()
-    await conn.join(room_secret)
 }