Toggle audio/video playback with spacebar

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}