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

# Conflicts:
#	front/dist/.gitignore
#	front/dist/index.tmpl.html
#	front/src/Phaser/Game/GameScene.ts
#	front/src/WebRtc/CoWebsiteManager.ts

front/src/Phaser/Menu/HelpCameraSettingsScene.ts

@@ -0,0 +1,95 @@
+import {mediaManager} from "../../WebRtc/MediaManager";
+import {HtmlUtils} from "../../WebRtc/HtmlUtils";
+import {localUserStore} from "../../Connexion/LocalUserStore";
+
+export const HelpCameraSettingsSceneName = 'HelpCameraSettingsScene';
+const helpCameraSettings = 'helpCameraSettings';
+/**
+ * The scene that show how to permit Camera and Microphone access if there are not already allowed
+ */
+export class HelpCameraSettingsScene extends Phaser.Scene {
+    private helpCameraSettingsElement!: Phaser.GameObjects.DOMElement;
+    private helpCameraSettingsOpened: boolean = false;
+
+    constructor() {
+        super({key: HelpCameraSettingsSceneName});
+    }
+
+    preload() {
+        this.load.html(helpCameraSettings, 'resources/html/helpCameraSettings.html');
+    }
+
+    create(){
+        localUserStore.setHelpCameraSettingsShown();
+        this.createHelpCameraSettings();
+    }
+
+    private createHelpCameraSettings() : void {
+        const middleX = (window.innerWidth / 3) - (370*0.85);
+        this.helpCameraSettingsElement = this.add.dom(middleX, -800, undefined, {overflow: 'scroll'}).createFromCache(helpCameraSettings);
+        this.revealMenusAfterInit(this.helpCameraSettingsElement, helpCameraSettings);
+        this.helpCameraSettingsElement.addListener('click');
+        this.helpCameraSettingsElement.on('click',  (event:MouseEvent) => {
+            event.preventDefault();
+            if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormRefresh') {
+                window.location.reload();
+            }else if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormContinue') {
+                this.closeHelpCameraSettingsOpened();
+            }
+        });
+
+        if(!mediaManager.constraintsMedia.audio || !mediaManager.constraintsMedia.video){
+            this.openHelpCameraSettingsOpened();
+        }
+    }
+
+    private openHelpCameraSettingsOpened(): void{
+        HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
+        this.helpCameraSettingsOpened = true;
+        let middleY = (window.innerHeight / 3) - (495);
+        if(middleY < 0){
+            middleY = 0;
+        }
+        let middleX =  (window.innerWidth / 3) - (370*0.85);
+        if(middleX < 0){
+            middleX = 0;
+        }
+        if(window.navigator.userAgent.includes('Firefox')){
+            HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>';
+        }else if(window.navigator.userAgent.includes('Chrome')){
+            HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-chrome.png"/>';
+        }
+        this.tweens.add({
+            targets: this.helpCameraSettingsElement,
+            y: middleY,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3',
+            overflow: 'scroll'
+        });
+    }
+
+    private closeHelpCameraSettingsOpened(): void{
+        const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
+        helpCameraSettingsInfo.innerText = '';
+        helpCameraSettingsInfo.style.display = 'none';
+        this.helpCameraSettingsOpened = false;
+        this.tweens.add({
+            targets: this.helpCameraSettingsElement,
+            y: -400,
+            duration: 1000,
+            ease: 'Power3',
+            overflow: 'scroll'
+        });
+    }
+
+    private revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
+        //Dom elements will appear inside the viewer screen when creating before being moved out of it, which create a flicker effect.
+        //To prevent this, we put a 'hidden' attribute on the root element, we remove it only after the init is done.
+        setTimeout(() => {
+            (menuElement.getChildByID(rootDomId) as HTMLElement).hidden = false;
+        }, 250);
+    }
+
+}
+

front/src/Phaser/Menu/MenuScene.ts

@@ -6,6 +6,8 @@ import {mediaManager} from "../../WebRtc/MediaManager";
 import {gameReportKey, gameReportRessource, ReportMenu} from "./ReportMenu";
 import {connectionManager} from "../../Connexion/ConnectionManager";
 import {GameConnexionTypes} from "../../Url/UrlManager";
+import {WarningContainer, warningContainerHtml, warningContainerKey} from "../Components/WarningContainer";
+import {worldFullWarningStream} from "../../Connexion/WorldFullWarningStream";
 
 export const MenuSceneName = 'MenuScene';
 const gameMenuKey = 'gameMenu';
@@ -30,6 +32,8 @@ export class MenuScene extends Phaser.Scene {
     private gameQualityValue: number;
     private videoQualityValue: number;
     private menuButton!: Phaser.GameObjects.DOMElement;
+    private warningContainer: WarningContainer | null = null;
+    private warningContainerTimeout: NodeJS.Timeout | null = null;
 
     constructor() {
         super({key: MenuSceneName});
@@ -44,6 +48,7 @@ export class MenuScene extends Phaser.Scene {
         this.load.html(gameSettingsMenuKey, 'resources/html/gameQualityMenu.html');
         this.load.html(gameShare, 'resources/html/gameShare.html');
         this.load.html(gameReportKey, gameReportRessource);
+        this.load.html(warningContainerKey, warningContainerHtml);
     }
 
     create() {
@@ -85,6 +90,8 @@ export class MenuScene extends Phaser.Scene {
 
         this.menuElement.addListener('click');
         this.menuElement.on('click', this.onMenuClick.bind(this));
+        
+        worldFullWarningStream.stream.subscribe(() => this.showWorldCapacityWarning());
     }
 
     //todo put this method in a parent menuElement class
@@ -121,6 +128,21 @@ export class MenuScene extends Phaser.Scene {
             ease: 'Power3'
         });
     }
+    
+    private showWorldCapacityWarning() {
+        if (!this.warningContainer) {
+            this.warningContainer = new WarningContainer(this);
+        }
+        if (this.warningContainerTimeout) {
+            clearTimeout(this.warningContainerTimeout);
+        }
+        this.warningContainerTimeout = setTimeout(() => {
+            this.warningContainer?.destroy();
+            this.warningContainer = null
+            this.warningContainerTimeout = null
+        }, 120000);
+        
+    }
 
     private closeSideMenu(): void {
         if (!this.sideMenuOpened) return;