From 9d6b597552c7b0a9df7c76da1c8b61e918458475 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Tue, 1 Jun 2021 09:08:02 +0200 Subject: [PATCH] Starting working towards migrating the help camera popup --- front/src/Components/App.svelte | 5 + .../HelpCameraSettingsPopup.svelte | 130 ++++++++++++++++++ .../help-setting-camera-permission-chrome.png | Bin ...help-setting-camera-permission-firefox.png | Bin front/src/Phaser/Game/GameManager.ts | 10 +- front/src/Stores/HelpCameraSettingsStore.ts | 3 + front/src/WebRtc/MediaManager.ts | 16 +-- 7 files changed, 150 insertions(+), 14 deletions(-) create mode 100644 front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte rename front/{dist/resources/objects => src/Components/HelpCameraSettings/images}/help-setting-camera-permission-chrome.png (100%) rename front/{dist/resources/objects => src/Components/HelpCameraSettings/images}/help-setting-camera-permission-firefox.png (100%) create mode 100644 front/src/Stores/HelpCameraSettingsStore.ts diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte index fc0ffff5..343cb4fa 100644 --- a/front/src/Components/App.svelte +++ b/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; @@ -32,6 +34,9 @@ {#if $selectCompanionSceneVisibleStore} {/if} + {#if $helpCameraSettingsVisibleStore} + + {/if} {#if $enableCameraSceneVisibilityStore} {/if} diff --git a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte new file mode 100644 index 00000000..44ebde3d --- /dev/null +++ b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte @@ -0,0 +1,130 @@ + + +
+

Camera/Microphone access needed

+
+
Camera/Microphone access needed
+

Permission denied

+

You must allow camera and microphone access in your browser.

+
    +
  • 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.
    • +
  • Please ensure that you have a camera AND microphone plugged into your computer.
    • +
+

Once you've followed these steps, please refresh this page.

+

If you prefer to continue without allowing camera and microphone access, click on Continue

+

+ {#if isFirefox } + + {:else if isChrome } + + {/if} +

+
+ +
+ Refresh + +
+
+ + + diff --git a/front/dist/resources/objects/help-setting-camera-permission-chrome.png b/front/src/Components/HelpCameraSettings/images/help-setting-camera-permission-chrome.png similarity index 100% rename from front/dist/resources/objects/help-setting-camera-permission-chrome.png rename to front/src/Components/HelpCameraSettings/images/help-setting-camera-permission-chrome.png diff --git a/front/dist/resources/objects/help-setting-camera-permission-firefox.png b/front/src/Components/HelpCameraSettings/images/help-setting-camera-permission-firefox.png similarity index 100% rename from front/dist/resources/objects/help-setting-camera-permission-firefox.png rename to front/src/Components/HelpCameraSettings/images/help-setting-camera-permission-firefox.png diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index 2a1d3d8a..e1b969fc 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/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) { diff --git a/front/src/Stores/HelpCameraSettingsStore.ts b/front/src/Stores/HelpCameraSettingsStore.ts new file mode 100644 index 00000000..88373dab --- /dev/null +++ b/front/src/Stores/HelpCameraSettingsStore.ts @@ -0,0 +1,3 @@ +import { writable } from "svelte/store"; + +export const helpCameraSettingsVisibleStore = writable(false); diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index 29973e46..180b5746 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/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 = new Set(); stopScreenSharingCallBacks : Set = new Set(); showReportModalCallBacks : Set = new Set(); - helpCameraSettingsCallBacks : Set = new Set(); 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{