_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #424 from thecodingmachine/fix/coWebsiteBlocking

Browse Source 
FIX: more cowebsite fixes
This commit is contained in:
Kharhamel 2020-11-17 14:58:13 +01:00 committed by GitHub
commit f70f0a58a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
front/src/WebRtc/CoWebsiteManager.ts
View File

@ -21,31 +21,30 @@ class CoWebsiteManager {
* So we use this promise to queue up every cowebsite state transition * 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 { constructor() {
const cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId); this.cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId);
cowebsiteDiv.classList.remove('loaded'); //edit the css class to trigger the transition }
cowebsiteDiv.classList.add('hidden');
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; this.opened = iframeStates.closed;
return cowebsiteDiv;
} }
private load(): HTMLDivElement { private load(): void {
const cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId); this.cowebsiteDiv.classList.remove('hidden'); //edit the css class to trigger the transition
cowebsiteDiv.classList.remove('hidden'); //edit the css class to trigger the transition this.cowebsiteDiv.classList.add('loading');
cowebsiteDiv.classList.add('loading');
this.opened = iframeStates.loading; this.opened = iframeStates.loading;
return cowebsiteDiv;
} }
private open(): HTMLDivElement { private open(): void {
const cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId); this.cowebsiteDiv.classList.remove('loading', 'hidden'); //edit the css class to trigger the transition
cowebsiteDiv.classList.remove('loading', 'hidden'); //edit the css class to trigger the transition
this.opened = iframeStates.opened; this.opened = iframeStates.opened;
return cowebsiteDiv;
} }
public loadCoWebsite(url: string): void { public loadCoWebsite(url: string): void {
const cowebsiteDiv = this.load(); this.load();
cowebsiteDiv.innerHTML = ''; this.cowebsiteDiv.innerHTML = '';
const iframe = document.createElement('iframe'); const iframe = document.createElement('iframe');
iframe.id = 'cowebsite-iframe'; iframe.id = 'cowebsite-iframe';
@ -53,7 +52,7 @@ class CoWebsiteManager {
const onloadPromise = new Promise((resolve) => { const onloadPromise = new Promise((resolve) => {
iframe.onload = () => resolve(); iframe.onload = () => resolve();
}); });
cowebsiteDiv.appendChild(iframe); this.cowebsiteDiv.appendChild(iframe);
const onTimeoutPromise = new Promise((resolve) => { const onTimeoutPromise = new Promise((resolve) => {
setTimeout(() => resolve(), 2000); setTimeout(() => resolve(), 2000);
}); });
@ -69,23 +68,23 @@ class CoWebsiteManager {
* Just like loadCoWebsite but the div can be filled by the user. * Just like loadCoWebsite but the div can be filled by the user.
*/ */
public insertCoWebsite(callback: (cowebsite: HTMLDivElement) => Promise<void>): void { public insertCoWebsite(callback: (cowebsite: HTMLDivElement) => Promise<void>): void {
const cowebsiteDiv = this.load(); this.load();
this.currentOperationPromise = this.currentOperationPromise.then(() => callback(cowebsiteDiv)).then(() => { this.currentOperationPromise = this.currentOperationPromise.then(() => callback(this.cowebsiteDiv)).then(() => {
this.open(); this.open();
setTimeout(() => { setTimeout(() => {
this.fire(); this.fire();
}, animationTime) }, animationTime);
}).catch(() => this.closeCoWebsite()); }).catch(() => this.closeCoWebsite());
} }
public closeCoWebsite(): Promise<void> { public closeCoWebsite(): Promise<void> {
this.currentOperationPromise = this.currentOperationPromise.then(() => new Promise((resolve, reject) => { 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 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(); this.fire();
setTimeout(() => { setTimeout(() => {
this.cowebsiteDiv.innerHTML = '';
resolve(); resolve();
setTimeout(() => cowebsiteDiv.innerHTML = '', 500)
}, animationTime) }, animationTime)
})); }));
return this.currentOperationPromise; return this.currentOperationPromise;
@ -111,6 +110,7 @@ class CoWebsiteManager {
} }
} }
//todo: is it still useful to allow any kind of observers?
public onStateChange(observer: CoWebsiteStateChangedCallback) { public onStateChange(observer: CoWebsiteStateChangedCallback) {
this.observers.push(observer); this.observers.push(observer);
} }

2
front/src/WebRtc/JitsiFactory.ts
View File

@ -52,7 +52,7 @@ class JitsiFactory {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
options.onload = () => resolve(); //we want for the iframe to be loaded before triggering animations. 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 = new window.JitsiMeetExternalAPI(domain, options);
this.jitsiApi.executeCommand('displayName', playerName); this.jitsiApi.executeCommand('displayName', playerName);