diff options
Diffstat (limited to 'web/script/player')
| -rw-r--r-- | web/script/player/mod.ts | 42 |
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; |