refactor ui layout

12 files changed, 90 insertions, 61 deletions

diff --git a/client-web/public/assets/style/logger.css b/client-web/public/assets/style/logger.css
index cb76586..3d5c6e3 100644
--- a/client-web/public/assets/style/logger.css
+++ b/client-web/public/assets/style/logger.css
@@ -1,42 +1,56 @@
 .logger-container {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  transition: width 1s;
-  
-  background-color: rgba(0, 0, 0, 0.376);
-  border-radius: 0.2em;
-  border: 0px solid transparent;
-  padding: 0.2em;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    transition: width 1s;
+
+    background-color: rgba(0, 0, 0, 0.376);
+    border-radius: 0.2em;
+    border: 0px solid transparent;
+    padding: 0.2em;
 }
 
 .logger-line {
-  font-size: 1em;
-  height: 1.2em;
+    font-size: 1em;
+    height: 1.2em;
+    font-family: monospace;
+    animation-name: appear;
+    animation-timing-function: linear;
+    animation-duration: 0.3s;
+    animation-fill-mode: forwards;
+}
+.logger-line-disappear {
+    animation-name: disappear;
+    animation-timing-function: linear;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+}
 
-  animation-name: appear, disappear;
-  animation-timing-function: linear, linear;
-  animation-delay: 0s, 3s;
-  animation-duration: 0.3s, 1s;
-  animation-fill-mode: forwards, forwards;
+.logger-error {
+    font-size: 2em;
+    color: red;
+}
+.logger-warn {
+    font-size: 2em;
+    color: yellow;
 }
 
 @keyframes appear {
-  from {
-    margin-top: -1.2em;
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    from {
+        margin-top: -1.2em;
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 @keyframes disappear {
-  from {
-    opacity: 1;
-  }
-  to {
-    margin-top: -1.2em;
-    opacity: 0;
-  }
+    from {
+        opacity: 1;
+    }
+    to {
+        margin-top: -1.2em;
+        opacity: 0;
+    }
 }
diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css
index a8e8ce9..3013fa7 100644
--- a/client-web/public/assets/style/master.css
+++ b/client-web/public/assets/style/master.css
@@ -10,9 +10,9 @@
 }
 
 :root {
-    --bg: #151515;
+    --bg: #151315;
     --bg-dark: #070707;
-    --bg-light: #494949;
+    --bg-light: #417143;
     --bg-lighter: #949494;
     --bg-disabled: #720000;
     --bg-enabled: #097200;
@@ -47,10 +47,10 @@ input[type="text"] {
     border: 1px solid var(--ac-light);
 }
 
-.local-controls {
+.bottom-container {
     background-color: var(--bg);
     padding: 0.5em;
-    position: absolute;
+    position: fixed;
     bottom: 0.5em;
     border: 0px solid transparent;
     border-radius: 5px;
diff --git a/client-web/source/helper.ts b/client-web/source/helper.ts
index c277c0d..4f97ebb 100644
--- a/client-web/source/helper.ts
+++ b/client-web/source/helper.ts
@@ -11,9 +11,9 @@ const elem_with_content = (s: string) => (c: string) => {
     e.textContent = c
     return e
 }
-const elem_with_children = (s: string) => (opts: { classes?: string[] }, ...cs: (HTMLElement | string)[]) => {
+const elem_with_children = (s: string) => (opts: { class?: string[] }, ...cs: (HTMLElement | string)[]) => {
     const e = elem(s)
-    if (opts.classes) e.classList.add(...opts.classes)
+    if (opts.class) e.classList.add(...opts.class)
     for (const c of cs) {
         e.append(c)
     }
diff --git a/client-web/source/index.ts b/client-web/source/index.ts
index 22b2baf..502ab98 100644
--- a/client-web/source/index.ts
+++ b/client-web/source/index.ts
@@ -1,11 +1,16 @@
 /// <reference lib="dom" />
 
+import { ediv } from "./helper.ts";
 import { log } from "./logger.ts"
 import { create_menu } from "./menu.ts";
 import { SignalingConnection } from "./protocol/mod.ts";
 import { Room } from "./room.ts"
 
-export const servers: RTCConfiguration = {
+
+export const BOTTOM_CONTAINER = ediv({ class: ["bottom-container"] })
+export const ROOM_CONTAINER = ediv({ class: ["room"] })
+
+export const RTC_CONFIG: RTCConfiguration = {
     // google stun!?
     iceServers: [{ urls: ["stun:stun1.l.google.com:19302", "stun:stun2.l.google.com:19302"] }],
     iceCandidatePoolSize: 10,
@@ -24,7 +29,7 @@ export async function main() {
     const room_name = window.location.hash.substring(1)
     if (room_name.length == 0) window.location.href = "/" // send them back to the start page
     const conn = await (new SignalingConnection().connect(room_name))
-    const room = new Room(conn)
+    new Room(conn)
     create_menu()
-    document.body.append(room.el)
+    document.body.append(ROOM_CONTAINER, BOTTOM_CONTAINER)
 }
diff --git a/client-web/source/logger.ts b/client-web/source/logger.ts
index 952355e..f8fa0b3 100644
--- a/client-web/source/logger.ts
+++ b/client-web/source/logger.ts
@@ -1,6 +1,6 @@
 /// <reference lib="dom" />
 
-const log_tag_color = {
+const log_scope_color = {
     "*": "#ff4a7c",
     crypto: "#c14aff",
     webrtc: "#ff4ade",
@@ -8,31 +8,39 @@ const log_tag_color = {
     media: "#4af5ff",
     rnnoise: "#4aff7e",
     usermodel: "#a6ff4a",
-    error: "#FF0000",
 }
 
-export type LogTag = keyof typeof log_tag_color
+export type LogScope = keyof typeof log_scope_color
+export interface LogDesc { scope: LogScope, error?: boolean, warn?: boolean }
 
 let logger_container: HTMLDivElement
 
-// TODO maybe log time aswell
-// deno-lint-ignore no-explicit-any
-export function log(tag: LogTag, message: string, ...data: any[]) {
+
+export function log(k: LogScope | LogDesc, message: string, ...data: unknown[]) {
     for (let i = 0; i < data.length; i++) {
         const e = data[i];
         if (e instanceof MediaStreamTrack) data[i] = `(${e.kind}) ${e.id}`
     }
-    console.log(`%c[${tag}] ${message}`, "color:" + log_tag_color[tag], ...data);
+    let d: LogDesc
+    if (typeof k == "string") d = { scope: k }
+    else d = k;
+
+    (d.error ? console.error : d.warn ? console.warn : console.log)(`%c[${d.scope}] ${message}`, `color:${log_scope_color[d.scope]}`, ...data);
 
     if (logger_container) {
         const e = document.createElement("p")
         e.classList.add("logger-line")
-        e.textContent = `[${tag}] ${message}`
-        e.style.color = log_tag_color[tag]
+        if (d.error) e.classList.add(".logger-error")
+        if (d.warn) e.classList.add(".logger-warn")
+        e.textContent = `[${d.scope}] ${message}`
+        if (!d.error && !d.warn) e.style.color = log_scope_color[d.scope]
         logger_container.append(e)
         setTimeout(() => {
-            e.remove()
-        }, tag == "error" ? 60000 : 6000)
+            e.classList.add("logger-line-disappear")
+            setTimeout(() => {
+                e.remove()
+            }, 1000 + 500)
+        }, (d.error || d.warn) ? 60000 : 3000)
     }
 }
 
@@ -47,6 +55,6 @@ globalThis.addEventListener("load", () => {
 })
 
 globalThis.onerror = (_ev, source, line, col, err) => {
-    log("error", `${err?.name} ${err?.message}`, err)
-    log("error", `on ${source}:${line}:${col}`, err)
+    log({ scope: "*", error: true }, `${err?.name} ${err?.message}`, err)
+    log({ scope: "*", error: true }, `on ${source}:${line}:${col}`, err)
 }
\ No newline at end of file
diff --git a/client-web/source/menu.ts b/client-web/source/menu.ts
index dfeed18..a3755c3 100644
--- a/client-web/source/menu.ts
+++ b/client-web/source/menu.ts
@@ -9,6 +9,7 @@ export function create_menu() {
         const p = document.createElement("p")
         const a = document.createElement("a")
         a.classList.add("menu-item")
+        a.target = "_blank" // dont unload this meeting
         a.textContent = name
         if (typeof cb == "string") a.href = cb
         else a.addEventListener("click", cb), a.href = "#"
diff --git a/client-web/source/protocol/crypto.ts b/client-web/source/protocol/crypto.ts
index 742f22c..fb34e8d 100644
--- a/client-web/source/protocol/crypto.ts
+++ b/client-web/source/protocol/crypto.ts
@@ -3,6 +3,8 @@ import { log } from "../logger.ts";
 //! I am not a crypto expert at all! Please read carefully and report any issues to me. 
 
 export async function crypto_seeded_key(seed: string): Promise<CryptoKey> {
+    if (seed.length < 8) log({ scope: "crypto", warn: true }, "Room name is very short. e2ee is insecure!")
+
     log("crypto", "importing seed…")
     const seed_key = await window.crypto.subtle.importKey(
         "raw",
diff --git a/client-web/source/protocol/mod.ts b/client-web/source/protocol/mod.ts
index 53cbb86..f976f23 100644
--- a/client-web/source/protocol/mod.ts
+++ b/client-web/source/protocol/mod.ts
@@ -41,7 +41,7 @@ export class SignalingConnection {
         setInterval(() => this.send_control({ ping: null }), 30000) // stupid workaround for nginx disconnecting inactive connections
     }
     on_error() {
-        log("error", "websocket error occurred!")
+        log({ scope: "ws", error: true }, "websocket error occurred!")
     }
     async on_message(data: string) {
         const packet: ClientboundPacket = JSON.parse(data) // TODO dont crash if invalid
diff --git a/client-web/source/room.ts b/client-web/source/room.ts
index 8552162..71e26bb 100644
--- a/client-web/source/room.ts
+++ b/client-web/source/room.ts
@@ -6,10 +6,8 @@ import { User } from "./user/mod.ts";
 import { LocalUser } from "./user/local.ts";
 import { ClientboundPacket, RelayMessage } from "../../common/packets.d.ts";
 import { SignalingConnection } from "./protocol/mod.ts";
-import { ediv } from "./helper.ts";
 
 export class Room {
-    public el: HTMLElement = ediv({ classes: ["room"] })
     public users: Map<number, User> = new Map()
     public remote_users: Map<number, RemoteUser> = new Map()
     public local_user!: LocalUser
@@ -18,7 +16,6 @@ export class Room {
     constructor(public signaling: SignalingConnection) {
         this.signaling.control_handler = (a) => this.control_handler(a)
         this.signaling.relay_handler = (a, b) => this.relay_handler(a, b)
-        console.log("room", this.el)
     }
 
     control_handler(packet: ClientboundPacket) {
diff --git a/client-web/source/user/local.ts b/client-web/source/user/local.ts
index 38bcfb9..a741726 100644
--- a/client-web/source/user/local.ts
+++ b/client-web/source/user/local.ts
@@ -7,6 +7,7 @@ import { get_rnnoise_node } from "../rnnoise.ts";
 import { Room } from "../room.ts";
 import { TrackHandle } from "../track_handle.ts";
 import { User } from "./mod.ts";
+import { BOTTOM_CONTAINER } from "../index.ts";
 
 export class LocalUser extends User {
     mic_gain?: GainNode
@@ -66,7 +67,7 @@ export class LocalUser extends User {
         const el = document.createElement("div")
         el.classList.add("local-controls")
         el.append(mic_toggle, camera_toggle, screen_toggle)
-        document.body.append(el)
+        BOTTOM_CONTAINER.append(el)
     }
 
     async create_camera_track() {
diff --git a/client-web/source/user/mod.ts b/client-web/source/user/mod.ts
index 6cb8715..c0aa6be 100644
--- a/client-web/source/user/mod.ts
+++ b/client-web/source/user/mod.ts
@@ -1,5 +1,6 @@
 /// <reference lib="dom" />
 
+import { ROOM_CONTAINER } from "../index.ts";
 import { log } from "../logger.ts"
 import { Room } from "../room.ts"
 import { TrackHandle } from "../track_handle.ts";
@@ -14,7 +15,7 @@ export abstract class User {
     constructor(public room: Room, public id: number) {
         this.el = document.createElement("div")
         this.el.classList.add("user")
-        this.room.el.append(this.el)
+        ROOM_CONTAINER.append(this.el)
         this.setup_view()
     }
 
diff --git a/client-web/source/user/remote.ts b/client-web/source/user/remote.ts
index eadb11f..ced8482 100644
--- a/client-web/source/user/remote.ts
+++ b/client-web/source/user/remote.ts
@@ -1,6 +1,6 @@
 /// <reference lib="dom" />
 
-import { servers } from "../index.ts"
+import { ROOM_CONTAINER, RTC_CONFIG } from "../index.ts"
 import { log } from "../logger.ts"
 import { Room } from "../room.ts"
 import { TrackHandle } from "../track_handle.ts";
@@ -13,7 +13,7 @@ export class RemoteUser extends User {
     constructor(room: Room, id: number) {
         super(room, id)
         log("usermodel", `added remote user: ${id}`)
-        this.peer = new RTCPeerConnection(servers)
+        this.peer = new RTCPeerConnection(RTC_CONFIG)
         this.peer.onicecandidate = ev => {
             if (!ev.candidate) return
             room.signaling.send_relay({ ice_candidate: ev.candidate.toJSON() }, this.id)
@@ -69,6 +69,6 @@ export class RemoteUser extends User {
     leave() {
         log("usermodel", `remove remote user: ${this.display_name}`)
         this.peer.close()
-        this.room.el.removeChild(this.el)
+        ROOM_CONTAINER.removeChild(this.el)
     }
 }
\ No newline at end of file