From 9a5300dd2dd6853c8c662f4bd629754b18b3c3db Mon Sep 17 00:00:00 2001 From: GRL Date: Tue, 1 Jun 2021 11:07:52 +0200 Subject: [PATCH] helpCameraSettingPopup in svelte with nes-css --- .../resources/html/helpCameraSettings.html | 106 ------------- .../HelpCameraSettingsPopup.svelte | 116 ++++---------- front/src/Phaser/Game/GameManager.ts | 2 - .../Phaser/Menu/HelpCameraSettingsScene.ts | 150 ------------------ front/src/index.ts | 3 +- 5 files changed, 29 insertions(+), 348 deletions(-) delete mode 100644 front/dist/resources/html/helpCameraSettings.html delete mode 100644 front/src/Phaser/Menu/HelpCameraSettingsScene.ts diff --git a/front/dist/resources/html/helpCameraSettings.html b/front/dist/resources/html/helpCameraSettings.html deleted file mode 100644 index 8c4e63c4..00000000 --- a/front/dist/resources/html/helpCameraSettings.html +++ /dev/null @@ -1,106 +0,0 @@ - - - diff --git a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte index 44ebde3d..fc6656a0 100644 --- a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte +++ b/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 @@ -
-

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

+ +
+

Camera/Microphone access needed

+

Permission denied

+

You must allow camera and microphone access in your browser.

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

Please click the "Remember this decision" checkbox, if you don't want Firefox to keep asking you the authorization.

+ + {:else if isChrome && !isAndroid } + {/if}

- -
- Refresh - +
+ +
diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index e1b969fc..8c38a626 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/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); diff --git a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts deleted file mode 100644 index 7d684df2..00000000 --- a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts +++ /dev/null @@ -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('webRtcSetup').style.display = 'none'; - this.helpCameraSettingsOpened = true; - try{ - if(window.navigator.userAgent.includes('Firefox')){ - HtmlUtils.getElementByIdOrFail('browserHelpSetting').innerHTML =''; - }else if(window.navigator.userAgent.includes('Chrome')){ - HtmlUtils.getElementByIdOrFail('browserHelpSetting').innerHTML =''; - } - }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; - } -} - diff --git a/front/src/index.ts b/front/src/index.ts index bc435ee1..90d4c612 100644 --- a/front/src/index.ts +++ b/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: {