From 99ad9ab2d5bd88cf8de442cabba093aec083dad9 Mon Sep 17 00:00:00 2001
From: Wim Brand <wim@fornaxian.tech>
Date: Mon, 3 Feb 2025 15:38:07 +0100
Subject: [PATCH] Add shortcut m to mute audio

---
 svelte/src/file_viewer/DetailsWindow.svelte       |  4 ++--
 svelte/src/file_viewer/FileViewer.svelte          |  8 ++++----
 svelte/src/file_viewer/viewers/Audio.svelte       |  5 ++---
 svelte/src/file_viewer/viewers/FilePreview.svelte |  7 +++++++
 svelte/src/file_viewer/viewers/Video.svelte       | 14 +++-----------
 svelte/src/filesystem/Filesystem.svelte           |  5 +++++
 svelte/src/filesystem/viewers/Audio.svelte        |  5 ++---
 svelte/src/filesystem/viewers/FilePreview.svelte  |  7 +++++++
 svelte/src/filesystem/viewers/Video.svelte        | 15 +++------------
 9 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/svelte/src/file_viewer/DetailsWindow.svelte b/svelte/src/file_viewer/DetailsWindow.svelte
index b372d3d..1d70aba 100644
--- a/svelte/src/file_viewer/DetailsWindow.svelte
+++ b/svelte/src/file_viewer/DetailsWindow.svelte
@@ -224,7 +224,6 @@ onMount(() => {
 		<div><div>g</div><div>Grab file (copy to your account)</div></div>
 		<div><div>i</div><div>Show details window</div></div>
 		<div><div>e</div><div>Show edit window</div></div>
-		<div><div>m</div><div>Show embed window</div></div>
 		<div><div>r</div><div>Show abuse report window</div></div>
 	</div>
 
@@ -239,8 +238,9 @@ onMount(() => {
 	<h4>Video / audio</h4>
 	<div class="shortcuts">
 		<div><div>space</div><div>Pause / resume playback</div></div>
-		<div><div>f</div><div>Enter fullscreen</div></div>
+		<div><div>f</div><div>Toggle fullscreen</div></div>
 		<div><div>esc</div><div>Exit fullscreen</div></div>
+		<div><div>m</div><div>Mute / unmute playback</div></div>
 		<div><div>h</div><div>Skip 20 seconds backward</div></div>
 		<div><div>j</div><div>Skip 5 seconds backward</div></div>
 		<div><div>k</div><div>Skip 5 seconds forward</div></div>
diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte
index 4c5db48..6962080 100644
--- a/svelte/src/file_viewer/FileViewer.svelte
+++ b/svelte/src/file_viewer/FileViewer.svelte
@@ -329,6 +329,9 @@ const keyboard_event = evt => {
 				evt.stopPropagation()
 			}
 			break
+		case "m": // M to mute video / audio
+			file_preview.toggle_mute()
+			break
 		case "h":
 			file_preview.seek(-20)
 			break
@@ -369,9 +372,6 @@ const keyboard_event = evt => {
 				edit_window.toggle()
 			}
 			break
-		case "m": // M to open the embed window
-			embed_window.toggle()
-			break
 		case "g": // G to grab this file
 			grab_file()
 			break
@@ -542,7 +542,7 @@ const keyboard_event = evt => {
 					on:click={embed_window.toggle}
 					class:button_highlight={embed_visible}>
 					<i class="icon">code</i>
-					<span>E<u>m</u>bed</span>
+					<span>Embed</span>
 				</button>
 			{/if}
 		</div>
diff --git a/svelte/src/file_viewer/viewers/Audio.svelte b/svelte/src/file_viewer/viewers/Audio.svelte
index 15e06c7..e91d1b5 100644
--- a/svelte/src/file_viewer/viewers/Audio.svelte
+++ b/svelte/src/file_viewer/viewers/Audio.svelte
@@ -48,9 +48,8 @@ export const set_file = async f => {
 	}
 }
 
-export const toggle_playback = () => {
-	playing ? player.pause() : player.play()
-}
+export const toggle_playback = () => playing ? player.pause() : player.play()
+export const toggle_mute = () => player.muted = !player.muted
 
 export const seek = delta => {
 	// fastseek can be pretty imprecise, so we don't use it for small seeks
diff --git a/svelte/src/file_viewer/viewers/FilePreview.svelte b/svelte/src/file_viewer/viewers/FilePreview.svelte
index 8294d54..ec9c7a0 100644
--- a/svelte/src/file_viewer/viewers/FilePreview.svelte
+++ b/svelte/src/file_viewer/viewers/FilePreview.svelte
@@ -57,6 +57,13 @@ export const toggle_playback = () => {
 	}
 	return false
 }
+export const toggle_mute = () => {
+	if (viewer && viewer.toggle_mute) {
+		viewer.toggle_mute()
+		return true
+	}
+	return false
+}
 export const seek = delta => {
 	if (viewer && viewer.seek) {
 		viewer.seek(delta)
diff --git a/svelte/src/file_viewer/viewers/Video.svelte b/svelte/src/file_viewer/viewers/Video.svelte
index dc4da89..22291f0 100644
--- a/svelte/src/file_viewer/viewers/Video.svelte
+++ b/svelte/src/file_viewer/viewers/Video.svelte
@@ -47,9 +47,8 @@ export const set_file = async f => {
 	}
 }
 
-export const toggle_playback = () => {
-	playing ? player.pause() : player.play()
-}
+export const toggle_playback = () => playing ? player.pause() : player.play()
+export const toggle_mute = () => player.muted = !player.muted
 
 export const seek = delta => {
 	// fastseek can be pretty imprecise, so we don't use it for small seeks
@@ -74,13 +73,6 @@ onMount(() => {
 
 const download = () => { dispatch("download", {}) }
 
-const mute = () => {
-	if (player.muted) {
-		player.muted = false
-	} else {
-		player.muted = true
-	}
-}
 
 const fullscreen = () => {
 	if (document.fullscreenElement === null) {
@@ -178,7 +170,7 @@ const video_keydown = e => {
 						</button>
 					{/if}
 					<div style="width: 16px; height: 8px;"></div>
-					<button on:click={mute} class:button_red={player && player.muted}>
+					<button on:click={toggle_mute} class:button_red={player && player.muted}>
 						{#if player && player.muted}
 							<i class="icon">volume_off</i>
 						{:else}
diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index 6dbe316..376c7ac 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -89,6 +89,11 @@ const keydown = e => {
 				}
 			}
 			break
+		case "m": // M mutes / unmutes audio
+			if (file_preview) {
+				file_preview.toggle_mute()
+			}
+			break
 		case "h":
 			file_preview.seek(-20)
 			break
diff --git a/svelte/src/filesystem/viewers/Audio.svelte b/svelte/src/filesystem/viewers/Audio.svelte
index 955e0c3..c94227d 100644
--- a/svelte/src/filesystem/viewers/Audio.svelte
+++ b/svelte/src/filesystem/viewers/Audio.svelte
@@ -10,9 +10,8 @@ let playing = false
 let media_session = false
 let siblings = []
 
-export const toggle_playback = () => {
-	playing ? player.pause() : player.play()
-}
+export const toggle_playback = () => playing ? player.pause() : player.play()
+export const toggle_mute = () => player.muted = !player.muted
 
 export const seek = delta => {
 	// fastseek can be pretty imprecise, so we don't use it for small seeks
diff --git a/svelte/src/filesystem/viewers/FilePreview.svelte b/svelte/src/filesystem/viewers/FilePreview.svelte
index dbac06d..eabf7fd 100644
--- a/svelte/src/filesystem/viewers/FilePreview.svelte
+++ b/svelte/src/filesystem/viewers/FilePreview.svelte
@@ -50,6 +50,13 @@ export const toggle_playback = () => {
 	}
 	return false
 }
+export const toggle_mute = () => {
+	if (viewer && viewer.toggle_mute) {
+		viewer.toggle_mute()
+		return true
+	}
+	return false
+}
 export const seek = delta => {
 	if (viewer && viewer.seek) {
 		viewer.seek(delta)
diff --git a/svelte/src/filesystem/viewers/Video.svelte b/svelte/src/filesystem/viewers/Video.svelte
index 6bc531d..69c4dd5 100644
--- a/svelte/src/filesystem/viewers/Video.svelte
+++ b/svelte/src/filesystem/viewers/Video.svelte
@@ -37,9 +37,8 @@ export const update = async () => {
 	}
 }
 
-export const toggle_playback = () => {
-	playing ? player.pause() : player.play()
-}
+export const toggle_playback = () => playing ? player.pause() : player.play()
+export const toggle_mute = () => player.muted = !player.muted
 
 export const seek = delta => {
 	// fastseek can be pretty imprecise, so we don't use it for small seeks
@@ -62,14 +61,6 @@ onMount(() => {
 	}
 })
 
-const mute = () => {
-	if (player.muted) {
-		player.muted = false
-	} else {
-		player.muted = true
-	}
-}
-
 const fullscreen = () => {
 	if (document.fullscreenElement === null) {
 		player.requestFullscreen()
@@ -144,7 +135,7 @@ const video_keydown = e => {
 				<i class="icon">skip_next</i>
 			</button>
 			<div style="width: 16px; height: 8px;"></div>
-			<button on:click={mute} class:button_red={player && player.muted}>
+			<button on:click={toggle_mute} class:button_red={player && player.muted}>
 				{#if player && player.muted}
 					<i class="icon">volume_off</i>
 				{:else}