From 33b641530be229733ea8bac65a3c8b05bc5a6019 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 26 Apr 2023 14:32:47 +0200
Subject: [PATCH] Fixing setInterval not cleared on microphone state

Because of a bug in Svelte (see https://github.com/sveltejs/svelte/issues/5268), the onDestroy callback of sub-components are not called if one of the parent components has a transition.

This in turn caused stores to not be unsubscribed, and ultimately, a "setInterval" to read the microphone audio level not to be cleared.

We fix this by removing any Svelte based transitions/animations.
---
 .../EmbedScreens/CamerasContainer.svelte      |  4 +--
 .../front/Components/Video/MediaBox.svelte    | 34 ++-----------------
 2 files changed, 5 insertions(+), 33 deletions(-)

diff --git a/play/src/front/Components/EmbedScreens/CamerasContainer.svelte b/play/src/front/Components/EmbedScreens/CamerasContainer.svelte
index 738209074f..8ce4a211f5 100644
--- a/play/src/front/Components/EmbedScreens/CamerasContainer.svelte
+++ b/play/src/front/Components/EmbedScreens/CamerasContainer.svelte
@@ -2,14 +2,14 @@
     import type { EmbedScreen } from "../../Stores/EmbedScreensStore";
     import { streamableCollectionStore } from "../../Stores/StreamableCollectionStore";
     import MediaBox from "../Video/MediaBox.svelte";
-    import { fly, fade } from "svelte/transition";
+    import { fly } from "svelte/transition";
 
     export let highlightedEmbedScreen: EmbedScreen | undefined;
     export let full = false;
     $: clickable = !full;
 </script>
 
-<aside class="cameras-container" class:full in:fly={{ x: 200, duration: 100 }} out:fade>
+<aside class="cameras-container" class:full in:fly|local={{ x: 200, duration: 100 }}>
     <div class="other-cameras">
         {#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
             {#if !highlightedEmbedScreen || highlightedEmbedScreen.type !== "streamable" || (highlightedEmbedScreen.type === "streamable" && highlightedEmbedScreen.embed !== peer)}
diff --git a/play/src/front/Components/Video/MediaBox.svelte b/play/src/front/Components/Video/MediaBox.svelte
index cbc3e8af80..aaf0e7bd8c 100644
--- a/play/src/front/Components/Video/MediaBox.svelte
+++ b/play/src/front/Components/Video/MediaBox.svelte
@@ -8,8 +8,8 @@
     import VideoOffBox from "./VideoOffBox.svelte";
     import type { ObtainedMediaStreamConstraints } from "../../Stores/MediaStore";
     import type { Readable } from "svelte/store";
-    import { fly } from "svelte/transition";
     import { gameManager } from "../../Phaser/Game/GameManager";
+    import { onMount } from "svelte";
 
     export let streamable: Streamable;
     export let isHightlighted = false;
@@ -25,9 +25,9 @@
 
     const gameScene = gameManager.getCurrentGameScene();
 
-    function triggerReposition() {
+    onMount(() => {
         gameScene.reposition();
-    }
+    });
 </script>
 
 {#if streamable instanceof VideoPeer}
@@ -42,13 +42,6 @@
             class:mozaic-duo={mozaicDuo}
             class:mozaic-full-width={mozaicSolo}
             class:mozaic-quarter={mozaicQuarter}
-            transition:fly={{ x: 200, duration: 250 }}
-            on:introend={() => {
-                triggerReposition();
-            }}
-            on:outroend={() => {
-                triggerReposition();
-            }}
         >
             <div class="{isHightlighted ? 'tw-mr-6' : 'tw-mx-auto'} tw-w-full tw-flex screen-blocker">
                 <VideoOffBox peer={streamable} clickable={false} />
@@ -63,13 +56,6 @@
             class:mozaic-duo={mozaicDuo}
             class:mozaic-full-width={mozaicSolo}
             class:mozaic-quarter={mozaicQuarter}
-            transition:fly={{ x: 200, duration: 250 }}
-            on:introend={() => {
-                triggerReposition();
-            }}
-            on:outroend={() => {
-                triggerReposition();
-            }}
         >
             <div class="{isHightlighted ? 'tw-h-[32vw] tw-mr-6' : 'tw-mx-auto'} tw-w-full tw-flex screen-blocker">
                 <VideoMediaBox peer={streamable} clickable={isClickable} />
@@ -85,13 +71,6 @@
         class:mozaic-duo={mozaicDuo}
         class:mozaic-full-width={mozaicSolo}
         class:mozaic-quarter={mozaicQuarter}
-        transition:fly={{ x: 200, duration: 250 }}
-        on:introend={() => {
-            triggerReposition();
-        }}
-        on:outroend={() => {
-            triggerReposition();
-        }}
     >
         <div class="{isHightlighted ? 'tw-h-[41vw] tw-mr-6' : 'tw-mx-auto'} tw-w-full tw-h-full tw-flex screen-blocker">
             <ScreenSharingMediaBox peer={streamable} clickable={isClickable} />
@@ -106,13 +85,6 @@
         class:mozaic-duo={mozaicDuo}
         class:mozaic-full-width={mozaicSolo}
         class:mozaic-quarter={mozaicQuarter}
-        transition:fly={{ x: 200, duration: 250 }}
-        on:introend={() => {
-            triggerReposition();
-        }}
-        on:outroend={() => {
-            triggerReposition();
-        }}
     >
         <div
             class="{isHightlighted ? 'tw-h-[41vw] tw-mr-6' : 'tw-mx-auto'}   tw-w-full tw-h-full tw-flex screen-blocker"