refactor streamsync a bit

1 files changed, 24 insertions, 6 deletions

diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts
index 139f23f..2fd9046 100644
--- a/web/script/player/mod.ts
+++ b/web/script/player/mod.ts
@@ -96,7 +96,8 @@ function initialize_player(el: HTMLElement, node_id: string) {
     }
     const settings_popup = () => {
         const button = e("button", "settings", { class: "icon" })
-        let channelname: HTMLInputElement;
+        let channel_name: HTMLInputElement;
+        let channel_name_copy: HTMLInputElement;
         new Popup(button, popups, () => e("div", { class: "jsp-settings-popup" },
             e("h2", "Settings"),
             e("div", { class: ["jsp-controlgroup", "jsp-playersync-controls"] },
@@ -106,14 +107,30 @@ function initialize_player(el: HTMLElement, node_id: string) {
                         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: () => {
+                                    logger.log("Session ID copied to clipboard.")
+                                    navigator.clipboard.writeText(channel_name_copy.value)
+                                }
+                            })
+                        ))
                     : e("div",
-                        channelname = e("input", { type: "text", placeholder: "someroom:example.org" }),
-                        e("button", "Sync!", {
+                        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, logger, channel_name.value)
+                            }
+                        }), e("br"),
+                        e("button", "Create new session", {
                             onclick: () => {
-                                if (!channelname.value.length) return
                                 sync_state.value?.destroy()
-                                sync_state.value = new Playersync(player, logger, channelname.value)
+                                sync_state.value = new Playersync(player, logger)
                             }
                         }))
                 )
@@ -192,6 +209,7 @@ function initialize_player(el: HTMLElement, node_id: string) {
         player.seek(p * player.duration.value)
     })
     document.body.addEventListener("keydown", k => {
+        if (k.ctrlKey) return
         if (k.code == "Period") player.pause(), player.frame_forward()
         if (k.code == "Space") toggle_playing()
         else if (k.code == "KeyV") show_stats.value = !show_stats.value