player: volume controls

1 files changed, 17 insertions, 2 deletions

diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts
index 6aca36c..139f23f 100644
--- a/web/script/player/mod.ts
+++ b/web/script/player/mod.ts
@@ -57,9 +57,24 @@ function initialize_player(el: HTMLElement, node_id: string) {
                 button.textContent = MEDIA_KIND_ICONS[kind][+enabled]
             }
         })
+        const volume = () => {
+            const slider = e("input")
+            slider.type = "range"
+            slider.min = "0"
+            slider.max = "1"
+            slider.step = "any"
+            slider.valueAsNumber = player.video.volume
+            slider.onchange = () => player.video.volume = slider.valueAsNumber
+            slider.onmousemove = () => player.video.volume = slider.valueAsNumber
+            return [e("div", { class: "jsp-controlgroup" }, e("label", "Volume", slider))]
+        }
+
         new Popup(button, popups, () =>
             e("div", { class: "jsp-track-select-popup" },
                 e("h3", `${kind[0].toUpperCase()}${kind.substring(1)}`),
+
+                ...(kind == "audio" ? volume() : []),
+
                 ...(player.tracks ?? [])
                     .map((track, index) => ({ index, track }))
                     .filter(({ track }) => get_track_kind(track.kind) == kind)
@@ -84,7 +99,7 @@ function initialize_player(el: HTMLElement, node_id: string) {
         let channelname: HTMLInputElement;
         new Popup(button, popups, () => e("div", { class: "jsp-settings-popup" },
             e("h2", "Settings"),
-            e("div", { class: "jsp-playersync-controls" },
+            e("div", { class: ["jsp-controlgroup", "jsp-playersync-controls"] },
                 e("h3", "Playersync"),
                 sync_state.map(sync => sync
                     ? e("div",
@@ -93,7 +108,7 @@ function initialize_player(el: HTMLElement, node_id: string) {
                             onclick: () => { sync_state.value?.destroy(); sync_state.value = undefined }
                         }))
                     : e("div",
-                        channelname = e("input", { type: "text" }),
+                        channelname = e("input", { type: "text", placeholder: "someroom:example.org" }),
                         e("button", "Sync!", {
                             onclick: () => {
                                 if (!channelname.value.length) return