diff options
Diffstat (limited to 'web/script/player/mod.ts')
| -rw-r--r-- | web/script/player/mod.ts | 94 |
1 files changed, 49 insertions, 45 deletions
diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts index 9457288..c4f4473 100644 --- a/web/script/player/mod.ts +++ b/web/script/player/mod.ts @@ -76,21 +76,23 @@ function initialize_player(el: HTMLElement, node_id: string) { ...(kind == "audio" ? volume() : []), - ...(player.tracks ?? []) - .map((track, index) => ({ index, track })) - .filter(({ track }) => get_track_kind(track.kind) == kind) - .map(({ track, index }): HTMLElement => { - const active = player.active_tracks.value.find(ts => ts.track_index == index) !== undefined - const onclick = (button: HTMLElement) => { - button.textContent = "…" - player.set_track_enabled(index, !active) - } - return e("div", - e("button", { class: "jsp-track-state", onclick }, active ? "-" : "+"), " ", - e("span", { class: "jsp-track-name" }, track.name), " ", - e("span", { class: "jsp-track-lang" }, track.language) - ) - }) + player.active_tracks.map(_ => + e("div", ...(player.tracks ?? []) + .map((track, index) => ({ index, track })) + .filter(({ track }) => get_track_kind(track.kind) == kind) + .map(({ track, index }): HTMLElement => { + const active = player.active_tracks.value.find(ts => ts.track_index == index) !== undefined + const onclick = () => { + player.set_track_enabled(index, !active) + // TODO show loading indicator + } + return e("div", + e("button", { class: "jsp-track-state", onclick }, active ? "-" : "+"), " ", + e("span", { class: "jsp-track-name" }, track.name), " ", + e("span", { class: "jsp-track-lang" }, track.language) + ) + }) + )) ) ) return button @@ -103,38 +105,40 @@ function initialize_player(el: HTMLElement, node_id: string) { e("h2", "Settings"), 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", + 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: () => { - logger.log("Session ID copied to clipboard.") - navigator.clipboard.writeText(channel_name_copy.value) + if (!channel_name.value.length) return + sync_state.value?.destroy() + sync_state.value = new Playersync(player, logger, channel_name.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) - } - })) - ) + }), e("br"), + e("button", "Create new session", { + onclick: () => { + sync_state.value?.destroy() + sync_state.value = new Playersync(player, logger) + } + })) + }) ) )) return button; |