Toggle audio/video playback with spacebar

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) {

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}

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

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>

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)
 		}

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}

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;

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) */

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>

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}

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

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>

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}