lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Merge pull request #1555 from thecodingmachine/iconserver

Browse source 
Add iconserver in services
This commit is contained in:
David Négrier 2021-11-10 18:12:47 +01:00 committed by GitHub
parent 0f6ecfc311 1c48feeb61
commit ee4ec7ba97
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 99 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
docker-compose.yaml
View file

@ -29,6 +29,7 @@ services:
PUSHER_URL: //pusher.workadventure.localhost PUSHER_URL: //pusher.workadventure.localhost
UPLOADER_URL: //uploader.workadventure.localhost UPLOADER_URL: //uploader.workadventure.localhost
ADMIN_URL: //workadventure.localhost ADMIN_URL: //workadventure.localhost
ICON_URL: //icon.workadventure.localhost
STARTUP_COMMAND_1: ./templater.sh STARTUP_COMMAND_1: ./templater.sh
STARTUP_COMMAND_2: yarn install STARTUP_COMMAND_2: yarn install
STUN_SERVER: "stun:stun.l.google.com:19302" STUN_SERVER: "stun:stun.l.google.com:19302"
@ -177,6 +178,17 @@ services:
- "traefik.http.routers.redisinsight-ssl.tls=true" - "traefik.http.routers.redisinsight-ssl.tls=true"
- "traefik.http.routers.redisinsight-ssl.service=redisinsight" - "traefik.http.routers.redisinsight-ssl.service=redisinsight"
icon:
image: matthiasluedtke/iconserver:v3.13.0
labels:
- "traefik.http.routers.icon.rule=Host(`icon.workadventure.localhost`)"
- "traefik.http.routers.icon.entryPoints=web"
- "traefik.http.services.icon.loadbalancer.server.port=8080"
- "traefik.http.routers.icon-ssl.rule=Host(`icon.workadventure.localhost`)"
- "traefik.http.routers.icon-ssl.entryPoints=websecure"
- "traefik.http.routers.icon-ssl.tls=true"
- "traefik.http.routers.icon-ssl.service=icon"
# coturn: # coturn:
# image: coturn/coturn:4.5.2 # image: coturn/coturn:4.5.2
# command: # command:

2
front/src/Enum/EnvironmentVariable.ts
View file

@ -4,6 +4,7 @@ const START_ROOM_URL: string =
const PUSHER_URL = process.env.PUSHER_URL || "//pusher.workadventure.localhost"; const PUSHER_URL = process.env.PUSHER_URL || "//pusher.workadventure.localhost";
export const ADMIN_URL = process.env.ADMIN_URL || "//workadventu.re"; export const ADMIN_URL = process.env.ADMIN_URL || "//workadventu.re";
const UPLOADER_URL = process.env.UPLOADER_URL || "//uploader.workadventure.localhost"; const UPLOADER_URL = process.env.UPLOADER_URL || "//uploader.workadventure.localhost";
const ICON_URL = process.env.ICON_URL || "//icon.workadventure.localhost";
const STUN_SERVER: string = process.env.STUN_SERVER || "stun:stun.l.google.com:19302"; const STUN_SERVER: string = process.env.STUN_SERVER || "stun:stun.l.google.com:19302";
const TURN_SERVER: string = process.env.TURN_SERVER || ""; const TURN_SERVER: string = process.env.TURN_SERVER || "";
const SKIP_RENDER_OPTIMIZATIONS: boolean = process.env.SKIP_RENDER_OPTIMIZATIONS == "true"; const SKIP_RENDER_OPTIMIZATIONS: boolean = process.env.SKIP_RENDER_OPTIMIZATIONS == "true";
@ -32,6 +33,7 @@ export {
DISABLE_NOTIFICATIONS, DISABLE_NOTIFICATIONS,
PUSHER_URL, PUSHER_URL,
UPLOADER_URL, UPLOADER_URL,
ICON_URL,
POSITION_DELAY, POSITION_DELAY,
MAX_EXTRAPOLATION_TIME, MAX_EXTRAPOLATION_TIME,
STUN_SERVER, STUN_SERVER,

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

@ -3,6 +3,7 @@ import { Subject } from "rxjs";
import { iframeListener } from "../Api/IframeListener"; import { iframeListener } from "../Api/IframeListener";
import { touchScreenManager } from "../Touch/TouchScreenManager"; import { touchScreenManager } from "../Touch/TouchScreenManager";
import { waScaleManager } from "../Phaser/Services/WaScaleManager"; import { waScaleManager } from "../Phaser/Services/WaScaleManager";
import { ICON_URL } from "../Enum/EnvironmentVariable";
enum iframeStates { enum iframeStates {
closed = 1, closed = 1,
@ -27,16 +28,16 @@ interface TouchMoveCoordinates {
y: number; y: number;
} }
export type CoWebsite = { export type CoWebsite = {
iframe: HTMLIFrameElement, iframe: HTMLIFrameElement;
icon: HTMLDivElement, icon: HTMLDivElement;
position: number position: number;
} };
type CoWebsiteSlot = { type CoWebsiteSlot = {
container: HTMLElement, container: HTMLElement;
position: number position: number;
} };
class CoWebsiteManager { class CoWebsiteManager {
private openedMain: iframeStates = iframeStates.closed; private openedMain: iframeStates = iframeStates.closed;
@ -61,7 +62,7 @@ class CoWebsiteManager {
private slots: CoWebsiteSlot[]; private slots: CoWebsiteSlot[];
private resizeObserver = new ResizeObserver(entries => { private resizeObserver = new ResizeObserver((entries) => {
this.resizeAllIframes(); this.resizeAllIframes();
}); });
@ -108,23 +109,23 @@ class CoWebsiteManager {
this.slots = [ this.slots = [
{ {
container: this.cowebsiteMainDom, container: this.cowebsiteMainDom,
position: 0 position: 0,
}, },
{ {
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>('cowebsite-slot-1'), container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite-slot-1"),
position: 1 position: 1,
}, },
{ {
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>('cowebsite-slot-2'), container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite-slot-2"),
position: 2 position: 2,
}, },
{ {
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>('cowebsite-slot-3'), container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite-slot-3"),
position: 3 position: 3,
}, },
{ {
container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>('cowebsite-slot-4'), container: HtmlUtils.getElementByIdOrFail<HTMLDivElement>("cowebsite-slot-4"),
position: 4 position: 4,
}, },
]; ];
@ -163,8 +164,10 @@ class CoWebsiteManager {
} }
private isSmallScreen(): boolean { private isSmallScreen(): boolean {
return window.matchMedia("(max-aspect-ratio: 1/1)").matches || return (
window.matchMedia("(max-width:960px) and (max-height:768px)").matches; window.matchMedia("(max-aspect-ratio: 1/1)").matches ||
window.matchMedia("(max-width:960px) and (max-height:768px)").matches
);
} }
private initResizeListeners(touchMode: boolean) { private initResizeListeners(touchMode: boolean) {
@ -235,12 +238,12 @@ class CoWebsiteManager {
private initActionsListeners() { private initActionsListeners() {
this.slots.forEach((slot: CoWebsiteSlot) => { this.slots.forEach((slot: CoWebsiteSlot) => {
const expandButton = slot.container.querySelector('.expand'); const expandButton = slot.container.querySelector(".expand");
const highlightButton = slot.container.querySelector('.hightlight'); const highlightButton = slot.container.querySelector(".hightlight");
const closeButton = slot.container.querySelector('.close'); const closeButton = slot.container.querySelector(".close");
if (expandButton) { if (expandButton) {
expandButton.addEventListener('click', (event) => { expandButton.addEventListener("click", (event) => {
event.preventDefault(); event.preventDefault();
const coWebsite = this.getCoWebsiteByPosition(slot.position); const coWebsite = this.getCoWebsiteByPosition(slot.position);
@ -253,7 +256,7 @@ class CoWebsiteManager {
} }
if (highlightButton) { if (highlightButton) {
highlightButton.addEventListener('click', (event) => { highlightButton.addEventListener("click", (event) => {
event.preventDefault(); event.preventDefault();
const coWebsite = this.getCoWebsiteByPosition(slot.position); const coWebsite = this.getCoWebsiteByPosition(slot.position);
@ -266,7 +269,7 @@ class CoWebsiteManager {
} }
if (closeButton) { if (closeButton) {
closeButton.addEventListener('click', (event) => { closeButton.addEventListener("click", (event) => {
event.preventDefault(); event.preventDefault();
const coWebsite = this.getCoWebsiteByPosition(slot.position); const coWebsite = this.getCoWebsiteByPosition(slot.position);
@ -284,37 +287,37 @@ class CoWebsiteManager {
return this.coWebsites; 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); 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); 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); return this.coWebsites.find((coWebsite: CoWebsite) => coWebsite.position === position);
} }
private setIframeOffset(coWebsite: CoWebsite, slot: CoWebsiteSlot) { private setIframeOffset(coWebsite: CoWebsite, slot: CoWebsiteSlot) {
const bounding = slot.container.getBoundingClientRect(); const bounding = slot.container.getBoundingClientRect();
if (coWebsite.iframe.classList.contains('thumbnail')) { if (coWebsite.iframe.classList.contains("thumbnail")) {
coWebsite.iframe.style.width = ((bounding.right - bounding.left) * 2) + 'px'; coWebsite.iframe.style.width = (bounding.right - bounding.left) * 2 + "px";
coWebsite.iframe.style.height = ((bounding.bottom - bounding.top) * 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.top = bounding.top - Math.floor(bounding.height * 0.5) + "px";
coWebsite.iframe.style.left = (bounding.left - (Math.floor(bounding.width * 0.5))) + 'px'; coWebsite.iframe.style.left = bounding.left - Math.floor(bounding.width * 0.5) + "px";
} else { } else {
coWebsite.iframe.style.top = bounding.top + 'px'; coWebsite.iframe.style.top = bounding.top + "px";
coWebsite.iframe.style.left = bounding.left + 'px'; coWebsite.iframe.style.left = bounding.left + "px";
coWebsite.iframe.style.width = (bounding.right - bounding.left) + 'px'; coWebsite.iframe.style.width = bounding.right - bounding.left + "px";
coWebsite.iframe.style.height = (bounding.bottom - bounding.top) + 'px'; coWebsite.iframe.style.height = bounding.bottom - bounding.top + "px";
} }
} }
private resizeAllIframes() { private resizeAllIframes() {
this.coWebsites.forEach((coWebsite: CoWebsite) => { this.coWebsites.forEach((coWebsite: CoWebsite) => {
const slot = this.getSlotByPosition(coWebsite.position); const slot = this.getSlotByPosition(coWebsite.position);
if (slot) { if (slot) {
this.setIframeOffset(coWebsite, slot); this.setIframeOffset(coWebsite, slot);
@ -333,34 +336,34 @@ class CoWebsiteManager {
coWebsite.iframe.scrolling = newPosition === 0 || newPosition === 1 ? "yes" : "no"; coWebsite.iframe.scrolling = newPosition === 0 || newPosition === 1 ? "yes" : "no";
if (newPosition === 0) { if (newPosition === 0) {
coWebsite.iframe.classList.add('main'); coWebsite.iframe.classList.add("main");
coWebsite.icon.style.display = "none"; coWebsite.icon.style.display = "none";
} else { } else {
coWebsite.iframe.classList.remove('main'); coWebsite.iframe.classList.remove("main");
coWebsite.icon.style.display = "flex"; coWebsite.icon.style.display = "flex";
} }
if (newPosition === 1) { if (newPosition === 1) {
coWebsite.iframe.classList.add('sub-main'); coWebsite.iframe.classList.add("sub-main");
} else { } else {
coWebsite.iframe.classList.remove('sub-main'); coWebsite.iframe.classList.remove("sub-main");
} }
if (newPosition >= 2) { if (newPosition >= 2) {
coWebsite.iframe.classList.add('thumbnail'); coWebsite.iframe.classList.add("thumbnail");
} else { } else {
coWebsite.iframe.classList.remove('thumbnail'); coWebsite.iframe.classList.remove("thumbnail");
} }
coWebsite.position = newPosition; coWebsite.position = newPosition;
if (oldSlot && !this.getCoWebsiteByPosition(oldSlot.position)) { 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(); this.resizeAllIframes();
} }
@ -384,11 +387,7 @@ class CoWebsiteManager {
this.moveCoWebsite(coWebsite, newPosition); this.moveCoWebsite(coWebsite, newPosition);
if (newPosition === 4 || if (newPosition === 4 || !currentCoWebsite || currentCoWebsite.iframe.id === coWebsite.iframe.id) {
!currentCoWebsite ||
currentCoWebsite.iframe.id === coWebsite.iframe.id
)
{
return; return;
} }
@ -411,12 +410,12 @@ class CoWebsiteManager {
if (coWebsite.position > 0) { if (coWebsite.position > 0) {
const slot = this.getSlotByPosition(coWebsite.position); const slot = this.getSlotByPosition(coWebsite.position);
if (slot) { if (slot) {
slot.container.style.display = 'none'; slot.container.style.display = "none";
} }
} }
const previousCoWebsite = this.coWebsites.find((coWebsiteToCheck: CoWebsite) => const previousCoWebsite = this.coWebsites.find(
coWebsite.position + 1 === coWebsiteToCheck.position (coWebsiteToCheck: CoWebsite) => coWebsite.position + 1 === coWebsiteToCheck.position
); );
if (previousCoWebsite) { if (previousCoWebsite) {
@ -427,10 +426,8 @@ class CoWebsiteManager {
coWebsite.iframe.remove(); coWebsite.iframe.remove();
} }
public searchJitsi(): CoWebsite|undefined { public searchJitsi(): CoWebsite | undefined {
return this.coWebsites.find((coWebsite : CoWebsite) => return this.coWebsites.find((coWebsite: CoWebsite) => coWebsite.iframe.id.toLowerCase().includes("jitsi"));
coWebsite.iframe.id.toLowerCase().includes('jitsi')
);
} }
private generateCoWebsiteIcon(iframe: HTMLIFrameElement): HTMLDivElement { private generateCoWebsiteIcon(iframe: HTMLIFrameElement): HTMLDivElement {
@ -439,7 +436,7 @@ class CoWebsiteManager {
icon.style.display = "none"; icon.style.display = "none";
const iconImage = document.createElement("img"); const iconImage = document.createElement("img");
iconImage.src = `https://www.google.com/s2/favicons?sz=64&domain_url=${iframe.src}`; iconImage.src = `${ICON_URL}/icon?url=${iframe.src}&size=16..30..256`;
const url = new URL(iframe.src); const url = new URL(iframe.src);
iconImage.alt = url.hostname; iconImage.alt = url.hostname;
@ -456,27 +453,30 @@ class CoWebsiteManager {
widthPercent?: number, widthPercent?: number,
position?: number position?: number
): Promise<CoWebsite> { ): Promise<CoWebsite> {
return this.addCoWebsite(
(iframeBuffer) => {
const iframe = document.createElement("iframe");
iframe.src = new URL(url, base).toString();
return this.addCoWebsite((iframeBuffer) => { if (allowPolicy) {
const iframe = document.createElement("iframe"); iframe.allow = allowPolicy;
iframe.src = new URL(url, base).toString() }
if (allowPolicy) { if (allowApi) {
iframe.allow = allowPolicy; iframeListener.registerIframe(iframe);
} }
if (allowApi) { iframeBuffer.appendChild(iframe);
iframeListener.registerIframe(iframe);
}
iframeBuffer.appendChild(iframe); return iframe;
},
return iframe; widthPercent,
}, widthPercent, position); position
);
} }
public async addCoWebsite( public async addCoWebsite(
callback: (iframeBuffer: HTMLDivElement) => PromiseLike<HTMLIFrameElement>|HTMLIFrameElement, callback: (iframeBuffer: HTMLDivElement) => PromiseLike<HTMLIFrameElement> | HTMLIFrameElement,
widthPercent?: number, widthPercent?: number,
position?: number position?: number
): Promise<CoWebsite> { ): Promise<CoWebsite> {
@ -484,10 +484,10 @@ class CoWebsiteManager {
if (this.coWebsites.length < 1) { if (this.coWebsites.length < 1) {
this.loadMain(); this.loadMain();
} else if (this.coWebsites.length === 5) { } 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"); iframe?.classList.add("pixel");
if (!iframe.id) { if (!iframe.id) {
@ -533,14 +533,14 @@ class CoWebsiteManager {
setTimeout(() => { setTimeout(() => {
this.fire(); this.fire();
position !== undefined ? position !== undefined
this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position) : ? this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position)
this.moveCoWebsite(coWebsite, coWebsite.position); : this.moveCoWebsite(coWebsite, coWebsite.position);
}, animationTime); }, animationTime);
} else { } else {
position !== undefined ? position !== undefined
this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position) : ? this.moveRightPreviousCoWebsite(coWebsite, coWebsite.position)
this.moveCoWebsite(coWebsite, coWebsite.position); : this.moveCoWebsite(coWebsite, coWebsite.position);
} }
return resolve(coWebsite); return resolve(coWebsite);
@ -583,8 +583,7 @@ class CoWebsiteManager {
} }
public closeCoWebsites(): Promise<void> { public closeCoWebsites(): Promise<void> {
this.currentOperationPromise = this.currentOperationPromise this.currentOperationPromise = this.currentOperationPromise.then(() => {
.then(() => {
this.coWebsites.forEach((coWebsite: CoWebsite) => { this.coWebsites.forEach((coWebsite: CoWebsite) => {
this.closeCoWebsite(coWebsite); this.closeCoWebsite(coWebsite);
}); });

1
front/webpack.config.ts
View file

@ -193,6 +193,7 @@ module.exports = {
ADMIN_URL: undefined, ADMIN_URL: undefined,
CONTACT_URL: null, CONTACT_URL: null,
PROFILE_URL: null, PROFILE_URL: null,
ICON_URL: null,
DEBUG_MODE: null, DEBUG_MODE: null,
STUN_SERVER: null, STUN_SERVER: null,
TURN_SERVER: null, TURN_SERVER: null,