Move CoWebsite to generic class

front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte

@@ -2,9 +2,9 @@
     import { onMount } from "svelte";
 
     import { ICON_URL } from "../../Enum/EnvironmentVariable";
-    import { coWebsitesNotAsleep, mainCoWebsite } from "../../Stores/CoWebsiteStore";
+    import { coWebsitesNotAsleep, mainCoWebsite, jitsiCoWebsite } from "../../Stores/CoWebsiteStore";
     import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
-    import type { CoWebsite } from "../../WebRtc/CoWebsiteManager";
+    import type { CoWebsite } from "../../WebRtc/CoWebsite/CoWesbite";
     import { iframeStates } from "../../WebRtc/CoWebsiteManager";
     import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
 
@@ -14,16 +14,15 @@
 
     let icon: HTMLImageElement;
     let iconLoaded = false;
-    let state = coWebsite.state;
+    let state = coWebsite.getStateSubscriber();
-
+    let isJitsi: boolean = false;
-    const coWebsiteUrl = coWebsite.iframe.src;
-    const urlObject = new URL(coWebsiteUrl);
 
     onMount(() => {
-        icon.src = coWebsite.jitsi
+        isJitsi = Boolean($jitsiCoWebsite && $jitsiCoWebsite.getId() === coWebsite.getId());
+        icon.src = isJitsi
             ? "/resources/logos/meet.svg"
-            : `${ICON_URL}/icon?url=${urlObject.hostname}&size=64..96..256&fallback_icon_color=14304c`;
+            : `${ICON_URL}/icon?url=${coWebsite.getUrl().hostname}&size=64..96..256&fallback_icon_color=14304c`;
-        icon.alt = coWebsite.altMessage ?? urlObject.hostname;
+        icon.alt = coWebsite.getUrl().hostname;
         icon.onload = () => {
             iconLoaded = true;
         };
@@ -33,10 +32,10 @@
         if (vertical) {
             coWebsiteManager.goToMain(coWebsite);
         } else if ($mainCoWebsite) {
-            if ($mainCoWebsite.iframe.id === coWebsite.iframe.id) {
+            if ($mainCoWebsite.getId() === coWebsite.getId()) {
                 const coWebsites = $coWebsitesNotAsleep;
                 const newMain = $highlightedEmbedScreen ?? coWebsites.length > 1 ? coWebsites[1] : undefined;
-                if (newMain && newMain.iframe.id !== $mainCoWebsite.iframe.id) {
+                if (newMain && newMain.getId() !== $mainCoWebsite.getId()) {
                     coWebsiteManager.goToMain(newMain);
                 } else if (coWebsiteManager.getMainState() === iframeStates.closed) {
                     coWebsiteManager.displayMain();
@@ -65,11 +64,11 @@
     let isHighlight: boolean = false;
     let isMain: boolean = false;
     $: {
-        isMain = $mainCoWebsite !== undefined && $mainCoWebsite.iframe === coWebsite.iframe;
+        isMain = $mainCoWebsite !== undefined && $mainCoWebsite.getId() === coWebsite.getId();
         isHighlight =
             $highlightedEmbedScreen !== null &&
             $highlightedEmbedScreen.type === "cowebsite" &&
-            $highlightedEmbedScreen.embed.iframe === coWebsite.iframe;
+            $highlightedEmbedScreen.embed.getId() === coWebsite.getId();
     }
 </script>
 
@@ -86,7 +85,7 @@
     <img
         class="cowebsite-icon noselect nes-pointer"
         class:hide={!iconLoaded}
-        class:jitsi={coWebsite.jitsi}
+        class:jitsi={isJitsi}
         bind:this={icon}
         on:dragstart|preventDefault={noDrag}
         alt=""

front/src/Components/EmbedScreens/CoWebsitesContainer.svelte

@@ -7,7 +7,7 @@
 
 {#if $coWebsites.length > 0}
     <div id="cowebsite-thumbnail-container" class:vertical>
-        {#each [...$coWebsites.values()] as coWebsite, index (coWebsite.iframe.id)}
+        {#each [...$coWebsites.values()] as coWebsite, index (coWebsite.getId())}
             <CoWebsiteThumbnail {index} {coWebsite} {vertical} />
         {/each}
     </div>

front/src/Components/EmbedScreens/Layouts/PresentationLayout.svelte

@@ -9,10 +9,12 @@
 
     function closeCoWebsite() {
         if ($highlightedEmbedScreen?.type === "cowebsite") {
-            if ($highlightedEmbedScreen.embed.closable) {
+            if ($highlightedEmbedScreen.embed.isClosable()) {
                 coWebsiteManager.closeCoWebsite($highlightedEmbedScreen.embed);
             } else {
-                coWebsiteManager.unloadCoWebsite($highlightedEmbedScreen.embed);
+                coWebsiteManager.unloadCoWebsite($highlightedEmbedScreen.embed).catch((err) => {
+                    console.error("Cannot unload co-website", err);
+                });
             }
         }
     }
@@ -64,9 +66,9 @@
                             />
                         {/key}
                     {:else if $highlightedEmbedScreen.type === "cowebsite"}
-                        {#key $highlightedEmbedScreen.embed.iframe.id}
+                        {#key $highlightedEmbedScreen.embed.getId()}
                             <div
-                                id={"cowebsite-slot-" + $highlightedEmbedScreen.embed.iframe.id}
+                                id={"cowebsite-slot-" + $highlightedEmbedScreen.embed.getId()}
                                 class="highlighted-cowebsite nes-container is-rounded"
                             >
                                 <div class="actions">

front/src/Phaser/Game/GameMapPropertiesListener.ts

@@ -1,7 +1,6 @@
 import type { GameScene } from "./GameScene";
 import type { GameMap } from "./GameMap";
 import { scriptUtils } from "../../Api/ScriptUtils";
-import type { CoWebsite } from "../../WebRtc/CoWebsiteManager";
 import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
 import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
 import { localUserStore } from "../../Connexion/LocalUserStore";
@@ -9,12 +8,12 @@ import { get } from "svelte/store";
 import { ON_ACTION_TRIGGER_BUTTON, ON_ICON_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager";
 import type { ITiledMapLayer } from "../Map/ITiledMap";
 import { GameMapProperties } from "./GameMapProperties";
-import type CancelablePromise from "cancelable-promise";
+import type { CoWebsite } from "../../WebRtc/CoWebsite/CoWesbite";
+import { SimpleCoWebsite } from "../../WebRtc/CoWebsite/SimpleCoWebsite";
 
 interface OpenCoWebsite {
     actionId: string;
     coWebsite?: CoWebsite;
-    loadPromise?: CancelablePromise;
 }
 
 export class GameMapPropertiesListener {
@@ -108,26 +107,26 @@ export class GameMapPropertiesListener {
                     this.coWebsitesOpenByLayer.set(layer, coWebsiteOpen);
 
                     const loadCoWebsiteFunction = (coWebsite: CoWebsite) => {
-                        coWebsiteOpen.loadPromise = coWebsiteManager.loadCoWebsite(coWebsite).catch(() => {
+                        coWebsiteManager.loadCoWebsite(coWebsite).catch(() => {
-                            console.error("Error during loading a co-website: " + coWebsite.url);
+                            console.error("Error during loading a co-website: " + coWebsite.getUrl());
                         });
 
                         layoutManagerActionStore.removeAction(actionId);
                     };
 
                     const openCoWebsiteFunction = () => {
-                        const coWebsite = coWebsiteManager.addCoWebsite(
+                        const coWebsite = new SimpleCoWebsite(
-                            openWebsiteProperty ?? "",
+                            new URL(openWebsiteProperty ?? "", this.scene.MapUrlFile),
-                            this.scene.MapUrlFile,
                             allowApiProperty,
                             websitePolicyProperty,
                             websiteWidthProperty,
-                            websitePositionProperty,
                             false
                         );
 
                         coWebsiteOpen.coWebsite = coWebsite;
 
+                        coWebsiteManager.addCoWebsiteToStore(coWebsite, websitePositionProperty);
+
                         loadCoWebsiteFunction(coWebsite);
                     };
 
@@ -149,17 +148,17 @@ export class GameMapPropertiesListener {
                             userInputManager: this.scene.userInputManager,
                         });
                     } else if (websiteTriggerProperty === ON_ICON_TRIGGER_BUTTON) {
-                        const coWebsite = coWebsiteManager.addCoWebsite(
+                        const coWebsite = new SimpleCoWebsite(
-                            openWebsiteProperty,
+                            new URL(openWebsiteProperty ?? "", this.scene.MapUrlFile),
-                            this.scene.MapUrlFile,
                             allowApiProperty,
                             websitePolicyProperty,
                             websiteWidthProperty,
-                            websitePositionProperty,
                             false
                         );
 
                         coWebsiteOpen.coWebsite = coWebsite;
+
+                        coWebsiteManager.addCoWebsiteToStore(coWebsite, websitePositionProperty);
                     }
 
                     if (!websiteTriggerProperty) {
@@ -203,12 +202,10 @@ export class GameMapPropertiesListener {
                         return;
                     }
 
-                    if (coWebsiteOpen.loadPromise !== undefined) {
+                    const coWebsite = coWebsiteOpen.coWebsite;
-                        coWebsiteOpen.loadPromise.cancel();
-                    }
 
-                    if (coWebsiteOpen.coWebsite !== undefined) {
+                    if (coWebsite) {
-                        coWebsiteManager.closeCoWebsite(coWebsiteOpen.coWebsite);
+                        coWebsiteManager.closeCoWebsite(coWebsite);
                     }
 
                     this.coWebsitesOpenByLayer.delete(layer);

front/src/Phaser/Game/GameScene.ts

@@ -5,7 +5,7 @@ import { get, Unsubscriber } from "svelte/store";
 
 import { userMessageManager } from "../../Administration/UserMessageManager";
 import { connectionManager } from "../../Connexion/ConnectionManager";
-import { CoWebsite, coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
+import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
 import { urlManager } from "../../Url/UrlManager";
 import { mediaManager } from "../../WebRtc/MediaManager";
 import { UserInputManager } from "../UserInput/UserInputManager";
@@ -22,7 +22,13 @@ import { lazyLoadPlayerCharacterTextures, loadCustomTexture } from "../Entity/Pl
 import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager";
 import { ON_ACTION_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager";
 import { iframeListener } from "../../Api/IframeListener";
-import { DEBUG_MODE, JITSI_PRIVATE_MODE, MAX_PER_GROUP, POSITION_DELAY } from "../../Enum/EnvironmentVariable";
+import {
+    DEBUG_MODE,
+    JITSI_PRIVATE_MODE,
+    JITSI_URL,
+    MAX_PER_GROUP,
+    POSITION_DELAY,
+} from "../../Enum/EnvironmentVariable";
 import { ProtobufClientUtils } from "../../Network/ProtobufClientUtils";
 import { Room } from "../../Connexion/Room";
 import { jitsiFactory } from "../../WebRtc/JitsiFactory";
@@ -92,6 +98,9 @@ import { MapStore } from "../../Stores/Utils/MapStore";
 import { followUsersColorStore } from "../../Stores/FollowStore";
 import { GameSceneUserInputHandler } from "../UserInput/GameSceneUserInputHandler";
 import { locale } from "../../i18n/i18n-svelte";
+import { JitsiCoWebsite } from "../../WebRtc/CoWebsite/JitsiCoWebsite";
+import { SimpleCoWebsite } from "../../WebRtc/CoWebsite/SimpleCoWebsite";
+import type { CoWebsite } from "../../WebRtc/CoWebsite/CoWesbite";
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
     reconnecting: boolean;
@@ -794,7 +803,19 @@ export class GameScene extends DirtyScene {
                  * Triggered when we receive the JWT token to connect to Jitsi
                  */
                 this.connection.sendJitsiJwtMessageStream.subscribe((message) => {
-                    this.startJitsi(message.jitsiRoom, message.jwt);
+                    if (!JITSI_URL) {
+                        throw new Error("Missing JITSI_URL environment variable.");
+                    }
+
+                    let domain = JITSI_URL;
+
+                    if (domain.substring(0, 7) !== "http://" && domain.substring(0, 8) !== "https://") {
+                        domain = `${location.protocol}//${domain}`;
+                    }
+
+                    const coWebsite = new JitsiCoWebsite(new URL(domain), false, undefined, undefined, false);
+                    coWebsiteManager.addCoWebsiteToStore(coWebsite, 0);
+                    this.startJitsi(coWebsite, message.jitsiRoom, message.jwt);
                 });
 
                 this.messageSubscription = this.connection.worldFullMessageStream.subscribe((message) => {
@@ -963,12 +984,25 @@ export class GameScene extends DirtyScene {
                 const openJitsiRoomFunction = () => {
                     const roomName = jitsiFactory.getRoomName(newValue.toString(), this.instance);
                     const jitsiUrl = allProps.get(GameMapProperties.JITSI_URL) as string | undefined;
+
                     if (JITSI_PRIVATE_MODE && !jitsiUrl) {
                         const adminTag = allProps.get(GameMapProperties.JITSI_ADMIN_ROOM_TAG) as string | undefined;
 
                         this.connection?.emitQueryJitsiJwtMessage(roomName, adminTag);
                     } else {
-                        this.startJitsi(roomName, undefined);
+                        let domain = jitsiUrl || JITSI_URL;
+                        if (domain === undefined) {
+                            throw new Error("Missing JITSI_URL environment variable or jitsiUrl parameter in the map.");
+                        }
+
+                        if (domain.substring(0, 7) !== "http://" && domain.substring(0, 8) !== "https://") {
+                            domain = `${location.protocol}//${domain}`;
+                        }
+
+                        const coWebsite = new JitsiCoWebsite(new URL(domain), false, undefined, undefined, false);
+
+                        coWebsiteManager.addCoWebsiteToStore(coWebsite, 0);
+                        this.startJitsi(coWebsite, roomName, undefined);
                     }
                     layoutManagerActionStore.removeAction("jitsi");
                 };
@@ -1260,13 +1294,11 @@ ${escapedMessage}
                 throw new Error("Unknown query source");
             }
 
-            const coWebsite = coWebsiteManager.addCoWebsite(
+            const coWebsite: SimpleCoWebsite = new SimpleCoWebsite(
-                openCoWebsite.url,
+                new URL(openCoWebsite.url, iframeListener.getBaseUrlFromSource(source)),
-                iframeListener.getBaseUrlFromSource(source),
                 openCoWebsite.allowApi,
                 openCoWebsite.allowPolicy,
                 openCoWebsite.widthPercent,
-                openCoWebsite.position,
                 openCoWebsite.closable ?? true
             );
 
@@ -1275,7 +1307,7 @@ ${escapedMessage}
             }
 
             return {
-                id: coWebsite.iframe.id,
+                id: coWebsite.getId(),
             };
         });
 
@@ -1284,7 +1316,7 @@ ${escapedMessage}
 
             return coWebsites.map((coWebsite: CoWebsite) => {
                 return {
-                    id: coWebsite.iframe.id,
+                    id: coWebsite.getId(),
                 };
             });
         });
@@ -2112,7 +2144,7 @@ ${escapedMessage}
         mediaManager.hideMyCamera();
     }
 
-    public startJitsi(roomName: string, jwt?: string): void {
+    public startJitsi(coWebsite: JitsiCoWebsite, roomName: string, jwt?: string): void {
         const allProps = this.gameMap.getCurrentProperties();
         const jitsiConfig = this.safeParseJSONstring(
             allProps.get(GameMapProperties.JITSI_CONFIG) as string | undefined,
@@ -2124,10 +2156,14 @@ ${escapedMessage}
         );
         const jitsiUrl = allProps.get(GameMapProperties.JITSI_URL) as string | undefined;
 
-        jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl).catch(() => {
+        coWebsite.setJitsiLoadPromise(
-            console.error("Cannot start a Jitsi co-website");
+            jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl)
+        );
+
+        coWebsiteManager.loadCoWebsite(coWebsite).catch((err) => {
+            console.error(err);
         });
-        this.disableMediaBehaviors();
+
         analyticsClient.enteredJitsi(roomName, this.room.id);
     }
 

front/src/Stores/CoWebsiteStore.ts

@@ -1,5 +1,6 @@
 import { derived, get, writable } from "svelte/store";
-import type { CoWebsite } from "../WebRtc/CoWebsiteManager";
+import type { CoWebsite } from "../WebRtc/CoWebsite/CoWesbite";
+import { JitsiCoWebsite } from "../WebRtc/CoWebsite/JitsiCoWebsite";
 
 function createCoWebsiteStore() {
     const { subscribe, set, update } = writable(Array<CoWebsite>());
@@ -9,7 +10,7 @@ function createCoWebsiteStore() {
     return {
         subscribe,
         add: (coWebsite: CoWebsite, position?: number) => {
-            coWebsite.state.subscribe((value) => {
+            coWebsite.getStateSubscriber().subscribe((value) => {
                 update((currentArray) => currentArray);
             });
 
@@ -31,7 +32,7 @@ function createCoWebsiteStore() {
         },
         remove: (coWebsite: CoWebsite) => {
             update((currentArray) => [
-                ...currentArray.filter((currentCoWebsite) => currentCoWebsite.iframe.id !== coWebsite.iframe.id),
+                ...currentArray.filter((currentCoWebsite) => currentCoWebsite.getId() !== coWebsite.getId()),
             ]);
         },
         empty: () => {
@@ -43,9 +44,13 @@ function createCoWebsiteStore() {
 export const coWebsites = createCoWebsiteStore();
 
 export const coWebsitesNotAsleep = derived([coWebsites], ([$coWebsites]) =>
-    $coWebsites.filter((coWebsite) => get(coWebsite.state) !== "asleep")
+    $coWebsites.filter((coWebsite) => coWebsite.getState() !== "asleep")
 );
 
 export const mainCoWebsite = derived([coWebsites], ([$coWebsites]) =>
-    $coWebsites.find((coWebsite) => get(coWebsite.state) !== "asleep")
+    $coWebsites.find((coWebsite) => coWebsite.getState() !== "asleep")
+);
+
+export const jitsiCoWebsite = derived([coWebsites], ([$coWebsites]) =>
+    $coWebsites.find((coWebsite) => coWebsite instanceof JitsiCoWebsite)
 );

front/src/Stores/EmbedScreensStore.ts

@@ -1,5 +1,5 @@
 import { derived, get, writable } from "svelte/store";
-import type { CoWebsite } from "../WebRtc/CoWebsiteManager";
+import type { CoWebsite } from "../WebRtc/CoWebsite/CoWesbite";
 import { LayoutMode } from "../WebRtc/LayoutManager";
 import { coWebsites } from "./CoWebsiteStore";
 import { Streamable, streamableCollectionStore } from "./StreamableCollectionStore";
@@ -31,7 +31,7 @@ function createHighlightedEmbedScreenStore() {
                 embedScreen.type !== currentEmbedScreen.type ||
                 (embedScreen.type === "cowebsite" &&
                     currentEmbedScreen.type === "cowebsite" &&
-                    embedScreen.embed.iframe.id !== currentEmbedScreen.embed.iframe.id) ||
+                    embedScreen.embed.getId() !== currentEmbedScreen.embed.getId()) ||
                 (embedScreen.type === "streamable" &&
                     currentEmbedScreen.type === "streamable" &&
                     embedScreen.embed.uniqueId !== currentEmbedScreen.embed.uniqueId)

front/src/WebRtc/CoWebsite/CoWesbite.ts

@@ -0,0 +1,17 @@
+import type CancelablePromise from "cancelable-promise";
+import type { Readable, Writable } from "svelte/store";
+
+export type CoWebsiteState = "asleep" | "loading" | "ready";
+
+export interface CoWebsite {
+    getId(): string;
+    getUrl(): URL;
+    getState(): CoWebsiteState;
+    getStateSubscriber(): Readable<CoWebsiteState>;
+    getIframe(): HTMLIFrameElement | undefined;
+    getLoadIframe(): CancelablePromise<HTMLIFrameElement> | undefined;
+    getWidthPercent(): number | undefined;
+    isClosable(): boolean;
+    load(): CancelablePromise<HTMLIFrameElement>;
+    unload(): Promise<void>;
+}

front/src/WebRtc/CoWebsite/JitsiCoWebsite.ts

@@ -0,0 +1,61 @@
+import CancelablePromise from "cancelable-promise";
+import { gameManager } from "../../Phaser/Game/GameManager";
+import { coWebsiteManager } from "../CoWebsiteManager";
+import { jitsiFactory } from "../JitsiFactory";
+import { SimpleCoWebsite } from "./SimpleCoWebsite";
+
+export class JitsiCoWebsite extends SimpleCoWebsite {
+    private jitsiLoadPromise?: CancelablePromise<HTMLIFrameElement>;
+
+    constructor(url: URL, allowApi?: boolean, allowPolicy?: string, widthPercent?: number, closable?: boolean) {
+        const coWebsite = coWebsiteManager.searchJitsi();
+
+        if (coWebsite) {
+            coWebsiteManager.closeCoWebsite(coWebsite);
+        }
+
+        super(url, allowApi, allowPolicy, widthPercent, closable);
+    }
+
+    setJitsiLoadPromise(promise: CancelablePromise<HTMLIFrameElement>): void {
+        this.jitsiLoadPromise = promise;
+    }
+
+    load(): CancelablePromise<HTMLIFrameElement> {
+        return new CancelablePromise((resolve, reject, cancel) => {
+            this.state.set("loading");
+
+            gameManager.getCurrentGameScene().disableMediaBehaviors();
+            jitsiFactory.restart();
+
+            if (!this.jitsiLoadPromise) {
+                return reject("Undefined Jitsi start callback");
+            }
+
+            const jitsiLoading = this.jitsiLoadPromise
+                .then((iframe) => {
+                    this.iframe = iframe;
+                    this.iframe.classList.add("pixel");
+                    this.state.set("ready");
+                    return resolve(iframe);
+                })
+                .catch((err) => {
+                    return reject(err);
+                });
+
+            cancel(() => {
+                jitsiLoading.cancel();
+                this.unload().catch((err) => {
+                    console.error("Cannot unload Jitsi co-website while cancel loading", err);
+                });
+            });
+        });
+    }
+
+    unload(): Promise<void> {
+        jitsiFactory.destroy();
+        gameManager.getCurrentGameScene().enableMediaBehaviors();
+
+        return super.unload();
+    }
+}

front/src/WebRtc/CoWebsite/SimpleCoWebsite.ts

@@ -0,0 +1,133 @@
+import CancelablePromise from "cancelable-promise";
+import { get, Readable, writable, Writable } from "svelte/store";
+import { iframeListener } from "../../Api/IframeListener";
+import { coWebsiteManager } from "../CoWebsiteManager";
+import type { CoWebsite, CoWebsiteState } from "./CoWesbite";
+
+export class SimpleCoWebsite implements CoWebsite {
+    protected id: string;
+    protected url: URL;
+    protected state: Writable<CoWebsiteState>;
+    protected iframe?: HTMLIFrameElement;
+    protected loadIframe?: CancelablePromise<HTMLIFrameElement>;
+    protected allowApi?: boolean;
+    protected allowPolicy?: string;
+    protected widthPercent?: number;
+    protected closable: boolean;
+
+    constructor(url: URL, allowApi?: boolean, allowPolicy?: string, widthPercent?: number, closable?: boolean) {
+        this.id = coWebsiteManager.generateUniqueId();
+        this.url = url;
+        this.state = writable("asleep" as CoWebsiteState);
+        this.allowApi = allowApi;
+        this.allowPolicy = allowPolicy;
+        this.widthPercent = widthPercent;
+        this.closable = closable ?? false;
+    }
+
+    getId(): string {
+        return this.id;
+    }
+
+    getUrl(): URL {
+        return this.url;
+    }
+
+    getState(): CoWebsiteState {
+        return get(this.state);
+    }
+
+    getStateSubscriber(): Readable<CoWebsiteState> {
+        return this.state;
+    }
+
+    getIframe(): HTMLIFrameElement | undefined {
+        return this.iframe;
+    }
+
+    getLoadIframe(): CancelablePromise<HTMLIFrameElement> | undefined {
+        return this.loadIframe;
+    }
+
+    getWidthPercent(): number | undefined {
+        return this.widthPercent;
+    }
+
+    isClosable(): boolean {
+        return this.closable;
+    }
+
+    load(): CancelablePromise<HTMLIFrameElement> {
+        this.loadIframe = new CancelablePromise((resolve, reject, cancel) => {
+            this.state.set("loading");
+
+            const iframe = document.createElement("iframe");
+            this.iframe = iframe;
+            this.iframe.src = this.url.toString();
+            this.iframe.id = this.id;
+
+            if (this.allowPolicy) {
+                this.iframe.allow = this.allowPolicy;
+            }
+
+            if (this.allowApi) {
+                iframeListener.registerIframe(this.iframe);
+            }
+
+            this.iframe.classList.add("pixel");
+
+            const onloadPromise = new Promise<void>((resolve) => {
+                if (this.iframe) {
+                    this.iframe.onload = () => {
+                        this.state.set("ready");
+                        resolve();
+                    };
+                }
+            });
+
+            const onTimeoutPromise = new Promise<void>((resolve) => {
+                setTimeout(() => resolve(), 2000);
+            });
+
+            coWebsiteManager.getCoWebsiteBuffer().appendChild(this.iframe);
+
+            const race = CancelablePromise.race([onloadPromise, onTimeoutPromise])
+                .then(() => {
+                    return resolve(iframe);
+                })
+                .catch((err) => {
+                    console.error("Error on co-website loading => ", err);
+                    return reject();
+                });
+
+            cancel(() => {
+                race.cancel();
+                this.unload().catch((err) => {
+                    console.error("Cannot unload co-website while cancel loading", err);
+                });
+            });
+        });
+
+        return this.loadIframe;
+    }
+
+    unload(): Promise<void> {
+        return new Promise((resolve) => {
+            if (this.iframe) {
+                if (this.allowApi) {
+                    iframeListener.unregisterIframe(this.iframe);
+                }
+                this.iframe.parentNode?.removeChild(this.iframe);
+            }
+
+            if (this.loadIframe) {
+                this.loadIframe.cancel();
+                this.loadIframe = undefined;
+            }
+
+            this.state.set("asleep");
+
+            resolve();
+        });
+    }
+}

front/src/WebRtc/CoWebsiteManager.ts

@@ -1,15 +1,13 @@
 import { HtmlUtils } from "./HtmlUtils";
 import { Subject } from "rxjs";
-import { iframeListener } from "../Api/IframeListener";
 import { waScaleManager } from "../Phaser/Services/WaScaleManager";
-import { coWebsites, coWebsitesNotAsleep, mainCoWebsite } from "../Stores/CoWebsiteStore";
+import { coWebsites, coWebsitesNotAsleep, jitsiCoWebsite, mainCoWebsite } from "../Stores/CoWebsiteStore";
-import { get, Writable, writable } from "svelte/store";
+import { get } from "svelte/store";
 import { embedScreenLayout, highlightedEmbedScreen } from "../Stores/EmbedScreensStore";
 import { isMediaBreakpointDown } from "../Utils/BreakpointsUtils";
-import { jitsiFactory } from "./JitsiFactory";
-import { gameManager } from "../Phaser/Game/GameManager";
 import { LayoutMode } from "./LayoutManager";
-import CancelablePromise from "cancelable-promise";
+import type { CoWebsite } from "./CoWebsite/CoWesbite";
+import type CancelablePromise from "cancelable-promise";
 
 export enum iframeStates {
     closed = 1,
@@ -35,20 +33,6 @@ interface TouchMoveCoordinates {
     y: number;
 }
 
-export type CoWebsiteState = "asleep" | "loading" | "ready";
-
-export type CoWebsite = {
-    iframe: HTMLIFrameElement;
-    url: URL;
-    state: Writable<CoWebsiteState>;
-    closable: boolean;
-    allowPolicy: string | undefined;
-    allowApi: boolean | undefined;
-    widthPercent?: number | undefined;
-    jitsi?: boolean;
-    altMessage?: string;
-};
-
 class CoWebsiteManager {
     private openedMain: iframeStates = iframeStates.closed;
 
@@ -144,10 +128,12 @@ class CoWebsiteManager {
                 throw new Error("Undefined main co-website on closing");
             }
 
-            if (coWebsite.closable) {
+            if (coWebsite.isClosable()) {
                 this.closeCoWebsite(coWebsite);
             } else {
-                this.unloadCoWebsite(coWebsite);
+                this.unloadCoWebsite(coWebsite).catch((err) => {
+                    console.error("Cannot unload co-website on click on close button", err);
+                });
             }
         });
 
@@ -234,7 +220,10 @@ class CoWebsiteManager {
                 return;
             }
 
-            coWebsite.iframe.style.display = "none";
+            const iframe = coWebsite.getIframe();
+            if (iframe) {
+                iframe.style.display = "none";
+            }
             this.resizing = true;
             document.addEventListener("mousemove", movecallback);
         });
@@ -250,7 +239,10 @@ class CoWebsiteManager {
                 return;
             }
 
-            coWebsite.iframe.style.display = "flex";
+            const iframe = coWebsite.getIframe();
+            if (iframe) {
+                iframe.style.display = "flex";
+            }
             this.resizing = false;
         });
 
@@ -263,7 +255,10 @@ class CoWebsiteManager {
                 return;
             }
 
-            coWebsite.iframe.style.display = "none";
+            const iframe = coWebsite.getIframe();
+            if (iframe) {
+                iframe.style.display = "none";
+            }
             this.resizing = true;
             const touchEvent = event.touches[0];
             this.previousTouchMoveCoordinates = { x: touchEvent.pageX, y: touchEvent.pageY };
@@ -282,7 +277,10 @@ class CoWebsiteManager {
                 return;
             }
 
-            coWebsite.iframe.style.display = "flex";
+            const iframe = coWebsite.getIframe();
+            if (iframe) {
+                iframe.style.display = "flex";
+            }
             this.resizing = false;
         });
     }
@@ -306,9 +304,12 @@ class CoWebsiteManager {
     public displayMain() {
         const coWebsite = this.getMainCoWebsite();
         if (coWebsite) {
-            coWebsite.iframe.style.display = "block";
+            const iframe = coWebsite.getIframe();
+            if (iframe) {
+                iframe.style.display = "block";
+            }
         }
-        this.loadMain();
+        this.loadMain(coWebsite?.getWidthPercent());
         this.openMain();
         this.fire();
     }
@@ -316,7 +317,10 @@ class CoWebsiteManager {
     public hideMain() {
         const coWebsite = this.getMainCoWebsite();
         if (coWebsite) {
-            coWebsite.iframe.style.display = "none";
+            const iframe = coWebsite.getIframe();
+            if (iframe) {
+                iframe.style.display = "none";
+            }
         }
         this.cowebsiteDom.classList.add("closing");
         this.cowebsiteDom.classList.remove("opened");
@@ -402,7 +406,9 @@ class CoWebsiteManager {
     }
 
     public getCoWebsiteById(coWebsiteId: string): CoWebsite | undefined {
-        return get(coWebsites).find((coWebsite: CoWebsite) => coWebsite.iframe.id === coWebsiteId);
+        return get(coWebsites).find((coWebsite: CoWebsite) => {
+            return coWebsite.getId() === coWebsiteId;
+        });
     }
 
     private getCoWebsiteByPosition(position: number): CoWebsite | undefined {
@@ -422,7 +428,9 @@ class CoWebsiteManager {
     }
 
     private getPositionByCoWebsite(coWebsite: CoWebsite): number {
-        return get(coWebsites).findIndex((currentCoWebsite) => currentCoWebsite.iframe.id === coWebsite.iframe.id);
+        return get(coWebsites).findIndex((currentCoWebsite) => {
+            return currentCoWebsite.getId() === coWebsite.getId();
+        });
     }
 
     private getSlotByCowebsite(coWebsite: CoWebsite): HTMLDivElement | undefined {
@@ -436,7 +444,7 @@ class CoWebsiteManager {
         if (index === 0) {
             id += "main";
         } else {
-            id += coWebsite.iframe.id;
+            id += coWebsite.getId();
         }
 
         const slot = HtmlUtils.getElementById<HTMLDivElement>(id);
@@ -453,60 +461,72 @@ class CoWebsiteManager {
 
         const bounding = coWebsiteSlot.getBoundingClientRect();
 
-        coWebsite.iframe.style.top = bounding.top + "px";
+        const iframe = coWebsite.getIframe();
-        coWebsite.iframe.style.left = bounding.left + "px";
+
-        coWebsite.iframe.style.width = bounding.right - bounding.left + "px";
+        if (iframe) {
-        coWebsite.iframe.style.height = bounding.bottom - bounding.top + "px";
+            iframe.style.top = bounding.top + "px";
+            iframe.style.left = bounding.left + "px";
+            iframe.style.width = bounding.right - bounding.left + "px";
+            iframe.style.height = bounding.bottom - bounding.top + "px";
+        }
     }
 
     public resizeAllIframes() {
         const mainCoWebsite = this.getCoWebsiteByPosition(0);
+        const mainIframe = mainCoWebsite?.getIframe();
         const highlightEmbed = get(highlightedEmbedScreen);
 
-        get(coWebsites).forEach((coWebsite) => {
+        get(coWebsites).forEach((coWebsite: CoWebsite) => {
-            const notMain = !mainCoWebsite || (mainCoWebsite && mainCoWebsite.iframe.id !== coWebsite.iframe.id);
+            const iframe = coWebsite.getIframe();
+            if (!iframe) {
+                return;
+            }
+
+            const notMain = !mainCoWebsite || (mainCoWebsite && mainIframe && mainIframe.id !== iframe.id);
             const notHighlighEmbed =
                 !highlightEmbed ||
                 (highlightEmbed &&
                     (highlightEmbed.type !== "cowebsite" ||
-                        (highlightEmbed.type === "cowebsite" &&
+                        (highlightEmbed.type === "cowebsite" && highlightEmbed.embed.getId() !== coWebsite.getId())));
-                            highlightEmbed.embed.iframe.id !== coWebsite.iframe.id)));
 
-            if (coWebsite.iframe.classList.contains("main") && notMain) {
+            if (iframe.classList.contains("main") && notMain) {
-                coWebsite.iframe.classList.remove("main");
+                iframe.classList.remove("main");
             }
 
-            if (coWebsite.iframe.classList.contains("highlighted") && notHighlighEmbed) {
+            if (iframe.classList.contains("highlighted") && notHighlighEmbed) {
-                coWebsite.iframe.classList.remove("highlighted");
+                iframe.classList.remove("highlighted");
-                coWebsite.iframe.classList.add("pixel");
+                iframe.classList.add("pixel");
-                coWebsite.iframe.style.top = "-1px";
+                iframe.style.top = "-1px";
-                coWebsite.iframe.style.left = "-1px";
+                iframe.style.left = "-1px";
             }
 
             if (notMain && notHighlighEmbed) {
-                coWebsite.iframe.classList.add("pixel");
+                iframe.classList.add("pixel");
-                coWebsite.iframe.style.top = "-1px";
+                iframe.style.top = "-1px";
-                coWebsite.iframe.style.left = "-1px";
+                iframe.style.left = "-1px";
             }
 
             this.setIframeOffset(coWebsite);
         });
 
-        if (mainCoWebsite) {
+        if (mainIframe) {
-            mainCoWebsite.iframe.classList.add("main");
+            mainIframe.classList.add("main");
-            mainCoWebsite.iframe.classList.remove("pixel");
+            mainIframe.classList.remove("pixel");
         }
 
         if (highlightEmbed && highlightEmbed.type === "cowebsite") {
-            highlightEmbed.embed.iframe.classList.add("highlighted");
+            const highlightEmbedIframe = highlightEmbed.embed.getIframe();
-            highlightEmbed.embed.iframe.classList.remove("pixel");
+            if (highlightEmbedIframe) {
+                highlightEmbedIframe.classList.add("highlighted");
+                highlightEmbedIframe.classList.remove("pixel");
+            }
         }
     }
 
     private removeHighlightCoWebsite(coWebsite: CoWebsite) {
         const highlighted = get(highlightedEmbedScreen);
 
-        if (highlighted && highlighted.type === "cowebsite" && highlighted.embed.iframe.id === coWebsite.iframe.id) {
+        if (highlighted && highlighted.type === "cowebsite" && highlighted.embed.getId() === coWebsite.getId()) {
             highlightedEmbedScreen.removeHighlight();
         }
     }
@@ -519,7 +539,9 @@ class CoWebsiteManager {
             this.closeMain();
         }
 
-        coWebsite.iframe.remove();
+        coWebsite.unload().catch((err) => {
+            console.error("Cannot unload cowebsite on remove from stack");
+        });
     }
 
     public goToMain(coWebsite: CoWebsite) {
@@ -531,8 +553,8 @@ class CoWebsiteManager {
             isMediaBreakpointDown("lg") &&
             get(embedScreenLayout) === LayoutMode.Presentation &&
             mainCoWebsite &&
-            mainCoWebsite.iframe.id !== coWebsite.iframe.id &&
+            mainCoWebsite.getId() !== coWebsite.getId() &&
-            get(mainCoWebsite.state) !== "asleep"
+            mainCoWebsite.getState() !== "asleep"
         ) {
             highlightedEmbedScreen.toggleHighlight({
                 type: "cowebsite",
@@ -544,25 +566,15 @@ class CoWebsiteManager {
     }
 
     public searchJitsi(): CoWebsite | undefined {
-        return get(coWebsites).find((coWebsite: CoWebsite) => coWebsite.jitsi);
+        return get(jitsiCoWebsite);
     }
 
-    private initialiseCowebsite(coWebsite: CoWebsite, position: number | undefined) {
+    public addCoWebsiteToStore(coWebsite: CoWebsite, position: number | undefined) {
-        if (coWebsite.allowPolicy) {
-            coWebsite.iframe.allow = coWebsite.allowPolicy;
-        }
-
-        if (coWebsite.allowApi) {
-            iframeListener.registerIframe(coWebsite.iframe);
-        }
-
-        coWebsite.iframe.classList.add("pixel");
-
         const coWebsitePosition = position === undefined ? get(coWebsites).length : position;
         coWebsites.add(coWebsite, coWebsitePosition);
     }
 
-    private generateUniqueId() {
+    public generateUniqueId() {
         let id = undefined;
         do {
             id = "cowebsite-iframe-" + (Math.random() + 1).toString(36).substring(7);
@@ -571,80 +583,11 @@ class CoWebsiteManager {
         return id;
     }
 
-    public addCoWebsite(
+    public loadCoWebsite(coWebsite: CoWebsite): CancelablePromise<void> {
-        url: string,
-        base: string,
-        allowApi?: boolean,
-        allowPolicy?: string,
-        widthPercent?: number,
-        position?: number,
-        closable?: boolean,
-        altMessage?: string
-    ): CoWebsite {
-        const iframe = document.createElement("iframe");
-        const fullUrl = new URL(url, base);
-        iframe.src = fullUrl.toString();
-        iframe.id = this.generateUniqueId();
-
-        const newCoWebsite: CoWebsite = {
-            iframe,
-            url: fullUrl,
-            state: writable("asleep" as CoWebsiteState),
-            closable: closable ?? false,
-            allowPolicy,
-            allowApi,
-            widthPercent,
-            altMessage,
-        };
-
-        this.initialiseCowebsite(newCoWebsite, position);
-
-        return newCoWebsite;
-    }
-
-    public addCoWebsiteFromIframe(
-        iframe: HTMLIFrameElement,
-        allowApi?: boolean,
-        allowPolicy?: string,
-        widthPercent?: number,
-        position?: number,
-        closable?: boolean,
-        jitsi?: boolean
-    ): CoWebsite {
-        if (get(coWebsitesNotAsleep).length < 1) {
-            this.loadMain(widthPercent);
-        }
-
-        iframe.id = this.generateUniqueId();
-
-        const newCoWebsite: CoWebsite = {
-            iframe,
-            url: new URL(iframe.src),
-            state: writable("ready" as CoWebsiteState),
-            closable: closable ?? false,
-            allowPolicy,
-            allowApi,
-            widthPercent,
-            jitsi,
-        };
-
-        if (position === 0) {
-            this.openMain();
-            setTimeout(() => {
-                this.fire();
-            }, animationTime);
-        }
-
-        this.initialiseCowebsite(newCoWebsite, position);
-
-        return newCoWebsite;
-    }
-
-    public loadCoWebsite(coWebsite: CoWebsite): CancelablePromise<CoWebsite> {
         if (get(coWebsitesNotAsleep).length < 1) {
             coWebsites.remove(coWebsite);
             coWebsites.add(coWebsite, 0);
-            this.loadMain(coWebsite.widthPercent);
+            this.loadMain(coWebsite.getWidthPercent());
         }
 
         // Check if the main is hide
@@ -652,96 +595,56 @@ class CoWebsiteManager {
             this.displayMain();
         }
 
-        coWebsite.state.set("loading");
+        const coWebsiteLloading = coWebsite
+            .load()
+            .then(() => {
+                const mainCoWebsite = this.getMainCoWebsite();
+                if (mainCoWebsite && mainCoWebsite.getId() === coWebsite.getId()) {
+                    this.openMain();
 
-        const mainCoWebsite = this.getMainCoWebsite();
+                    setTimeout(() => {
-
+                        this.fire();
-        return new CancelablePromise((resolve, reject, cancel) => {
+                    }, animationTime);
-            const onloadPromise = new Promise<void>((resolve) => {
+                }
-                coWebsite.iframe.onload = () => {
+                this.resizeAllIframes();
-                    coWebsite.state.set("ready");
+            })
-                    resolve();
+            .catch((err) => {
-                };
+                console.error("Error on co-website loading => ", err);
+                this.removeCoWebsiteFromStack(coWebsite);
             });
 
-            const onTimeoutPromise = new Promise<void>((resolve) => {
+        return coWebsiteLloading;
-                setTimeout(() => resolve(), 2000);
-            });
-
-            this.cowebsiteBufferDom.appendChild(coWebsite.iframe);
-
-            if (coWebsite.jitsi) {
-                const gameScene = gameManager.getCurrentGameScene();
-                gameScene.disableMediaBehaviors();
-                jitsiFactory.restart();
-            }
-
-            const race = CancelablePromise.race([onloadPromise, onTimeoutPromise])
-                .then(() => {
-                    if (mainCoWebsite && mainCoWebsite.iframe.id === coWebsite.iframe.id) {
-                        this.openMain();
-
-                        setTimeout(() => {
-                            this.fire();
-                        }, animationTime);
-                    }
-
-                    return resolve(coWebsite);
-                })
-                .catch((err) => {
-                    console.error("Error on co-website loading => ", err);
-                    this.removeCoWebsiteFromStack(coWebsite);
-                    return reject();
-                });
-
-            cancel(() => {
-                race.cancel();
-                this.unloadCoWebsite(coWebsite);
-            });
-        });
     }
 
-    public unloadCoWebsite(coWebsite: CoWebsite): void {
+    public unloadCoWebsite(coWebsite: CoWebsite): Promise<void> {
         this.removeHighlightCoWebsite(coWebsite);
 
-        coWebsite.iframe.parentNode?.removeChild(coWebsite.iframe);
+        return coWebsite
-        coWebsite.state.set("asleep");
+            .unload()
-        coWebsites.remove(coWebsite);
+            .then(() => {
+                coWebsites.remove(coWebsite);
+                const mainCoWebsite = this.getMainCoWebsite();
 
-        if (coWebsite.jitsi) {
+                if (mainCoWebsite) {
-            jitsiFactory.stop();
+                    this.removeHighlightCoWebsite(mainCoWebsite);
-            const gameScene = gameManager.getCurrentGameScene();
+                    this.goToMain(mainCoWebsite);
-            gameScene.enableMediaBehaviors();
+                    this.resizeAllIframes();
-        }
+                } else {
+                    this.closeMain();
+                }
 
-        const mainCoWebsite = this.getMainCoWebsite();
+                coWebsites.add(coWebsite, get(coWebsites).length);
-
+            })
-        if (mainCoWebsite) {
+            .catch(() => {
-            this.removeHighlightCoWebsite(mainCoWebsite);
+                console.error();
-            this.goToMain(mainCoWebsite);
+            });
-            this.resizeAllIframes();
-        } else {
-            this.closeMain();
-        }
-
-        coWebsites.add(coWebsite, get(coWebsites).length);
     }
 
     public closeCoWebsite(coWebsite: CoWebsite): void {
-        if (coWebsite.jitsi) {
-            jitsiFactory.destroy();
-            const gameScene = gameManager.getCurrentGameScene();
-            gameScene.enableMediaBehaviors();
-        }
-
         if (get(coWebsites).length === 1) {
             this.fire();
         }
 
-        if (coWebsite.allowApi) {
-            iframeListener.unregisterIframe(coWebsite.iframe);
-        }
-
         this.removeCoWebsiteFromStack(coWebsite);
 
         const mainCoWebsite = this.getMainCoWebsite();

front/src/WebRtc/JitsiFactory.ts

@@ -1,7 +1,9 @@
 import { JITSI_URL } from "../Enum/EnvironmentVariable";
-import { CoWebsite, coWebsiteManager } from "./CoWebsiteManager";
+import { coWebsiteManager } from "./CoWebsiteManager";
 import { requestedCameraState, requestedMicrophoneState } from "../Stores/MediaStore";
 import { get } from "svelte/store";
+import type { CoWebsite } from "./CoWebsite/CoWesbite";
+import CancelablePromise from "cancelable-promise";
 
 interface jitsiConfigInterface {
     startWithAudioMuted: boolean;
@@ -134,89 +136,91 @@ class JitsiFactory {
         return slugify(instance.replace("/", "-") + "-" + roomName);
     }
 
-    public async start(
+    public start(
         roomName: string,
         playerName: string,
         jwt?: string,
         config?: object,
         interfaceConfig?: object,
         jitsiUrl?: string
-    ) {
+    ): CancelablePromise<HTMLIFrameElement> {
-        const coWebsite = coWebsiteManager.searchJitsi();
+        return new CancelablePromise((resolve, reject, cancel) => {
+            // Jitsi meet external API maintains some data in local storage
+            // which is sent via the appData URL parameter when joining a
+            // conference. Problem is that this data grows indefinitely. Thus
+            // after some time the URLs get so huge that loading the iframe
+            // becomes slow and eventually breaks completely. Thus lets just
+            // clear jitsi local storage before starting a new conference.
+            window.localStorage.removeItem("jitsiLocalStorage");
 
-        if (coWebsite) {
+            const domain = jitsiUrl || JITSI_URL;
-            coWebsiteManager.closeCoWebsite(coWebsite);
+            if (domain === undefined) {
-        }
+                throw new Error("Missing JITSI_URL environment variable or jitsiUrl parameter in the map.");
-
-        // Jitsi meet external API maintains some data in local storage
-        // which is sent via the appData URL parameter when joining a
-        // conference. Problem is that this data grows indefinitely. Thus
-        // after some time the URLs get so huge that loading the iframe
-        // becomes slow and eventually breaks completely. Thus lets just
-        // clear jitsi local storage before starting a new conference.
-        window.localStorage.removeItem("jitsiLocalStorage");
-
-        const domain = jitsiUrl || JITSI_URL;
-        if (domain === undefined) {
-            throw new Error("Missing JITSI_URL environment variable or jitsiUrl parameter in the map.");
-        }
-        await this.loadJitsiScript(domain);
-
-        const options: JitsiOptions = {
-            roomName: roomName,
-            jwt: jwt,
-            width: "100%",
-            height: "100%",
-            parentNode: coWebsiteManager.getCoWebsiteBuffer(),
-            configOverwrite: mergeConfig(config),
-            interfaceConfigOverwrite: { ...defaultInterfaceConfig, ...interfaceConfig },
-        };
-
-        if (!options.jwt) {
-            delete options.jwt;
-        }
-
-        const doResolve = (): void => {
-            const iframe = coWebsiteManager.getCoWebsiteBuffer().querySelector<HTMLIFrameElement>('[id*="jitsi" i]');
-            if (iframe && this.jitsiApi) {
-                const coWebsite = coWebsiteManager.addCoWebsiteFromIframe(
-                    iframe,
-                    false,
-                    undefined,
-                    undefined,
-                    0,
-                    false,
-                    true
-                );
-
-                this.jitsiApi.addListener("videoConferenceLeft", () => {
-                    this.closeOrUnload(coWebsite);
-                });
-
-                this.jitsiApi.addListener("readyToClose", () => {
-                    this.closeOrUnload(coWebsite);
-                });
             }
 
-            coWebsiteManager.resizeAllIframes();
+            const loadScript = this.loadJitsiScript(domain).then(() => {
-        };
+                const options: JitsiOptions = {
+                    roomName: roomName,
+                    jwt: jwt,
+                    width: "100%",
+                    height: "100%",
+                    parentNode: coWebsiteManager.getCoWebsiteBuffer(),
+                    configOverwrite: mergeConfig(config),
+                    interfaceConfigOverwrite: { ...defaultInterfaceConfig, ...interfaceConfig },
+                };
 
-        this.jitsiApi = undefined;
+                if (!options.jwt) {
+                    delete options.jwt;
+                }
 
-        options.onload = () => doResolve(); //we want for the iframe to be loaded before triggering animations.
+                const timemout = setTimeout(() => doResolve(), 2000); //failsafe in case the iframe is deleted before loading or too long to load
-        setTimeout(() => doResolve(), 2000); //failsafe in case the iframe is deleted before loading or too long to load
-        this.jitsiApi = new window.JitsiMeetExternalAPI(domain, options);
-        this.jitsiApi.executeCommand("displayName", playerName);
 
-        this.jitsiApi.addListener("audioMuteStatusChanged", this.audioCallback);
+                const doResolve = (): void => {
-        this.jitsiApi.addListener("videoMuteStatusChanged", this.videoCallback);
+                    clearTimeout(timemout);
+                    const iframe = coWebsiteManager
+                        .getCoWebsiteBuffer()
+                        .querySelector<HTMLIFrameElement>('[id*="jitsi" i]');
+                    if (iframe && this.jitsiApi) {
+                        this.jitsiApi.addListener("videoConferenceLeft", () => {
+                            this.closeOrUnload();
+                        });
+
+                        this.jitsiApi.addListener("readyToClose", () => {
+                            this.closeOrUnload();
+                        });
+
+                        return resolve(iframe);
+                    }
+                };
+
+                this.jitsiApi = undefined;
+
+                options.onload = () => doResolve(); //we want for the iframe to be loaded before triggering animations.
+                this.jitsiApi = new window.JitsiMeetExternalAPI(domain, options);
+                this.jitsiApi.executeCommand("displayName", playerName);
+
+                this.jitsiApi.addListener("audioMuteStatusChanged", this.audioCallback);
+                this.jitsiApi.addListener("videoMuteStatusChanged", this.videoCallback);
+            });
+
+            cancel(() => {
+                loadScript.cancel();
+            });
+        });
     }
 
-    private closeOrUnload = function (coWebsite: CoWebsite) {
+    private closeOrUnload = function () {
-        if (coWebsite.closable) {
+        const coWebsite = coWebsiteManager.searchJitsi();
+        if (!coWebsite) {
+            return;
+        }
+
+        if (coWebsite.isClosable()) {
             coWebsiteManager.closeCoWebsite(coWebsite);
         } else {
-            coWebsiteManager.unloadCoWebsite(coWebsite);
+            coWebsiteManager.unloadCoWebsite(coWebsite).catch((err) => {
+                console.error("Cannot unload co-website from the Jitsi factory", err);
+            });
         }
     };
 
@@ -229,8 +233,6 @@ class JitsiFactory {
         this.jitsiApi.addListener("videoMuteStatusChanged", this.videoCallback);
 
         const coWebsite = coWebsiteManager.searchJitsi();
-        console.log("jitsi api ", this.jitsiApi);
-        console.log("iframe cowebsite", coWebsite?.iframe);
 
         if (!coWebsite) {
             this.destroy();
@@ -238,11 +240,11 @@ class JitsiFactory {
         }
 
         this.jitsiApi.addListener("videoConferenceLeft", () => {
-            this.closeOrUnload(coWebsite);
+            this.closeOrUnload();
         });
 
         this.jitsiApi.addListener("readyToClose", () => {
-            this.closeOrUnload(coWebsite);
+            this.closeOrUnload();
         });
     }
 
@@ -280,8 +282,8 @@ class JitsiFactory {
         }
     }
 
-    private async loadJitsiScript(domain: string): Promise<void> {
+    private loadJitsiScript(domain: string): CancelablePromise<void> {
-        return new Promise<void>((resolve, reject) => {
+        return new CancelablePromise<void>((resolve, reject, cancel) => {
             if (this.jitsiScriptLoaded) {
                 resolve();
                 return;
@@ -300,6 +302,10 @@ class JitsiFactory {
             };
 
             document.head.appendChild(jitsiScript);
+
+            cancel(() => {
+                jitsiScript.remove();
+            });
         });
     }
 }