Fixing setInterval not cleared on microphone state

Because of a bug in Svelte (see sveltejs/svelte#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.
workadventure · Apr 26, 2023 · 33b6415 · 33b6415
1 parent 9b17720
commit 33b6415
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 33 deletions.
diff --git 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
@@ -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"