From a0ccbb55bec27de986e34a7fbb5ac3945e2e1b8f Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Thu, 11 Apr 2024 20:32:55 +0200
Subject: [PATCH] Toggle audio/video playback with spacebar

---
 svelte/src/file_viewer/FileViewer.svelte       |  3 +++
 svelte/src/file_viewer/viewers/Audio.svelte    |  6 ++++--
 .../src/file_viewer/viewers/FilePreview.svelte |  6 ++++++
 svelte/src/file_viewer/viewers/Image.svelte    |  8 ++++----
 .../file_viewer/viewers/SwipeNavigate.svelte   | 14 ++++++++------
 svelte/src/file_viewer/viewers/Video.svelte    |  8 +++++---
 svelte/src/filesystem/Breadcrumbs.svelte       |  2 +-
 svelte/src/filesystem/Filesystem.svelte        |  8 +++++++-
 svelte/src/filesystem/Menu.svelte              |  2 +-
 svelte/src/filesystem/viewers/Audio.svelte     |  6 ++++--
 .../src/filesystem/viewers/FilePreview.svelte  |  6 ++++++
 svelte/src/filesystem/viewers/Image.svelte     | 18 +++++++++++++-----
 svelte/src/filesystem/viewers/Video.svelte     |  8 +++++---
 13 files changed, 67 insertions(+), 28 deletions(-)

diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte
index 12a42ba..bb619f7 100644
--- a/svelte/src/file_viewer/FileViewer.svelte
+++ b/svelte/src/file_viewer/FileViewer.svelte
@@ -340,6 +340,9 @@ const keyboard_event = evt => {
 				list_navigator.next()
 			}
 			break
+		case " ": // Spacebar pauses / unpauses video and audio playback
+			file_preview.toggle_playback()
+			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 468d114..ebbfcba 100644
--- a/svelte/src/file_viewer/viewers/Audio.svelte
+++ b/svelte/src/file_viewer/viewers/Audio.svelte
@@ -48,7 +48,9 @@ export const set_file = async f => {
 	}
 }
 
-const toggle_play = () => playing ? player.pause() : player.play()
+export const toggle_playback = () => {
+	playing ? player.pause() : player.play()
+}
 
 </script>
 
@@ -63,7 +65,7 @@ const toggle_play = () => playing ? player.pause() : player.play()
 	<button on:click={() => player.currentTime -= 10 }>
 		<i class="icon">replay_10</i>
 	</button>
-	<button on:click={toggle_play}>
+	<button on:click={toggle_playback}>
 		{#if playing}
 			<i class="icon">pause</i>
 		{:else}
diff --git a/svelte/src/file_viewer/viewers/FilePreview.svelte b/svelte/src/file_viewer/viewers/FilePreview.svelte
index ed25ee7..dd4d6ff 100644
--- a/svelte/src/file_viewer/viewers/FilePreview.svelte
+++ b/svelte/src/file_viewer/viewers/FilePreview.svelte
@@ -46,6 +46,12 @@ export const set_file = async file => {
 		viewer.set_file(file)
 	}
 }
+
+export const toggle_playback = () => {
+	if (viewer && viewer.toggle_playback) {
+		viewer.toggle_playback()
+	}
+}
 </script>
 
 {#if viewer_type === "loading"}
diff --git a/svelte/src/file_viewer/viewers/Image.svelte b/svelte/src/file_viewer/viewers/Image.svelte
index 971201d..4ce786c 100644
--- a/svelte/src/file_viewer/viewers/Image.svelte
+++ b/svelte/src/file_viewer/viewers/Image.svelte
@@ -65,10 +65,10 @@ const mouseup = (e) => {
 	}
 }
 
-let container_style = ""
+let swipe_style = ""
 const on_load = () => {
 	dispatch("loading", false)
-	container_style = ""
+	swipe_style = ""
 }
 </script>
 
@@ -79,10 +79,9 @@ const on_load = () => {
 	class="container"
 	class:zoom
 	use:swipe_nav={!zoom && is_list}
-	on:style={e => container_style = e.detail}
+	on:style={e => swipe_style = e.detail}
 	on:prev
 	on:next
-	style={container_style}
 >
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<img
@@ -93,6 +92,7 @@ const on_load = () => {
 		on:mousedown={mousedown}
 		class="image"
 		class:zoom
+		style={swipe_style}
 		src={file.get_href}
 		alt={file.name} />
 </div>
diff --git a/svelte/src/file_viewer/viewers/SwipeNavigate.svelte b/svelte/src/file_viewer/viewers/SwipeNavigate.svelte
index 9ee7fdd..1a04870 100644
--- a/svelte/src/file_viewer/viewers/SwipeNavigate.svelte
+++ b/svelte/src/file_viewer/viewers/SwipeNavigate.svelte
@@ -16,13 +16,15 @@ export const swipe_nav = (node, swipe_enabled) => {
 			return
 		}
 
-		let offset_x = e.touches[0].clientX - start_x
-		let abs_x = Math.abs(offset_x)
-		let abs_y = Math.abs(e.touches[0].clientY - start_y)
-		let neg = offset_x < 0 ? -1 : 1
+		const offset_x = e.touches[0].clientX - start_x
+		const abs_x = Math.abs(offset_x)
+		const abs_y = Math.abs(e.touches[0].clientY - start_y)
+		const neg = offset_x < 0 ? -1 : 1
 
-		if (abs_x > 100 && abs_y < abs_x/3) {
-			set_offset((abs_x-100)*neg, false)
+		// The cursor must have moved at least 50 pixels and three times as much
+		// on the x axis than the y axis for it to count as a swipe
+		if (abs_x > 50 && abs_y < abs_x/3) {
+			set_offset((abs_x-50)*neg, false)
 		} else {
 			set_offset(0, true)
 		}
diff --git a/svelte/src/file_viewer/viewers/Video.svelte b/svelte/src/file_viewer/viewers/Video.svelte
index 45b8d9b..d5272b6 100644
--- a/svelte/src/file_viewer/viewers/Video.svelte
+++ b/svelte/src/file_viewer/viewers/Video.svelte
@@ -47,6 +47,10 @@ export const set_file = async f => {
 	}
 }
 
+export const toggle_playback = () => {
+	playing ? player.pause() : player.play()
+}
+
 onMount(() => {
 	if ('mediaSession' in navigator) {
 		media_session = true
@@ -60,8 +64,6 @@ onMount(() => {
 
 const download = () => { dispatch("download", {}) }
 
-const toggle_play = () => playing ? player.pause() : player.play()
-
 const seek_relative = delta => {
 	if (player.fastSeek) {
 		player.fastSeek(player.currentTime + delta)
@@ -124,7 +126,7 @@ const fullscreen = () => {
 					<button on:click={() => seek_relative(-10)}>
 						<i class="icon">replay_10</i>
 					</button>
-					<button on:click={toggle_play} class="button_highlight">
+					<button on:click={toggle_playback} class="button_highlight">
 						{#if playing}
 							<i class="icon">pause</i>
 						{:else}
diff --git a/svelte/src/filesystem/Breadcrumbs.svelte b/svelte/src/filesystem/Breadcrumbs.svelte
index 184bbf9..8763037 100644
--- a/svelte/src/filesystem/Breadcrumbs.svelte
+++ b/svelte/src/filesystem/Breadcrumbs.svelte
@@ -43,7 +43,7 @@ export let fs_navigator
 	flex-direction: row;
 }
 .node_name {
-	max-width: 25vw;
+	max-width: 20vw;
 	overflow-x: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index e1dbbe5..c62ea55 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -15,6 +15,7 @@ import Menu from './Menu.svelte';
 
 let loading = true
 let file_viewer
+let file_preview
 let toolbar
 let upload_widget
 let download_frame
@@ -78,6 +79,11 @@ const keydown = e => {
 		case "ArrowRight":
 			fs_navigator.open_sibling(1)
 			break;
+		case " ": // Spacebar pauses / unpauses video and audio playback
+			if (file_preview) {
+				file_preview.toggle_playback()
+			}
+			break
 		default:
 			action_performed = false
 	}
@@ -143,6 +149,7 @@ const update_css = path => document.documentElement.style = branding_from_path(p
 		<div class="file_preview">
 			{#if view === "file"}
 				<FilePreview
+					bind:this={file_preview}
 					fs_navigator={fs_navigator}
 					state={state}
 					edit_window={edit_window}
@@ -225,7 +232,6 @@ const update_css = path => document.documentElement.style = branding_from_path(p
 	flex-direction: row;
 	text-align: left;
 	box-shadow: none;
-	padding: 2px;
 }
 
 /* File preview area (row 2) */
diff --git a/svelte/src/filesystem/Menu.svelte b/svelte/src/filesystem/Menu.svelte
index 2217b61..df18ea0 100644
--- a/svelte/src/filesystem/Menu.svelte
+++ b/svelte/src/filesystem/Menu.svelte
@@ -25,7 +25,7 @@ const click = e => {
 
 <div class="wrapper">
 	<button bind:this={button} on:click={open} href="/user" class="button round" title="Menu">
-		<PixeldrainLogo style="height: 1.8em; width: 1.8em; margin: 0;"></PixeldrainLogo>
+		<PixeldrainLogo style="height: 1.8em; width: 1.8em; margin: 2px;"></PixeldrainLogo>
 		<span class="button_username">
 			{window.user.username === "" ? "Pixeldrain" : window.user.username}
 		</span>
diff --git a/svelte/src/filesystem/viewers/Audio.svelte b/svelte/src/filesystem/viewers/Audio.svelte
index 554a23c..2438995 100644
--- a/svelte/src/filesystem/viewers/Audio.svelte
+++ b/svelte/src/filesystem/viewers/Audio.svelte
@@ -11,7 +11,9 @@ let playing = false
 let media_session = false
 let siblings = []
 
-const toggle_play = () => playing ? player.pause() : player.play()
+export const toggle_playback = () => {
+	playing ? player.pause() : player.play()
+}
 
 export const update = async () => {
 	if (media_session) {
@@ -56,7 +58,7 @@ onMount(() => {
 	<div style="text-align: center;">
 		<button on:click={() => fs_navigator.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={toggle_play}>
+		<button on:click={toggle_playback}>
 			{#if playing}
 				<i class="icon">pause</i>
 			{:else}
diff --git a/svelte/src/filesystem/viewers/FilePreview.svelte b/svelte/src/filesystem/viewers/FilePreview.svelte
index e75c2ac..d5c3776 100644
--- a/svelte/src/filesystem/viewers/FilePreview.svelte
+++ b/svelte/src/filesystem/viewers/FilePreview.svelte
@@ -39,6 +39,12 @@ const state_update = async (base) => {
 		viewer.update()
 	}
 }
+
+export const toggle_playback = () => {
+	if (viewer && viewer.toggle_playback) {
+		viewer.toggle_playback()
+	}
+}
 </script>
 
 {#if viewer_type === ""}
diff --git a/svelte/src/filesystem/viewers/Image.svelte b/svelte/src/filesystem/viewers/Image.svelte
index c6fd888..73af2a2 100644
--- a/svelte/src/filesystem/viewers/Image.svelte
+++ b/svelte/src/filesystem/viewers/Image.svelte
@@ -10,10 +10,15 @@ let container
 let zoom = false
 let x, y = 0
 let dragging = false
-let container_style = ""
 
 export const update = () => {
-	container_style = ""
+	dispatch("loading", true)
+}
+
+let swipe_style = ""
+const on_load = () => {
+	dispatch("loading", false)
+	swipe_style = ""
 }
 
 const mousedown = (e) => {
@@ -58,17 +63,20 @@ const mouseup = (e) => {
 	class="container"
 	class:zoom
 	use:swipe_nav={!zoom}
-	on:style={e => container_style = e.detail}
+	on:style={e => swipe_style = e.detail}
 	on:prev={() => dispatch("open_sibling", -1)}
 	on:next={() => dispatch("open_sibling", 1)}
-	style={container_style}
 >
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<img
 		on:dblclick={() => {zoom = !zoom}}
 		on:doubletap={() => {zoom = !zoom}}
 		on:mousedown={mousedown}
-		class="image" class:zoom
+		on:load={on_load}
+		on:error={on_load}
+		class="image"
+		class:zoom
+		style={swipe_style}
 		src={fs_path_url(state.base.path)}
 		alt="no description available" />
 </div>
diff --git a/svelte/src/filesystem/viewers/Video.svelte b/svelte/src/filesystem/viewers/Video.svelte
index 989f0b0..7e3c7ee 100644
--- a/svelte/src/filesystem/viewers/Video.svelte
+++ b/svelte/src/filesystem/viewers/Video.svelte
@@ -37,6 +37,10 @@ export const update = async () => {
 	}
 }
 
+export const toggle_playback = () => {
+	playing ? player.pause() : player.play()
+}
+
 onMount(() => {
 	if ('mediaSession' in navigator) {
 		media_session = true
@@ -48,8 +52,6 @@ onMount(() => {
 	}
 })
 
-const toggle_play = () => playing ? player.pause() : player.play()
-
 const seek_relative = delta => {
 	if (player.fastSeek) {
 		player.fastSeek(player.currentTime + delta)
@@ -111,7 +113,7 @@ const fullscreen = () => {
 			<button on:click={() => seek_relative(-10)}>
 				<i class="icon">replay_10</i>
 			</button>
-			<button on:click={toggle_play} class="button_highlight">
+			<button on:click={toggle_playback} class="button_highlight">
 				{#if playing}
 					<i class="icon">pause</i>
 				{:else}