Add shortcut m to mute audio

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>

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>

svelte/src/file_viewer/viewers/Audio.svelte

@@ -48,9 +48,8 @@ export const set_file = async f => {
 	}
 }
 
-export const toggle_playback = () => {
+export const toggle_playback = () => playing ? player.pause() : player.play()
-	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

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)

svelte/src/file_viewer/viewers/Video.svelte

@@ -47,9 +47,8 @@ export const set_file = async f => {
 	}
 }
 
-export const toggle_playback = () => {
+export const toggle_playback = () => playing ? player.pause() : player.play()
-	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}

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

svelte/src/filesystem/viewers/Audio.svelte

@@ -10,9 +10,8 @@ let playing = false
 let media_session = false
 let siblings = []
 
-export const toggle_playback = () => {
+export const toggle_playback = () => playing ? player.pause() : player.play()
-	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

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)

svelte/src/filesystem/viewers/Video.svelte

@@ -37,9 +37,8 @@ export const update = async () => {
 	}
 }
 
-export const toggle_playback = () => {
+export const toggle_playback = () => playing ? player.pause() : player.play()
-	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}