DMC/multiplayer-ce
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved volume handling on touch devices

Browse Source 
The mute button no longer mutes when used on a touch device. Instead, it only
causes the volume slider to be displayed so the user can set the desired
volume. Also updated the volume icon to show as muted if the volume is
set to zero.
This commit is contained in:
Erik Thuning 2025-01-30 14:19:27 +01:00
parent 10e07c32bf
commit 633d9436f4
1 changed files with 33 additions and 17 deletions

50
multiplayer.js

@ -1227,26 +1227,42 @@ input[type="range"]::-ms-track {
'step': '0.01'});
this._volumeSlider.value = 1;
this._volumeButton.addEventListener('click', (event) => {
const audio = this._audioSource;
if(!audio.muted) {
this._volumeSlider.value = 0;
audio.muted = true;
localStorage.setItem('multi-player-muted', true);
} else {
this._volumeSlider.value = audio.volume;
audio.muted = false;
localStorage.removeItem('multi-player-muted');
}
this.toggleButtonState(this._volumeButton);
});
if(window.matchMedia("(hover: hover)").matches) {
// Only mute on click when on a device where hovering is
// possible, otherwise touch users have to mute in order to
// see the volume slider.
this._volumeButton.addEventListener('click', (event) => {
const source = this._audioSource;
const muteStore = 'multi-player-muted';
if(!source.muted) {
this._volumeSlider.value = 0;
source.muted = true;
localStorage.setItem(muteStore, true);
} else {
this._volumeSlider.value = source.volume;
source.muted = false;
localStorage.removeItem(muteStore);
}
this.toggleButtonState(this._volumeButton);
});
}
this._volumeSlider.addEventListener('input', (event) => {
const volume = this._volumeSlider.valueAsNumber;
this._audioSource.volume = volume;
if(this._audioSource.muted === true) {
this._volumeButton.click();
}
const source = this._audioSource;
const muteStore = 'multi-player-muted';
source.volume = volume;
localStorage.setItem('multi-player-volume', volume);
if(source.volume === 0
&& ! localStorage.getItem(muteStore)) {
// Volume was just lowered to 0
localStorage.setItem(muteStore, true);
this.toggleButtonState(this._volumeButton);
} else if (source.volume !== 0
&& localStorage.getItem(muteStore)) {
// Volume was just raised from 0
localStorage.removeItem(muteStore);
this.toggleButtonState(this._volumeButton);
}
});
this._elapsed = parent.createChild('span', {'id': 'elapsed'});