summaryrefslogtreecommitdiff
path: root/client-web
diff options
context:
space:
mode:
Diffstat (limited to 'client-web')
-rw-r--r--client-web/public/assets/style/logger.css74
-rw-r--r--client-web/public/assets/style/master.css8
-rw-r--r--client-web/source/helper.ts4
-rw-r--r--client-web/source/index.ts11
-rw-r--r--client-web/source/logger.ts34
-rw-r--r--client-web/source/menu.ts1
-rw-r--r--client-web/source/protocol/crypto.ts2
-rw-r--r--client-web/source/protocol/mod.ts2
-rw-r--r--client-web/source/room.ts3
-rw-r--r--client-web/source/user/local.ts3
-rw-r--r--client-web/source/user/mod.ts3
-rw-r--r--client-web/source/user/remote.ts6
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
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-10-08 10:02:34 +0000