153 lines
6.0 KiB
TypeScript
153 lines
6.0 KiB
TypeScript
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();
|
|
}
|
|
|
|
mediaManager.setHelpCameraSettingsCallBack(() => {
|
|
this.openHelpCameraSettingsOpened();
|
|
});
|
|
}
|
|
|
|
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(ev: UIEvent): void {
|
|
super.onResize(ev);
|
|
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;
|
|
}
|
|
}
|
|
|