From 3d8d8cc3a96efd16e93752b38381f75e1c3ee718 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Mon, 16 Nov 2020 16:15:21 +0100
Subject: [PATCH] FIX: more cowebsite fixes

---
 front/src/WebRtc/CoWebsiteManager.ts | 46 ++++++++++++++--------------
 front/src/WebRtc/JitsiFactory.ts     |  2 +-
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts
index 70d171a2..b625bf6e 100644
--- a/front/src/WebRtc/CoWebsiteManager.ts
+++ b/front/src/WebRtc/CoWebsiteManager.ts
@@ -20,32 +20,31 @@ class CoWebsiteManager {
      * Quickly going in and out of an iframe trigger can create conflicts between the iframe states.
      * So we use this promise to queue up every cowebsite state transition
      */
-    private currentOperationPromise: Promise<void> = Promise.resolve(); 
+    private currentOperationPromise: Promise<void> = Promise.resolve();
+    private cowebsiteDiv: HTMLDivElement; 
     
-    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');
+    constructor() {
+        this.cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId);
+    }
+    
+    private close(): void {
+        this.cowebsiteDiv.classList.remove('loaded'); //edit the css class to trigger the transition
+        this.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');
+    private load(): void {
+        this.cowebsiteDiv.classList.remove('hidden'); //edit the css class to trigger the transition
+        this.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
+    private open(): void {
+        this.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 = '';
+        this.load();
+        this.cowebsiteDiv.innerHTML = '';
 
         const iframe = document.createElement('iframe');
         iframe.id = 'cowebsite-iframe';
@@ -53,7 +52,7 @@ class CoWebsiteManager {
         const onloadPromise = new Promise((resolve) => {
             iframe.onload = () => resolve();
         });
-        cowebsiteDiv.appendChild(iframe);
+        this.cowebsiteDiv.appendChild(iframe);
         const onTimeoutPromise = new Promise((resolve) => {
             setTimeout(() => resolve(), 2000);
         });
@@ -69,23 +68,23 @@ class CoWebsiteManager {
      * Just like loadCoWebsite but the div can be filled by the user.
      */
     public insertCoWebsite(callback: (cowebsite: HTMLDivElement) => Promise<void>): void {
-        const cowebsiteDiv = this.load();
-        this.currentOperationPromise = this.currentOperationPromise.then(() => callback(cowebsiteDiv)).then(() => {
+        this.load();
+        this.currentOperationPromise = this.currentOperationPromise.then(() => callback(this.cowebsiteDiv)).then(() => {
             this.open();
             setTimeout(() => {
                 this.fire();
-            }, animationTime)
+            }, animationTime);
         }).catch(() => this.closeCoWebsite());
     }
 
     public closeCoWebsite(): Promise<void> {
         this.currentOperationPromise = this.currentOperationPromise.then(() => new Promise((resolve, reject) => {
             if(this.opened === iframeStates.closed) resolve(); //this method may be called twice, in case of iframe error for example
-            const cowebsiteDiv = this.close();
+            this.close();
             this.fire();
             setTimeout(() => {
+                this.cowebsiteDiv.innerHTML = '';
                 resolve();
-                setTimeout(() => cowebsiteDiv.innerHTML = '', 500)
             }, animationTime)
         }));
         return this.currentOperationPromise;
@@ -111,6 +110,7 @@ class CoWebsiteManager {
         }
     }
 
+    //todo: is it still useful to allow any kind of observers? 
     public onStateChange(observer: CoWebsiteStateChangedCallback) {
         this.observers.push(observer);
     }
diff --git a/front/src/WebRtc/JitsiFactory.ts b/front/src/WebRtc/JitsiFactory.ts
index d95ba4e5..88e247d7 100644
--- a/front/src/WebRtc/JitsiFactory.ts
+++ b/front/src/WebRtc/JitsiFactory.ts
@@ -52,7 +52,7 @@ class JitsiFactory {
             
             return new Promise((resolve, reject) => {
                 options.onload = () => resolve(); //we want for the iframe to be loaded before triggering animations.
-                setTimeout(() => reject('Failed to load the iframe'), 10000); //failsafe in case the iframe is deleted before loading
+                setTimeout(() => resolve(), 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);