From 1382c01a14771dc812d7ef12d12ce9c230bf8aa2 Mon Sep 17 00:00:00 2001 From: Wim Brand Date: Wed, 14 Aug 2024 19:58:25 +0200 Subject: [PATCH] Improve documentation for shortcuts --- svelte/src/file_viewer/DetailsWindow.svelte | 71 ++++++++++++++----- svelte/src/file_viewer/FileViewer.svelte | 18 +++++ svelte/src/file_viewer/viewers/Audio.svelte | 9 +++ .../file_viewer/viewers/FilePreview.svelte | 5 ++ svelte/src/file_viewer/viewers/Video.svelte | 32 ++++----- svelte/src/filesystem/Filesystem.svelte | 18 +++++ svelte/src/filesystem/viewers/Audio.svelte | 14 +++- .../src/filesystem/viewers/FilePreview.svelte | 5 ++ svelte/src/filesystem/viewers/Video.svelte | 49 ++++--------- 9 files changed, 147 insertions(+), 74 deletions(-) diff --git a/svelte/src/file_viewer/DetailsWindow.svelte b/svelte/src/file_viewer/DetailsWindow.svelte index c398292..b847ad7 100644 --- a/svelte/src/file_viewer/DetailsWindow.svelte +++ b/svelte/src/file_viewer/DetailsWindow.svelte @@ -213,23 +213,39 @@ onMount(() => {

Keyboard Controls

- - - - - - - - - - - - - - - - -
File Shortcuts
c = Copy URL of this page
i = Toggle details window (this window) (info)
s = Download the file you are currently viewing (save)
q = Close the window (quit)
List Shortcuts
a or ← = View previous item in list
d or → = View next item in list
r = Toggle shuffle (random)
SHIFT + s = Download all the files in the list as a zip archive
Video Shortcuts
h = Skip 20 seconds backward
j = Skip 5 seconds backward
k = Skip 5 seconds forward
l = Skip 20 seconds forward
+ +

Global

+
+
c
Copy page URL
+
s
Download current file
+
q
Close window
+
g
Grab file (copy to your account)
+
i
Show details window
+
e
Show edit window
+
m
Show embed window
+
r
Show abuse report window
+
+ +

List

+
+
a or ←
Previous file
+
d or →
Next file
+
shift + s
Download all files as zip
+
u
Upload files to album
+
+ +

Video / audio

+
+
space
Pause / resume playback
+
f
Enter fullscreen
+
esc
Exit fullscreen
+
h
Skip 20 seconds backward
+
j
Skip 5 seconds backward
+
k
Skip 5 seconds forward
+
l
Skip 20 seconds forward
+
,
Skip 40ms backward
+
.
Skip 40ms forward
+
diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte index d51e0c6..91f4710 100644 --- a/svelte/src/file_viewer/FileViewer.svelte +++ b/svelte/src/file_viewer/FileViewer.svelte @@ -326,6 +326,24 @@ const keyboard_event = evt => { case " ": // Spacebar pauses / unpauses video and audio playback file_preview.toggle_playback() break + case "h": + file_preview.seek(-20) + break + case "j": + file_preview.seek(-5) + break + case "k": + file_preview.seek(5) + break + case "l": + file_preview.seek(20) + break + case ",": + file_preview.seek(-0.04) // Roughly a single frame.. assuming 25fps + break + case ".": + file_preview.seek(0.04) + break case "s": case "S": if (evt.shiftKey) { diff --git a/svelte/src/file_viewer/viewers/Audio.svelte b/svelte/src/file_viewer/viewers/Audio.svelte index ebbfcba..9c8b234 100644 --- a/svelte/src/file_viewer/viewers/Audio.svelte +++ b/svelte/src/file_viewer/viewers/Audio.svelte @@ -52,6 +52,15 @@ 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 + } +}
diff --git a/svelte/src/file_viewer/viewers/FilePreview.svelte b/svelte/src/file_viewer/viewers/FilePreview.svelte index 9d39606..5c2f54c 100644 --- a/svelte/src/file_viewer/viewers/FilePreview.svelte +++ b/svelte/src/file_viewer/viewers/FilePreview.svelte @@ -52,6 +52,11 @@ export const toggle_playback = () => { viewer.toggle_playback() } } +export const seek = delta => { + if (viewer && viewer.seek) { + viewer.seek(delta) + } +} {#if viewer_type === "loading"} diff --git a/svelte/src/file_viewer/viewers/Video.svelte b/svelte/src/file_viewer/viewers/Video.svelte index dffa9a1..862118f 100644 --- a/svelte/src/file_viewer/viewers/Video.svelte +++ b/svelte/src/file_viewer/viewers/Video.svelte @@ -51,6 +51,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 @@ -64,14 +74,6 @@ onMount(() => { const download = () => { dispatch("download", {}) } -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 @@ -98,14 +100,8 @@ const keypress = e => { 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) + if (e.key === "f") { + fullscreen() } } @@ -150,7 +146,7 @@ const keypress = e => { skip_previous {/if} - - {#if is_list} diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte index 2815e84..b48dab6 100644 --- a/svelte/src/filesystem/Filesystem.svelte +++ b/svelte/src/filesystem/Filesystem.svelte @@ -90,6 +90,24 @@ const keydown = e => { file_preview.toggle_playback() } break + case "h": + file_preview.seek(-20) + break + case "j": + file_preview.seek(-5) + break + case "k": + file_preview.seek(5) + break + case "l": + file_preview.seek(20) + break + case ",": + file_preview.seek(-0.04) // Roughly a single frame.. assuming 25fps + break + case ".": + file_preview.seek(0.04) + break default: action_performed = false } diff --git a/svelte/src/filesystem/viewers/Audio.svelte b/svelte/src/filesystem/viewers/Audio.svelte index 198dc09..5d4831e 100644 --- a/svelte/src/filesystem/viewers/Audio.svelte +++ b/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(() => {
- + - +
diff --git a/svelte/src/filesystem/viewers/FilePreview.svelte b/svelte/src/filesystem/viewers/FilePreview.svelte index f827c53..3a53791 100644 --- a/svelte/src/filesystem/viewers/FilePreview.svelte +++ b/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) + } +} {#if viewer_type === ""} diff --git a/svelte/src/filesystem/viewers/Video.svelte b/svelte/src/filesystem/viewers/Video.svelte index 148ca59..fb5099c 100644 --- a/svelte/src/filesystem/viewers/Video.svelte +++ b/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) - } -} - -
{#if $nav.base.file_type === "video/x-matroska" || @@ -137,7 +112,7 @@ const keypress = e => { - -