Starting working towards migrating the help camera popup

front/src/Components/App.svelte

@@ -15,6 +15,8 @@
     import EnableCameraScene from "./EnableCamera/EnableCameraScene.svelte";
 
     import {Game} from "../Phaser/Game/Game";
+    import {helpCameraSettingsVisibleStore} from "../Stores/HelpCameraSettingsStore";
+    import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte";
 
     export let game: Game;
 </script>
@@ -32,6 +34,9 @@
     {#if $selectCompanionSceneVisibleStore}
         <SelectCompanionScene game={ game }></SelectCompanionScene>
     {/if}
+    {#if $helpCameraSettingsVisibleStore}
+        <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
+    {/if}
     {#if $enableCameraSceneVisibilityStore}
         <EnableCameraScene game={game}></EnableCameraScene>
     {/if}

front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte

@@ -0,0 +1,130 @@
+<script lang="typescript">
+    import {helpCameraSettingsVisibleStore} from "../../Stores/HelpCameraSettingsStore";
+    import firefoxImg from "./images/help-setting-camera-permission-firefox.png";
+    import chromeImg from "./images/help-setting-camera-permission-chrome.png";
+
+    let isFirefox = window.navigator.userAgent.includes('Firefox');
+    let isChrome = window.navigator.userAgent.includes('Chrome');
+
+    function refresh() {
+        window.location.reload();
+    }
+
+    function close() {
+        helpCameraSettingsVisibleStore.set(false);
+    }
+
+</script>
+
+<form class="helpCameraSettings nes-container with-title">
+    <p class="title">Camera/Microphone access needed</p>
+    <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>
+            {#if isFirefox }
+            <img src={firefoxImg} alt="" />
+            {:else if isChrome }
+            <img src={chromeImg} alt="" />
+            {/if}
+        </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 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;
+        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 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>

front/src/Phaser/Game/GameManager.ts

@@ -7,6 +7,9 @@ import {LoginSceneName} from "../Login/LoginScene";
 import {SelectCharacterSceneName} from "../Login/SelectCharacterScene";
 import {EnableCameraSceneName} from "../Login/EnableCameraScene";
 import {localUserStore} from "../../Connexion/LocalUserStore";
+import {get} from "svelte/store";
+import {requestedCameraState, requestedMicrophoneState} from "../../Stores/MediaStore";
+import {helpCameraSettingsVisibleStore} from "../../Stores/HelpCameraSettingsStore";
 
 export interface HasMovedEvent {
     direction: string;
@@ -89,7 +92,12 @@ 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
+        //scenePlugin.launch(HelpCameraSettingsSceneName);//700
+
+        if(!localUserStore.getHelpCameraSettingsShown() && (!get(requestedMicrophoneState) || !get(requestedCameraState))){
+            helpCameraSettingsVisibleStore.set(true);
+            localUserStore.setHelpCameraSettingsShown();
+        }
     }
 
     public gameSceneIsCreated(scene: GameScene) {

front/src/Stores/HelpCameraSettingsStore.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const helpCameraSettingsVisibleStore = writable(false);

front/src/WebRtc/MediaManager.ts

@@ -12,6 +12,7 @@ import {
 import {
     screenSharingLocalStreamStore
 } from "../Stores/ScreenSharingStore";
+import {helpCameraSettingsVisibleStore} from "../Stores/HelpCameraSettingsStore";
 
 export type UpdatedLocalStreamCallback = (media: MediaStream|null) => void;
 export type StartScreenSharingCallback = (media: MediaStream) => void;
@@ -29,7 +30,6 @@ export class MediaManager {
     startScreenSharingCallBacks : Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
     stopScreenSharingCallBacks : Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>();
     showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
-    helpCameraSettingsCallBacks : Set<HelpCameraSettingsCallBack> = new Set<HelpCameraSettingsCallBack>();
 
     private focused : boolean = true;
 
@@ -64,7 +64,7 @@ export class MediaManager {
             if (result.type === 'error') {
                 console.error(result.error);
                 layoutManager.addInformation('warning', 'Camera access denied. Click here and check your browser permissions.', () => {
-                    this.showHelpCameraSettingsCallBack();
+                    helpCameraSettingsVisibleStore.set(true);
                 }, this.userInputManager);
                 return;
             }
@@ -74,7 +74,7 @@ export class MediaManager {
             if (result.type === 'error') {
                 console.error(result.error);
                 layoutManager.addInformation('warning', 'Screen sharing denied. Click here and check your browser permissions.', () => {
-                    this.showHelpCameraSettingsCallBack();
+                    helpCameraSettingsVisibleStore.set(true);
                 }, this.userInputManager);
                 return;
             }
@@ -395,16 +395,6 @@ export class MediaManager {
         this.showReportModalCallBacks.add(callback);
     }
 
-    public setHelpCameraSettingsCallBack(callback: HelpCameraSettingsCallBack){
-        this.helpCameraSettingsCallBacks.add(callback);
-    }
-
-    private showHelpCameraSettingsCallBack(){
-        for(const callBack of this.helpCameraSettingsCallBacks){
-            callBack();
-        }
-    }
-
     //FIX ME SOUNDMETER: check stalability of sound meter calculation
     /*updateSoudMeter(){
         try{