diff --git a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte index d1d8c81a..4ff59f5d 100644 --- a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte +++ b/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; - const newMain = $highlightedEmbedScreen ?? coWebsites.length > 1 ? coWebsites[1] : undefined; - if (newMain && newMain.getId() !== $mainCoWebsite.getId()) { - coWebsiteManager.goToMain(newMain); - } else if (coWebsiteManager.getMainState() === iframeStates.closed) { + if (coWebsiteManager.getMainState() === iframeStates.closed) { coWebsiteManager.displayMain(); + } else if ($highlightedEmbedScreen?.type === "cowebsite") { + coWebsiteManager.goToMain($highlightedEmbedScreen.embed); } else { coWebsiteManager.hideMain(); } } else { - highlightedEmbedScreen.toggleHighlight({ - type: "cowebsite", - embed: coWebsite, - }); + if (coWebsiteManager.getMainState() === iframeStates.closed) { + coWebsiteManager.goToMain(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" && diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index 8e0b85ed..a5c57ed6 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/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 = writable(iframeStates.closed); private _onResize: Subject = new Subject(); public onResize = this._onResize.asObservable(); @@ -57,6 +57,10 @@ class CoWebsiteManager { }); public getMainState() { + return get(this.openedMain); + } + + public getMainStateSubscriber(): Readable { 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({ - type: "cowebsite", - embed: mainCoWebsite, - }); + highlightedEmbedScreen.removeHighlight(); } 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,