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; @@ -78,4 +80,9 @@ {#if $requestVisitCardsStore} {/if} + {#if $errorStore.length > 0} +
+ +
+ {/if} 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 @@ + + + +

Error

+
+ {#each $errorStore as error} +

{error}

+ {/each} +
+
+ +
+
+ + 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([]); + + 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..13425afe 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). @@ -420,10 +422,9 @@ export const localStreamStore = derived, LocalS }); return; } else { - //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 +595,11 @@ microphoneListStore.subscribe((devices) => { audioConstraintStore.setDeviceId(undefined); } }); + +localStreamStore.subscribe(streamResult => { + if (streamResult.type === 'error') { + if (streamResult.error.name === BrowserTooOldError.NAME) { + errorStore.addErrorMessage(streamResult.error); + } + } +});