1 files changed, 37 insertions, 3 deletions
diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts
index ce3c113..11690b6 100644
--- a/web/script/player/mod.ts
+++ b/web/script/player/mod.ts
@@ -7,7 +7,9 @@ import { OVar, show } from "../jshelper/mod.ts";
 import { e } from "../jshelper/mod.ts";
 import { Logger } from "../jshelper/src/log.ts";
 import { EncodingProfile } from "./jhls.d.ts";
+import { TrackKind } from "./mediacaps.ts";
 import { Player } from "./player.ts";
+import { Popup } from "./popup.ts";
 
 globalThis.addEventListener("DOMContentLoaded", () => {
     if (document.body.classList.contains("player")) {
@@ -20,6 +22,12 @@ globalThis.addEventListener("DOMContentLoaded", () => {
     }
 })
 
+const MEDIA_KIND_ICONS: { [key in TrackKind]: [string, string] } = {
+    video: ["tv_off", "tv"],
+    audio: ["volume_off", "volume_up"],
+    subtitles: ["subtitles_off", "subtitles"],
+}
+
 function initialize_player(el: HTMLElement, node_id: string) {
     el.innerHTML = "" // clear the body
 
@@ -32,8 +40,28 @@ function initialize_player(el: HTMLElement, node_id: string) {
 
     let pri_current: HTMLElement;
     let pri: HTMLElement;
+
+    const popups = e("div")
+
+    const track_select = (kind: TrackKind) => {
+        let enabled = true
+        const button = e("button", MEDIA_KIND_ICONS[kind][+enabled], {
+            class: "iicon",
+            onclick: () => {
+                enabled = !enabled
+                button.textContent = MEDIA_KIND_ICONS[kind][+enabled]
+            }
+        })
+        new Popup(button, popups, () =>
+            e("div", { class: "jsp-track-select-popup" }, "This is some text")
+        )
+        return button
+    }
+
     const controls = e("div", { class: "jsp-controls" },
-        player.playing.map(playing => e("button", playing ? "||" : "|>", { onclick: toggle_playing })),
+        player.playing.map(playing =>
+            e("button", { class: "iicon" }, playing ? "pause" : "play_arrow", { onclick: toggle_playing })
+        ),
         e("p", { class: "jsp-status" },
             player.position.map(v => e("span", show.duration(v))), e("br"),
             player.position.map(v => e("span", show.duration(v - player.duration.value)))
@@ -55,7 +83,13 @@ function initialize_player(el: HTMLElement, node_id: string) {
                 )))
             )
         ),
-        e("button", "X", {
+        e("div", { class: "jsp-track-select" },
+            track_select("video"),
+            track_select("audio"),
+            track_select("subtitles")
+        ),
+        e("button", "fullscreen", {
+            class: "iicon",
             onclick() {
                 if (document.fullscreenElement) document.exitFullscreen()
                 else document.documentElement.requestFullscreen()
@@ -76,6 +110,7 @@ function initialize_player(el: HTMLElement, node_id: string) {
             )
         ))),
         logger.element,
+        popups,
         controls,
     )
     el.append(pel)
@@ -102,7 +137,6 @@ function initialize_player(el: HTMLElement, node_id: string) {
         else return;
         k.preventDefault()
     })
-
 }
 
 function mouse_idle(e: HTMLElement, timeout: number, cb: (b: boolean) => unknown) {