fix some double-free bugs in the DOM

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;