1 files changed, 41 insertions, 0 deletions
diff --git a/web/script/player/sync.ts b/web/script/player/sync.ts
index 34a46e3..3c5e3a2 100644
--- a/web/script/player/sync.ts
+++ b/web/script/player/sync.ts
@@ -4,9 +4,50 @@
     Copyright (C) 2024 metamuffin <metamuffin.org>
 */
 /// <reference lib="dom" />
+import { OVar, e } from "../jshelper/mod.ts";
 import { Logger } from "../jshelper/src/log.ts";
 import { Player } from "./player.ts"
 
+export function playersync_controls(sync_state: OVar<undefined | Playersync>, player: Player) {
+    let channel_name: HTMLInputElement;
+    let channel_name_copy: HTMLInputElement;
+    return e("div", { class: ["jsp-controlgroup", "jsp-playersync-controls"] },
+        e("h3", "Playersync"),
+        sync_state.map(sync => sync
+            ? e("div",
+                e("span", "Sync enabled."),
+                e("button", "Disable", {
+                    onclick: () => { sync_state.value?.destroy(); sync_state.value = undefined }
+                }),
+                e("p", "Session ID: ",
+                    channel_name_copy = e("input", { type: "text", disabled: true, value: sync.name }),
+                    e("button", "content_paste_go", {
+                        class: "icon",
+                        onclick: () => {
+                            player.logger?.log("Session ID copied to clipboard.")
+                            navigator.clipboard.writeText(channel_name_copy.value)
+                        }
+                    })
+                ))
+            : e("div",
+                channel_name = e("input", { type: "text", placeholder: "someroom:example.org" }),
+                e("button", "Join", {
+                    onclick: () => {
+                        if (!channel_name.value.length) return
+                        sync_state.value?.destroy()
+                        sync_state.value = new Playersync(player, player.logger!, channel_name.value)
+                    }
+                }), e("br"),
+                e("button", "Create new session", {
+                    onclick: () => {
+                        sync_state.value?.destroy()
+                        sync_state.value = new Playersync(player, player.logger!)
+                    }
+                }))
+        )
+    )
+}
+
 function get_username() {
     return document.querySelector("nav .account .username")?.textContent ?? "Unknown User"
 }