From e6accd711d6160016b67bedd70318cc2d3884a51 Mon Sep 17 00:00:00 2001 From: TabascoEye Date: Fri, 29 Jan 2021 14:42:13 +0100 Subject: [PATCH] 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 --- front/src/Connexion/LocalUserStore.ts | 61 +++++++++++++++++---------- front/src/WebRtc/AudioManager.ts | 27 ++++++------ 2 files changed, 54 insertions(+), 34 deletions(-) diff --git a/front/src/Connexion/LocalUserStore.ts b/front/src/Connexion/LocalUserStore.ts index 8ac8c7b2..1e4267de 100644 --- a/front/src/Connexion/LocalUserStore.ts +++ b/front/src/Connexion/LocalUserStore.ts @@ -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(); \ No newline at end of file +export const localUserStore = new LocalUserStore(); diff --git a/front/src/WebRtc/AudioManager.ts b/front/src/WebRtc/AudioManager.ts index 924f1fac..60255a77 100644 --- a/front/src/WebRtc/AudioManager.ts +++ b/front/src/WebRtc/AudioManager.ts @@ -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(audioPlayerDivId); this.audioPlayerCtrl = HtmlUtils.getElementByIdOrFail(audioPlayerCtrlId); this.audioPlayerVol = HtmlUtils.getElementByIdOrFail(audioPlayerVolId); + this.audioPlayerMute = HtmlUtils.getElementByIdOrFail(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('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('audioplayer_volume_icon_playing').classList.add('muted'); + this.audioPlayerMute.classList.add('muted'); } else { - HtmlUtils.getElementByIdOrFail('audioplayer_volume_icon_playing').classList.remove('muted'); + this.audioPlayerMute.classList.remove('muted'); } }