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}