From 3d128a2960b6c8bbcb0503c9fe59c4b044d1c77a Mon Sep 17 00:00:00 2001
From: Wim Brand <wim@fornaxian.tech>
Date: Wed, 14 Aug 2024 18:21:13 +0200
Subject: [PATCH] Add video skip keys

---
 svelte/src/file_viewer/DetailsWindow.svelte |  5 ++++
 svelte/src/file_viewer/viewers/Video.svelte | 27 +++++++++++++++++++++
 svelte/src/filesystem/viewers/Video.svelte  | 27 +++++++++++++++++++++
 3 files changed, 59 insertions(+)

diff --git a/svelte/src/file_viewer/DetailsWindow.svelte b/svelte/src/file_viewer/DetailsWindow.svelte
index 23a6b18..c398292 100644
--- a/svelte/src/file_viewer/DetailsWindow.svelte
+++ b/svelte/src/file_viewer/DetailsWindow.svelte
@@ -224,6 +224,11 @@ onMount(() => {
 		<tr><td>d or &#8594;</td><td> = View next item in list</td></tr>
 		<tr><td>r</td><td> = Toggle shuffle (<b><u>r</u></b>andom)</td></tr>
 		<tr><td>SHIFT + s</td><td> = Download all the files in the list as a zip archive</td></tr>
+		<tr><td colspan="2">Video Shortcuts</td></tr>
+		<tr><td>h</td><td> = Skip 20 seconds backward</td></tr>
+		<tr><td>j</td><td> = Skip 5 seconds backward</td></tr>
+		<tr><td>k</td><td> = Skip 5 seconds forward</td></tr>
+		<tr><td>l</td><td> = Skip 20 seconds forward</td></tr>
 	</table>
 </div>
 
diff --git a/svelte/src/file_viewer/viewers/Video.svelte b/svelte/src/file_viewer/viewers/Video.svelte
index cf138f5..dffa9a1 100644
--- a/svelte/src/file_viewer/viewers/Video.svelte
+++ b/svelte/src/file_viewer/viewers/Video.svelte
@@ -83,8 +83,35 @@ const mute = () => {
 const fullscreen = () => {
 	player.requestFullscreen()
 }
+
+const keypress = e => {
+	if (
+		(e.ctrlKey || e.altKey || e.metaKey) ||
+		(document.activeElement.type && (
+			document.activeElement.type === "text" ||
+			document.activeElement.type === "email" ||
+			document.activeElement.type === "textarea"))
+	) {
+		// The first check is to prevent our keybindings from triggering then
+		// the user uses a global keybind. The second check is to prevent the
+		// shortcuts from firing if the user is entering text in an input field
+		return
+	}
+
+	if (e.key === "h") {
+		seek_relative(-20)
+	} else if (e.key === "j") {
+		seek_relative(-5)
+	} else if (e.key === "k") {
+		seek_relative(5)
+	} else if (e.key === "l") {
+		seek_relative(20)
+	}
+}
 </script>
 
+<svelte:window on:keypress={keypress} />
+
 {#if file.allow_video_player}
 	{#if !video_reload}
 		<div class="container">
diff --git a/svelte/src/filesystem/viewers/Video.svelte b/svelte/src/filesystem/viewers/Video.svelte
index d581a08..148ca59 100644
--- a/svelte/src/filesystem/viewers/Video.svelte
+++ b/svelte/src/filesystem/viewers/Video.svelte
@@ -71,8 +71,35 @@ const mute = () => {
 const fullscreen = () => {
 	player.requestFullscreen()
 }
+
+const keypress = e => {
+	if (
+		(e.ctrlKey || e.altKey || e.metaKey) ||
+		(document.activeElement.type && (
+			document.activeElement.type === "text" ||
+			document.activeElement.type === "email" ||
+			document.activeElement.type === "textarea"))
+	) {
+		// The first check is to prevent our keybindings from triggering then
+		// the user uses a global keybind. The second check is to prevent the
+		// shortcuts from firing if the user is entering text in an input field
+		return
+	}
+
+	if (e.key === "h") {
+		seek_relative(-20)
+	} else if (e.key === "j") {
+		seek_relative(-5)
+	} else if (e.key === "k") {
+		seek_relative(5)
+	} else if (e.key === "l") {
+		seek_relative(20)
+	}
+}
 </script>
 
+<svelte:window on:keypress={keypress} />
+
 <div class="container">
 	{#if
 		$nav.base.file_type === "video/x-matroska" ||