Changing the way we focus a video element.

Now, only one video element can be important.

front/src/Stores/ImportanceStore.ts

@@ -1,26 +0,0 @@
-import {VideoPeer} from "../WebRtc/VideoPeer";
-import {Subscriber, Unsubscriber, writable} from "svelte/store";
-import {RemotePeer, SimplePeer} from "../WebRtc/SimplePeer";
-import {DivImportance} from "../WebRtc/LayoutManager";
-
-export interface ImportanceStore {
-    subscribe: (this:void, run: Subscriber<DivImportance>, invalidate?: ((value?: DivImportance) => void | undefined)) => Unsubscriber,
-    toggle: () => void,
-}
-
-export function createImportanceStore(defaultImportance: DivImportance): ImportanceStore {
-    const { subscribe, set, update } = writable<DivImportance>(defaultImportance);
-
-    return {
-        subscribe,
-        toggle: () => {
-            update((importance) => {
-                if (importance === DivImportance.Important) {
-                    return DivImportance.Normal;
-                } else {
-                    return DivImportance.Important;
-                }
-            });
-        }
-    };
-}

front/src/Stores/LayoutStore.ts

@@ -1,6 +1,5 @@
-import {derived, get} from "svelte/store";
+import {derived, get, writable} from "svelte/store";
 import {ScreenSharingLocalMedia, screenSharingLocalMedia} from "./ScreenSharingStore";
-import {DivImportance} from "../WebRtc/LayoutManager";
 import { peerStore, screenSharingStreamStore} from "./PeerStore";
 import type {RemotePeer} from "../WebRtc/SimplePeer";
 
@@ -27,26 +26,15 @@ function createLayoutStore() {
         }
         unsubscribes = [];
 
-        const peers = new Map<DivImportance, Map<string, DisplayableMedia>>();
-        peers.set(DivImportance.Normal, new Map<string, DisplayableMedia>());
-        peers.set(DivImportance.Important, new Map<string, DisplayableMedia>());
+        const peers = new Map<string, DisplayableMedia>();
 
         const addPeer = (peer: DisplayableMedia) => {
-            const importance = get(peer.importanceStore);
-
-            peers.get(importance)?.set(peer.uniqueId, peer);
-
-            unsubscribes.push(peer.importanceStore.subscribe((importance) => {
-                peers.forEach((category) => {
-                    category.delete(peer.uniqueId);
-                });
-                peers.get(importance)?.set(peer.uniqueId, peer);
-                set(peers);
-            }));
+            peers.set(peer.uniqueId, peer);
         };
 
         $screenSharingStreamStore.forEach(addPeer);
         $peerStore.forEach(addPeer);
+
         if ($screenSharingLocalMedia?.stream) {
             addPeer($screenSharingLocalMedia);
         }

front/src/Stores/ScreenSharingStore.ts

@@ -5,7 +5,6 @@ import type {
 } from "./MediaStore";
 import {DivImportance} from "../WebRtc/LayoutManager";
 import {gameOverlayVisibilityStore} from "./GameOverlayStoreVisibility";
-import {createImportanceStore, ImportanceStore} from "./ImportanceStore";
 
 declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
@@ -189,7 +188,6 @@ export const screenSharingAvailableStore = derived(peerStore, ($peerStore, set)
 
 export interface ScreenSharingLocalMedia {
     uniqueId: string;
-    importanceStore: ImportanceStore;
     stream: MediaStream|null;
     //subscribe(this: void, run: Subscriber<ScreenSharingLocalMedia>, invalidate?: (value?: ScreenSharingLocalMedia) => void): Unsubscriber;
 }
@@ -201,7 +199,6 @@ export const screenSharingLocalMedia = readable<ScreenSharingLocalMedia|null>(nu
 
     const localMedia: ScreenSharingLocalMedia = {
         uniqueId: "localScreenSharingStream",
-        importanceStore: createImportanceStore(DivImportance.Normal),
         stream: null
     }
 

front/src/Stores/VideoFocusStore.ts

@@ -0,0 +1,48 @@
+import {writable} from "svelte/store";
+import type {RemotePeer, SimplePeer} from "../WebRtc/SimplePeer";
+import {VideoPeer} from "../WebRtc/VideoPeer";
+import {ScreenSharingPeer} from "../WebRtc/ScreenSharingPeer";
+import type {DisplayableMedia} from "./LayoutStore";
+
+/**
+ * A store that contains the peer / media that has currently the "importance" focus.
+ */
+function createVideoFocusStore() {
+    const { subscribe, set, update } = writable<DisplayableMedia | null>(null);
+
+    let focusedMedia: DisplayableMedia | null = null;
+
+    return {
+        subscribe,
+        focus: (media: DisplayableMedia) => {
+            focusedMedia = media;
+            set(media);
+        },
+        removeFocus: () => {
+            focusedMedia = null;
+            set(null);
+        },
+        toggleFocus: (media: DisplayableMedia) => {
+            if (media !== focusedMedia) {
+                focusedMedia = media;
+            } else {
+                focusedMedia = null;
+            }
+            console.log('MEDIA', focusedMedia)
+            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();