From ac05eb89f38264435d5a268b43b320785b3ee85b Mon Sep 17 00:00:00 2001
From: lukasIO <mail@lukasseiler.de>
Date: Fri, 21 Jul 2023 08:52:53 +0200
Subject: [PATCH] Fix iOS browser parser check, add more test cases (#798)

* Fix iOS browser parser check, add more test cases

* more tests

* Create plenty-spoons-grow.md

* Prevent lock screen controls from showing up

* remove debug log
---
 .changeset/plenty-spoons-grow.md |  5 +++++
 src/room/Room.ts                 | 10 ++++++++-
 src/utils/browserParser.test.ts  | 35 +++++++++++++++++++++++++++++---
 src/utils/browserParser.ts       |  2 +-
 4 files changed, 47 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/plenty-spoons-grow.md

diff --git a/.changeset/plenty-spoons-grow.md b/.changeset/plenty-spoons-grow.md
new file mode 100644
index 0000000000..4910a58fec
--- /dev/null
+++ b/.changeset/plenty-spoons-grow.md
@@ -0,0 +1,5 @@
+---
+"livekit-client": patch
+---
+
+Fix iOS browser parser check, add more test cases
diff --git a/src/room/Room.ts b/src/room/Room.ts
index c2515928df..19f6917e65 100644
--- a/src/room/Room.ts
+++ b/src/room/Room.ts
@@ -800,7 +800,15 @@ class Room extends EventEmitter<RoomEventCallbacks> {
         dummyAudioEl.hidden = true;
         const track = getEmptyAudioStreamTrack();
         track.enabled = true;
-        dummyAudioEl.srcObject = new MediaStream([track]);
+        const stream = new MediaStream([track]);
+        dummyAudioEl.srcObject = stream;
+        document.addEventListener('visibilitychange', () => {
+          if (!dummyAudioEl) {
+            return;
+          }
+          // set the srcObject to null on page hide in order to prevent lock screen controls to show up for it
+          dummyAudioEl.srcObject = document.hidden ? null : stream;
+        });
         document.body.append(dummyAudioEl);
         this.once(RoomEvent.Disconnected, () => {
           dummyAudioEl?.remove();
diff --git a/src/utils/browserParser.test.ts b/src/utils/browserParser.test.ts
index cbe7f68a74..bdad5557cd 100644
--- a/src/utils/browserParser.test.ts
+++ b/src/utils/browserParser.test.ts
@@ -3,32 +3,61 @@ import { compareVersions } from '../room/utils';
 import { getBrowser } from './browserParser';
 
 describe('browser parser', () => {
-  const safariUA =
+  const macOSSafariUA =
     'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15';
+
+  const iOSSafariUA =
+    'Mozilla/5.0 (iPhone; CPU iPhone OS 16_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Mobile/15E148 Safari/604.1';
+
   const firefoxUA =
     'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/112.0';
 
+  const iOSFirefoxUA =
+    'Mozilla/5.0 (iPhone; CPU iPhone OS 13_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/115.0 Mobile/15E148 Safari/605.1.15';
+
   const chromeUA =
     'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36';
 
+  const iOSChromeUA =
+    'Mozilla/5.0 (iPhone; CPU iPhone OS 16_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/115.0.5790.130 Mobile/15E148 Safari/604.11';
+
   const braveUA =
     'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36';
 
-  it('parses Safari correctly', () => {
-    const details = getBrowser(safariUA, true);
+  it('parses Safari macOS correctly', () => {
+    const details = getBrowser(macOSSafariUA, true);
     expect(details?.name).toBe('Safari');
     expect(details?.version).toBe('16.3');
+    expect(details?.os).toBe('macOS');
+  });
+  it('parses Safari iOS correctly', () => {
+    const details = getBrowser(iOSSafariUA, true);
+    expect(details?.name).toBe('Safari');
+    expect(details?.version).toBe('16.5');
+    expect(details?.os).toBe('iOS');
   });
   it('parses Firefox correctly', () => {
     const details = getBrowser(firefoxUA, true);
     expect(details?.name).toBe('Firefox');
     expect(details?.version).toBe('112.0');
   });
+  it('parses iOS Firefox correctly', () => {
+    const details = getBrowser(iOSFirefoxUA, true);
+    expect(details?.name).toBe('Firefox');
+    expect(details?.version).toBe('115.0');
+    expect(details?.os).toBe('iOS');
+  });
   it('parses Chrome correctly', () => {
     const details = getBrowser(chromeUA, true);
     expect(details?.name).toBe('Chrome');
     expect(details?.version).toBe('112.0.0.0');
   });
+  it('parses iOS Chrome correctly', () => {
+    const details = getBrowser(iOSChromeUA, true);
+    expect(details?.name).toBe('Chrome');
+    expect(details?.version).toBe('115.0.5790.130');
+    expect(details?.os).toBe('iOS');
+  });
   it('detects brave as chromium based', () => {
     const details = getBrowser(braveUA, true);
     expect(details?.name).toBe('Chrome');
diff --git a/src/utils/browserParser.ts b/src/utils/browserParser.ts
index 0d6e5dc8d2..6445279a07 100644
--- a/src/utils/browserParser.ts
+++ b/src/utils/browserParser.ts
@@ -60,7 +60,7 @@ const browsersList = [
       const browser: BrowserDetails = {
         name: 'Safari',
         version: getMatch(commonVersionIdentifier, ua),
-        os: ua.includes('Mobile/') ? 'iOS' : 'macOS',
+        os: ua.includes('mobile/') ? 'iOS' : 'macOS',
       };
 
       return browser;