Add video skip keys

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>
 

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">

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" ||