Add main cowebsite minimize indicator

front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte

@@ -2,7 +2,7 @@
     import { onMount } from "svelte";
 
     import { ICON_URL } from "../../Enum/EnvironmentVariable";
-    import { coWebsitesNotAsleep, mainCoWebsite } from "../../Stores/CoWebsiteStore";
+    import { mainCoWebsite } from "../../Stores/CoWebsiteStore";
     import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
     import type { CoWebsite } from "../../WebRtc/CoWebsite/CoWesbite";
     import { JitsiCoWebsite } from "../../WebRtc/CoWebsite/JitsiCoWebsite";
@@ -17,6 +17,7 @@
     let iconLoaded = false;
     let state = coWebsite.getStateSubscriber();
     let isJitsi: boolean = coWebsite instanceof JitsiCoWebsite;
+    const mainState = coWebsiteManager.getMainStateSubscriber();
 
     onMount(() => {
         icon.src = isJitsi
@@ -33,20 +34,23 @@
             coWebsiteManager.goToMain(coWebsite);
         } else if ($mainCoWebsite) {
             if ($mainCoWebsite.getId() === coWebsite.getId()) {
-                const coWebsites = $coWebsitesNotAsleep;
+                if (coWebsiteManager.getMainState() === iframeStates.closed) {
-                const newMain = $highlightedEmbedScreen ?? coWebsites.length > 1 ? coWebsites[1] : undefined;
-                if (newMain && newMain.getId() !== $mainCoWebsite.getId()) {
-                    coWebsiteManager.goToMain(newMain);
-                } else if (coWebsiteManager.getMainState() === iframeStates.closed) {
                     coWebsiteManager.displayMain();
+                } else if ($highlightedEmbedScreen?.type === "cowebsite") {
+                    coWebsiteManager.goToMain($highlightedEmbedScreen.embed);
                 } else {
                     coWebsiteManager.hideMain();
                 }
             } else {
-                highlightedEmbedScreen.toggleHighlight({
+                if (coWebsiteManager.getMainState() === iframeStates.closed) {
-                    type: "cowebsite",
+                    coWebsiteManager.goToMain(coWebsite);
-                    embed: coWebsite,
+                    coWebsiteManager.displayMain();
-                });
+                } else {
+                    highlightedEmbedScreen.toggleHighlight({
+                        type: "cowebsite",
+                        embed: coWebsite,
+                    });
+                }
             }
         }
 
@@ -64,7 +68,10 @@
     let isHighlight: boolean = false;
     let isMain: boolean = false;
     $: {
-        isMain = $mainCoWebsite !== undefined && $mainCoWebsite.getId() === coWebsite.getId();
+        isMain =
+            $mainState === iframeStates.opened &&
+            $mainCoWebsite !== undefined &&
+            $mainCoWebsite.getId() === coWebsite.getId();
         isHighlight =
             $highlightedEmbedScreen !== null &&
             $highlightedEmbedScreen.type === "cowebsite" &&

front/src/WebRtc/CoWebsiteManager.ts

@@ -2,7 +2,7 @@ import { HtmlUtils } from "./HtmlUtils";
 import { Subject } from "rxjs";
 import { waScaleManager } from "../Phaser/Services/WaScaleManager";
 import { coWebsites, coWebsitesNotAsleep, mainCoWebsite } from "../Stores/CoWebsiteStore";
-import { get } from "svelte/store";
+import { get, Readable, Writable, writable } from "svelte/store";
 import { embedScreenLayout, highlightedEmbedScreen } from "../Stores/EmbedScreensStore";
 import { isMediaBreakpointDown } from "../Utils/BreakpointsUtils";
 import { LayoutMode } from "./LayoutManager";
@@ -34,7 +34,7 @@ interface TouchMoveCoordinates {
 }
 
 class CoWebsiteManager {
-    private openedMain: iframeStates = iframeStates.closed;
+    private openedMain: Writable<iframeStates> = writable(iframeStates.closed);
 
     private _onResize: Subject<void> = new Subject();
     public onResize = this._onResize.asObservable();
@@ -57,6 +57,10 @@ class CoWebsiteManager {
     });
 
     public getMainState() {
+        return get(this.openedMain);
+    }
+
+    public getMainStateSubscriber(): Readable<iframeStates> {
         return this.openedMain;
     }
 
@@ -324,7 +328,7 @@ class CoWebsiteManager {
         }
         this.cowebsiteDom.classList.add("closing");
         this.cowebsiteDom.classList.remove("opened");
-        this.openedMain = iframeStates.closed;
+        this.openedMain.set(iframeStates.closed);
         this.fire();
     }
 
@@ -332,7 +336,7 @@ class CoWebsiteManager {
         this.toggleFullScreenIcon(true);
         this.cowebsiteDom.classList.add("closing");
         this.cowebsiteDom.classList.remove("opened");
-        this.openedMain = iframeStates.closed;
+        this.openedMain.set(iframeStates.closed);
         this.resetStyleMain();
         this.fire();
     }
@@ -386,14 +390,14 @@ class CoWebsiteManager {
         }
 
         this.cowebsiteDom.classList.add("opened");
-        this.openedMain = iframeStates.loading;
+        this.openedMain.set(iframeStates.loading);
     }
 
     private openMain(): void {
         this.cowebsiteDom.addEventListener("transitionend", () => {
             this.resizeAllIframes();
         });
-        this.openedMain = iframeStates.opened;
+        this.openedMain.set(iframeStates.opened);
     }
 
     public resetStyleMain() {
@@ -556,10 +560,7 @@ class CoWebsiteManager {
             mainCoWebsite.getId() !== coWebsite.getId() &&
             mainCoWebsite.getState() !== "asleep"
         ) {
-            highlightedEmbedScreen.toggleHighlight({
+            highlightedEmbedScreen.removeHighlight();
-                type: "cowebsite",
-                embed: mainCoWebsite,
-            });
         }
 
         this.resizeAllIframes();
@@ -587,7 +588,7 @@ class CoWebsiteManager {
         }
 
         // Check if the main is hide
-        if (this.getMainCoWebsite() && this.openedMain === iframeStates.closed) {
+        if (this.getMainCoWebsite() && this.getMainState() === iframeStates.closed) {
             this.displayMain();
         }
 
@@ -661,7 +662,7 @@ class CoWebsiteManager {
     }
 
     public getGameSize(): { width: number; height: number } {
-        if (this.openedMain === iframeStates.closed) {
+        if (this.getMainState() === iframeStates.closed) {
             return {
                 width: window.innerWidth,
                 height: window.innerHeight,