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

@@ -1,12 +1,15 @@
 import {LocalUser} from "./LocalUser";
 
-const characterLayersKey = 'characterLayers';
+const playerNameKey =           'playerName';
-const gameQualityKey = 'gameQuality';
+const selectedPlayerKey =       'selectedPlayer';
-const videoQualityKey = 'videoQuality';
+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");
+        return JSON.parse(localStorage.getItem(characterLayersKey) || "null");
-    }
-    
-    getGameQualityValue(): number {
-        return parseInt(window.localStorage.getItem(gameQualityKey) || '') || 60;
     }
+
     setGameQualityValue(value: number): void {
         localStorage.setItem(gameQualityKey, '' + value);
     }
-
+    getGameQualityValue(): number {
-    getVideoQualityValue(): number {
+        return parseInt(localStorage.getItem(gameQualityKey) || '60');
-        return parseInt(window.localStorage.getItem(videoQualityKey) || '') || 20;
     }
+
     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();

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<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')
+        this.volume = localUserStore.getAudioPlayerVolume();
-        if (storedVolume === null) {
-            this.setVolume(1);
-        } else {
-            this.volume = parseFloat(storedVolume);
-            this.audioPlayerVol.value = storedVolume;
-        }
-
         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');
             }
         }