1 files changed, 33 insertions, 0 deletions
diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts
index fdb4e4a..6aca36c 100644
--- a/web/script/player/mod.ts
+++ b/web/script/player/mod.ts
@@ -11,6 +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"
 
 globalThis.addEventListener("DOMContentLoaded", () => {
     if (document.body.classList.contains("player")) {
@@ -35,10 +36,12 @@ function initialize_player(el: HTMLElement, node_id: string) {
     const logger = new Logger<string>(s => e("p", s))
     const player = new Player(node_id, logger)
     const show_stats = new OVar(false);
+    const sync_state = new OVar<Playersync | undefined>(undefined)
 
     const toggle_playing = () => player.playing.value ? player.pause() : player.play()
     const pri_map = (v: number) => (v / player.duration.value * 100) + "%"
 
+
     let pri_current: HTMLElement;
     let pri: HTMLElement;
 
@@ -49,12 +52,14 @@ function initialize_player(el: HTMLElement, node_id: string) {
         const button = e("button", MEDIA_KIND_ICONS[kind][+enabled], {
             class: "icon",
             onclick: () => {
+                // sync_state.value = new Playersync(player, logger, "test")
                 enabled = !enabled
                 button.textContent = MEDIA_KIND_ICONS[kind][+enabled]
             }
         })
         new Popup(button, popups, () =>
             e("div", { class: "jsp-track-select-popup" },
+                e("h3", `${kind[0].toUpperCase()}${kind.substring(1)}`),
                 ...(player.tracks ?? [])
                     .map((track, index) => ({ index, track }))
                     .filter(({ track }) => get_track_kind(track.kind) == kind)
@@ -74,6 +79,33 @@ function initialize_player(el: HTMLElement, node_id: string) {
         )
         return button
     }
+    const settings_popup = () => {
+        const button = e("button", "settings", { class: "icon" })
+        let channelname: HTMLInputElement;
+        new Popup(button, popups, () => e("div", { class: "jsp-settings-popup" },
+            e("h2", "Settings"),
+            e("div", { class: "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("div",
+                        channelname = e("input", { type: "text" }),
+                        e("button", "Sync!", {
+                            onclick: () => {
+                                if (!channelname.value.length) return
+                                sync_state.value?.destroy()
+                                sync_state.value = new Playersync(player, logger, channelname.value)
+                            }
+                        }))
+                )
+            )
+        ))
+        return button;
+    }
 
     const controls = e("div", { class: "jsp-controls" },
         player.playing.map(playing =>
@@ -105,6 +137,7 @@ function initialize_player(el: HTMLElement, node_id: string) {
             track_select("audio"),
             track_select("subtitles")
         ),
+        settings_popup(),
         e("button", "fullscreen", {
             class: "icon",
             onclick() {