From b7ac3b8fada3668297e4897e5263d7f7b71aac68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Fri, 4 Jun 2021 10:07:12 +0200 Subject: [PATCH 1/3] Generating HTML link using DOM manipulation rather that string manipulation --- front/dist/resources/style/style.css | 6 +++++- front/src/WebRtc/HtmlUtils.ts | 7 ++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 213b00f2..f1098af4 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -381,7 +381,7 @@ body { max-height: 25%; } - + } #game { @@ -1115,6 +1115,10 @@ div.modal-report-user{ color: white; } +.discussion .messages .message p a:visited{ + color: white; +} + .discussion .send-message{ position: absolute; bottom: 45px; diff --git a/front/src/WebRtc/HtmlUtils.ts b/front/src/WebRtc/HtmlUtils.ts index 86f38216..942e553f 100644 --- a/front/src/WebRtc/HtmlUtils.ts +++ b/front/src/WebRtc/HtmlUtils.ts @@ -35,7 +35,12 @@ export class HtmlUtils { const urlRegex = /(https?:\/\/[^\s]+)/g; text = HtmlUtils.escapeHtml(text); return text.replace(urlRegex, (url: string) => { - return '' + url + ''; + const link = document.createElement('a'); + link.href = url; + link.target = "_blank"; + const text = document.createTextNode(url); + link.appendChild(text); + return link.outerHTML; }); } From f4ed527fe8b8603dbb0db0e9feb21c47e975fcc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Thu, 3 Jun 2021 14:10:31 +0200 Subject: [PATCH 2/3] 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; @@ -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..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, 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?= Date: Thu, 3 Jun 2021 14:29:09 +0200 Subject: [PATCH 3/3] 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, LocalS }); return; } else { - //throw new Error('Unable to access your camera or microphone. Your browser is too old.'); set({ type: 'error', error: new BrowserTooOldError(),