player: make the kind buttons work

1 files changed, 22 insertions, 9 deletions

diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts
index 1d4267f..2dad414 100644
--- a/web/script/player/mod.ts
+++ b/web/script/player/mod.ts
@@ -49,15 +49,28 @@ function initialize_player(el: HTMLElement, node_id: string) {
     const popups = e("div")
 
     const track_select = (kind: TrackKind) => {
-        let enabled = true
-        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]
-            }
-        })
+        const button = e("div", player.active_tracks.map(_ => {
+            const active = player.active_tracks.value.filter(
+                ts => get_track_kind(player.tracks![ts.track_index].kind) == kind)
+            const enabled = active.length > 0
+            return e("button", MEDIA_KIND_ICONS[kind][+enabled], {
+                class: "icon",
+                onclick: () => {
+                    if (enabled) {
+                        for (const t of active) {
+                            player.set_track_enabled(t.track_index, false)
+                        }
+                    } else {
+                        const all_kind = (player.tracks ?? [])
+                            .map((track, index) => ({ index, track }))
+                            .filter(({ track }) => get_track_kind(track.kind) == kind)
+                        if (all_kind.length < 1) return
+                        player.set_track_enabled(all_kind[0].index, true)
+                    }
+
+                }
+            })
+        }))
         const volume = () => {
             const slider = e("input")
             slider.type = "range"