overlay rework + settings

1 files changed, 45 insertions, 29 deletions

diff --git a/client-web/source/menu.ts b/client-web/source/menu.ts
index 5abb8f0..636fb53 100644
--- a/client-web/source/menu.ts
+++ b/client-web/source/menu.ts
@@ -1,39 +1,55 @@
 /// <reference lib="dom" />
 
-import { ep } from "./helper.ts"
-import { BOTTOM_CONTAINER, MENU_BR, VERSION } from "./index.ts"
+import { ediv, ep, OverlayUi } from "./helper.ts"
+import { VERSION } from "./index.ts"
+import { PrefUi } from "./preferences/ui.ts"
 import { Room } from "./room.ts"
 
-export function setup_menus(room: Room) {
-    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
+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(ediv({ class: "menu-br" },
+            ep(`keks-meet ${VERSION}`, { class: "version" }),
+            item("Licence", "/licence"),
+            item("Sources / Documentation", "https://codeberg.org/metamuffin/keks-meet"),
+        ), true)
     }
+}
+
+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 = "Toggle chat"
+        chat_toggle.onclick = () => {
+            room.chat.shown = !room.chat.shown
+            if (room.chat.shown) chat_toggle.classList.add("active")
+            else chat_toggle.classList.remove("active")
+        }
 
-    MENU_BR.append(
-        ep(`keks-meet ${VERSION}`, { class: "version" }),
-        item("Settings", () => alert("todo, refer to the url parameters in the docs for now")),
-        item("Licence", "/licence"),
-        item("Sources / Documentation", "https://codeberg.org/metamuffin/keks-meet"),
-    )
+        const prefs_button = document.createElement("input")
+        prefs_button.type = "button"
+        prefs_button.value = "Settings"
 
+        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")
+        }
 
-    // TODO this should ideally be a checkbox 
-    const chat_toggle = document.createElement("input")
-    chat_toggle.type = "button"
-    chat_toggle.id = "chat_toggle"
-    chat_toggle.value = "Toggle chat"
-    chat_toggle.onclick = () => {
-        room.chat.shown = !room.chat.shown
-        if (room.chat.shown) chat_toggle.classList.add("active")
-        else chat_toggle.classList.remove("active")
+        super(ediv({ class: "bottom-menu" }, chat_toggle, prefs_button, room.local_user.create_controls()))
     }
-    BOTTOM_CONTAINER.append(chat_toggle)
 }