player: volume controls

3 files changed, 19 insertions, 3 deletions

diff --git a/web/script/jshelper b/web/script/jshelper
-Subproject 56fefbe4495d71b7696b4a4a0980b24c5dc26bf
+Subproject d20a4fcf83818ead0b0775ded507e9e6f0fcc9b
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
diff --git a/web/style/js-player.css b/web/style/js-player.css
index 8f047f1..931547c 100644
--- a/web/style/js-player.css
+++ b/web/style/js-player.css
@@ -201,7 +201,8 @@
     padding: 0.3em;
     border-radius: 7px;
 }
-.jsp-playersync-controls {
+.jsp-controlgroup {
     padding: 1em;
+    margin: 0.5em;
     background-color: #0005;
 }