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
livekit · Jul 21, 2023 · ac05eb8 · ac05eb8
1 parent 3848be0
commit ac05eb8
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 5 deletions.
diff --git a/.changeset/plenty-spoons-grow.md 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
@@ -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
@@ -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
@@ -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;