Merge pull request #1118 from thecodingmachine/iphoneCompatibility

Iphone compatibility

front/src/Components/UI/ErrorDialog.svelte

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

front/src/Phaser/Login/CustomizeScene.ts

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

front/src/Phaser/Services/WaScaleManager.ts

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

front/src/Stores/ErrorStore.ts

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

front/src/Stores/Errors/WebviewOnOldIOS.ts

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

front/src/Stores/MediaStore.ts

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

front/src/WebRtc/DeviceUtils.ts

@@ -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)
+}

front/src/WebRtc/MediaManager.ts

@@ -65,6 +65,7 @@ export class MediaManager {
             }
         });
 
+        let isScreenSharing = false;
         screenSharingLocalStreamStore.subscribe((result) => {
             if (result.type === 'error') {
                 console.error(result.error);
@@ -75,10 +76,14 @@ export class MediaManager {
             }
 
             if (result.stream !== null) {
+                isScreenSharing = true;
                 this.addScreenSharingActiveVideo('me', DivImportance.Normal);
                 HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('screen-sharing-me').srcObject = result.stream;
             } else {
-                this.removeActiveScreenSharingVideo('me');
+                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>
         `;