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)
}));