Migrating EnableCameraScene to Svelte

front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte

@@ -0,0 +1,78 @@
+<script lang="typescript">
+    import {SoundMeter} from "../../Phaser/Components/SoundMeter";
+    import {onDestroy} from "svelte";
+
+    export let stream: MediaStream | null;
+    let volume = 0;
+
+    const NB_BARS = 20;
+
+    let timeout;
+    const soundMeter = new SoundMeter();
+
+    $: {
+        if (stream && stream.getAudioTracks().length > 0) {
+            soundMeter.connectToSource(stream, new AudioContext());
+
+            if (timeout) {
+                clearInterval(timeout);
+            }
+
+            timeout = setInterval(() => {
+                try{
+                    volume = parseInt((soundMeter.getVolume() / 100 * NB_BARS).toFixed(0));
+                    //console.log(volume);
+                }catch(err){
+
+                }
+            }, 100);
+
+        }
+    }
+
+    onDestroy(() => {
+        soundMeter.stop();
+        if (timeout) {
+            clearInterval(timeout);
+        }
+    })
+
+
+    function color(i: number, volume: number) {
+        console.log(i, volume)
+        const red = 255 * i / NB_BARS;
+        const green = 255 * (1 - i / NB_BARS);
+
+        let alpha = 1;
+        if (i >= volume) {
+            alpha = 0.5;
+        }
+
+        return 'background-color:rgba('+red+', '+green+', 0, '+alpha+')';
+    }
+</script>
+
+
+<div class="horizontal-sound-meter" class:active={stream?.getAudioTracks().length > 0}>
+    {#each [...Array(NB_BARS).keys()] as i}
+        <div style={color(i, volume)}></div>
+    {/each}
+</div>
+
+<style lang="scss">
+    .horizontal-sound-meter {
+      display: flex;
+      flex-direction: row;
+      width: 50%;
+      height: 30px;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 1vh;
+    }
+
+    .horizontal-sound-meter div {
+      margin-left: 5px;
+      flex-grow: 1;
+    }
+
+</style>