opening and closing jitsi windows now trigger some transitions

front/src/WebRtc/CoWebsiteManager.ts

@@ -2,47 +2,90 @@ import {HtmlUtils} from "./HtmlUtils";
 
 export type CoWebsiteStateChangedCallback = () => void;
 
-export class CoWebsiteManager {
+enum iframeStates {
+    closed = 1,
+    loading, // loading an iframe can be slow, so we show some placeholder until it is ready
+    opened,
+}
 
-    private static observers = new Array<CoWebsiteStateChangedCallback>();
+const cowebsiteDivId = "cowebsite"; // the id of the parent div of the iframe.
+const animationTime = 500; //time used by the css transitions, in ms.
 
-    public static loadCoWebsite(url: string): void {
-        const cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite");
+class CoWebsiteManager {
+    
+    private opened: iframeStates = iframeStates.closed; 
+
+    private observers = new Array<CoWebsiteStateChangedCallback>();
+    
+    private close(): HTMLDivElement {
+        const cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId);
+        cowebsiteDiv.classList.remove('loaded'); //edit the css class to trigger the transition
+        cowebsiteDiv.classList.add('hidden');
+        this.opened = iframeStates.closed;
+        return cowebsiteDiv;
+    }
+    private load(): HTMLDivElement {
+        const cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId);
+        cowebsiteDiv.classList.remove('hidden'); //edit the css class to trigger the transition
+        cowebsiteDiv.classList.add('loading');
+        this.opened = iframeStates.loading;
+        return cowebsiteDiv;
+    }
+    private open(): HTMLDivElement {
+        const cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId);
+        cowebsiteDiv.classList.remove('loading', 'hidden'); //edit the css class to trigger the transition
+        this.opened = iframeStates.opened;
+        return cowebsiteDiv;
+    }
+
+    public loadCoWebsite(url: string): void {
+        const cowebsiteDiv = this.load();
         cowebsiteDiv.innerHTML = '';
 
         const iframe = document.createElement('iframe');
         iframe.id = 'cowebsite-iframe';
         iframe.src = url;
+        const onloadPromise = new Promise((resolve) => {
+            iframe.onload = () => resolve();
+        });
         cowebsiteDiv.appendChild(iframe);
-        //iframe.onload = () => {
-            // onload can be long to trigger. Maybe we should display the website, whatever happens, after 1 second?
-            CoWebsiteManager.fire();
-        //}
+        const onTimeoutPromise = new Promise((resolve) => {
+            setTimeout(() => resolve(), 2000);
+        });
+        Promise.race([onloadPromise, onTimeoutPromise]).then(() => {
+            this.open();
+            setTimeout(() => {
+                this.fire();
+            }, animationTime)
+        });
     }
 
     /**
      * Just like loadCoWebsite but the div can be filled by the user.
      */
-    public static insertCoWebsite(callback: (cowebsite: HTMLDivElement) => void): void {
-        const cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite");
-        cowebsiteDiv.innerHTML = '';
-
-        callback(cowebsiteDiv);
-        //iframe.onload = () => {
-        // onload can be long to trigger. Maybe we should display the website, whatever happens, after 1 second?
-        CoWebsiteManager.fire();
-        //}
+    public insertCoWebsite(callback: (cowebsite: HTMLDivElement) => Promise<void>): void {
+        const cowebsiteDiv = this.load();
+        callback(cowebsiteDiv).then(() => {
+            this.open();
+            setTimeout(() => {
+                this.fire();
+            }, animationTime)
+        });
     }
 
-    public static closeCoWebsite(): void {
-        const cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite");
-        cowebsiteDiv.innerHTML = '';
-        CoWebsiteManager.fire();
+    public closeCoWebsite(): Promise<void> {
+        return new Promise((resolve, reject) => {
+            const cowebsiteDiv = this.close();
+            this.fire();
+            setTimeout(() => {
+                resolve();
+                setTimeout(() => cowebsiteDiv.innerHTML = '', 500)
+            }, animationTime)
+        });
     }
 
-    public static getGameSize(): {width: number, height: number} {
-        const hasChildren = HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite").children.length > 0;
-        if (hasChildren === false) {
+    public getGameSize(): {width: number, height: number} {
+        if (this.opened !== iframeStates.opened) {
             return {
                 width: window.innerWidth,
                 height: window.innerHeight
@@ -61,13 +104,15 @@ export class CoWebsiteManager {
         }
     }
 
-    public static onStateChange(observer: CoWebsiteStateChangedCallback) {
-        CoWebsiteManager.observers.push(observer);
+    public onStateChange(observer: CoWebsiteStateChangedCallback) {
+        this.observers.push(observer);
     }
 
-    private static fire(): void {
-        for (const callback of CoWebsiteManager.observers) {
+    private fire(): void {
+        for (const callback of this.observers) {
             callback();
         }
     }
 }
+
+export const coWebsiteManager = new CoWebsiteManager();