Merge pull request #1118 from thecodingmachine/iphoneCompatibility
Iphone compatibility
This commit is contained in:
commit
4204b9ebf7
@ -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;
|
||||
|
@ -236,6 +236,9 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
public onResize(): void {
|
||||
this.moveLayers();
|
||||
|
||||
|
@ -60,7 +60,6 @@ class WaScaleManager {
|
||||
|
||||
public saveZoom(): void {
|
||||
this._saveZoom = this.hdpiManager.zoomModifier;
|
||||
console.log(this._saveZoom);
|
||||
}
|
||||
|
||||
public restoreZoom(): void{
|
||||
|
@ -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;
|
||||
});
|
||||
},
|
||||
|
8
front/src/Stores/Errors/WebviewOnOldIOS.ts
Normal file
8
front/src/Stores/Errors/WebviewOnOldIOS.ts
Normal 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;
|
||||
}
|
||||
}
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
12
front/src/WebRtc/DeviceUtils.ts
Normal file
12
front/src/WebRtc/DeviceUtils.ts
Normal 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)
|
||||
}
|
@ -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>
|
||||
`;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user