Improve documentation for shortcuts

svelte/src/filesystem/viewers/Audio.svelte

@@ -14,6 +14,16 @@ export const toggle_playback = () => {
 	playing ? player.pause() : player.play()
 }
 
+export const seek = delta => {
+	// fastseek can be pretty imprecise, so we don't use it for small seeks
+	// below 5 seconds
+	if (player.fastSeek && delta > 5) {
+		player.fastSeek(player.currentTime + delta)
+	} else {
+		player.currentTime = player.currentTime + delta
+	}
+}
+
 export const update = async () => {
 	if (media_session) {
 		navigator.mediaSession.metadata = new MediaMetadata({
@@ -56,7 +66,7 @@ onMount(() => {
 	</audio>
 	<div style="text-align: center;">
 		<button on:click={() => nav.open_sibling(-1) }><i class="icon">skip_previous</i></button>
-		<button on:click={() => player.currentTime -= 10 }><i class="icon">replay_10</i></button>
+		<button on:click={() => seek(-10) }><i class="icon">replay_10</i></button>
 		<button on:click={toggle_playback}>
 			{#if playing}
 				<i class="icon">pause</i>
@@ -64,7 +74,7 @@ onMount(() => {
 				<i class="icon">play_arrow</i>
 			{/if}
 		</button>
-		<button on:click={() => player.currentTime += 10 }><i class="icon">forward_10</i></button>
+		<button on:click={() => seek(10) }><i class="icon">forward_10</i></button>
 		<button on:click={() => nav.open_sibling(1) }><i class="icon">skip_next</i></button>
 	</div>
 

svelte/src/filesystem/viewers/FilePreview.svelte

@@ -45,6 +45,11 @@ export const toggle_playback = () => {
 		viewer.toggle_playback()
 	}
 }
+export const seek = delta => {
+	if (viewer && viewer.seek) {
+		viewer.seek(delta)
+	}
+}
 </script>
 
 {#if viewer_type === ""}

svelte/src/filesystem/viewers/Video.svelte

@@ -41,6 +41,16 @@ export const toggle_playback = () => {
 	playing ? player.pause() : player.play()
 }
 
+export const seek = delta => {
+	// fastseek can be pretty imprecise, so we don't use it for small seeks
+	// below 5 seconds
+	if (player.fastSeek && delta > 5) {
+		player.fastSeek(player.currentTime + delta)
+	} else {
+		player.currentTime = player.currentTime + delta
+	}
+}
+
 onMount(() => {
 	if ('mediaSession' in navigator) {
 		media_session = true
@@ -52,14 +62,6 @@ onMount(() => {
 	}
 })
 
-const seek_relative = delta => {
-	if (player.fastSeek) {
-		player.fastSeek(player.currentTime + delta)
-	} else {
-		player.currentTime = player.currentTime + delta
-	}
-}
-
 const mute = () => {
 	if (player.muted) {
 		player.muted = false
@@ -71,35 +73,8 @@ 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" ||
@@ -137,7 +112,7 @@ const keypress = e => {
 			<button on:click={() => dispatch("open_sibling", -1) }>
 				<i class="icon">skip_previous</i>
 			</button>
-			<button on:click={() => seek_relative(-10)}>
+			<button on:click={() => seek(-10)}>
 				<i class="icon">replay_10</i>
 			</button>
 			<button on:click={toggle_playback} class="button_highlight">
@@ -147,7 +122,7 @@ const keypress = e => {
 					<i class="icon">play_arrow</i>
 				{/if}
 			</button>
-			<button on:click={() => seek_relative(10)}>
+			<button on:click={() => seek(10)}>
 				<i class="icon">forward_10</i>
 			</button>
 			<button on:click={() => dispatch("open_sibling", 1) }>