jsp: volume keybinds like mpv

2 files changed, 11 insertions, 3 deletions

diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts
index dd26cb2..2defa6e 100644
--- a/web/script/player/mod.ts
+++ b/web/script/player/mod.ts
@@ -46,6 +46,9 @@ function initialize_player(el: HTMLElement, node_id: string) {
     const idle_inhibit = new OVar(false)
     const sync_state = new OVar<Playersync | undefined>(undefined)
 
+    //@ts-ignore for debugging
+    globalThis.player = player;
+
     let mute_saved_volume = 1;
     const toggle_mute = () => {
         if (player.volume.value == 0) {
@@ -114,9 +117,7 @@ function initialize_player(el: HTMLElement, node_id: string) {
             slider.onmousemove = () => player.video.volume = slider.valueAsNumber
             return [e("div", { class: ["jsp-controlgroup", "jsp-volumecontrol"] },
                 e("label", `Volume`),
-                e("span", { class: "jsp-volume" }, player.volume.map(v =>
-                    `${(v * 100).toFixed(2)}% | ${v == 0 ? "-∞" : (Math.log2(v) * 10).toFixed(2)}dB` as string
-                )),
+                e("span", { class: "jsp-volume" }, player.volume.map(v => show_volume(v))),
                 slider
             )]
         }
@@ -254,6 +255,8 @@ function initialize_player(el: HTMLElement, node_id: string) {
         else if (k.code == "KeyS") screenshot_video(player.video)
         else if (k.code == "KeyJ") step_track_kind("subtitles")
         else if (k.code == "KeyM") toggle_mute()
+        else if (k.code == "Digit9") (player.volume.value -= 0.05), logger.log(`Volume decreased to ${show_volume(player.volume.value)}`)
+        else if (k.code == "Digit0") (player.volume.value += 0.05), logger.log(`Volume increased to ${show_volume(player.volume.value)}`)
         else if (k.key == "#") step_track_kind("audio")
         else if (k.key == "_") step_track_kind("video")
         else if (k.code == "KeyV") show_stats.value = !show_stats.value
@@ -331,6 +334,9 @@ function show_profile(profile: EncodingProfile): string {
     if (profile.subtitles) return `codec=${profile.subtitles.codec}`
     return `???`
 }
+function show_volume(v: number): string {
+    return `${(v * 100).toFixed(2)}% | ${v == 0 ? "-∞" : (Math.log2(v) * 10).toFixed(2)}dB`
+}
 
 function find_closest_chaps(player: Player) {
     const now = player.position.value
diff --git a/web/script/player/player.ts b/web/script/player/player.ts
index 3d35c49..640a6d6 100644
--- a/web/script/player/player.ts
+++ b/web/script/player/player.ts
@@ -39,6 +39,8 @@ export class Player {
         this.volume.value = this.video.volume
         let skip_change = false;
         this.volume.onchange(v => {
+            if (v > 1.) return this.volume.value = 1;
+            if (v < 0.) return this.volume.value = 0;
             if (!skip_change) this.video.volume = v
             skip_change = false
         })