From a4cd626c414f23ff48e0c83a9286ff5cded1ec13 Mon Sep 17 00:00:00 2001
From: Hanusiak Piotr <piotr@ltmp.co>
Date: Thu, 3 Feb 2022 14:51:47 +0100
Subject: [PATCH] SoundMeterWidget no longer instantiate new SoundMeter

---
 .../EnableCamera/EnableCameraScene.svelte     | 15 +++++--
 .../HorizontalSoundMeterWidget.svelte         | 45 +------------------
 front/src/Components/MyCamera.svelte          | 16 +++++--
 front/src/Components/SoundMeterWidget.svelte  | 45 +------------------
 .../src/Components/Video/VideoMediaBox.svelte | 14 +++++-
 5 files changed, 40 insertions(+), 95 deletions(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 4e8fa9bd..2ddf648d 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -5,6 +5,7 @@
         audioConstraintStore,
         cameraListStore,
         localStreamStore,
+        localVolumeStore,
         microphoneListStore,
         videoConstraintStore,
     } from "../../Stores/MediaStore";
@@ -18,6 +19,7 @@
     export let game: Game;
     let selectedCamera: string | undefined = undefined;
     let selectedMicrophone: string | undefined = undefined;
+    let volume = 0;
 
     const enableCameraScene = game.scene.getScene(EnableCameraSceneName) as EnableCameraScene;
 
@@ -38,7 +40,7 @@
 
     let stream: MediaStream | null;
 
-    const unsubscribe = localStreamStore.subscribe((value) => {
+    const unsubscribeLocalStreamStore = localStreamStore.subscribe((value) => {
         if (value.type === "success") {
             stream = value.stream;
 
@@ -59,7 +61,14 @@
         }
     });
 
-    onDestroy(unsubscribe);
+    const unsubscribeLocalVolumeStore = localVolumeStore.subscribe((value) => {
+        volume = value ?? 0;
+    });
+
+    onDestroy(() => {
+        unsubscribeLocalVolumeStore();
+        unsubscribeLocalStreamStore();
+    });
 
     function normalizeDeviceName(label: string): string {
         // remove IDs (that can appear in Chrome, like: "HD Pro Webcam (4df7:4eda)"
@@ -86,7 +95,7 @@
             <img class="background-img" src={cinemaCloseImg} alt="" />
         </div>
     {/if}
-    <HorizontalSoundMeterWidget {stream} />
+    <HorizontalSoundMeterWidget {volume} />
 
     <section class="selectWebcamForm">
         {#if $cameraListStore.length > 1}
diff --git a/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte b/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
index f5e9439f..1e8000ba 100644
--- a/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
+++ b/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
@@ -1,50 +1,9 @@
 <script lang="typescript">
-    import { AudioContext } from "standardized-audio-context";
-    import { SoundMeter } from "../../Phaser/Components/SoundMeter";
-    import { onDestroy } from "svelte";
 
-    export let stream: MediaStream | null;
-    let volume = 0;
+    export let volume = 0;
 
     const NB_BARS = 20;
 
-    let timeout: ReturnType<typeof setTimeout>;
-    const soundMeter = new SoundMeter();
-    let display = false;
-    let error = false;
-
-    $: {
-        if (stream && stream.getAudioTracks().length > 0) {
-            display = true;
-            soundMeter.connectToSource(stream, new AudioContext());
-
-            if (timeout) {
-                clearInterval(timeout);
-                error = false;
-            }
-
-            timeout = setInterval(() => {
-                try {
-                    volume = parseInt(((soundMeter.getVolume() / 100) * NB_BARS).toFixed(0));
-                } catch (err) {
-                    if (!error) {
-                        console.error(err);
-                        error = true;
-                    }
-                }
-            }, 100);
-        } else {
-            display = false;
-        }
-    }
-
-    onDestroy(() => {
-        soundMeter.stop();
-        if (timeout) {
-            clearInterval(timeout);
-        }
-    });
-
     function color(i: number, volume: number) {
         const red = (255 * i) / NB_BARS;
         const green = 255 * (1 - i / NB_BARS);
@@ -58,7 +17,7 @@
     }
 </script>
 
-<div class="horizontal-sound-meter" class:active={display}>
+<div class="horizontal-sound-meter" class:active={volume !== undefined}>
     {#each [...Array(NB_BARS).keys()] as i (i)}
         <div style={color(i, volume)} />
     {/each}
diff --git a/front/src/Components/MyCamera.svelte b/front/src/Components/MyCamera.svelte
index e84d763d..f0952084 100644
--- a/front/src/Components/MyCamera.svelte
+++ b/front/src/Components/MyCamera.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { obtainedMediaConstraintStore } from "../Stores/MediaStore";
+    import { localVolumeStore, obtainedMediaConstraintStore } from "../Stores/MediaStore";
     import { localStreamStore, isSilentStore } from "../Stores/MediaStore";
     import SoundMeterWidget from "./SoundMeterWidget.svelte";
     import { onDestroy, onMount } from "svelte";
@@ -7,8 +7,9 @@
     import LL from "../i18n/i18n-svelte";
 
     let stream: MediaStream | null;
+    let volume = 0;
 
-    const unsubscribe = localStreamStore.subscribe((value) => {
+    const unsubscribeLocalStreamStore = localStreamStore.subscribe((value) => {
         if (value.type === "success") {
             stream = value.stream;
         } else {
@@ -16,7 +17,14 @@
         }
     });
 
-    onDestroy(unsubscribe);
+    const unsubscribeLocalVolumeStore = localVolumeStore.subscribe((value) => {
+        volume = value ?? 0;
+    });
+
+    onDestroy(() => {
+        unsubscribeLocalStreamStore();
+        unsubscribeLocalVolumeStore();
+    });
 
     let isSilent: boolean;
     const unsubscribeIsSilent = isSilentStore.subscribe((value) => {
@@ -51,7 +59,7 @@
         <div class="is-silent">{$LL.camera.my.silentZone()}</div>
     {:else if $localStreamStore.type === "success" && $localStreamStore.stream}
         <video class="my-cam-video" use:srcObject={stream} autoplay muted playsinline />
-        <SoundMeterWidget {stream} />
+        <SoundMeterWidget {volume} />
     {/if}
 </div>
 
diff --git a/front/src/Components/SoundMeterWidget.svelte b/front/src/Components/SoundMeterWidget.svelte
index 25512708..42f22a97 100644
--- a/front/src/Components/SoundMeterWidget.svelte
+++ b/front/src/Components/SoundMeterWidget.svelte
@@ -1,47 +1,6 @@
 <script lang="typescript">
-    import { AudioContext } from "standardized-audio-context";
-    import { SoundMeter } from "../Phaser/Components/SoundMeter";
-    import { onDestroy } from "svelte";
-
-    export let stream: MediaStream | null;
-    let volume = 0;
-
-    let timeout: ReturnType<typeof setTimeout>;
-    const soundMeter = new SoundMeter();
-    let display = false;
-    let error = false;
-
-    $: {
-        if (stream && stream.getAudioTracks().length > 0) {
-            display = true;
-            soundMeter.connectToSource(stream, new AudioContext());
-
-            if (timeout) {
-                clearInterval(timeout);
-                error = false;
-            }
-
-            timeout = setInterval(() => {
-                try {
-                    volume = soundMeter.getVolume();
-                } catch (err) {
-                    if (!error) {
-                        console.error(err);
-                        error = true;
-                    }
-                }
-            }, 100);
-        } else {
-            display = false;
-        }
-    }
-
-    onDestroy(() => {
-        soundMeter.stop();
-        if (timeout) {
-            clearInterval(timeout);
-        }
-    });
+    export let volume = 0;
+    let display = true;
 </script>
 
 <div class="sound-progress" class:active={display}>
diff --git a/front/src/Components/Video/VideoMediaBox.svelte b/front/src/Components/Video/VideoMediaBox.svelte
index e5199a37..4cf629aa 100644
--- a/front/src/Components/Video/VideoMediaBox.svelte
+++ b/front/src/Components/Video/VideoMediaBox.svelte
@@ -11,13 +11,14 @@
     import type { Streamable } from "../../Stores/StreamableCollectionStore";
 
     import Woka from "../Woka/Woka.svelte";
-    import { onMount } from "svelte";
+    import { onDestroy, onMount } from "svelte";
     import { isMediaBreakpointOnly } from "../../Utils/BreakpointsUtils";
 
     export let clickable = false;
 
     export let peer: VideoPeer;
     let streamStore = peer.streamStore;
+    let volumeStore = peer.volumeStore;
     let name = peer.userName;
     let statusStore = peer.statusStore;
     let constraintStore = peer.constraintsStore;
@@ -29,6 +30,11 @@
     let embedScreen: EmbedScreen;
     let videoContainer: HTMLDivElement;
     let minimized = isMediaBreakpointOnly("md");
+    let volume = 0;
+
+    const unsubscribe = volumeStore.subscribe((value) => {
+        volume = value ?? 0;
+    });
 
     if (peer) {
         embedScreen = {
@@ -48,6 +54,10 @@
     onMount(() => {
         resizeObserver.observe(videoContainer);
     });
+
+    onDestroy(() => {
+        unsubscribe();
+    });
 </script>
 
 <div
@@ -93,7 +103,7 @@
     />
     <img src={blockSignImg} draggable="false" on:dragstart|preventDefault={noDrag} class="block-logo" alt="Block" />
     {#if $constraintStore && $constraintStore.audio !== false}
-        <SoundMeterWidget stream={$streamStore} />
+        <SoundMeterWidget {volume} />
     {/if}
 </div>