diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0b2d54e..29cc0cb7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@
- The chat now tracks incoming and outcoming users in your conversation
- The chat allows your to see the visit card of users
- You can close the chat window with the escape key
+- Added a 'Enable notifications' button in the menu.
## Version 1.4.3 - 1.4.4 - 1.4.5
diff --git a/front/dist/resources/html/gameMenu.html b/front/dist/resources/html/gameMenu.html
index b13b617d..bef2cf8d 100644
--- a/front/dist/resources/html/gameMenu.html
+++ b/front/dist/resources/html/gameMenu.html
@@ -48,6 +48,9 @@
+
diff --git a/front/src/Components/VisitCard/VisitCard.svelte b/front/src/Components/VisitCard/VisitCard.svelte
index 78f10359..e9eca3b1 100644
--- a/front/src/Components/VisitCard/VisitCard.svelte
+++ b/front/src/Components/VisitCard/VisitCard.svelte
@@ -45,8 +45,9 @@
.visitCard {
pointer-events: all;
- margin-left: auto;
- margin-right: auto;
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, 0);
margin-top: 200px;
max-width: 80vw;
diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts
index da59cecb..4cf18cce 100644
--- a/front/src/Phaser/Menu/MenuScene.ts
+++ b/front/src/Phaser/Menu/MenuScene.ts
@@ -19,6 +19,7 @@ import { sendMenuClickedEvent } from "../../Api/iframe/Ui/MenuItem";
import { consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";
import { get } from "svelte/store";
import { playersStore } from "../../Stores/PlayersStore";
+import { mediaManager } from "../../WebRtc/MediaManager";
export const MenuSceneName = "MenuScene";
const gameMenuKey = "gameMenu";
@@ -98,6 +99,10 @@ export class MenuScene extends Phaser.Scene {
this.menuElement.setOrigin(0);
MenuScene.revealMenusAfterInit(this.menuElement, "gameMenu");
+ if (mediaManager.hasNotification()) {
+ HtmlUtils.getElementByIdOrFail("enableNotification").hidden = true;
+ }
+
const middleX = window.innerWidth / 3 - 298;
this.gameQualityMenuElement = this.add.dom(middleX, -400).createFromCache(gameSettingsMenuKey);
MenuScene.revealMenusAfterInit(this.gameQualityMenuElement, "gameQuality");
@@ -357,6 +362,9 @@ export class MenuScene extends Phaser.Scene {
case "toggleFullscreen":
this.toggleFullscreen();
break;
+ case "enableNotification":
+ this.enableNotification();
+ break;
case "adminConsoleButton":
if (get(consoleGlobalMessageManagerVisibleStore)) {
consoleGlobalMessageManagerVisibleStore.set(false);
@@ -419,4 +427,12 @@ export class MenuScene extends Phaser.Scene {
public isDirty(): boolean {
return false;
}
+
+ private enableNotification() {
+ mediaManager.requestNotification().then(() => {
+ if (mediaManager.hasNotification()) {
+ HtmlUtils.getElementByIdOrFail("enableNotification").hidden = true;
+ }
+ });
+ }
}
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 126bf1a8..d7e9f514 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -1,7 +1,6 @@
import { layoutManager } from "./LayoutManager";
import { HtmlUtils } from "./HtmlUtils";
import type { UserInputManager } from "../Phaser/UserInput/UserInputManager";
-import { DISABLE_NOTIFICATIONS } from "../Enum/EnvironmentVariable";
import { localStreamStore } from "../Stores/MediaStore";
import { screenSharingLocalStreamStore } from "../Stores/ScreenSharingStore";
import { helpCameraSettingsVisibleStore } from "../Stores/HelpCameraSettingsStore";
@@ -16,16 +15,11 @@ export class MediaManager {
startScreenSharingCallBacks: Set = new Set();
stopScreenSharingCallBacks: Set = new Set();
- private focused: boolean = true;
-
private triggerCloseJistiFrame: Map = new Map();
private userInputManager?: UserInputManager;
constructor() {
- //Check of ask notification navigator permission
- this.getNotification();
-
localStreamStore.subscribe((result) => {
if (result.type === "error") {
console.error(result.error);
@@ -181,49 +175,31 @@ export class MediaManager {
this.userInputManager = userInputManager;
}
- public getNotification() {
- //Get notification
- if (!DISABLE_NOTIFICATIONS && window.Notification && Notification.permission !== "granted") {
- if (this.checkNotificationPromise()) {
- Notification.requestPermission().catch((err) => {
- console.error(`Notification permission error`, err);
- });
- } else {
- Notification.requestPermission();
- }
- }
+ public hasNotification(): boolean {
+ return Notification.permission === "granted";
}
- /**
- * Return true if the browser supports the modern version of the Notification API (which is Promise based) or false
- * if we are on Safari...
- *
- * See https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
- */
- private checkNotificationPromise(): boolean {
- try {
- Notification.requestPermission().then();
- } catch (e) {
- return false;
+ public requestNotification() {
+ if (window.Notification && Notification.permission !== "granted") {
+ return Notification.requestPermission();
+ } else {
+ return Promise.reject();
}
-
- return true;
}
public createNotification(userName: string) {
- if (this.focused) {
+ if (document.hasFocus()) {
return;
}
- if (window.Notification && Notification.permission === "granted") {
- const title = "WorkAdventure";
+
+ if (this.hasNotification()) {
+ const title = `${userName} wants to discuss with you`;
const options = {
- body: `Hi! ${userName} wants to discuss with you, don't be afraid!`,
icon: "/resources/logos/logo-WA-min.png",
image: "/resources/logos/logo-WA-min.png",
badge: "/resources/logos/logo-WA-min.png",
};
new Notification(title, options);
- //new Notification(`Hi! ${userName} wants to discuss with you, don't be afraid!`);
}
}
}