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

front/dist/resources/html/helpCameraSettings.html

@@ -1,106 +0,0 @@
-<style>
-    #helpCameraSettings {
-        background: #eceeee;
-        border: 1px solid #42464b;
-        border-radius: 6px;
-        margin: 25px auto 0;
-        width: 400px;
-        max-height: calc(48vh - 50px);
-        max-width: 48vw;
-        overflow: hidden;
-        overflow-y: scroll;
-    }
-    #helpCameraSettings h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    #helpCameraSettings section {
-        margin: 10px;
-    }
-    #helpCameraSettings section.action{
-        text-align: center;
-        margin: 0;
-    }
-    #helpCameraSettings button {
-        margin: 10px 4px;
-        background-color: black;
-        color: white;
-        border-radius: 7px;
-        padding-bottom: 4px;
-    }
-    #helpCameraSettings button#helpCameraSettingsFormCancel {
-        background-color: #c7c7c700;
-        color: #292929;
-    }
-    #helpCameraSettings section a{
-        font-size: 12px;
-        text-decoration: underline;
-        color: black;
-    }
-    #helpCameraSettings section h6,
-    #helpCameraSettings section h5{
-        margin: 1px;
-    }
-    #helpCameraSettings section.text-center{
-        text-align: center;
-    }
-    #helpCameraSettings section p{
-        font-size: 8px;
-        margin: 0px 20px;
-    }
-    #helpCameraSettings section p a{
-        font-size: 8px;
-    }
-    #helpCameraSettings section p.err{
-        color: #ff0000;
-    }
-    #helpCameraSettings section ul{
-        margin: 6px;
-    }
-    #helpCameraSettings section li{
-        text-align: left;
-        font-size: 8px;
-    }
-    #helpCameraSettings section img {
-        width: 200px;
-        margin-top: 10px;
-    }
-    @media only screen and (max-width: 800px),
-            only screen and (max-height: 600px) {
-        #helpCameraSettings{
-            overflow-y: scroll;
-        }
-    }
-</style>
-
-<form id="helpCameraSettings" hidden>
-    <section class="text-center">
-        <h5>Camera/Microphone access needed</h5>
-        <p class="err" id="permissionError">Permission denied</p>
-        <p class="info">You must allow camera and microphone access in your browser.</p>
-            <ul>
-                <li>Please click on the lock or camera symbol on the side of the URL in the address bar. Here you can grant "always allow" access to your input devices.</li>
-                <li>Please ensure that you have a camera AND microphone plugged into your computer.</li>
-            </ul>
-        <p class="info">Once you've followed these steps, please refresh this page.</p>
-        <p>If you prefer to continue without allowing camera and microphone access, click on Continue</p>
-        <p id='browserHelpSetting'></p>
-    </section>
-    <!--<section class="text-center">
-        <p>If your problem persist, please contact us: <a id="mailto" href="mailto:workadventure@thecodingmachine.com?subject=Support camera and microphone settings" target="_blank"> workadventure@thecodingmachine.com</a>.</p>
-    </section>-->
-    </section>
-    <section class="action">
-        <a href="#" id="helpCameraSettingsFormRefresh">Refresh</a>
-        <button type="submit" id="helpCameraSettingsFormContinue">Continue</button>
-    </section>
-</form>

front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte

@@ -3,6 +3,7 @@
     import firefoxImg from "./images/help-setting-camera-permission-firefox.png";
     import chromeImg from "./images/help-setting-camera-permission-chrome.png";
 
+    let isAndroid = window.navigator.userAgent.includes('Android');
     let isFirefox = window.navigator.userAgent.includes('Firefox');
     let isChrome = window.navigator.userAgent.includes('Chrome');
 
@@ -16,115 +17,54 @@
 
 </script>
 
-<form class="helpCameraSettings nes-container with-title">
+<form class="helpCameraSettings nes-container" on:submit|preventDefault={close}>
-    <p class="title">Camera/Microphone access needed</p>
+    <section>
-    <section class="text-center">
+        <h2>Camera/Microphone access needed</h2>
-        <h5>Camera/Microphone access needed</h5>
+        <p class="err">Permission denied</p>
-        <p class="err" id="permissionError">Permission denied</p>
+        <p>You must allow camera and microphone access in your browser.</p>
-        <p class="info">You must allow camera and microphone access in your browser.</p>
-        <ul>
-            <li>Please click on the lock or camera symbol on the side of the URL in the address bar. Here you can grant "always allow" access to your input devices.</li>
-            <li>Please ensure that you have a camera AND microphone plugged into your computer.</li>
-        </ul>
-        <p class="info">Once you've followed these steps, please refresh this page.</p>
-        <p>If you prefer to continue without allowing camera and microphone access, click on Continue</p>
         <p>
             {#if isFirefox }
+                <p class="err">Please click the "Remember this decision" checkbox, if you don't want Firefox to keep asking you the authorization.</p>
                 <img src={firefoxImg} alt="" />
-            {:else if isChrome }
+            {:else if isChrome && !isAndroid }
                 <img src={chromeImg} alt="" />
             {/if}
         </p>
     </section>
-    <!--<section class="text-center">
+    <section>
-        <p>If your problem persist, please contact us: <a id="mailto" href="mailto:workadventure@thecodingmachine.com?subject=Support camera and microphone settings" target="_blank"> workadventure@thecodingmachine.com</a>.</p>
+        <button class="helpCameraSettingsFormRefresh nes-btn" on:click|preventDefault={refresh}>Refresh</button>
-    </section>-->
+        <button type="submit" class="helpCameraSettingsFormContinue nes-btn is-primary" on:click|preventDefault={close}>Continue without webcam</button>
-    <section class="action">
-        <a href="#" id="helpCameraSettingsFormRefresh" on:click={refresh}>Refresh</a>
-        <button type="submit" id="helpCameraSettingsFormContinue" on:click={close}>Continue</button>
     </section>
 </form>
 
 
 <style>
     .helpCameraSettings {
-        /*background: #eceeee;
+        pointer-events: auto;
-        border: 1px solid #42464b;
+        background: #eceeee;
-        border-radius: 6px;
+        margin-left: auto;
-        margin: 25px auto 0;
+        margin-right: auto;
-        width: 400px;
+        margin-top: 10vh;
-        max-height: calc(48vh - 50px);
+        max-height: 80vh;
-        max-width: 48vw;
+        max-width: 80vw;
-        overflow: hidden;
+        overflow: auto;
-        overflow-y: scroll;*/
-    }
-    .helpCameraSettings h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
         text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
+    }
+    .helpCameraSettings h2{
+        font-family: 'Press Start 2P';
     }
     .helpCameraSettings section {
         margin: 10px;
     }
-    .helpCameraSettings section.action{
-        text-align: center;
-        margin: 0;
-    }
-    .helpCameraSettings button {
-        margin: 10px 4px;
-        background-color: black;
-        color: white;
-        border-radius: 7px;
-        padding-bottom: 4px;
-    }
-    .helpCameraSettings button.helpCameraSettingsFormCancel {
-        background-color: #c7c7c700;
-        color: #292929;
-    }
-    .helpCameraSettings section a{
-        font-size: 12px;
-        text-decoration: underline;
-        color: black;
-    }
-    .helpCameraSettings section h5{
-        margin: 1px;
-    }
-    .helpCameraSettings section.text-center{
-        text-align: center;
-    }
     .helpCameraSettings section p{
-        font-size: 8px;
+        margin: 20px;
-        margin: 0px 20px;
+        font-family: 'Press Start 2P';
-    }
-    .helpCameraSettings section p a{
-        font-size: 8px;
     }
     .helpCameraSettings section p.err{
         color: #ff0000;
     }
-    .helpCameraSettings section ul{
-        margin: 6px;
-    }
-    .helpCameraSettings section li{
-        text-align: left;
-        font-size: 8px;
-    }
     .helpCameraSettings section img {
-        width: 200px;
+        max-width: 500px;
-        margin-top: 10px;
+        width: 100%;
-    }
-    @media only screen and (max-width: 800px),
-    only screen and (max-height: 600px) {
-        .helpCameraSettings{
-            overflow-y: scroll;
-        }
     }
 </style>

front/src/Phaser/Game/GameManager.ts

@@ -2,7 +2,6 @@ import {GameScene} from "./GameScene";
 import {connectionManager} from "../../Connexion/ConnectionManager";
 import type {Room} from "../../Connexion/Room";
 import {MenuScene, MenuSceneName} from "../Menu/MenuScene";
-import {HelpCameraSettingsScene, HelpCameraSettingsSceneName} from "../Menu/HelpCameraSettingsScene";
 import {LoginSceneName} from "../Login/LoginScene";
 import {SelectCharacterSceneName} from "../Login/SelectCharacterScene";
 import {EnableCameraSceneName} from "../Login/EnableCameraScene";
@@ -92,7 +91,6 @@ export class GameManager {
         console.log('starting '+ (this.currentGameSceneName || this.startRoom.id))
         scenePlugin.start(this.currentGameSceneName || this.startRoom.id);
         scenePlugin.launch(MenuSceneName);
-        //scenePlugin.launch(HelpCameraSettingsSceneName);//700
 
         if(!localUserStore.getHelpCameraSettingsShown() && (!get(requestedMicrophoneState) || !get(requestedCameraState))){
             helpCameraSettingsVisibleStore.set(true);

front/src/Phaser/Menu/HelpCameraSettingsScene.ts

@@ -1,150 +0,0 @@
-import {mediaManager} from "../../WebRtc/MediaManager";
-import {HtmlUtils} from "../../WebRtc/HtmlUtils";
-import {localUserStore} from "../../Connexion/LocalUserStore";
-import {DirtyScene} from "../Game/DirtyScene";
-import {get} from "svelte/store";
-import {requestedCameraState, requestedMicrophoneState} from "../../Stores/MediaStore";
-
-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 DirtyScene {
-    private helpCameraSettingsElement!: Phaser.GameObjects.DOMElement;
-    private helpCameraSettingsOpened: boolean = false;
-
-    constructor() {
-        super({key: HelpCameraSettingsSceneName});
-    }
-
-    preload() {
-        this.load.html(helpCameraSettings, 'resources/html/helpCameraSettings.html');
-    }
-
-    create(){
-        this.createHelpCameraSettings();
-    }
-
-    private createHelpCameraSettings() : void {
-        const middleX = this.getMiddleX();
-        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) => {
-            if((event?.target as HTMLInputElement).id === 'mailto') {
-                return;
-            }
-            event.preventDefault();
-            if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormRefresh') {
-                window.location.reload();
-            }else if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormContinue') {
-                this.closeHelpCameraSettingsOpened();
-            }
-        });
-
-        if(!localUserStore.getHelpCameraSettingsShown() && (!get(requestedMicrophoneState) || !get(requestedCameraState))){
-            this.openHelpCameraSettingsOpened();
-            localUserStore.setHelpCameraSettingsShown();
-        }
-    }
-
-    private openHelpCameraSettingsOpened(): void{
-        HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
-        this.helpCameraSettingsOpened = true;
-        try{
-            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"/>';
-            }
-        }catch(err) {
-            console.error('openHelpCameraSettingsOpened => getElementByIdOrFail => error', err);
-        }
-        const middleY = this.getMiddleY();
-        const middleX = this.getMiddleX();
-        this.tweens.add({
-            targets: this.helpCameraSettingsElement,
-            y: middleY,
-            x: middleX,
-            duration: 1000,
-            ease: 'Power3',
-            overflow: 'scroll'
-        });
-
-        this.dirty = true;
-    }
-
-    private closeHelpCameraSettingsOpened(): void{
-        const middleX = this.getMiddleX();
-        /*const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
-        helpCameraSettingsInfo.innerText = '';
-        helpCameraSettingsInfo.style.display = 'none';*/
-        this.helpCameraSettingsOpened = false;
-        this.tweens.add({
-            targets: this.helpCameraSettingsElement,
-            y: -1000,
-            x: middleX,
-            duration: 1000,
-            ease: 'Power3',
-            overflow: 'scroll'
-        });
-
-        this.dirty = true;
-    }
-
-    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);
-    }
-
-    update(time: number, delta: number): void {
-        this.dirty = false;
-    }
-
-    public onResize(): void {
-        super.onResize(
-
-        );
-        if (this.helpCameraSettingsOpened) {
-            const middleX = this.getMiddleX();
-            const middleY = this.getMiddleY();
-            this.tweens.add({
-                targets: this.helpCameraSettingsElement,
-                x: middleX,
-                y: middleY,
-                duration: 1000,
-                ease: 'Power3'
-            });
-            this.dirty = true;
-        }
-    }
-
-    private getMiddleX() : number{
-        return (this.scale.width / 2) -
-        (
-            this.helpCameraSettingsElement
-            && this.helpCameraSettingsElement.node
-            && this.helpCameraSettingsElement.node.getBoundingClientRect().width > 0
-            ? (this.helpCameraSettingsElement.node.getBoundingClientRect().width / (2 * this.scale.zoom))
-            : (400 / 2)
-        );
-    }
-
-    private getMiddleY() : number{
-        const middleY = ((this.scale.height) - (
-            (this.helpCameraSettingsElement
-            && this.helpCameraSettingsElement.node
-            && this.helpCameraSettingsElement.node.getBoundingClientRect().height > 0
-                ? this.helpCameraSettingsElement.node.getBoundingClientRect().height : 400 /*FIXME to use a const will be injected in HTMLElement*/)/this.scale.zoom)) / 2;
-        return (middleY > 0 ? middleY : 0);
-    }
-
-    public isDirty(): boolean {
-        return this.dirty;
-    }
-}
-

front/src/index.ts

@@ -13,7 +13,6 @@ import WebFontLoaderPlugin from 'phaser3-rex-plugins/plugins/webfontloader-plugi
 import {EntryScene} from "./Phaser/Login/EntryScene";
 import {coWebsiteManager} from "./WebRtc/CoWebsiteManager";
 import {MenuScene} from "./Phaser/Menu/MenuScene";
-import {HelpCameraSettingsScene} from "./Phaser/Menu/HelpCameraSettingsScene";
 import {localUserStore} from "./Connexion/LocalUserStore";
 import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene";
 import {iframeListener} from "./Api/IframeListener";
@@ -96,7 +95,7 @@ const config: GameConfig = {
         ErrorScene,
         CustomizeScene,
         MenuScene,
-        HelpCameraSettingsScene],
+    ],
     //resolution: window.devicePixelRatio / 2,
     fps: fps,
     dom: {