From e03cf9dc267d999a185ee467eb23a8daef1f50dc Mon Sep 17 00:00:00 2001 From: _Bastler <_Bastler@bstly.de> Date: Wed, 21 Apr 2021 07:44:12 +0200 Subject: [PATCH] trigger + audioplayer improvements --- front/dist/index.tmpl.html | 12 ++++++-- front/dist/resources/style/style.css | 12 ++++++++ front/src/Api/IframeListener.ts | 4 +++ front/src/Phaser/Game/GameScene.ts | 46 ++++++++++++++++++++++++++++ front/src/WebRtc/AudioManager.ts | 36 +++++++++++++--------- front/src/WebRtc/CoWebsiteManager.ts | 1 + 6 files changed, 94 insertions(+), 17 deletions(-) diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html index 40f437c8..b381c0fb 100644 --- a/front/dist/index.tmpl.html +++ b/front/dist/index.tmpl.html @@ -86,9 +86,15 @@ - - - + + + + + + + + + diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index ff79245c..a003e10b 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -403,6 +403,18 @@ body { visibility: hidden; display: none; } +#audioplayer_volume_icon_playing.low #audioplayer_volume_icon_playing_high { + visibility: hidden; + display: none; +} +#audioplayer_volume_icon_playing.low #audioplayer_volume_icon_playing_mid { + visibility: hidden; + display: none; +} +#audioplayer_volume_icon_playing.mid #audioplayer_volume_icon_playing_high { + visibility: hidden; + display: none; +} #audioplayerctrl > #audioplayer_volume { width: 100%; background-color: rgba(0,0,0,0.5); diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts index c875ebbb..0222351d 100644 --- a/front/src/Api/IframeListener.ts +++ b/front/src/Api/IframeListener.ts @@ -52,6 +52,9 @@ class IframeListener { private readonly _removeBubbleStream: Subject = new Subject(); public readonly removeBubbleStream = this._removeBubbleStream.asObservable(); + private readonly _unregisterIFrameStream: Subject = new Subject(); + public readonly unregisterIFrameStream = this._unregisterIFrameStream.asObservable(); + private readonly iframes = new Set(); private readonly scripts = new Map(); @@ -119,6 +122,7 @@ class IframeListener { } unregisterIframe(iframe: HTMLIFrameElement): void { + this._unregisterIFrameStream.next(); this.iframes.delete(iframe); } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 990f702c..d0ffdbd3 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -852,6 +852,25 @@ ${escapedMessage} scriptedBubbleSprite.destroy(); })); + this.iframeSubscriptionList.push(iframeListener.unregisterIFrameStream.subscribe(() => { + const allProps = this.gameMap.getCurrentProperties(); + if(allProps.get("openWebsite") == null) { + layoutManager.removeActionButton('openWebsite', this.userInputManager); + } else { + const openWebsiteFunction = () => { + coWebsiteManager.loadCoWebsite(allProps.get("openWebsite") as string, this.MapUrlFile, allProps.get('openWebsiteAllowApi') as boolean | undefined, allProps.get('openWebsitePolicy') as string | undefined); + layoutManager.removeActionButton('openWebsite', this.userInputManager); + }; + + let message = allProps.get(WEBSITE_MESSAGE_PROPERTIES); + if(message === undefined) { + message = 'Press SPACE or touch here to open web site'; + } + layoutManager.addActionButton('openWebsite', message.toString(), () => { + openWebsiteFunction(); + }, this.userInputManager); + } + })); } private getMapDirUrl(): string { @@ -1456,6 +1475,33 @@ ${escapedMessage} mediaManager.showGameOverlay(); mediaManager.removeTriggerCloseJitsiFrameButton('close-jisi'); + + const allProps = this.gameMap.getCurrentProperties(); + + if(allProps.get("jitsiRoom") === undefined) { + layoutManager.removeActionButton('jitsiRoom', this.userInputManager); + } else { + const openJitsiRoomFunction = () => { + const roomName = jitsiFactory.getRoomName(allProps.get("jitsiRoom") as string, this.instance); + const jitsiUrl = allProps.get("jitsiUrl") as string | undefined; + if(JITSI_PRIVATE_MODE && !jitsiUrl) { + const adminTag = allProps.get("jitsiRoomAdminTag") as string | undefined; + + this.connection.emitQueryJitsiJwtMessage(roomName, adminTag); + } else { + this.startJitsi(roomName, undefined); + } + layoutManager.removeActionButton('jitsiRoom', this.userInputManager); + } + + let message = allProps.get(JITSI_MESSAGE_PROPERTIES); + if(message === undefined) { + message = 'Press SPACE or touch here to enter Jitsi Meet room'; + } + layoutManager.addActionButton('jitsiRoom', message.toString(), () => { + openJitsiRoomFunction(); + }, this.userInputManager); + } } //todo: put this into an 'orchestrator' scene (EntryScene?) diff --git a/front/src/WebRtc/AudioManager.ts b/front/src/WebRtc/AudioManager.ts index 60255a77..94488b4e 100644 --- a/front/src/WebRtc/AudioManager.ts +++ b/front/src/WebRtc/AudioManager.ts @@ -11,7 +11,7 @@ enum audioStates { const audioPlayerDivId = "audioplayer"; const audioPlayerCtrlId = "audioplayerctrl"; const audioPlayerVolId = "audioplayer_volume"; -const audioPlayerMuteId = "audioplayer_volume_icon_playing"; +const audioPlayerVolumeIconId = "audioplayer_volume_icon_playing"; const animationTime = 500; class AudioManager { @@ -21,7 +21,7 @@ class AudioManager { private audioPlayerCtrl: HTMLDivElement; private audioPlayerElem: HTMLAudioElement | undefined; private audioPlayerVol: HTMLInputElement; - private audioPlayerMute: HTMLInputElement; + private audioPlayerVolumeIcon: HTMLInputElement; private volume = 1; private muted = false; @@ -32,15 +32,12 @@ class AudioManager { this.audioPlayerDiv = HtmlUtils.getElementByIdOrFail(audioPlayerDivId); this.audioPlayerCtrl = HtmlUtils.getElementByIdOrFail(audioPlayerCtrlId); this.audioPlayerVol = HtmlUtils.getElementByIdOrFail(audioPlayerVolId); - this.audioPlayerMute = HtmlUtils.getElementByIdOrFail(audioPlayerMuteId); + this.audioPlayerVolumeIcon = HtmlUtils.getElementByIdOrFail(audioPlayerVolumeIconId); this.volume = localUserStore.getAudioPlayerVolume(); this.audioPlayerVol.value = '' + this.volume; this.muted = localUserStore.getAudioPlayerMuted(); - if (this.muted) { - this.audioPlayerMute.classList.add('muted'); - } } public playAudio(url: string|number|boolean, mapDirUrl: string, volume: number|undefined, loop=false): void { @@ -93,7 +90,22 @@ class AudioManager { this.volumeReduced = reduceVolume; this.audioPlayerElem.volume = this.volume; - this.audioPlayerVol.value = '' + this.volume; + if (this.muted) { + this.audioPlayerVol.value = '0'; + this.audioPlayerVolumeIcon.classList.add('muted'); + } else { + this.audioPlayerVol.value = '' + this.volume; + this.audioPlayerVolumeIcon.classList.remove('muted'); + if (this.volume < 0.3) { + this.audioPlayerVolumeIcon.classList.add('low'); + } else if (this.volume < 0.7) { + this.audioPlayerVolumeIcon.classList.remove('low'); + this.audioPlayerVolumeIcon.classList.add('mid'); + } else { + this.audioPlayerVolumeIcon.classList.remove('low'); + this.audioPlayerVolumeIcon.classList.remove('mid'); + } + } this.audioPlayerElem.muted = this.muted; } @@ -129,18 +141,14 @@ class AudioManager { this.muted = !this.muted; this.changeVolume(); localUserStore.setAudioPlayerMuted(this.muted); - - if (this.muted) { - this.audioPlayerMute.classList.add('muted'); - } else { - this.audioPlayerMute.classList.remove('muted'); - } } this.audioPlayerVol.oninput = (ev: Event)=> { this.setVolume(parseFloat((ev.currentTarget).value)); + this.muted = false; this.changeVolume(); - + localUserStore.setAudioPlayerMuted(this.muted); + (ev.currentTarget).blur(); } diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index 95885a53..6d8aa43b 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/front/src/WebRtc/CoWebsiteManager.ts @@ -180,6 +180,7 @@ class CoWebsiteManager { } setTimeout(() => { this.cowebsiteMainDom.innerHTML = ``; + HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId).blur(); resolve(); }, animationTime) }));