From f4ed527fe8b8603dbb0db0e9feb21c47e975fcc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Thu, 3 Jun 2021 14:10:31 +0200
Subject: [PATCH 1/2] Adding a global error message

This error message should be used for non fatal errors (otherwise, use the ErrorScene).
It is implemented using Svelte and the new "$errorStore".

Use `errorStore.addErrorMessage` to display the error popup with the message.

This PR uses this error message to display a popup explaining the browser is too old for WebRTC.
---
 front/src/Components/App.svelte               |  7 +++
 front/src/Components/UI/ErrorDialog.svelte    | 44 +++++++++++++++++++
 front/src/Stores/ErrorStore.ts                | 23 ++++++++++
 front/src/Stores/Errors/BrowserTooOldError.ts |  8 ++++
 front/src/Stores/MediaStore.ts                | 12 ++++-
 5 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 front/src/Components/UI/ErrorDialog.svelte
 create mode 100644 front/src/Stores/ErrorStore.ts
 create mode 100644 front/src/Stores/Errors/BrowserTooOldError.ts

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 11d125b1..a39f2dc7 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -9,6 +9,7 @@
     import {selectCharacterSceneVisibleStore} from "../Stores/SelectCharacterStore";
     import SelectCharacterScene from "./selectCharacter/SelectCharacterScene.svelte";
     import {customCharacterSceneVisibleStore} from "../Stores/CustomCharacterStore";
+    import {errorStore} from "../Stores/ErrorStore";
     import CustomCharacterScene from "./CustomCharacterScene/CustomCharacterScene.svelte";
     import LoginScene from "./Login/LoginScene.svelte";
     import {loginSceneVisibleStore} from "../Stores/LoginSceneStore";
@@ -21,6 +22,7 @@
     import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte";
     import AudioPlaying from "./UI/AudioPlaying.svelte";
     import {soundPlayingStore} from "../Stores/SoundPlayingStore";
+    import ErrorDialog from "./UI/ErrorDialog.svelte";
 
     export let game: Game;
 </script>
@@ -78,4 +80,9 @@
     {#if $requestVisitCardsStore}
         <VisitCard visitCardUrl={$requestVisitCardsStore}></VisitCard>
     {/if}
+    {#if $errorStore.length > 0}
+    <div>
+        <ErrorDialog></ErrorDialog>
+    </div>
+    {/if}
 </div>
diff --git a/front/src/Components/UI/ErrorDialog.svelte b/front/src/Components/UI/ErrorDialog.svelte
new file mode 100644
index 00000000..5c684a92
--- /dev/null
+++ b/front/src/Components/UI/ErrorDialog.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+import {errorStore} from "../../Stores/ErrorStore";
+
+function close(): boolean {
+    errorStore.clearMessages();
+    return false;
+}
+
+</script>
+
+<dialog class="error-dialog nes-dialog is-dark is-rounded" id="dialog-dark-rounded" open>
+    <p class="nes-text is-error title">Error</p>
+    <div class="body">
+    {#each $errorStore as error}
+    <p>{error}</p>
+    {/each}
+    </div>
+    <div class="button-bar">
+        <button class="nes-btn is-error" on:click={close}>Close</button>
+    </div>
+</dialog>
+
+<style lang="scss">
+    dialog.error-dialog {
+      pointer-events: auto;
+      top: 10%;
+
+      .button-bar {
+        text-align: center;
+      }
+
+      .body {
+        max-height: 50vh;
+      }
+
+      p {
+        font-family: "Press Start 2P";
+
+        &.title {
+          text-align: center;
+        }
+      }
+    }
+</style>
diff --git a/front/src/Stores/ErrorStore.ts b/front/src/Stores/ErrorStore.ts
new file mode 100644
index 00000000..eaab8a13
--- /dev/null
+++ b/front/src/Stores/ErrorStore.ts
@@ -0,0 +1,23 @@
+import {writable} from "svelte/store";
+
+/**
+ * A store that contains a list of error messages to be displayed.
+ */
+function createErrorStore() {
+    const { subscribe, set, update } = writable<string[]>([]);
+
+    return {
+        subscribe,
+        addErrorMessage: (e: string|Error): void => {
+            update((messages) => {
+                messages.push(e.toString());
+                return messages;
+            });
+        },
+        clearMessages: (): void => {
+            set([]);
+        }
+    };
+}
+
+export const errorStore = createErrorStore();
diff --git a/front/src/Stores/Errors/BrowserTooOldError.ts b/front/src/Stores/Errors/BrowserTooOldError.ts
new file mode 100644
index 00000000..bf934443
--- /dev/null
+++ b/front/src/Stores/Errors/BrowserTooOldError.ts
@@ -0,0 +1,8 @@
+export class BrowserTooOldError extends Error {
+    static NAME = 'BrowserTooOldError';
+
+    constructor() {
+        super('Unable to access your camera or microphone. Your browser is too old. Please consider upgrading your browser or try using a recent version of Chrome.');
+        this.name = BrowserTooOldError.NAME;
+    }
+}
diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts
index 7d1911a4..2c5fc796 100644
--- a/front/src/Stores/MediaStore.ts
+++ b/front/src/Stores/MediaStore.ts
@@ -4,6 +4,8 @@ import {localUserStore} from "../Connexion/LocalUserStore";
 import {ITiledMapGroupLayer, ITiledMapObjectLayer, ITiledMapTileLayer} from "../Phaser/Map/ITiledMap";
 import {userMovingStore} from "./GameStore";
 import {HtmlUtils} from "../WebRtc/HtmlUtils";
+import {BrowserTooOldError} from "./Errors/BrowserTooOldError";
+import {errorStore} from "./ErrorStore";
 
 /**
  * A store that contains the camera state requested by the user (on or off).
@@ -423,7 +425,7 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
             //throw new Error('Unable to access your camera or microphone. Your browser is too old.');
             set({
                 type: 'error',
-                error: new Error('Unable to access your camera or microphone. Your browser is too old. Please consider upgrading your browser or try using a recent version of Chrome.'),
+                error: new BrowserTooOldError(),
                 constraints
             });
             return;
@@ -594,3 +596,11 @@ microphoneListStore.subscribe((devices) => {
         audioConstraintStore.setDeviceId(undefined);
     }
 });
+
+localStreamStore.subscribe(streamResult => {
+    if (streamResult.type === 'error') {
+        if (streamResult.error.name === BrowserTooOldError.NAME) {
+            errorStore.addErrorMessage(streamResult.error);
+        }
+    }
+});

From 2905a5570ca921462732731566372bad928ef284 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Thu, 3 Jun 2021 14:29:09 +0200
Subject: [PATCH 2/2] Removing commented code

---
 front/src/Stores/MediaStore.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts
index 2c5fc796..13425afe 100644
--- a/front/src/Stores/MediaStore.ts
+++ b/front/src/Stores/MediaStore.ts
@@ -422,7 +422,6 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
             });
             return;
         } else {
-            //throw new Error('Unable to access your camera or microphone. Your browser is too old.');
             set({
                 type: 'error',
                 error: new BrowserTooOldError(),