summaryrefslogtreecommitdiff
path: root/client-web/source
diff options
context:
space:
mode:
Diffstat (limited to 'client-web/source')
-rw-r--r--client-web/source/chat.ts14
-rw-r--r--client-web/source/helper.ts38
-rw-r--r--client-web/source/index.ts11
-rw-r--r--client-web/source/keybinds.ts7
-rw-r--r--client-web/source/menu.ts96
-rw-r--r--client-web/source/preferences/ui.ts160
-rw-r--r--client-web/source/room.ts3
-rw-r--r--client-web/source/user/mod.ts3
-rw-r--r--client-web/source/user/remote.ts3
9 files changed, 164 insertions, 171 deletions
diff --git a/client-web/source/chat.ts b/client-web/source/chat.ts
index 47b0678..6e74139 100644
--- a/client-web/source/chat.ts
+++ b/client-web/source/chat.ts
@@ -6,17 +6,18 @@
/// <reference lib="dom" />
import { ChatMessage } from "../../common/packets.d.ts";
-import { ediv, esection, espan, image_view, notify, OverlayUi } from "./helper.ts";
+import { ediv, esection, espan, image_view, notify } from "./helper.ts";
import { log } from "./logger.ts";
import { PREFS } from "./preferences/mod.ts";
import { Room } from "./room.ts";
import { LocalUser } from "./user/local.ts";
import { User } from "./user/mod.ts";
-export class Chat extends OverlayUi {
+export class Chat {
messages: HTMLElement
controls: HTMLElement
send_el: HTMLInputElement
+ element: HTMLElement
constructor(public room: Room) {
const send = document.createElement("input")
@@ -28,7 +29,8 @@ export class Chat extends OverlayUi {
const controls = ediv({ class: "controls" })
controls.append(send)
messages.append(document.createElement("hr"))
- super(esection({ class: "chat", aria_label: "chat", role: "dialog" }, messages, controls))
+
+ this.element = esection({ class: "chat", aria_label: "chat", role: "dialog" }, messages, controls)
this.messages = messages
this.controls = controls
this.send_el = send
@@ -37,7 +39,8 @@ export class Chat extends OverlayUi {
if (ev.code == "Enter") {
if (send.value.trim().length == 0) {
// keybind for toggle chat is Enter, so lets close here
- this.shown = false
+ // TODO! open
+ // this.control.check = false
return
}
this.send({ text: send.value })
@@ -75,7 +78,8 @@ export class Chat extends OverlayUi {
if (message.text) els.push(espan(message.text, { class: "text" }))
if (message.image) els.push(image_view(message.image, { class: "image" }))
- this.shown = true
+ // TODO! open
+ // this.shown = true
const e = ediv({ class: "message" }, espan(sender.display_name, { class: "author" }), ": ", ...els)
this.messages.append(e)
e.scrollIntoView({ block: "end", behavior: "smooth", inline: "end" })
diff --git a/client-web/source/helper.ts b/client-web/source/helper.ts
index 1133afe..e13af51 100644
--- a/client-web/source/helper.ts
+++ b/client-web/source/helper.ts
@@ -14,32 +14,43 @@ interface Opts<El> {
id?: string, src?: string,
for?: string,
onclick?: (e: El) => void,
+ onchange?: (e: El) => void,
role?: "dialog"
aria_label?: string
aria_live?: "polite" | "assertive"
aria_modal?: boolean
+ aria_popup?: "menu"
}
function apply_opts<El extends HTMLElement>(e: El, o: Opts<El> | undefined) {
if (!o) return
if (o.id) e.id = o.id
if (o.onclick) e.onclick = () => o.onclick!(e)
+ if (o.onchange) e.onchange = () => o.onchange!(e)
if (o.aria_label) e.ariaLabel = o.aria_label
if (o.aria_live) e.ariaLive = o.aria_live
if (o.for) (e as unknown as HTMLLabelElement).htmlFor = o.for
if (o.aria_modal) e.ariaModal = "true"
+ if (o.aria_popup) e.ariaHasPopup = o.aria_popup
if (typeof o?.class == "string") e.classList.add(o.class)
if (typeof o?.class == "object") e.classList.add(...o.class)
}
-const elem_with_content = <K extends keyof HTMLElementTagNameMap>(s: K) => (c: string, opts?: Opts<HTMLElementTagNameMap[K]>) => {
+
+const element = <K extends keyof HTMLElementTagNameMap>(s: K) => (opts?: Opts<HTMLElementTagNameMap[K]>) => {
const e = elem(s)
apply_opts(e, opts)
+ return e
+}
+const elem_with_content = <K extends keyof HTMLElementTagNameMap>(s: K) => (c: string, opts?: Opts<HTMLElementTagNameMap[K]>, ...cs: (HTMLElement | string)[]) => {
+ const e = element(s)(opts)
e.textContent = c
+ for (const c of cs) {
+ e.append(c)
+ }
return e
}
const elem_with_children = <K extends keyof HTMLElementTagNameMap>(s: K) => (opts?: Opts<HTMLElementTagNameMap[K]>, ...cs: (HTMLElement | string)[]) => {
- const e = elem(s)
- apply_opts(e, opts)
+ const e = element(s)(opts)
for (const c of cs) {
e.append(c)
}
@@ -65,24 +76,13 @@ export const espan = elem_with_content("span")
export const elabel = elem_with_content("label")
export const ebutton = elem_with_content("button")
export const ebr = () => document.createElement("br")
-
-export const OVERLAYS = ediv({ class: "overlays" })
-
-export class OverlayUi {
- _shown = false
- constructor(public el: HTMLElement, initial = false) {
- this.shown = initial
- }
- get shown() { return this._shown }
- set shown(v: boolean) {
- if (v && !this._shown) OVERLAYS.append(this.el), this.on_show()
- if (!v && this._shown) OVERLAYS.removeChild(this.el), this.on_hide()
- this._shown = v
- }
- on_show() { }
- on_hide() { }
+export const einput = (type: string, opts: Opts<HTMLInputElement>) => {
+ const i = element("input")(opts)
+ i.type = type
+ return i
}
+
export function image_view(url: string, opts?: Opts<HTMLElement>): HTMLElement {
const img = document.createElement("img")
apply_opts(img, opts)
diff --git a/client-web/source/index.ts b/client-web/source/index.ts
index 84a86e9..6d99215 100644
--- a/client-web/source/index.ts
+++ b/client-web/source/index.ts
@@ -6,16 +6,15 @@
/// <reference lib="dom" />
import { init_serviceworker } from "./sw/client.ts";
-import { esection, OVERLAYS } from "./helper.ts";
+import { ediv, enav } from "./helper.ts";
import { setup_keybinds } from "./keybinds.ts";
import { log, LOGGER_CONTAINER } from "./logger.ts"
-import { BottomMenu, MenuBr } from "./menu.ts";
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";
export const VERSION = "0.1.12"
-export const ROOM_CONTAINER = esection({ class: "room", aria_label: "user list" })
export interface ClientConfig {
appearance?: {
@@ -84,10 +83,10 @@ export async function main() {
setup_keybinds(r)
r.on_ready = () => {
- new BottomMenu(r)
- new MenuBr()
+ const sud = enav({ class: "side-ui" })
+ const center = ediv({ class: "main" }, r.element, info_br())
+ document.body.append(center, sud, control_bar(r, sud))
}
- document.body.prepend(ROOM_CONTAINER, OVERLAYS)
if (globalThis.navigator.serviceWorker) init_serviceworker()
}
diff --git a/client-web/source/keybinds.ts b/client-web/source/keybinds.ts
index fb17259..1864565 100644
--- a/client-web/source/keybinds.ts
+++ b/client-web/source/keybinds.ts
@@ -15,9 +15,10 @@ export function setup_keybinds(room: Room) {
if (ev.target instanceof HTMLInputElement && !(ev.target.type == "button")) return
if (ev.repeat) return
if (ev.code == "Enter" && ev.ctrlKey) {
- room.chat.shown = !room.chat.shown
- if (room.chat.shown) room.chat.focus()
- ev.preventDefault() // so focused buttons dont trigger
+ // TODO! show chat
+ // room.chat.shown = !room.chat.shown
+ // if (room.chat.shown) room.chat.focus()
+ // ev.preventDefault() // so focused buttons dont trigger
}
if (ev.shiftKey) {
if (ev.code == "KeyM" || ev.code == "KeyR") room.local_user.await_add_resource(create_mic_res())
diff --git a/client-web/source/menu.ts b/client-web/source/menu.ts
index 0df50d8..1b159ec 100644
--- a/client-web/source/menu.ts
+++ b/client-web/source/menu.ts
@@ -5,68 +5,58 @@
*/
/// <reference lib="dom" />
-import { ebutton, ediv, efooter, enav, ep, OverlayUi } from "./helper.ts"
+import { ebutton, ediv, efooter, einput, elabel, enav, ep } from "./helper.ts"
import { VERSION } from "./index.ts"
-import { PrefUi } from "./preferences/ui.ts"
+import { ui_preferences } from "./preferences/ui.ts"
import { create_file_res } from "./resource/file.ts";
import { create_camera_res, create_mic_res, create_screencast_res } from "./resource/track.ts";
import { Room } from "./room.ts"
-export class MenuBr extends OverlayUi {
- constructor() {
- const item = (name: string, cb: (() => void) | string) => {
- 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 = "#"
- p.append(a)
- return p
- }
-
- super(efooter({ class: "menu-br" },
- ep(`keks-meet ${VERSION}`, { class: "version" }),
- item("License", "https://codeberg.org/metamuffin/keks-meet/raw/branch/master/COPYING"),
- item("Source code", "https://codeberg.org/metamuffin/keks-meet"),
- item("Documentation", "https://codeberg.org/metamuffin/keks-meet/src/branch/master/readme.md"),
- ), true)
+export function info_br() {
+ const item = (name: string, cb: (() => void) | string) => {
+ 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 = "#"
+ p.append(a)
+ return p
}
+
+ return efooter({ class: "info-br" },
+ ep(`keks-meet ${VERSION}`, { class: "version" }),
+ item("License", "https://codeberg.org/metamuffin/keks-meet/raw/branch/master/COPYING"),
+ item("Source code", "https://codeberg.org/metamuffin/keks-meet"),
+ item("Documentation", "https://codeberg.org/metamuffin/keks-meet/src/branch/master/readme.md"),
+ )
}
-export class BottomMenu extends OverlayUi {
- constructor(room: Room) {
- // TODO this should ideally be a checkbox
- const chat_toggle = document.createElement("input")
- chat_toggle.type = "button"
- chat_toggle.value = "Chat"
- chat_toggle.ariaHasPopup = "menu"
- chat_toggle.onclick = () => {
- room.chat.shown = !room.chat.shown
- if (room.chat.shown) chat_toggle.classList.add("active")
- else chat_toggle.classList.remove("active")
- }
- const prefs_button = document.createElement("input")
- prefs_button.type = "button"
- prefs_button.value = "Settings"
- prefs_button.ariaHasPopup = "menu"
+export function control_bar(room: Room, side_ui_container: HTMLElement): HTMLElement {
+ const chat = side_ui(side_ui_container, room.chat.element, "Chat")
+ const prefs = side_ui(side_ui_container, ui_preferences(), "Settings")
+ const local_controls = ediv({ class: "local-controls", aria_label: "local resources" },
+ ebutton("Microphone", { onclick: () => room.local_user.await_add_resource(create_mic_res()) }),
+ ebutton("Camera", { onclick: () => room.local_user.await_add_resource(create_camera_res()) }),
+ ebutton("Screen", { onclick: () => room.local_user.await_add_resource(create_screencast_res()) }),
+ ebutton("File", { onclick: () => room.local_user.await_add_resource(create_file_res()) }),
+ )
+ return enav({ class: "control-bar" }, chat.el, prefs.el, local_controls)
+}
- const prefs = new PrefUi()
- prefs_button.onclick = () => {
- prefs.shown = !prefs.shown
- if (prefs.shown) prefs_button.classList.add("active")
- else prefs_button.classList.remove("active")
+export interface SideUI { el: HTMLElement, set_state: (s: boolean) => void }
+export function side_ui(container: HTMLElement, content: HTMLElement, label: string): SideUI {
+ // TODO: close other side uis
+ const checkbox = einput("checkbox", {
+ onchange: () => {
+ if (checkbox.checked) container.appendChild(content)
+ else container.removeChild(content)
}
-
- const local_controls = ediv({ class: "local-controls", aria_label: "local resources" },
- ebutton("Microphone", { onclick: () => room.local_user.await_add_resource(create_mic_res()) }),
- ebutton("Camera", { onclick: () => room.local_user.await_add_resource(create_camera_res()) }),
- ebutton("Screen", { onclick: () => room.local_user.await_add_resource(create_screencast_res()) }),
- ebutton("File", { onclick: () => room.local_user.await_add_resource(create_file_res()) }),
- )
-
- super(enav({ class: "bottom-menu" }, chat_toggle, prefs_button, local_controls), true)
+ })
+ return {
+ el: elabel(label, { class: "side-ui-control" }, checkbox),
+ set_state(s) { checkbox.checked = s }
}
-}
+} \ No newline at end of file
diff --git a/client-web/source/preferences/ui.ts b/client-web/source/preferences/ui.ts
index 2b1d0c7..1326797 100644
--- a/client-web/source/preferences/ui.ts
+++ b/client-web/source/preferences/ui.ts
@@ -5,96 +5,94 @@
*/
/// <reference lib="dom" />
-import { ebr, ebutton, ediv, eh2, elabel, espan, etd, etr, OverlayUi } from "../helper.ts";
+import { ebr, ebutton, ediv, eh2, elabel, espan, etd, etr } from "../helper.ts";
import { PREF_DECLS } from "./decl.ts";
import { change_pref, on_pref_changed, PrefDecl, PREFS } from "./mod.ts";
-export class PrefUi extends OverlayUi {
- constructor() {
- const rows = Object.entries(PREF_DECLS as Record<string, PrefDecl<unknown>>).filter(e => !e[1].hidden).map(([key_, decl]) => {
- const key = key_ as keyof typeof PREF_DECLS
- const id = `pref-${key}`
- let prim_control: HTMLInputElement | HTMLSelectElement | undefined;
- if (decl.possible_values) {
- const sel = document.createElement("select")
- sel.id = id
- sel.value = JSON.stringify(PREFS[key])
- for (const v of decl.possible_values) {
- const opt = document.createElement("option")
- opt.value = opt.textContent = JSON.stringify(v ?? null)
- sel.append(opt)
- }
- sel.onchange = () => {
- change_pref(key, JSON.parse(sel.value) ?? undefined)
- }
- on_pref_changed(key, () => sel.value = JSON.stringify(PREFS[key] ?? null))
- prim_control = sel
- } else if (typeof decl.type == "boolean") {
- const checkbox = document.createElement("input")
- checkbox.type = "checkbox"
- checkbox.id = id
- checkbox.checked = PREFS[key] as boolean
- checkbox.onchange = () => {
- change_pref(key, checkbox.checked)
- }
- on_pref_changed(key, () => checkbox.checked = PREFS[key] as boolean)
- prim_control = checkbox
- } else if (typeof decl.type == "string") {
- const textbox = document.createElement("input")
- textbox.type = "text"
- textbox.id = id
- textbox.value = PREFS[key] as string
- textbox.onchange = () => {
- change_pref(key, textbox.value)
- }
- on_pref_changed(key, () => textbox.value = PREFS[key] as string)
- prim_control = textbox
- } else if (typeof decl.type == "number") {
- const textbox = document.createElement("input")
- textbox.type = "number"
- textbox.id = id
- textbox.value = PREFS[key] as string
- textbox.onchange = () => {
- change_pref(key, parseFloat(textbox.value))
- }
- on_pref_changed(key, () => textbox.value = PREFS[key] as string)
- prim_control = textbox
+export function ui_preferences(): HTMLElement {
+ const rows = Object.entries(PREF_DECLS as Record<string, PrefDecl<unknown>>).filter(e => !e[1].hidden).map(([key_, decl]) => {
+ const key = key_ as keyof typeof PREF_DECLS
+ const id = `pref-${key}`
+ let prim_control: HTMLInputElement | HTMLSelectElement | undefined;
+ if (decl.possible_values) {
+ const sel = document.createElement("select")
+ sel.id = id
+ sel.value = JSON.stringify(PREFS[key])
+ for (const v of decl.possible_values) {
+ const opt = document.createElement("option")
+ opt.value = opt.textContent = JSON.stringify(v ?? null)
+ sel.append(opt)
}
+ sel.onchange = () => {
+ change_pref(key, JSON.parse(sel.value) ?? undefined)
+ }
+ on_pref_changed(key, () => sel.value = JSON.stringify(PREFS[key] ?? null))
+ prim_control = sel
+ } else if (typeof decl.type == "boolean") {
+ const checkbox = document.createElement("input")
+ checkbox.type = "checkbox"
+ checkbox.id = id
+ checkbox.checked = PREFS[key] as boolean
+ checkbox.onchange = () => {
+ change_pref(key, checkbox.checked)
+ }
+ on_pref_changed(key, () => checkbox.checked = PREFS[key] as boolean)
+ prim_control = checkbox
+ } else if (typeof decl.type == "string") {
+ const textbox = document.createElement("input")
+ textbox.type = "text"
+ textbox.id = id
+ textbox.value = PREFS[key] as string
+ textbox.onchange = () => {
+ change_pref(key, textbox.value)
+ }
+ on_pref_changed(key, () => textbox.value = PREFS[key] as string)
+ prim_control = textbox
+ } else if (typeof decl.type == "number") {
+ const textbox = document.createElement("input")
+ textbox.type = "number"
+ textbox.id = id
+ textbox.value = PREFS[key] as string
+ textbox.onchange = () => {
+ change_pref(key, parseFloat(textbox.value))
+ }
+ on_pref_changed(key, () => textbox.value = PREFS[key] as string)
+ prim_control = textbox
+ }
- let use_opt_;
- if (decl.default === undefined || decl.optional) {
- const use_opt = document.createElement("input")
- use_opt.type = "checkbox"
- use_opt.id = "enable-" + id
+ let use_opt_;
+ if (decl.default === undefined || decl.optional) {
+ const use_opt = document.createElement("input")
+ use_opt.type = "checkbox"
+ use_opt.id = "enable-" + id
+ use_opt.checked = PREFS[key] !== undefined
+ if (prim_control) prim_control.disabled = !use_opt.checked
+ use_opt.onchange = () => {
+ if (use_opt.checked) { if (prim_control?.onchange) prim_control.onchange(new Event("change")) }
+ else change_pref(key, undefined)
+ }
+ on_pref_changed(key, () => {
use_opt.checked = PREFS[key] !== undefined
if (prim_control) prim_control.disabled = !use_opt.checked
- use_opt.onchange = () => {
- if (use_opt.checked) { if (prim_control?.onchange) prim_control.onchange(new Event("change")) }
- else change_pref(key, undefined)
- }
- on_pref_changed(key, () => {
- use_opt.checked = PREFS[key] !== undefined
- if (prim_control) prim_control.disabled = !use_opt.checked
- })
- use_opt_ = use_opt;
- }
+ })
+ use_opt_ = use_opt;
+ }
- const label = elabel(decl.description ?? `[${key}]`, { for: id })
- return etr({ class: "pref" }, etd({}, label), etd({}, use_opt_ ?? ""), etd({}, prim_control ?? ""))
- })
+ const label = elabel(decl.description ?? `[${key}]`, { for: id })
+ return etr({ class: "pref" }, etd({}, label), etd({}, use_opt_ ?? ""), etd({}, prim_control ?? ""))
+ })
- const notification_perm = Notification.permission == "granted" ? ediv() : ediv({},
- espan("For keks-meet to send notifications, it needs you to grant permission: "),
- ebutton("Grant", { onclick: () => Notification.requestPermission() }),
- )
- const reset = ediv({},
- espan("Want to clear all settings? Use this:"),
- ebutton("RESET", { onclick: () => { if (confirm("really clear all preferences?")) { localStorage.clear(); window.location.reload() } } }),
- )
+ const notification_perm = Notification.permission == "granted" ? ediv() : ediv({},
+ espan("For keks-meet to send notifications, it needs you to grant permission: "),
+ ebutton("Grant", { onclick: () => Notification.requestPermission() }),
+ )
+ const reset = ediv({},
+ espan("Want to clear all settings? Use this:"),
+ ebutton("RESET", { onclick: () => { if (confirm("really clear all preferences?")) { localStorage.clear(); window.location.reload() } } }),
+ )
- const table = document.createElement("table")
- table.append(...rows)
+ const table = document.createElement("table")
+ table.append(...rows)
- super(ediv({ class: "prefs-overlay" }, eh2("Settings"), notification_perm, ebr(), table, ebr(), reset))
- }
+ return ediv({ class: "prefs-overlay" }, eh2("Settings"), notification_perm, ebr(), table, ebr(), reset)
}
diff --git a/client-web/source/room.ts b/client-web/source/room.ts
index 27d2327..3bd27c2 100644
--- a/client-web/source/room.ts
+++ b/client-web/source/room.ts
@@ -11,16 +11,19 @@ import { LocalUser } from "./user/local.ts";
import { ClientboundPacket, RelayMessage } from "../../common/packets.d.ts";
import { SignalingConnection } from "./protocol/mod.ts";
import { Chat } from "./chat.ts";
+import { ediv } from "./helper.ts";
export class Room {
public remote_users: Map<number, RemoteUser> = new Map()
public local_user!: LocalUser
public my_id!: number
public chat: Chat = new Chat(this)
+ public element: HTMLElement
public on_ready = () => { };
constructor(public signaling: SignalingConnection, public rtc_config: RTCConfiguration) {
+ this.element = ediv({ class: "room", aria_label: "user list" })
this.signaling.control_handler = (a) => this.control_handler(a)
this.signaling.relay_handler = (a, b) => this.relay_handler(a, b)
}
diff --git a/client-web/source/user/mod.ts b/client-web/source/user/mod.ts
index e83c2e6..6bd177a 100644
--- a/client-web/source/user/mod.ts
+++ b/client-web/source/user/mod.ts
@@ -6,7 +6,6 @@
/// <reference lib="dom" />
import { ediv, epre, espan } from "../helper.ts";
-import { ROOM_CONTAINER } from "../index.ts";
import { Room } from "../room.ts";
export class User {
@@ -25,6 +24,6 @@ export class User {
this.name_el.classList.add("name")
info_el.append(this.name_el, this.stats_el)
this.el.append(info_el)
- ROOM_CONTAINER.append(this.el)
+ room.element.append(this.el)
}
} \ No newline at end of file
diff --git a/client-web/source/user/remote.ts b/client-web/source/user/remote.ts
index 5e81cf7..907dd50 100644
--- a/client-web/source/user/remote.ts
+++ b/client-web/source/user/remote.ts
@@ -7,7 +7,6 @@
import { RelayMessage } from "../../../common/packets.d.ts";
import { notify } from "../helper.ts";
-import { ROOM_CONTAINER } from "../index.ts"
import { log } from "../logger.ts"
import { PREFS } from "../preferences/mod.ts";
import { new_remote_resource, RemoteResource } from "../resource/mod.ts";
@@ -79,7 +78,7 @@ export class RemoteUser extends User {
log("usermodel", `remove remote user: ${this.display_name}`)
this.pc.close()
this.room.remote_users.delete(this.id)
- ROOM_CONTAINER.removeChild(this.el)
+ this.room.element.removeChild(this.el)
if (PREFS.notify_leave) notify(`${this.display_name} left`)
}
on_relay(message: RelayMessage) {
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-10-08 16:45:43 +0000