Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'master' into develop

Browse source
This commit is contained in:
Gregoire Parant 2021-08-06 15:53:33 +02:00
commit af613f5b5b
20 changed files with 202 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

185
front/src/WebRtc/CoWebsiteManager.ts
View file

@ -1,7 +1,8 @@
import {HtmlUtils} from "./HtmlUtils";
import {Subject} from "rxjs";
import {iframeListener} from "../Api/IframeListener";
import {touchScreenManager} from "../Touch/TouchScreenManager";
import { HtmlUtils } from "./HtmlUtils";
import { Subject } from "rxjs";
import { iframeListener } from "../Api/IframeListener";
import { touchScreenManager } from "../Touch/TouchScreenManager";
import { waScaleManager } from "../Phaser/Services/WaScaleManager";
enum iframeStates {
closed = 1,
@ -9,13 +10,13 @@ enum iframeStates {
opened,
}
const cowebsiteDivId = 'cowebsite'; // the id of the whole container.
const cowebsiteMainDomId = 'cowebsite-main'; // the id of the parent div of the iframe.
const cowebsiteAsideDomId = 'cowebsite-aside'; // the id of the parent div of the iframe.
export const cowebsiteCloseButtonId = 'cowebsite-close';
const cowebsiteFullScreenButtonId = 'cowebsite-fullscreen';
const cowebsiteOpenFullScreenImageId = 'cowebsite-fullscreen-open';
const cowebsiteCloseFullScreenImageId = 'cowebsite-fullscreen-close';
const cowebsiteDivId = "cowebsite"; // the id of the whole container.
const cowebsiteMainDomId = "cowebsite-main"; // the id of the parent div of the iframe.
const cowebsiteAsideDomId = "cowebsite-aside"; // the id of the parent div of the iframe.
export const cowebsiteCloseButtonId = "cowebsite-close";
const cowebsiteFullScreenButtonId = "cowebsite-fullscreen";
const cowebsiteOpenFullScreenImageId = "cowebsite-fullscreen-open";
const cowebsiteCloseFullScreenImageId = "cowebsite-fullscreen-close";
const animationTime = 500; //time used by the css transitions, in ms.
interface TouchMoveCoordinates {
@ -24,7 +25,6 @@ interface TouchMoveCoordinates {
}
class CoWebsiteManager {
private opened: iframeStates = iframeStates.closed;
private _onResize: Subject<void> = new Subject();
@ -38,14 +38,14 @@ class CoWebsiteManager {
private resizing: boolean = false;
private cowebsiteMainDom: HTMLDivElement;
private cowebsiteAsideDom: HTMLDivElement;
private previousTouchMoveCoordinates: TouchMoveCoordinates|null = null; //only use on touchscreens to track touch movement
private previousTouchMoveCoordinates: TouchMoveCoordinates | null = null; //only use on touchscreens to track touch movement
get width(): number {
return this.cowebsiteDiv.clientWidth;
}
set width(width: number) {
this.cowebsiteDiv.style.width = width+'px';
this.cowebsiteDiv.style.width = width + "px";
}
get height(): number {
@ -53,7 +53,7 @@ class CoWebsiteManager {
}
set height(height: number) {
this.cowebsiteDiv.style.height = height+'px';
this.cowebsiteDiv.style.height = height + "px";
}
get verticalMode(): boolean {
@ -75,56 +75,55 @@ class CoWebsiteManager {
this.initResizeListeners(false);
const buttonCloseFrame = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId);
buttonCloseFrame.addEventListener('click', () => {
buttonCloseFrame.addEventListener("click", () => {
buttonCloseFrame.blur();
this.closeCoWebsite();
});
const buttonFullScreenFrame = HtmlUtils.getElementByIdOrFail(cowebsiteFullScreenButtonId);
buttonFullScreenFrame.addEventListener('click', () => {
buttonFullScreenFrame.addEventListener("click", () => {
buttonFullScreenFrame.blur();
this.fullscreen();
});
}
private initResizeListeners(touchMode:boolean) {
const movecallback = (event:MouseEvent|TouchEvent) => {
private initResizeListeners(touchMode: boolean) {
const movecallback = (event: MouseEvent | TouchEvent) => {
let x, y;
if (event.type === 'mousemove') {
if (event.type === "mousemove") {
x = (event as MouseEvent).movementX / this.getDevicePixelRatio();
y = (event as MouseEvent).movementY / this.getDevicePixelRatio();
} else {
const touchEvent = (event as TouchEvent).touches[0];
const last = {x: touchEvent.pageX, y: touchEvent.pageY};
const last = { x: touchEvent.pageX, y: touchEvent.pageY };
const previous = this.previousTouchMoveCoordinates as TouchMoveCoordinates;
this.previousTouchMoveCoordinates = last;
x = last.x - previous.x;
y = last.y - previous.y;
}
this.verticalMode ? this.height += y : this.width -= x;
this.fire();
}
this.cowebsiteAsideDom.addEventListener( touchMode ? 'touchstart' : 'mousedown', (event) => {
this.verticalMode ? (this.height += y) : (this.width -= x);
this.fire();
};
this.cowebsiteAsideDom.addEventListener(touchMode ? "touchstart" : "mousedown", (event) => {
this.resizing = true;
this.getIframeDom().style.display = 'none';
this.getIframeDom().style.display = "none";
if (touchMode) {
const touchEvent = (event as TouchEvent).touches[0];
this.previousTouchMoveCoordinates = {x: touchEvent.pageX, y: touchEvent.pageY};
this.previousTouchMoveCoordinates = { x: touchEvent.pageX, y: touchEvent.pageY };
}
document.addEventListener(touchMode ? 'touchmove' : 'mousemove', movecallback);
document.addEventListener(touchMode ? "touchmove" : "mousemove", movecallback);
});
document.addEventListener(touchMode ? 'touchend' : 'mouseup', (event) => {
document.addEventListener(touchMode ? "touchend" : "mouseup", (event) => {
if (!this.resizing) return;
if (touchMode) {
this.previousTouchMoveCoordinates = null;
}
document.removeEventListener(touchMode ? 'touchmove' : 'mousemove', movecallback);
this.getIframeDom().style.display = 'block';
document.removeEventListener(touchMode ? "touchmove" : "mousemove", movecallback);
this.getIframeDom().style.display = "block";
this.resizing = false;
});
}
@ -132,34 +131,34 @@ class CoWebsiteManager {
private getDevicePixelRatio(): number {
//on chrome engines, movementX and movementY return global screens coordinates while other browser return pixels
//so on chrome-based browser we need to adjust using 'devicePixelRatio'
return window.navigator.userAgent.includes('Firefox') ? 1 : window.devicePixelRatio;
return window.navigator.userAgent.includes("Firefox") ? 1 : window.devicePixelRatio;
}
private close(): void {
this.cowebsiteDiv.classList.remove('loaded'); //edit the css class to trigger the transition
this.cowebsiteDiv.classList.add('hidden');
this.cowebsiteDiv.classList.remove("loaded"); //edit the css class to trigger the transition
this.cowebsiteDiv.classList.add("hidden");
this.opened = iframeStates.closed;
this.resetStyle();
}
private load(): void {
this.cowebsiteDiv.classList.remove('hidden'); //edit the css class to trigger the transition
this.cowebsiteDiv.classList.add('loading');
this.cowebsiteDiv.classList.remove("hidden"); //edit the css class to trigger the transition
this.cowebsiteDiv.classList.add("loading");
this.opened = iframeStates.loading;
}
private open(): void {
this.cowebsiteDiv.classList.remove('loading', 'hidden'); //edit the css class to trigger the transition
this.cowebsiteDiv.classList.remove("loading", "hidden"); //edit the css class to trigger the transition
this.opened = iframeStates.opened;
this.resetStyle();
}
public resetStyle() {
this.cowebsiteDiv.style.width = '';
this.cowebsiteDiv.style.height = '';
this.cowebsiteDiv.style.width = "";
this.cowebsiteDiv.style.height = "";
}
private getIframeDom(): HTMLIFrameElement {
const iframe = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId).querySelector('iframe');
if (!iframe) throw new Error('Could not find iframe!');
const iframe = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId).querySelector("iframe");
if (!iframe) throw new Error("Could not find iframe!");
return iframe;
}
@ -167,9 +166,9 @@ class CoWebsiteManager {
this.load();
this.cowebsiteMainDom.innerHTML = ``;
const iframe = document.createElement('iframe');
iframe.id = 'cowebsite-iframe';
iframe.src = (new URL(url, base)).toString();
const iframe = document.createElement("iframe");
iframe.id = "cowebsite-iframe";
iframe.src = new URL(url, base).toString();
if (allowPolicy) {
iframe.allow = allowPolicy;
}
@ -183,15 +182,18 @@ class CoWebsiteManager {
const onTimeoutPromise = new Promise<void>((resolve) => {
setTimeout(() => resolve(), 2000);
});
this.currentOperationPromise = this.currentOperationPromise.then(() =>Promise.race([onloadPromise, onTimeoutPromise])).then(() => {
this.open();
setTimeout(() => {
this.fire();
}, animationTime)
}).catch((err) => {
console.error('Error loadCoWebsite => ', err);
this.closeCoWebsite()
});
this.currentOperationPromise = this.currentOperationPromise
.then(() => Promise.race([onloadPromise, onTimeoutPromise]))
.then(() => {
this.open();
setTimeout(() => {
this.fire();
}, animationTime);
})
.catch((err) => {
console.error("Error loadCoWebsite => ", err);
this.closeCoWebsite();
});
}
/**
@ -200,56 +202,63 @@ class CoWebsiteManager {
public insertCoWebsite(callback: (cowebsite: HTMLDivElement) => Promise<void>): void {
this.load();
this.cowebsiteMainDom.innerHTML = ``;
this.currentOperationPromise = this.currentOperationPromise.then(() => callback(this.cowebsiteMainDom)).then(() => {
this.open();
setTimeout(() => {
this.fire();
}, animationTime);
}).catch((err) => {
console.error('Error insertCoWebsite => ', err);
this.closeCoWebsite();
});
this.currentOperationPromise = this.currentOperationPromise
.then(() => callback(this.cowebsiteMainDom))
.then(() => {
this.open();
setTimeout(() => {
this.fire();
}, animationTime);
})
.catch((err) => {
console.error("Error insertCoWebsite => ", err);
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
this.close();
this.fire();
const iframe = this.cowebsiteDiv.querySelector('iframe');
if (iframe) {
iframeListener.unregisterIframe(iframe);
}
setTimeout(() => {
this.cowebsiteMainDom.innerHTML = ``;
resolve();
}, animationTime)
}));
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
this.close();
this.fire();
const iframe = this.cowebsiteDiv.querySelector("iframe");
if (iframe) {
iframeListener.unregisterIframe(iframe);
}
setTimeout(() => {
this.cowebsiteMainDom.innerHTML = ``;
resolve();
}, animationTime);
})
);
return this.currentOperationPromise;
}
public getGameSize(): {width: number, height: number} {
public getGameSize(): { width: number; height: number } {
if (this.opened !== iframeStates.opened) {
return {
width: window.innerWidth,
height: window.innerHeight
}
height: window.innerHeight,
};
}
if (!this.verticalMode) {
return {
width: window.innerWidth - this.width,
height: window.innerHeight
}
height: window.innerHeight,
};
} else {
return {
width: window.innerWidth,
height: window.innerHeight - this.height,
}
};
}
}
private fire(): void {
this._onResize.next();
waScaleManager.applyNewSize();
}
private fullscreen(): void {
@ -257,13 +266,13 @@ class CoWebsiteManager {
this.resetStyle();
this.fire();
//we don't trigger a resize of the phaser game since it won't be visible anyway.
HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = 'inline';
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'none';
HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = "inline";
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = "none";
} else {
this.verticalMode ? this.height = window.innerHeight : this.width = window.innerWidth;
this.verticalMode ? (this.height = window.innerHeight) : (this.width = window.innerWidth);
//we don't trigger a resize of the phaser game since it won't be visible anyway.
HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = 'none';
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'inline';
HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = "none";
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = "inline";
}
}
}