From ba5fa063067ebe73d38ccde494dfeedca9865182 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Fri, 3 Sep 2021 15:16:21 +0200
Subject: [PATCH] FIX: fixed a circular dependancy in stores by rewriting
 createPeerStore() and createScreenSharingPeerStore()

---
 .../Video/PresentationLayout.svelte           |  4 +-
 front/src/Phaser/Game/GameScene.ts            | 17 -----
 front/src/Stores/AudioManagerStore.ts         |  5 ++
 front/src/Stores/MediaStore.ts                |  2 +-
 front/src/Stores/PeerStore.ts                 | 75 ++++++++-----------
 front/src/Stores/ScreenSharingStore.ts        |  1 +
 front/src/Stores/VideoFocusStore.ts           | 34 +++------
 front/src/WebRtc/SimplePeer.ts                | 35 +++------
 front/src/WebRtc/VideoPeer.ts                 |  4 +-
 9 files changed, 63 insertions(+), 114 deletions(-)

diff --git a/front/src/Components/Video/PresentationLayout.svelte b/front/src/Components/Video/PresentationLayout.svelte
index f68dd2f1..65a229f4 100644
--- a/front/src/Components/Video/PresentationLayout.svelte
+++ b/front/src/Components/Video/PresentationLayout.svelte
@@ -12,7 +12,9 @@
 
 <div class="main-section">
     {#if $videoFocusStore }
-        <MediaBox streamable={$videoFocusStore}></MediaBox>
+        {#key $videoFocusStore.uniqueId}
+            <MediaBox streamable={$videoFocusStore}></MediaBox>
+        {/key}
     {/if}
 </div>
 <aside class="sidebar">
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 19f953d5..e1eb0476 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -715,25 +715,8 @@ export class GameScene extends DirtyScene {
 
                 // When connection is performed, let's connect SimplePeer
                 this.simplePeer = new SimplePeer(this.connection);
-                peerStore.connectToSimplePeer(this.simplePeer);
-                screenSharingPeerStore.connectToSimplePeer(this.simplePeer);
-                videoFocusStore.connectToSimplePeer(this.simplePeer);
                 userMessageManager.setReceiveBanListener(this.bannedUser.bind(this));
 
-                const self = this;
-                this.simplePeer.registerPeerConnectionListener({
-                    onConnect(peer) {
-                        //self.openChatIcon.setVisible(true);
-                        audioManagerVolumeStore.setTalking(true);
-                    },
-                    onDisconnect(userId: number) {
-                        if (self.simplePeer.getNbConnections() === 0) {
-                            //self.openChatIcon.setVisible(false);
-                            audioManagerVolumeStore.setTalking(false);
-                        }
-                    },
-                });
-
                 //listen event to share position of user
                 this.CurrentPlayer.on(hasMovedEventName, this.pushPlayerPosition.bind(this));
                 this.CurrentPlayer.on(hasMovedEventName, this.outlineItem.bind(this));
diff --git a/front/src/Stores/AudioManagerStore.ts b/front/src/Stores/AudioManagerStore.ts
index 1bf30ea3..16be88ec 100644
--- a/front/src/Stores/AudioManagerStore.ts
+++ b/front/src/Stores/AudioManagerStore.ts
@@ -1,4 +1,5 @@
 import { get, writable } from "svelte/store";
+import { peerStore } from "./PeerStore";
 
 export interface audioManagerVolume {
     muted: boolean;
@@ -103,3 +104,7 @@ export const audioManagerVisibilityStore = writable(false);
 export const audioManagerVolumeStore = createAudioManagerVolumeStore();
 
 export const audioManagerFileStore = createAudioManagerFileStore();
+
+peerStore.subscribe((peers) => {
+    audioManagerVolumeStore.setTalking(peers.size > 0);
+});
diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts
index c4ab0213..d23a4a23 100644
--- a/front/src/Stores/MediaStore.ts
+++ b/front/src/Stores/MediaStore.ts
@@ -1,4 +1,4 @@
-import { derived, get, Readable, readable, writable, Writable } from "svelte/store";
+import { derived, get, Readable, readable, writable } from "svelte/store";
 import { localUserStore } from "../Connexion/LocalUserStore";
 import { userMovingStore } from "./GameStore";
 import { HtmlUtils } from "../WebRtc/HtmlUtils";
diff --git a/front/src/Stores/PeerStore.ts b/front/src/Stores/PeerStore.ts
index 11217b08..16b3b9f0 100644
--- a/front/src/Stores/PeerStore.ts
+++ b/front/src/Stores/PeerStore.ts
@@ -1,38 +1,30 @@
 import { readable, writable } from "svelte/store";
-import type { RemotePeer, SimplePeer } from "../WebRtc/SimplePeer";
-import { VideoPeer } from "../WebRtc/VideoPeer";
-import { ScreenSharingPeer } from "../WebRtc/ScreenSharingPeer";
+import type { VideoPeer } from "../WebRtc/VideoPeer";
+import type { ScreenSharingPeer } from "../WebRtc/ScreenSharingPeer";
 
 /**
  * A store that contains the list of (video) peers we are connected to.
  */
 function createPeerStore() {
-    let peers = new Map<number, VideoPeer>();
-
-    const { subscribe, set, update } = writable(peers);
+    const { subscribe, set, update } = writable(new Map<number, VideoPeer>());
 
     return {
         subscribe,
-        connectToSimplePeer: (simplePeer: SimplePeer) => {
-            peers = new Map<number, VideoPeer>();
-            set(peers);
-            simplePeer.registerPeerConnectionListener({
-                onConnect(peer: RemotePeer) {
-                    if (peer instanceof VideoPeer) {
-                        update((users) => {
-                            users.set(peer.userId, peer);
-                            return users;
-                        });
-                    }
-                },
-                onDisconnect(userId: number) {
-                    update((users) => {
-                        users.delete(userId);
-                        return users;
-                    });
-                },
+        pushNewPeer(peer: VideoPeer) {
+            update((users) => {
+                users.set(peer.userId, peer);
+                return users;
             });
         },
+        removePeer(userId: number) {
+            update((users) => {
+                users.delete(userId);
+                return users;
+            });
+        },
+        cleanupStore() {
+            set(new Map<number, VideoPeer>());
+        },
     };
 }
 
@@ -40,32 +32,25 @@ function createPeerStore() {
  * A store that contains the list of screen sharing peers we are connected to.
  */
 function createScreenSharingPeerStore() {
-    let peers = new Map<number, ScreenSharingPeer>();
-
-    const { subscribe, set, update } = writable(peers);
+    const { subscribe, set, update } = writable(new Map<number, ScreenSharingPeer>());
 
     return {
         subscribe,
-        connectToSimplePeer: (simplePeer: SimplePeer) => {
-            peers = new Map<number, ScreenSharingPeer>();
-            set(peers);
-            simplePeer.registerPeerConnectionListener({
-                onConnect(peer: RemotePeer) {
-                    if (peer instanceof ScreenSharingPeer) {
-                        update((users) => {
-                            users.set(peer.userId, peer);
-                            return users;
-                        });
-                    }
-                },
-                onDisconnect(userId: number) {
-                    update((users) => {
-                        users.delete(userId);
-                        return users;
-                    });
-                },
+        pushNewPeer(peer: ScreenSharingPeer) {
+            update((users) => {
+                users.set(peer.userId, peer);
+                return users;
             });
         },
+        removePeer(userId: number) {
+            update((users) => {
+                users.delete(userId);
+                return users;
+            });
+        },
+        cleanupStore() {
+            set(new Map<number, ScreenSharingPeer>());
+        },
     };
 }
 
diff --git a/front/src/Stores/ScreenSharingStore.ts b/front/src/Stores/ScreenSharingStore.ts
index bec843b4..e4ee6410 100644
--- a/front/src/Stores/ScreenSharingStore.ts
+++ b/front/src/Stores/ScreenSharingStore.ts
@@ -175,6 +175,7 @@ export const screenSharingAvailableStore = derived(peerStore, ($peerStore, set)
 export interface ScreenSharingLocalMedia {
     uniqueId: string;
     stream: MediaStream | null;
+    userId?: undefined;
 }
 
 /**
diff --git a/front/src/Stores/VideoFocusStore.ts b/front/src/Stores/VideoFocusStore.ts
index e183a5f3..21754754 100644
--- a/front/src/Stores/VideoFocusStore.ts
+++ b/front/src/Stores/VideoFocusStore.ts
@@ -1,14 +1,12 @@
-import { writable } from "svelte/store";
-import type { RemotePeer, SimplePeer } from "../WebRtc/SimplePeer";
-import { VideoPeer } from "../WebRtc/VideoPeer";
-import { ScreenSharingPeer } from "../WebRtc/ScreenSharingPeer";
+import { get, writable } from "svelte/store";
 import type { Streamable } from "./StreamableCollectionStore";
+import { peerStore } from "./PeerStore";
 
 /**
  * A store that contains the peer / media that has currently the "importance" focus.
  */
 function createVideoFocusStore() {
-    const { subscribe, set, update } = writable<Streamable | null>(null);
+    const { subscribe, set } = writable<Streamable | null>(null);
 
     let focusedMedia: Streamable | null = null;
 
@@ -23,27 +21,17 @@ function createVideoFocusStore() {
             set(null);
         },
         toggleFocus: (media: Streamable) => {
-            if (media !== focusedMedia) {
-                focusedMedia = media;
-            } else {
-                focusedMedia = null;
-            }
+            focusedMedia = media !== focusedMedia ? media : null;
             set(focusedMedia);
         },
-        connectToSimplePeer: (simplePeer: SimplePeer) => {
-            simplePeer.registerPeerConnectionListener({
-                onConnect(peer: RemotePeer) {},
-                onDisconnect(userId: number) {
-                    if (
-                        (focusedMedia instanceof VideoPeer || focusedMedia instanceof ScreenSharingPeer) &&
-                        focusedMedia.userId === userId
-                    ) {
-                        set(null);
-                    }
-                },
-            });
-        },
     };
 }
 
 export const videoFocusStore = createVideoFocusStore();
+
+peerStore.subscribe((peers) => {
+    const focusedMedia: Streamable | null = get(videoFocusStore);
+    if (focusedMedia && focusedMedia.userId !== undefined && !peers.get(focusedMedia.userId)) {
+        videoFocusStore.removeFocus();
+    }
+});
diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index 546e48c4..7c575867 100644
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -10,6 +10,7 @@ import { blackListManager } from "./BlackListManager";
 import { get } from "svelte/store";
 import { screenSharingLocalStreamStore } from "../Stores/ScreenSharingStore";
 import { playersStore } from "../Stores/PlayersStore";
+import { peerStore, screenSharingPeerStore } from "../Stores/PeerStore";
 
 export interface UserSimplePeerInterface {
     userId: number;
@@ -20,12 +21,6 @@ export interface UserSimplePeerInterface {
 
 export type RemotePeer = VideoPeer | ScreenSharingPeer;
 
-export interface PeerConnectionListener {
-    onConnect(user: RemotePeer): void;
-
-    onDisconnect(userId: number): void;
-}
-
 /**
  * This class manages connections to all the peers in the same group as me.
  */
@@ -37,12 +32,14 @@ export class SimplePeer {
     private readonly sendLocalScreenSharingStreamCallback: StartScreenSharingCallback;
     private readonly stopLocalScreenSharingStreamCallback: StopScreenSharingCallback;
     private readonly unsubscribers: (() => void)[] = [];
-    private readonly peerConnectionListeners: Array<PeerConnectionListener> = new Array<PeerConnectionListener>();
     private readonly userId: number;
     private lastWebrtcUserName: string | undefined;
     private lastWebrtcPassword: string | undefined;
 
     constructor(private Connection: RoomConnection) {
+        //we make sure we don't get any old peer.
+        peerStore.cleanupStore();
+        screenSharingPeerStore.cleanupStore();
         // We need to go through this weird bound function pointer in order to be able to "free" this reference later.
         this.sendLocalScreenSharingStreamCallback = this.sendLocalScreenSharingStream.bind(this);
         this.stopLocalScreenSharingStreamCallback = this.stopLocalScreenSharingStream.bind(this);
@@ -73,14 +70,6 @@ export class SimplePeer {
         this.initialise();
     }
 
-    public registerPeerConnectionListener(peerConnectionListener: PeerConnectionListener) {
-        this.peerConnectionListeners.push(peerConnectionListener);
-    }
-
-    public getNbConnections(): number {
-        return this.Users.length;
-    }
-
     /**
      * permit to listen when user could start visio
      */
@@ -164,9 +153,7 @@ export class SimplePeer {
         }
         this.PeerConnectionArray.set(user.userId, peer);
 
-        for (const peerConnectionListener of this.peerConnectionListeners) {
-            peerConnectionListener.onConnect(peer);
-        }
+        peerStore.pushNewPeer(peer);
         return peer;
     }
 
@@ -214,9 +201,7 @@ export class SimplePeer {
         );
         this.PeerScreenSharingConnectionArray.set(user.userId, peer);
 
-        for (const peerConnectionListener of this.peerConnectionListeners) {
-            peerConnectionListener.onConnect(peer);
-        }
+        screenSharingPeerStore.pushNewPeer(peer);
         return peer;
     }
 
@@ -255,12 +240,11 @@ export class SimplePeer {
             for (const userId of this.PeerScreenSharingConnectionArray.keys()) {
                 this.closeScreenSharingConnection(userId);
                 this.PeerScreenSharingConnectionArray.delete(userId);
+                screenSharingPeerStore.removePeer(userId);
             }
         }
 
-        for (const peerConnectionListener of this.peerConnectionListeners) {
-            peerConnectionListener.onDisconnect(userId);
-        }
+        peerStore.removePeer(userId);
     }
 
     /**
@@ -302,6 +286,8 @@ export class SimplePeer {
         for (const unsubscriber of this.unsubscribers) {
             unsubscriber();
         }
+        peerStore.cleanupStore();
+        screenSharingPeerStore.cleanupStore();
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -325,7 +311,6 @@ export class SimplePeer {
     private receiveWebrtcScreenSharingSignal(data: WebRtcSignalReceivedMessageInterface) {
         const uuid = playersStore.getPlayerById(data.userId)?.userUuid || "";
         if (blackListManager.isBlackListed(uuid)) return;
-        console.log("receiveWebrtcScreenSharingSignal", data);
         const streamResult = get(screenSharingLocalStreamStore);
         let stream: MediaStream | null = null;
         if (streamResult.type === "success" && streamResult.stream !== null) {
diff --git a/front/src/WebRtc/VideoPeer.ts b/front/src/WebRtc/VideoPeer.ts
index 3a59697c..b66a27fe 100644
--- a/front/src/WebRtc/VideoPeer.ts
+++ b/front/src/WebRtc/VideoPeer.ts
@@ -4,7 +4,7 @@ import type { RoomConnection } from "../Connexion/RoomConnection";
 import { blackListManager } from "./BlackListManager";
 import type { Subscription } from "rxjs";
 import type { UserSimplePeerInterface } from "./SimplePeer";
-import { get, readable, Readable, Unsubscriber } from "svelte/store";
+import { readable, Readable, Unsubscriber } from "svelte/store";
 import {
     localStreamStore,
     obtainedMediaConstraintIsMobileStore,
@@ -12,7 +12,7 @@ import {
     ObtainedMediaStreamConstraints,
 } from "../Stores/MediaStore";
 import { playersStore } from "../Stores/PlayersStore";
-import { chatMessagesStore, chatVisibilityStore, newChatMessageStore } from "../Stores/ChatStore";
+import { chatMessagesStore, newChatMessageStore } from "../Stores/ChatStore";
 import { getIceServersConfig } from "../Components/Video/utils";
 import { isMobile } from "../Enum/EnvironmentVariable";