noby
/
workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Store muted setting of audio player in local storage 

This commit was originally authored by @TabascoEye, then rebased and
improved by @pizkaz:

* refactors local user storage, adding audio player settings
* stores "muted" state of audio player in local store
This commit is contained in:
TabascoEye 2021-01-29 14:42:13 +01:00 committed by PizZaKatZe
parent 5bd6f49846
commit e6accd711d
2 changed files with 54 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
front/src/Connexion/LocalUserStore.ts
View File

@ -1,12 +1,15 @@
import {LocalUser} from "./LocalUser";
const characterLayersKey = 'characterLayers';
const gameQualityKey = 'gameQuality';
const videoQualityKey = 'videoQuality';
const playerNameKey = 'playerName';
const selectedPlayerKey = 'selectedPlayer';
const customCursorPositionKey = 'customCursorPosition';
const characterLayersKey = 'characterLayers';
const gameQualityKey = 'gameQuality';
const videoQualityKey = 'videoQuality';
const audioPlayerVolumeKey = 'audioVolume';
const audioPlayerMuteKey = 'audioMute';
//todo: add localstorage fallback
class LocalUserStore {
saveUser(localUser: LocalUser) {
localStorage.setItem('localUser', JSON.stringify(localUser));
}
@ -14,48 +17,62 @@ class LocalUserStore {
const data = localStorage.getItem('localUser');
return data ? JSON.parse(data) : null;
}
setName(name:string): void {
window.localStorage.setItem('playerName', name);
localStorage.setItem(playerNameKey, name);
}
getName(): string {
return window.localStorage.getItem('playerName') ?? '';
return localStorage.getItem(playerNameKey) || '';
}
setPlayerCharacterIndex(playerCharacterIndex: number): void {
window.localStorage.setItem('selectedPlayer', ''+playerCharacterIndex);
localStorage.setItem(selectedPlayerKey, ''+playerCharacterIndex);
}
getPlayerCharacterIndex(): number {
return parseInt(window.localStorage.getItem('selectedPlayer') || '');
return parseInt(localStorage.getItem(selectedPlayerKey) || '');
}
setCustomCursorPosition(activeRow:number, selectedLayers: number[]): void {
window.localStorage.setItem('customCursorPosition', JSON.stringify({activeRow, selectedLayers}));
localStorage.setItem(customCursorPositionKey, JSON.stringify({activeRow, selectedLayers}));
}
getCustomCursorPosition(): {activeRow:number, selectedLayers:number[]}|null {
return JSON.parse(window.localStorage.getItem('customCursorPosition') || "null");
return JSON.parse(localStorage.getItem(customCursorPositionKey) || "null");
}
setCharacterLayers(layers: string[]): void {
window.localStorage.setItem(characterLayersKey, JSON.stringify(layers));
localStorage.setItem(characterLayersKey, JSON.stringify(layers));
}
getCharacterLayers(): string[]|null {
return JSON.parse(window.localStorage.getItem(characterLayersKey) || "null");
}
getGameQualityValue(): number {
return parseInt(window.localStorage.getItem(gameQualityKey) || '') || 60;
return JSON.parse(localStorage.getItem(characterLayersKey) || "null");
}
setGameQualityValue(value: number): void {
localStorage.setItem(gameQualityKey, '' + value);
}
getVideoQualityValue(): number {
return parseInt(window.localStorage.getItem(videoQualityKey) || '') || 20;
getGameQualityValue(): number {
return parseInt(localStorage.getItem(gameQualityKey) || '60');
}
setVideoQualityValue(value: number): void {
localStorage.setItem(videoQualityKey, '' + value);
}
getVideoQualityValue(): number {
return parseInt(localStorage.getItem(videoQualityKey) || '20');
}
setAudioPlayerVolume(value: number): void {
localStorage.setItem(audioPlayerVolumeKey, '' + value);
}
getAudioPlayerVolume(): number {
return parseFloat(localStorage.getItem(audioPlayerVolumeKey) || '1');
}
setAudioPlayerMuted(value: boolean): void {
localStorage.setItem(audioPlayerMuteKey, value.toString());
}
getAudioPlayerMuted(): boolean {
return localStorage.getItem(audioPlayerMuteKey) === 'true';
}
}
export const localUserStore = new LocalUserStore();
export const localUserStore = new LocalUserStore();

27
front/src/WebRtc/AudioManager.ts
View File

@ -1,5 +1,6 @@
import {HtmlUtils} from "./HtmlUtils";
import {isUndefined} from "generic-type-guard";
import {localUserStore} from "../Connexion/LocalUserStore";
enum audioStates {
closed = 0,
@ -10,6 +11,7 @@ enum audioStates {
const audioPlayerDivId = "audioplayer";
const audioPlayerCtrlId = "audioplayerctrl";
const audioPlayerVolId = "audioplayer_volume";
const audioPlayerMuteId = "audioplayer_volume_icon_playing";
const animationTime = 500;
class AudioManager {
@ -19,6 +21,7 @@ class AudioManager {
private audioPlayerCtrl: HTMLDivElement;
private audioPlayerElem: HTMLAudioElement | undefined;
private audioPlayerVol: HTMLInputElement;
private audioPlayerMute: HTMLInputElement;
private volume = 1;
private muted = false;
@ -29,16 +32,15 @@ class AudioManager {
this.audioPlayerDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(audioPlayerDivId);
this.audioPlayerCtrl = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(audioPlayerCtrlId);
this.audioPlayerVol = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(audioPlayerVolId);
this.audioPlayerMute = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(audioPlayerMuteId);
const storedVolume = localStorage.getItem('volume')
if (storedVolume === null) {
this.setVolume(1);
} else {
this.volume = parseFloat(storedVolume);
this.audioPlayerVol.value = storedVolume;
}
this.volume = localUserStore.getAudioPlayerVolume();
this.audioPlayerVol.value = '' + this.volume;
this.muted = localUserStore.getAudioPlayerMuted();
if (this.muted) {
this.audioPlayerMute.classList.add('muted');
}
}
public playAudio(url: string|number|boolean, mapDirUrl: string, volume: number|undefined, loop=false): void {
@ -97,7 +99,7 @@ class AudioManager {
private setVolume(volume: number): void {
this.volume = volume;
localStorage.setItem('volume', '' + volume);
localUserStore.setAudioPlayerVolume(volume);
}
private loadAudio(url: string, volume: number|undefined): void {
@ -123,14 +125,15 @@ class AudioManager {
this.audioPlayerElem.play();
const muteElem = HtmlUtils.getElementByIdOrFail<HTMLInputElement>('audioplayer_mute');
muteElem.onclick = (ev: Event)=> {
muteElem.onclick = (ev: Event) => {
this.muted = !this.muted;
this.changeVolume();
localUserStore.setAudioPlayerMuted(this.muted);
if (this.muted) {
HtmlUtils.getElementByIdOrFail<HTMLInputElement>('audioplayer_volume_icon_playing').classList.add('muted');
this.audioPlayerMute.classList.add('muted');
} else {
HtmlUtils.getElementByIdOrFail<HTMLInputElement>('audioplayer_volume_icon_playing').classList.remove('muted');
this.audioPlayerMute.classList.remove('muted');
}
}