make track creation instant

1 files changed, 3 insertions, 40 deletions

diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts
index a53789f..0f30d45 100644
--- a/web/script/player/mod.ts
+++ b/web/script/player/mod.ts
@@ -11,7 +11,7 @@ import { EncodingProfile } from "./jhls.d.ts";
 import { TrackKind, get_track_kind } from "./mediacaps.ts";
 import { Player } from "./player.ts";
 import { Popup } from "./popup.ts";
-import { Playersync } from "./sync.ts"
+import { Playersync, playersync_controls } from "./sync.ts"
 import { MSEPlayerTrack } from "./track/mse.ts";
 
 globalThis.addEventListener("DOMContentLoaded", () => {
@@ -110,49 +110,12 @@ function initialize_player(el: HTMLElement, node_id: string) {
         )
         return button
     }
+
     const settings_popup = () => {
         const button = e("button", "settings", { class: "icon" })
-        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"] },
-                e("h3", "Playersync"),
-                sync_state.map(sync => {
-                    console.log("aaaaa", sync);
-                    return 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: () => {
-                                        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, logger, channel_name.value)
-                                }
-                            }), e("br"),
-                            e("button", "Create new session", {
-                                onclick: () => {
-                                    sync_state.value?.destroy()
-                                    sync_state.value = new Playersync(player, logger)
-                                }
-                            }))
-                })
-            )
+            playersync_controls(sync_state, player)
         ))
         return button;
     }