player: implement some more mpv keybinds (screenshot, toggle subs/audio)

1 files changed, 41 insertions, 1 deletions

diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts
index 2c6c94b..fd2dd5c 100644
--- a/web/script/player/mod.ts
+++ b/web/script/player/mod.ts
@@ -55,6 +55,21 @@ function initialize_player(el: HTMLElement, node_id: string) {
 
     const popups = e("div")
 
+    const step_track_kind = (kind: TrackKind) => {
+        // TODO cycle through all of them
+        const active = player.active_tracks.value.filter(
+            ts => get_track_kind(player.tracks![ts.track_index].kind) == kind)
+        if (active.length > 0) {
+            for (const t of active) player.set_track_enabled(t.track_index, false)
+        } else {
+            const all_kind = (player.tracks ?? [])
+                .map((track, index) => ({ index, track }))
+                .filter(({ track }) => get_track_kind(track.kind) == kind)
+            if (all_kind.length < 1) return logger.log(`No ${kind} tracks available`)
+            player.set_track_enabled(all_kind[0].index, true)
+        }
+    }
+
     const track_select = (kind: TrackKind) => {
         const button = e("div", player.active_tracks.map(_ => {
             const active = player.active_tracks.value.filter(
@@ -206,10 +221,16 @@ function initialize_player(el: HTMLElement, node_id: string) {
         player.seek(p * player.duration.value)
     })
     document.body.addEventListener("keydown", k => {
-        if (k.ctrlKey || k.altKey) return
+        if (k.ctrlKey || k.altKey || k.metaKey) return
         if (k.code == "Period") player.pause(), player.frame_forward()
         else if (k.code == "Space") toggle_playing()
+        else if (k.code == "KeyP") toggle_playing()
         else if (k.code == "KeyF") toggle_fullscreen()
+        else if (k.code == "KeyQ") window.history.back()
+        else if (k.code == "KeyS") screenshot_video(player.video)
+        else if (k.code == "KeyJ") step_track_kind("subtitles")
+        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
         else if (k.code == "ArrowLeft") player.seek(player.position.value - 5)
         else if (k.code == "ArrowRight") player.seek(player.position.value + 5)
@@ -221,6 +242,25 @@ function initialize_player(el: HTMLElement, node_id: string) {
     send_player_progress(node_id, player)
 }
 
+function screenshot_video(video: HTMLVideoElement) {
+    // TODO bug: video needs to be played to take a screenshot. if you have just seeked somewhere it wont work.
+    const canvas = document.createElement("canvas")
+    canvas.width = video.videoWidth
+    canvas.height = video.videoHeight
+    const context = canvas.getContext("2d")!
+    context.fillStyle = "#ff00ff"
+    context.fillRect(0, 0, video.videoWidth, video.videoHeight)
+    context.drawImage(video, 0, 0)
+    canvas.toBlob(blob => {
+        if (!blob) throw new Error("failed to create blob");
+        const a = document.createElement("a");
+        a.download = "screenshot.webp";
+        a.href = window.URL.createObjectURL(blob)
+        a.click()
+        setTimeout(() => URL.revokeObjectURL(a.href), 0)
+    }, "image/webp", 0.95)
+}
+
 let sent_watched = false;
 function send_player_progress(node_id: string, player: Player) {
     let t = 0;