From 530254e0e024bb45446918a57c5acac142387bee Mon Sep 17 00:00:00 2001
From: Piotr 'pwh' Hanusiak <p.hanusiak@workadventu.re>
Date: Fri, 22 Apr 2022 14:35:57 +0200
Subject: [PATCH] do not subscribe to silentStore if not needed

---
 front/src/Components/CameraControls.svelte | 29 ++++++++--------------
 front/src/Components/MyCamera.svelte       | 11 ++------
 2 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/front/src/Components/CameraControls.svelte b/front/src/Components/CameraControls.svelte
index 8b617f2e..fad3c3c1 100644
--- a/front/src/Components/CameraControls.svelte
+++ b/front/src/Components/CameraControls.svelte
@@ -13,7 +13,6 @@
     import lockImg from "./images/lock.svg";
     import { LayoutMode } from "../WebRtc/LayoutManager";
     import { peerStore } from "../Stores/PeerStore";
-    import { onDestroy } from "svelte";
     import { embedScreenLayout } from "../Stores/EmbedScreensStore";
     import { followRoleStore, followStateStore, followUsersStore } from "../Stores/FollowStore";
     import { gameManager } from "../Phaser/Game/GameManager";
@@ -22,7 +21,7 @@
     const gameScene = gameManager.getCurrentGameScene();
 
     function screenSharingClick(): void {
-        if (isSilent) return;
+        if ($silentStore) return;
         if ($requestedScreenSharingState === true) {
             requestedScreenSharingState.disableScreenSharing();
         } else {
@@ -31,7 +30,7 @@
     }
 
     function cameraClick(): void {
-        if (isSilent) return;
+        if ($silentStore) return;
         if ($requestedCameraState === true) {
             requestedCameraState.disableWebcam();
         } else {
@@ -40,7 +39,7 @@
     }
 
     function microphoneClick(): void {
-        if (isSilent) return;
+        if ($silentStore) return;
         if ($requestedMicrophoneState === true) {
             requestedMicrophoneState.disableMicrophone();
         } else {
@@ -75,12 +74,6 @@
     function lockClick() {
         gameScene.connection?.emitLockGroup(!$currentPlayerGroupLockStateStore);
     }
-
-    let isSilent: boolean;
-    const unsubscribeIsSilent = silentStore.subscribe((silent) => {
-        isSilent = silent;
-    });
-    onDestroy(unsubscribeIsSilent);
 </script>
 
 <div class="btn-cam-action">
@@ -94,7 +87,7 @@
 
     <div
         class="btn-follow"
-        class:hide={($peerStore.size === 0 && $followStateStore === "off") || isSilent}
+        class:hide={($peerStore.size === 0 && $followStateStore === "off") || $silentStore}
         class:disabled={$followStateStore !== "off"}
         on:click={followClick}
     >
@@ -103,7 +96,7 @@
 
     <div
         class="btn-lock"
-        class:hide={$peerStore.size === 0 || isSilent}
+        class:hide={$peerStore.size === 0 || $silentStore}
         class:disabled={$currentPlayerGroupLockStateStore}
         on:click={lockClick}
     >
@@ -113,26 +106,26 @@
     <div
         class="btn-monitor"
         on:click={screenSharingClick}
-        class:hide={!$screenSharingAvailableStore || isSilent}
+        class:hide={!$screenSharingAvailableStore || $silentStore}
         class:enabled={$requestedScreenSharingState}
     >
-        {#if $requestedScreenSharingState && !isSilent}
+        {#if $requestedScreenSharingState && !$silentStore}
             <img class="noselect" src={monitorImg} alt="Start screen sharing" />
         {:else}
             <img class="noselect" src={monitorCloseImg} alt="Stop screen sharing" />
         {/if}
     </div>
 
-    <div class="btn-video" on:click={cameraClick} class:disabled={!$requestedCameraState || isSilent}>
-        {#if $requestedCameraState && !isSilent}
+    <div class="btn-video" on:click={cameraClick} class:disabled={!$requestedCameraState || $silentStore}>
+        {#if $requestedCameraState && !$silentStore}
             <img class="noselect" src={cinemaImg} alt="Turn on webcam" />
         {:else}
             <img class="noselect" src={cinemaCloseImg} alt="Turn off webcam" />
         {/if}
     </div>
 
-    <div class="btn-micro" on:click={microphoneClick} class:disabled={!$requestedMicrophoneState || isSilent}>
-        {#if $requestedMicrophoneState && !isSilent}
+    <div class="btn-micro" on:click={microphoneClick} class:disabled={!$requestedMicrophoneState || $silentStore}>
+        {#if $requestedMicrophoneState && !$silentStore}
             <img class="noselect" src={microphoneImg} alt="Turn on microphone" />
         {:else}
             <img class="noselect" src={microphoneCloseImg} alt="Turn off microphone" />
diff --git a/front/src/Components/MyCamera.svelte b/front/src/Components/MyCamera.svelte
index 8f4b2094..d72a8eee 100644
--- a/front/src/Components/MyCamera.svelte
+++ b/front/src/Components/MyCamera.svelte
@@ -20,11 +20,6 @@
         unsubscribeLocalStreamStore();
     });
 
-    let isSilent: boolean;
-    const unsubscribeIsSilent = silentStore.subscribe((silent) => {
-        isSilent = silent;
-    });
-
     let cameraContainer: HTMLDivElement;
 
     onMount(() => {
@@ -40,16 +35,14 @@
             }
         });
     });
-
-    onDestroy(unsubscribeIsSilent);
 </script>
 
 <div
     class="nes-container is-rounded my-cam-video-container"
-    class:hide={($localStreamStore.type !== "success" || !$obtainedMediaConstraintStore.video) && !isSilent}
+    class:hide={($localStreamStore.type !== "success" || !$obtainedMediaConstraintStore.video) && !$silentStore}
     bind:this={cameraContainer}
 >
-    {#if isSilent}
+    {#if $silentStore}
         <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 />