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