From 247d508d094e4c264075c93410624da9cd494ad7 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Fri, 4 Jun 2021 10:01:08 +0200
Subject: [PATCH 1/7] create PR to test iphone compatibility

---
 front/src/Phaser/Login/CustomizeScene.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 3d85cdd5..cc0c7208 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -236,6 +236,9 @@ export class CustomizeScene extends AbstractCharacterScene {
         }
     }
 
+
+
+
      public onResize(): void {
         this.moveLayers();
 

From fd4f09588e1d6e46605b3019b39905f4c5486390 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 4 Jun 2021 14:16:21 +0200
Subject: [PATCH 2/7] Adding "playsinline" tag in remote <video> tags for
 iPhone compatibility (test)

---
 front/src/WebRtc/MediaManager.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 3d5d3190..8292b0ad 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -145,7 +145,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 +182,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>
         `;
 

From 01ce94585a384303f4e3b0e13024454a4ad99b0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 4 Jun 2021 16:07:36 +0200
Subject: [PATCH 3/7] Displaying only message in the Dialog error (and not the
 exception name in front of the message)

---
 front/src/Stores/ErrorStore.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/front/src/Stores/ErrorStore.ts b/front/src/Stores/ErrorStore.ts
index eaab8a13..9647c370 100644
--- a/front/src/Stores/ErrorStore.ts
+++ b/front/src/Stores/ErrorStore.ts
@@ -10,7 +10,13 @@ function createErrorStore() {
         subscribe,
         addErrorMessage: (e: string|Error): void => {
             update((messages) => {
-                messages.push(e.toString());
+                let message: string;
+                if (e instanceof Error) {
+                    message = e.message;
+                } else {
+                    message = e;
+                }
+                messages.push(message);
                 return messages;
             });
         },

From 469cac9656805199d62d65bf382d7377276685df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 4 Jun 2021 16:08:02 +0200
Subject: [PATCH 4/7] Making sure the "stopped screensharing" log is not
 displayed on startup

---
 front/src/WebRtc/MediaManager.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 8292b0ad..efc9660a 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/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');
+                }
             }
 
         });

From 9f09dc9df2f78d65a31d7b14a3a40b131a3e3dfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 4 Jun 2021 16:19:41 +0200
Subject: [PATCH 5/7] Adding a special error message for non Safari browsers on
 iOS < 14.3

---
 front/src/Stores/Errors/WebviewOnOldIOS.ts |  8 ++++++++
 front/src/Stores/MediaStore.ts             | 11 ++++++++++-
 front/src/WebRtc/DeviceUtils.ts            | 12 ++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 front/src/Stores/Errors/WebviewOnOldIOS.ts
 create mode 100644 front/src/WebRtc/DeviceUtils.ts

diff --git a/front/src/Stores/Errors/WebviewOnOldIOS.ts b/front/src/Stores/Errors/WebviewOnOldIOS.ts
new file mode 100644
index 00000000..06c03f0e
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts
index 13425afe..d622511e 100644
--- a/front/src/Stores/MediaStore.ts
+++ b/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);
         }
     }
diff --git a/front/src/WebRtc/DeviceUtils.ts b/front/src/WebRtc/DeviceUtils.ts
new file mode 100644
index 00000000..91a3dc31
--- /dev/null
+++ b/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)
+}

From bacd2605477e2daa37dbc2b3aa0a73f4445208ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 4 Jun 2021 16:22:15 +0200
Subject: [PATCH 6/7] Prevents error message from being displayed twice in the
 same dialog

---
 front/src/Stores/ErrorStore.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/front/src/Stores/ErrorStore.ts b/front/src/Stores/ErrorStore.ts
index 9647c370..2f1e3e40 100644
--- a/front/src/Stores/ErrorStore.ts
+++ b/front/src/Stores/ErrorStore.ts
@@ -9,14 +9,18 @@ function createErrorStore() {
     return {
         subscribe,
         addErrorMessage: (e: string|Error): void => {
-            update((messages) => {
+            update((messages: string[]) => {
                 let message: string;
                 if (e instanceof Error) {
                     message = e.message;
                 } else {
                     message = e;
                 }
-                messages.push(message);
+
+                if (!messages.includes(message)) {
+                    messages.push(message);
+                }
+
                 return messages;
             });
         },

From 3e19234edc9629f597519723f44e3789ea036207 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Fri, 4 Jun 2021 16:32:07 +0200
Subject: [PATCH 7/7] Change <dialog> for ErrorDialog in <div> because only
 Chrome knows <dialog>

---
 front/src/Components/UI/ErrorDialog.svelte  | 12 ++++++++----
 front/src/Phaser/Services/WaScaleManager.ts |  1 -
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/front/src/Components/UI/ErrorDialog.svelte b/front/src/Components/UI/ErrorDialog.svelte
index 5c684a92..3244de24 100644
--- a/front/src/Components/UI/ErrorDialog.svelte
+++ b/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;
diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts
index 4e0e9208..acbecc38 100644
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/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{