Merge pull request #1118 from thecodingmachine/iphoneCompatibility

Iphone compatibility
This commit is contained in:
David Négrier 2021-06-04 18:19:15 +02:00 committed by GitHub
commit 4204b9ebf7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 61 additions and 11 deletions

View File

@ -8,7 +8,7 @@ function close(): boolean {
</script>
<dialog class="error-dialog nes-dialog is-dark is-rounded" id="dialog-dark-rounded" open>
<div class="error-div nes-container is-dark is-rounded" open>
<p class="nes-text is-error title">Error</p>
<div class="body">
{#each $errorStore as error}
@ -18,12 +18,16 @@ function close(): boolean {
<div class="button-bar">
<button class="nes-btn is-error" on:click={close}>Close</button>
</div>
</dialog>
</div>
<style lang="scss">
dialog.error-dialog {
div.error-div {
pointer-events: auto;
top: 10%;
margin-top: 10vh;
margin-right: auto;
margin-left: auto;
width: max-content;
max-width: 80vw;
.button-bar {
text-align: center;

View File

@ -236,6 +236,9 @@ export class CustomizeScene extends AbstractCharacterScene {
}
}
public onResize(): void {
this.moveLayers();

View File

@ -60,7 +60,6 @@ class WaScaleManager {
public saveZoom(): void {
this._saveZoom = this.hdpiManager.zoomModifier;
console.log(this._saveZoom);
}
public restoreZoom(): void{

View File

@ -9,8 +9,18 @@ function createErrorStore() {
return {
subscribe,
addErrorMessage: (e: string|Error): void => {
update((messages) => {
messages.push(e.toString());
update((messages: string[]) => {
let message: string;
if (e instanceof Error) {
message = e.message;
} else {
message = e;
}
if (!messages.includes(message)) {
messages.push(message);
}
return messages;
});
},

View File

@ -0,0 +1,8 @@
export class WebviewOnOldIOS extends Error {
static NAME = 'WebviewOnOldIOS';
constructor() {
super('Your iOS version cannot use video/audio in the browser unless you are using Safari. Please switch to Safari or upgrade iOS to 14.3 or above.');
this.name = WebviewOnOldIOS.NAME;
}
}

View File

@ -6,6 +6,8 @@ import {userMovingStore} from "./GameStore";
import {HtmlUtils} from "../WebRtc/HtmlUtils";
import {BrowserTooOldError} from "./Errors/BrowserTooOldError";
import {errorStore} from "./ErrorStore";
import {isIOS} from "../WebRtc/DeviceUtils";
import {WebviewOnOldIOS} from "./Errors/WebviewOnOldIOS";
/**
* A store that contains the camera state requested by the user (on or off).
@ -421,6 +423,13 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
constraints
});
return;
} else if (isIOS()) {
set({
type: 'error',
error: new WebviewOnOldIOS(),
constraints
});
return;
} else {
set({
type: 'error',
@ -598,7 +607,7 @@ microphoneListStore.subscribe((devices) => {
localStreamStore.subscribe(streamResult => {
if (streamResult.type === 'error') {
if (streamResult.error.name === BrowserTooOldError.NAME) {
if (streamResult.error.name === BrowserTooOldError.NAME || streamResult.error.name === WebviewOnOldIOS.NAME) {
errorStore.addErrorMessage(streamResult.error);
}
}

View File

@ -0,0 +1,12 @@
export function isIOS(): boolean {
return [
'iPad Simulator',
'iPhone Simulator',
'iPod Simulator',
'iPad',
'iPhone',
'iPod'
].includes(navigator.platform)
// iPad on iOS 13 detection
|| (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}

View File

@ -65,6 +65,7 @@ export class MediaManager {
}
});
let isScreenSharing = false;
screenSharingLocalStreamStore.subscribe((result) => {
if (result.type === 'error') {
console.error(result.error);
@ -75,11 +76,15 @@ export class MediaManager {
}
if (result.stream !== null) {
isScreenSharing = true;
this.addScreenSharingActiveVideo('me', DivImportance.Normal);
HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('screen-sharing-me').srcObject = result.stream;
} else {
if (isScreenSharing) {
isScreenSharing = false;
this.removeActiveScreenSharingVideo('me');
}
}
});
@ -145,7 +150,7 @@ export class MediaManager {
<img title="report this user" src="resources/logos/report.svg">
<span>Report/Block</span>
</button>
<video id="${userId}" autoplay></video>
<video id="${userId}" autoplay playsinline></video>
<img src="resources/logos/blockSign.svg" id="blocking-${userId}" class="block-logo">
<div id="soundMeter-${userId}" class="sound-progress">
<span></span>
@ -182,7 +187,7 @@ export class MediaManager {
userId = this.getScreenSharingId(userId);
const html = `
<div id="div-${userId}" class="video-container">
<video id="${userId}" autoplay></video>
<video id="${userId}" autoplay playsinline></video>
</div>
`;