Merge branch 'develop' of github.com:thecodingmachine/workadventure

front/src/Components/Video/PresentationLayout.svelte

@@ -12,7 +12,9 @@
 
 <div class="main-section">
     {#if $videoFocusStore }
+        {#key $videoFocusStore.uniqueId}
             <MediaBox streamable={$videoFocusStore}></MediaBox>
+        {/key}
     {/if}
 </div>
 <aside class="sidebar">

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

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

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,37 +1,29 @@
 import { readable, writable } from "svelte/store";
-import type { RemotePeer, SimplePeer } from "../WebRtc/SimplePeer";
+import type { VideoPeer } from "../WebRtc/VideoPeer";
-import { VideoPeer } from "../WebRtc/VideoPeer";
+import type { ScreenSharingPeer } from "../WebRtc/ScreenSharingPeer";
-import { 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(new Map<number, VideoPeer>());
-
-    const { subscribe, set, update } = writable(peers);
 
     return {
         subscribe,
-        connectToSimplePeer: (simplePeer: SimplePeer) => {
+        pushNewPeer(peer: VideoPeer) {
-            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) {
+        removePeer(userId: number) {
             update((users) => {
                 users.delete(userId);
                 return users;
             });
         },
-            });
+        cleanupStore() {
+            set(new Map<number, VideoPeer>());
         },
     };
 }
@@ -40,31 +32,24 @@ 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(new Map<number, ScreenSharingPeer>());
-
-    const { subscribe, set, update } = writable(peers);
 
     return {
         subscribe,
-        connectToSimplePeer: (simplePeer: SimplePeer) => {
+        pushNewPeer(peer: ScreenSharingPeer) {
-            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) {
+        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 { get, writable } from "svelte/store";
-import type { RemotePeer, SimplePeer } from "../WebRtc/SimplePeer";
-import { VideoPeer } from "../WebRtc/VideoPeer";
-import { ScreenSharingPeer } from "../WebRtc/ScreenSharingPeer";
 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 !== focusedMedia ? media : null;
-                focusedMedia = media;
-            } else {
-                focusedMedia = 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;
@@ -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) {
+        peerStore.pushNewPeer(peer);
-            peerConnectionListener.onConnect(peer);
-        }
         return peer;
     }
 
@@ -214,9 +201,7 @@ export class SimplePeer {
         );
         this.PeerScreenSharingConnectionArray.set(user.userId, peer);
 
-        for (const peerConnectionListener of this.peerConnectionListeners) {
+        screenSharingPeerStore.pushNewPeer(peer);
-            peerConnectionListener.onConnect(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) {
+        peerStore.removePeer(userId);
-            peerConnectionListener.onDisconnect(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) {

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