diff options
| -rw-r--r-- | web/script/player/mod.ts | 4 | ||||
| -rw-r--r-- | web/style/js-player.css | 13 |
2 files changed, 14 insertions, 3 deletions
diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts index 2dad414..995bd4c 100644 --- a/web/script/player/mod.ts +++ b/web/script/player/mod.ts @@ -90,7 +90,7 @@ function initialize_player(el: HTMLElement, node_id: string) { ...(kind == "audio" ? volume() : []), player.active_tracks.map(_ => - e("div", ...(player.tracks ?? []) + e("ul", { class: "jsp-track-list" }, ...(player.tracks ?? []) .map((track, index) => ({ index, track })) .filter(({ track }) => get_track_kind(track.kind) == kind) .map(({ track, index }): HTMLElement => { @@ -99,7 +99,7 @@ function initialize_player(el: HTMLElement, node_id: string) { player.set_track_enabled(index, !active) // TODO show loading indicator } - return e("div", + return e("li", { class: active ? ["active"] : [] }, e("button", { class: "jsp-track-state", onclick }, active ? "-" : "+"), " ", e("span", { class: "jsp-track-name" }, track.name), " ", e("span", { class: "jsp-track-lang" }, track.language) diff --git a/web/style/js-player.css b/web/style/js-player.css index 7a2c278..1d205a8 100644 --- a/web/style/js-player.css +++ b/web/style/js-player.css @@ -24,7 +24,8 @@ flex-direction: row; } -.jsp .jsp-controls button { +.jsp .jsp-controls button, +.jsp .jsp-track-list button { padding: 0px; width: var(--csize); height: 100%; @@ -193,6 +194,16 @@ } .jsp-controlgroup { + padding: 0.5em; margin-top: 1em; margin-bottom: 1em; + background-color: #00000038; +} + +ul.jsp-track-list { + list-style: none; + padding: 0px; +} +ul.jsp-track-list li.active { + background-color: #047a0073; } |