WIP: Migrate AudioManager in Svelte (#1325)

* Migrate AudioManager in Svelte

* use import type when needed

front/src/Components/App.svelte

@@ -35,6 +35,8 @@
     import WarningContainer from "./WarningContainer/WarningContainer.svelte";
     import {layoutManagerVisibilityStore} from "../Stores/LayoutManagerStore";
     import LayoutManager from "./LayoutManager/LayoutManager.svelte";
+    import {audioManagerVisibilityStore} from "../Stores/AudioManagerStore";
+    import AudioManager from "./AudioManager/AudioManager.svelte"
 
     export let game: Game;
 
@@ -81,6 +83,11 @@
         <AudioPlaying url={$soundPlayingStore} />
     </div>
     {/if}
+    {#if $audioManagerVisibilityStore}
+    <div>
+        <AudioManager></AudioManager>
+    </div>
+    {/if}
     {#if $layoutManagerVisibilityStore}
         <div>
             <LayoutManager></LayoutManager>

front/src/Components/AudioManager/AudioManager.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+    import audioImg from "../images/audio.svg";
+    import audioMuteImg from  "../images/audio-mute.svg";
+    import { localUserStore } from "../../Connexion/LocalUserStore";
+    import type { audioManagerVolume } from "../../Stores/AudioManagerStore";
+    import {
+        audioManagerFileStore,
+        audioManagerVolumeStore,
+    } from "../../Stores/AudioManagerStore";
+    import {get} from "svelte/store";
+    import type { Unsubscriber } from "svelte/store";
+    import {onDestroy, onMount} from "svelte";
+
+    let HTMLAudioPlayer: HTMLAudioElement;
+    let unsubscriberFileStore: Unsubscriber | null = null;
+    let unsubscriberVolumeStore: Unsubscriber | null = null;
+
+    let volume: number = 1;
+    let decreaseWhileTalking: boolean = true;
+
+    onMount(() => {
+        unsubscriberFileStore = audioManagerFileStore.subscribe(() =>{
+            HTMLAudioPlayer.pause();
+            HTMLAudioPlayer.loop = get(audioManagerVolumeStore).loop;
+            HTMLAudioPlayer.volume = get(audioManagerVolumeStore).volume;
+            HTMLAudioPlayer.muted = get(audioManagerVolumeStore).muted;
+            HTMLAudioPlayer.play();
+        });
+        unsubscriberVolumeStore = audioManagerVolumeStore.subscribe((audioManager: audioManagerVolume) => {
+            const reduceVolume = audioManager.talking && audioManager.decreaseWhileTalking;
+            if (reduceVolume && !audioManager.volumeReduced) {
+                audioManager.volume *= 0.5;
+            } else if (!reduceVolume && audioManager.volumeReduced) {
+                audioManager.volume *= 2.0;
+            }
+            audioManager.volumeReduced = reduceVolume;
+            HTMLAudioPlayer.volume = audioManager.volume;
+            HTMLAudioPlayer.muted = audioManager.muted;
+            HTMLAudioPlayer.loop = audioManager.loop;
+        })
+    })
+
+    onDestroy(() => {
+        if (unsubscriberFileStore) {
+            unsubscriberFileStore();
+        }
+        if (unsubscriberVolumeStore) {
+            unsubscriberVolumeStore();
+        }
+    })
+
+    function onMute() {
+        audioManagerVolumeStore.setMuted(!get(audioManagerVolumeStore).muted);
+        localUserStore.setAudioPlayerMuted(get(audioManagerVolumeStore).muted);
+    }
+
+    function setVolume() {
+        audioManagerVolumeStore.setVolume(volume)
+        localUserStore.setAudioPlayerVolume(get(audioManagerVolumeStore).volume);
+    }
+
+    function setDecrease() {
+        audioManagerVolumeStore.setDecreaseWhileTalking(decreaseWhileTalking);
+    }
+</script>
+
+
+<div class="main-audio-manager nes-container is-rounded">
+    <div class="audio-manager-player-volume">
+        <img src={$audioManagerVolumeStore.muted ? audioMuteImg : audioImg} alt="player volume" on:click={onMute}>
+        <input type="range" min="0" max="1" step="0.025" bind:value={volume} on:change={setVolume}>
+    </div>
+    <div class="audio-manager-reduce-conversation">
+        <label>
+            reduce in conversations
+            <input type="checkbox" bind:checked={decreaseWhileTalking} on:change={setDecrease}>
+        </label>
+        <section class="audio-manager-file">
+            <audio class="audio-manager-audioplayer" bind:this={HTMLAudioPlayer}>
+                <source src={$audioManagerFileStore}>
+            </audio>
+        </section>
+    </div>
+</div>
+
+
+<style lang="scss">
+    div.main-audio-manager.nes-container.is-rounded {
+      position: relative;
+      top: 0.5rem;
+      max-height: clamp(150px, 10vh, 15vh); //replace @media for small screen
+      width: clamp(200px, 15vw, 15vw);
+      padding: 3px 3px;
+      margin-left: auto;
+      margin-right: auto;
+
+      background-color: rgb(0,0,0,0.5);
+      display: grid;
+      grid-template-rows: 50% 50%;
+      color: whitesmoke;
+      text-align: center;
+      pointer-events: auto;
+
+      div.audio-manager-player-volume {
+        display: grid;
+        grid-template-columns: 50px 1fr;
+
+        img {
+          height: 100%;
+          width: calc(100% - 10px);
+          margin-right: 10px;
+        }
+      }
+
+      section.audio-manager-file {
+        display: none;
+      }
+    }
+</style>

front/src/Components/images/audio-mute.svg

@@ -0,0 +1,3 @@
+<svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-volume-up" fill="white" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04L4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04z" />
+</svg>

front/src/Components/images/audio.svg

@@ -0,0 +1,8 @@
+<svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-volume-up" fill="white" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04L4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04z" />
+    <g>
+        <path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z" />
+        <path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z" />
+        <path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707z" />
+    </g>
+</svg>