_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #1452 from Lurkars/audioPlayerImprovements

Browse Source 
some fixes on the audio player controls
This commit is contained in:
David Négrier 2021-09-14 14:41:40 +02:00 committed by GitHub
commit 9006283c90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
front/src/Components/AudioManager/AudioManager.svelte
View File

@ -5,9 +5,9 @@
audioManagerFileStore, audioManagerFileStore,
audioManagerVolumeStore, audioManagerVolumeStore,
} from "../../Stores/AudioManagerStore"; } from "../../Stores/AudioManagerStore";
import {get} from "svelte/store"; import { get } from "svelte/store";
import type { Unsubscriber } from "svelte/store"; import type { Unsubscriber } from "svelte/store";
import {onDestroy, onMount} from "svelte"; import { onDestroy, onMount } from "svelte";
let HTMLAudioPlayer: HTMLAudioElement; let HTMLAudioPlayer: HTMLAudioElement;
let audioPlayerVolumeIcon: HTMLElement; let audioPlayerVolumeIcon: HTMLElement;
@ -21,9 +21,9 @@
onMount(() => { onMount(() => {
volume = localUserStore.getAudioPlayerVolume(); volume = localUserStore.getAudioPlayerVolume();
audioManagerVolumeStore.setMuted(localUserStore.getAudioPlayerMuted()); audioManagerVolumeStore.setMuted(localUserStore.getAudioPlayerMuted());
setVolume(); changeVolume();
unsubscriberFileStore = audioManagerFileStore.subscribe(() =>{ unsubscriberFileStore = audioManagerFileStore.subscribe(() => {
HTMLAudioPlayer.pause(); HTMLAudioPlayer.pause();
HTMLAudioPlayer.loop = get(audioManagerVolumeStore).loop; HTMLAudioPlayer.loop = get(audioManagerVolumeStore).loop;
HTMLAudioPlayer.volume = get(audioManagerVolumeStore).volume; HTMLAudioPlayer.volume = get(audioManagerVolumeStore).volume;
@ -53,13 +53,7 @@
} }
}) })
function onMute() { function changeVolume() {
audioManagerVolumeStore.setMuted(!get(audioManagerVolumeStore).muted);
localUserStore.setAudioPlayerMuted(get(audioManagerVolumeStore).muted);
setVolume();
}
function setVolume() {
if (get(audioManagerVolumeStore).muted) { if (get(audioManagerVolumeStore).muted) {
audioPlayerVolumeIcon.classList.add('muted'); audioPlayerVolumeIcon.classList.add('muted');
audioPlayerVol.value = "0"; audioPlayerVol.value = "0";
@ -76,8 +70,22 @@
audioPlayerVolumeIcon.classList.remove('mid'); audioPlayerVolumeIcon.classList.remove('mid');
} }
} }
audioManagerVolumeStore.setVolume(volume) }
localUserStore.setAudioPlayerVolume(get(audioManagerVolumeStore).volume);
function onMute() {
const muted = !get(audioManagerVolumeStore).muted;
audioManagerVolumeStore.setMuted(muted);
localUserStore.setAudioPlayerMuted(muted);
changeVolume();
}
function setVolume() {
volume = parseFloat(audioPlayerVol.value);
audioManagerVolumeStore.setVolume(volume);
localUserStore.setAudioPlayerVolume(volume);
audioManagerVolumeStore.setMuted(false);
localUserStore.setAudioPlayerMuted(false);
changeVolume();
} }
function setDecrease() { function setDecrease() {
@ -108,8 +116,7 @@
</g> </g>
</svg> </svg>
</span> </span>
<input type="range" min="0" max="1" step="0.025" bind:value={volume} bind:this={audioPlayerVol} <input type="range" min="0" max="1" step="0.025" bind:this={audioPlayerVol} on:change={setVolume}>
on:change={setVolume}>
</div> </div>
<div class="audio-manager-reduce-conversation"> <div class="audio-manager-reduce-conversation">
<label> <label>
@ -135,7 +142,7 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background-color: rgb(0,0,0,0.5); background-color: rgb(0, 0, 0, 0.5);
display: grid; display: grid;
grid-template-rows: 50% 50%; grid-template-rows: 50% 50%;
color: whitesmoke; color: whitesmoke;