Toggle audio/video playback with spacebar

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}