FIX: fixed a circular dependancy in stores by rewriting createPeerSto…

…re() and createScreenSharingPeerStore()

front/src/Phaser/Game/GameScene.ts

@@ -715,9 +715,6 @@ 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;

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";

front/src/Stores/PeerStore.ts

@@ -1,71 +1,56 @@
 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>());
+        },
     };
 }
 
 /**
  * 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>());
+        },
     };
 }
 

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;
 }
 
 /**

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();
+    }
+});

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;
@@ -43,6 +44,9 @@ export class SimplePeer {
     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);
@@ -164,9 +168,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 +216,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 +255,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);
     }
 
     /**
@@ -325,7 +324,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) {

front/src/WebRtc/VideoPeer.ts

@@ -4,15 +4,15 @@ 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,
     obtainedMediaConstraintStore,
     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";