pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add shortcut m to mute audio

Browse Source
This commit is contained in:
Wim Brand
2025-02-03 15:38:07 +01:00
parent f9b330d4d1
commit 99ad9ab2d5
9 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
svelte/src/file_viewer/DetailsWindow.svelte
View File

@@ -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>

8
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -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>

5
svelte/src/file_viewer/viewers/Audio.svelte
View File

@@ -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

7
svelte/src/file_viewer/viewers/FilePreview.svelte
View File

@@ -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)

14
svelte/src/file_viewer/viewers/Video.svelte
View File

@@ -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}

5
svelte/src/filesystem/Filesystem.svelte
View File

@@ -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

5
svelte/src/filesystem/viewers/Audio.svelte
View File

@@ -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

7
svelte/src/filesystem/viewers/FilePreview.svelte
View File

@@ -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)

15
svelte/src/filesystem/viewers/Video.svelte
View File

@@ -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}