Merge branch 'develop' of github.com:thecodingmachine/workadventure into iphoneCompatibility

This commit is contained in:
GRL 2021-06-04 16:02:46 +02:00
commit a58d6353cd
7 changed files with 103 additions and 3 deletions

View File

@ -9,6 +9,7 @@
import {selectCharacterSceneVisibleStore} from "../Stores/SelectCharacterStore"; import {selectCharacterSceneVisibleStore} from "../Stores/SelectCharacterStore";
import SelectCharacterScene from "./selectCharacter/SelectCharacterScene.svelte"; import SelectCharacterScene from "./selectCharacter/SelectCharacterScene.svelte";
import {customCharacterSceneVisibleStore} from "../Stores/CustomCharacterStore"; import {customCharacterSceneVisibleStore} from "../Stores/CustomCharacterStore";
import {errorStore} from "../Stores/ErrorStore";
import CustomCharacterScene from "./CustomCharacterScene/CustomCharacterScene.svelte"; import CustomCharacterScene from "./CustomCharacterScene/CustomCharacterScene.svelte";
import LoginScene from "./Login/LoginScene.svelte"; import LoginScene from "./Login/LoginScene.svelte";
import {loginSceneVisibleStore} from "../Stores/LoginSceneStore"; import {loginSceneVisibleStore} from "../Stores/LoginSceneStore";
@ -21,6 +22,7 @@
import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte"; import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte";
import AudioPlaying from "./UI/AudioPlaying.svelte"; import AudioPlaying from "./UI/AudioPlaying.svelte";
import {soundPlayingStore} from "../Stores/SoundPlayingStore"; import {soundPlayingStore} from "../Stores/SoundPlayingStore";
import ErrorDialog from "./UI/ErrorDialog.svelte";
export let game: Game; export let game: Game;
</script> </script>
@ -78,4 +80,9 @@
{#if $requestVisitCardsStore} {#if $requestVisitCardsStore}
<VisitCard visitCardUrl={$requestVisitCardsStore}></VisitCard> <VisitCard visitCardUrl={$requestVisitCardsStore}></VisitCard>
{/if} {/if}
{#if $errorStore.length > 0}
<div>
<ErrorDialog></ErrorDialog>
</div>
{/if}
</div> </div>

View File

@ -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>

View File

@ -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();

View File

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

View File

@ -4,6 +4,8 @@ import {localUserStore} from "../Connexion/LocalUserStore";
import {ITiledMapGroupLayer, ITiledMapObjectLayer, ITiledMapTileLayer} from "../Phaser/Map/ITiledMap"; import {ITiledMapGroupLayer, ITiledMapObjectLayer, ITiledMapTileLayer} from "../Phaser/Map/ITiledMap";
import {userMovingStore} from "./GameStore"; import {userMovingStore} from "./GameStore";
import {HtmlUtils} from "../WebRtc/HtmlUtils"; 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). * A store that contains the camera state requested by the user (on or off).
@ -420,10 +422,9 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
}); });
return; return;
} else { } else {
//throw new Error('Unable to access your camera or microphone. Your browser is too old.');
set({ set({
type: 'error', 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 constraints
}); });
return; return;
@ -594,3 +595,11 @@ microphoneListStore.subscribe((devices) => {
audioConstraintStore.setDeviceId(undefined); audioConstraintStore.setDeviceId(undefined);
} }
}); });
localStreamStore.subscribe(streamResult => {
if (streamResult.type === 'error') {
if (streamResult.error.name === BrowserTooOldError.NAME) {
errorStore.addErrorMessage(streamResult.error);
}
}
});

View File

@ -35,7 +35,12 @@ export class HtmlUtils {
const urlRegex = /(https?:\/\/[^\s]+)/g; const urlRegex = /(https?:\/\/[^\s]+)/g;
text = HtmlUtils.escapeHtml(text); text = HtmlUtils.escapeHtml(text);
return text.replace(urlRegex, (url: string) => { return text.replace(urlRegex, (url: string) => {
return '<a href="' + url + '" target="_blank" style=":visited {color: white}">' + url + '</a>'; const link = document.createElement('a');
link.href = url;
link.target = "_blank";
const text = document.createTextNode(url);
link.appendChild(text);
return link.outerHTML;
}); });
} }

View File

@ -1077,6 +1077,10 @@ div.modal-report-user{
color: white; color: white;
} }
.discussion .messages .message p a:visited{
color: white;
}
.discussion .send-message{ .discussion .send-message{
position: absolute; position: absolute;
bottom: 45px; bottom: 45px;