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

Merge branch 'develop' of github.com:thecodingmachine/workadventure

Browse Source
This commit is contained in:
_Bastler
2021-11-10 19:31:44 +01:00
parent 0d811db668 ee4ec7ba97
commit 72e7f1bdd5
11 changed files with 182 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/WebRtc/CoWebsiteManager.ts
+104 -84
View File
@@ -3,6 +3,7 @@ import { Subject } from "rxjs";
import { iframeListener } from "../Api/IframeListener";
import { touchScreenManager } from "../Touch/TouchScreenManager";
import { waScaleManager } from "../Phaser/Services/WaScaleManager";
import { ICON_URL } from "../Enum/EnvironmentVariable";
enum iframeStates {
closed = 1,
@@ -32,16 +33,17 @@ export enum CoWebsiteState {
CLOSED,
}
export type CoWebsite = {
iframe: HTMLIFrameElement,
state : CoWebsiteState,
position: number
}
export type CoWebsite = {
iframe: HTMLIFrameElement;
// icon: HTMLDivElement;
position: number;
state : CoWebsiteState;
};
type CoWebsiteSlot = {
container: HTMLElement,
position: number
}
container: HTMLElement;
position: number;
};
class CoWebsiteManager {
private openedMain: iframeStates = iframeStates.closed;
@@ -66,7 +68,7 @@ class CoWebsiteManager {
private slots: CoWebsiteSlot[];
private resizeObserver = new ResizeObserver(entries => {
private resizeObserver = new ResizeObserver((entries) => {
this.resizeAllIframes();
});
@@ -113,23 +115,23 @@ class CoWebsiteManager {
this.slots = [
{
container: this.cowebsiteMainDom,
position: 0
position: 0,
},
{
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>('cowebsite-slot-1'),
position: 1
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite-slot-1"),
position: 1,
},
{
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>('cowebsite-slot-2'),
position: 2
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite-slot-2"),
position: 2,
},
{
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>('cowebsite-slot-3'),
position: 3
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite-slot-3"),
position: 3,
},
{
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>('cowebsite-slot-4'),
position: 4
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite-slot-4"),
position: 4,
},
];
@@ -168,8 +170,10 @@ class CoWebsiteManager {
}
private isSmallScreen(): boolean {
return window.matchMedia("(max-aspect-ratio: 1/1)").matches ||
window.matchMedia("(max-width:960px) and (max-height:768px)").matches;
return (
window.matchMedia("(max-aspect-ratio: 1/1)").matches ||
window.matchMedia("(max-width:960px) and (max-height:768px)").matches
);
}
private initResizeListeners(touchMode: boolean) {
@@ -240,12 +244,12 @@ class CoWebsiteManager {
private initActionsListeners() {
this.slots.forEach((slot: CoWebsiteSlot) => {
const expandButton = slot.container.querySelector('.expand');
const highlightButton = slot.container.querySelector('.hightlight');
const closeButton = slot.container.querySelector('.close');
const expandButton = slot.container.querySelector(".expand");
const highlightButton = slot.container.querySelector(".hightlight");
const closeButton = slot.container.querySelector(".close");
if (expandButton) {
expandButton.addEventListener('click', (event) => {
expandButton.addEventListener("click", (event) => {
event.preventDefault();
const coWebsite = this.getCoWebsiteByPosition(slot.position);
@@ -258,7 +262,7 @@ class CoWebsiteManager {
}
if (highlightButton) {
highlightButton.addEventListener('click', (event) => {
highlightButton.addEventListener("click", (event) => {
event.preventDefault();
const coWebsite = this.getCoWebsiteByPosition(slot.position);
@@ -271,7 +275,7 @@ class CoWebsiteManager {
}
if (closeButton) {
closeButton.addEventListener('click', (event) => {
closeButton.addEventListener("click", (event) => {
event.preventDefault();
const coWebsite = this.getCoWebsiteByPosition(slot.position);
@@ -289,37 +293,37 @@ class CoWebsiteManager {
return this.coWebsites;
}
public getCoWebsiteById(coWebsiteId: string): CoWebsite|undefined {
public getCoWebsiteById(coWebsiteId: string): CoWebsite | undefined {
return this.coWebsites.find((coWebsite: CoWebsite) => coWebsite.iframe.id === coWebsiteId);
}
private getSlotByPosition(position: number): CoWebsiteSlot|undefined {
private getSlotByPosition(position: number): CoWebsiteSlot | undefined {
return this.slots.find((slot: CoWebsiteSlot) => slot.position === position);
}
private getCoWebsiteByPosition(position: number): CoWebsite|undefined {
private getCoWebsiteByPosition(position: number): CoWebsite | undefined {
return this.coWebsites.find((coWebsite: CoWebsite) => coWebsite.position === position);
}
private setIframeOffset(coWebsite: CoWebsite, slot: CoWebsiteSlot) {
const bounding = slot.container.getBoundingClientRect();
if (coWebsite.iframe.classList.contains('thumbnail')) {
coWebsite.iframe.style.width = ((bounding.right - bounding.left) * 2) + 'px';
coWebsite.iframe.style.height = ((bounding.bottom - bounding.top) * 2) + 'px';
coWebsite.iframe.style.top = (bounding.top - (Math.floor(bounding.height * 0.5))) + 'px';
coWebsite.iframe.style.left = (bounding.left - (Math.floor(bounding.width * 0.5))) + 'px';
if (coWebsite.iframe.classList.contains("thumbnail")) {
coWebsite.iframe.style.width = (bounding.right - bounding.left) * 2 + "px";
coWebsite.iframe.style.height = (bounding.bottom - bounding.top) * 2 + "px";
coWebsite.iframe.style.top = bounding.top - Math.floor(bounding.height * 0.5) + "px";
coWebsite.iframe.style.left = bounding.left - Math.floor(bounding.width * 0.5) + "px";
} else {
coWebsite.iframe.style.top = bounding.top + 'px';
coWebsite.iframe.style.left = bounding.left + 'px';
coWebsite.iframe.style.width = (bounding.right - bounding.left) + 'px';
coWebsite.iframe.style.height = (bounding.bottom - bounding.top) + 'px';
coWebsite.iframe.style.top = bounding.top + "px";
coWebsite.iframe.style.left = bounding.left + "px";
coWebsite.iframe.style.width = bounding.right - bounding.left + "px";
coWebsite.iframe.style.height = bounding.bottom - bounding.top + "px";
}
}
private resizeAllIframes() {
this.coWebsites.forEach((coWebsite: CoWebsite) => {
const slot = this.getSlotByPosition(coWebsite.position);
const slot = this.getSlotByPosition(coWebsite.position);
if (slot) {
this.setIframeOffset(coWebsite, slot);
@@ -338,32 +342,34 @@ class CoWebsiteManager {
coWebsite.iframe.scrolling = newPosition === 0 || newPosition === 1 ? "yes" : "no";
if (newPosition === 0) {
coWebsite.iframe.classList.add('main');
coWebsite.iframe.classList.add("main");
// coWebsite.icon.style.display = "none";
} else {
coWebsite.iframe.classList.remove('main');
coWebsite.iframe.classList.remove("main");
// coWebsite.icon.style.display = "flex";
}
if (newPosition === 1) {
coWebsite.iframe.classList.add('sub-main');
coWebsite.iframe.classList.add("sub-main");
} else {
coWebsite.iframe.classList.remove('sub-main');
coWebsite.iframe.classList.remove("sub-main");
}
if (newPosition >= 2) {
coWebsite.iframe.classList.add('thumbnail');
coWebsite.iframe.classList.add("thumbnail");
} else {
coWebsite.iframe.classList.remove('thumbnail');
coWebsite.iframe.classList.remove("thumbnail");
}
coWebsite.position = newPosition;
if (oldSlot && !this.getCoWebsiteByPosition(oldSlot.position)) {
oldSlot.container.style.display = 'none';
oldSlot.container.style.display = "none";
}
newSlot.container.style.display = 'block';
newSlot.container.style.display = "block";
coWebsite.iframe.classList.remove('pixel');
coWebsite.iframe.classList.remove("pixel");
this.resizeAllIframes();
}
@@ -387,11 +393,7 @@ class CoWebsiteManager {
this.moveCoWebsite(coWebsite, newPosition);
if (newPosition === 4 ||
!currentCoWebsite ||
currentCoWebsite.iframe.id === coWebsite.iframe.id
)
{
if (newPosition === 4 || !currentCoWebsite || currentCoWebsite.iframe.id === coWebsite.iframe.id) {
return;
}
@@ -414,12 +416,12 @@ class CoWebsiteManager {
if (coWebsite.position > 0) {
const slot = this.getSlotByPosition(coWebsite.position);
if (slot) {
slot.container.style.display = 'none';
slot.container.style.display = "none";
}
}
const previousCoWebsite = this.coWebsites.find((coWebsiteToCheck: CoWebsite) =>
coWebsite.position + 1 === coWebsiteToCheck.position
const previousCoWebsite = this.coWebsites.find(
(coWebsiteToCheck: CoWebsite) => coWebsite.position + 1 === coWebsiteToCheck.position
);
if (previousCoWebsite) {
@@ -431,12 +433,25 @@ class CoWebsiteManager {
iframeListener.unregisterIframe(coWebsite.iframe);
}
public searchJitsi(): CoWebsite|undefined {
return this.coWebsites.find((coWebsite : CoWebsite) =>
coWebsite.iframe.id.toLowerCase().includes('jitsi')
);
public searchJitsi(): CoWebsite | undefined {
return this.coWebsites.find((coWebsite: CoWebsite) => coWebsite.iframe.id.toLowerCase().includes("jitsi"));
}
// private generateCoWebsiteIcon(iframe: HTMLIFrameElement): HTMLDivElement {
// const icon = document.createElement("div");
// icon.id = "cowebsite-icon-" + iframe.id;
// icon.style.display = "none";
// const iconImage = document.createElement("img");
// iconImage.src = `${ICON_URL}/icon?url=${iframe.src}&size=16..30..256`;
// const url = new URL(iframe.src);
// iconImage.alt = url.hostname;
// icon.appendChild(iconImage);
// return icon;
// }
public loadCoWebsite(
url: string,
base: string,
@@ -445,27 +460,30 @@ class CoWebsiteManager {
widthPercent?: number,
position?: number
): Promise<CoWebsite> {
return this.addCoWebsite(
(iframeBuffer) => {
const iframe = document.createElement("iframe");
iframe.src = new URL(url, base).toString();
return this.addCoWebsite((iframeBuffer) => {
const iframe = document.createElement("iframe");
iframe.src = new URL(url, base).toString()
if (allowPolicy) {
iframe.allow = allowPolicy;
}
if (allowPolicy) {
iframe.allow = allowPolicy;
}
if (allowApi) {
iframeListener.registerIframe(iframe);
}
if (allowApi) {
iframeListener.registerIframe(iframe);
}
iframeBuffer.appendChild(iframe);
iframeBuffer.appendChild(iframe);
return iframe;
}, widthPercent, position);
return iframe;
},
widthPercent,
position
);
}
public async addCoWebsite(
callback: (iframeBuffer: HTMLDivElement) => PromiseLike<HTMLIFrameElement>|HTMLIFrameElement,
callback: (iframeBuffer: HTMLDivElement) => PromiseLike<HTMLIFrameElement> | HTMLIFrameElement,
widthPercent?: number,
position?: number
): Promise<CoWebsite> {
@@ -473,10 +491,10 @@ class CoWebsiteManager {
if (this.coWebsites.length < 1) {
this.loadMain();
} else if (this.coWebsites.length === 5) {
throw new Error('Too many we')
throw new Error("Too many we");
}
Promise.resolve(callback(this.cowebsiteBufferDom)).then(iframe =>{
Promise.resolve(callback(this.cowebsiteBufferDom)).then((iframe) => {
iframe?.classList.add("pixel");
if (!iframe.id) {
@@ -489,8 +507,11 @@ class CoWebsiteManager {
iframe.onload = () => resolve();
});
// const icon = this.generateCoWebsiteIcon(iframe);
const coWebsite = {
iframe,
// icon,
state : CoWebsiteState.OPENED,
position: position ?? this.coWebsites.length,
};
@@ -512,14 +533,14 @@ class CoWebsiteManager {
setTimeout(() => {
this.fire();
position !== undefined ?
this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position) :
this.moveCoWebsite(coWebsite, coWebsite.position);
position !== undefined
? this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position)
: this.moveCoWebsite(coWebsite, coWebsite.position);
}, animationTime);
} else {
position !== undefined ?
this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position) :
this.moveCoWebsite(coWebsite, coWebsite.position);
position !== undefined
? this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position)
: this.moveCoWebsite(coWebsite, coWebsite.position);
}
return resolve(coWebsite);
@@ -558,8 +579,7 @@ class CoWebsiteManager {
}
public closeCoWebsites(): Promise<void> {
this.currentOperationPromise = this.currentOperationPromise
.then(() => {
this.currentOperationPromise = this.currentOperationPromise.then(() => {
this.coWebsites.forEach((coWebsite: CoWebsite) => {
this.closeCoWebsite(coWebsite);
});