@stream-io/video-client 1.4.1 → 1.4.3

package/src/devices/InputMediaDeviceManagerState.ts

@@ -2,11 +2,11 @@ import {
   BehaviorSubject,
   distinctUntilChanged,
   Observable,
+  of,
   shareReplay,
 } from 'rxjs';
-import { isReactNative } from '../helpers/platforms';
 import { RxUtils } from '../store';
-import { getLogger } from '../logger';
+import { BrowserPermission } from './BrowserPermission';
 
 export type InputDeviceStatus = 'enabled' | 'disabled' | undefined;
 export type TrackDisableMode = 'stop-tracks' | 'disable-tracks';
@@ -65,57 +65,23 @@ export abstract class InputMediaDeviceManagerState<C = MediaTrackConstraints> {
    * An observable that will emit `true` if browser/system permission
    * is granted, `false` otherwise.
    */
-  hasBrowserPermission$ = new Observable<boolean>((subscriber) => {
-    const notifyGranted = () => subscriber.next(true);
-    const permissionsAPIAvailable = !!navigator?.permissions?.query;
-    if (isReactNative() || !this.permissionName || !permissionsAPIAvailable) {
-      getLogger(['devices'])(
-        'warn',
-        `Permissions can't be queried. Assuming granted.`,
-      );
-      return notifyGranted();
-    }
-
-    let permissionState: PermissionStatus;
-    const notify = () => {
-      subscriber.next(
-        // In some browsers, the 'change' event doesn't reliably emit and hence,
-        // permissionState stays in 'prompt' state forever.
-        // Typically, this happens when a user grants one-time permission.
-        // Instead of checking if a permission is granted, we check if it isn't denied
-        permissionState.state !== 'denied',
-      );
-    };
-    navigator.permissions
-      .query({ name: this.permissionName })
-      .then((permissionStatus) => {
-        permissionState = permissionStatus;
-        permissionState.addEventListener('change', notify);
-        notify();
-      })
-      .catch(() => {
-        // permission doesn't exist or can't be queried -> assume it's granted
-        // an example would be Firefox,
-        // where neither camera microphone permission can be queried
-        notifyGranted();
-      });
-
-    return () => {
-      permissionState?.removeEventListener('change', notify);
-    };
-  }).pipe(shareReplay(1));
+  hasBrowserPermission$: Observable<boolean>;
 
   /**
    * Constructs new InputMediaDeviceManagerState instance.
    *
    * @param disableMode the disable mode to use.
-   * @param permissionName the permission name to use for querying.
+   * @param permission the BrowserPermission to use for querying.
    * `undefined` means no permission is required.
    */
   constructor(
     public readonly disableMode: TrackDisableMode = 'stop-tracks',
-    private readonly permissionName: PermissionName | undefined = undefined,
-  ) {}
+    permission?: BrowserPermission,
+  ) {
+    this.hasBrowserPermission$ = permission
+      ? permission.asObservable().pipe(shareReplay(1))
+      : of(true);
+  }
 
   /**
    * The device status

package/src/devices/MicrophoneManagerState.ts

@@ -3,6 +3,7 @@ import {
   InputMediaDeviceManagerState,
   TrackDisableMode,
 } from './InputMediaDeviceManagerState';
+import { getAudioBrowserPermission } from './devices';
 
 export class MicrophoneManagerState extends InputMediaDeviceManagerState {
   private speakingWhileMutedSubject = new BehaviorSubject<boolean>(false);
@@ -15,12 +16,7 @@ export class MicrophoneManagerState extends InputMediaDeviceManagerState {
   speakingWhileMuted$: Observable<boolean>;
 
   constructor(disableMode: TrackDisableMode) {
-    super(
-      disableMode,
-      // `microphone` is not in the W3C standard yet,
-      // but it's supported by Chrome and Safari.
-      'microphone' as PermissionName,
-    );
+    super(disableMode, getAudioBrowserPermission());
 
     this.speakingWhileMuted$ = this.speakingWhileMutedSubject
       .asObservable()

package/src/devices/__tests__/CameraManager.test.ts

@@ -4,6 +4,7 @@ import { CallingState, StreamVideoWriteableStateStore } from '../../store';
 
 import { afterEach, beforeEach, describe, expect, it, Mock, vi } from 'vitest';
 import {
+  mockBrowserPermission,
   mockCall,
   mockDeviceIds$,
   mockVideoDevices,
@@ -22,6 +23,8 @@ vi.mock('../devices.ts', () => {
       return of(mockVideoDevices);
     }),
     getVideoStream: vi.fn(() => Promise.resolve(mockVideoStream())),
+    getAudioBrowserPermission: () => mockBrowserPermission,
+    getVideoBrowserPermission: () => mockBrowserPermission,
     deviceIds$: mockDeviceIds$(),
   };
 });

package/src/devices/__tests__/InputMediaDeviceManager.test.ts

@@ -6,6 +6,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import {
   MockTrack,
   emitDeviceIds,
+  mockBrowserPermission,
   mockCall,
   mockDeviceIds$,
   mockVideoDevices,
@@ -26,6 +27,8 @@ vi.mock('../../Call.ts', () => {
 vi.mock('../devices.ts', () => {
   console.log('MOCKING devices API');
   return {
+    getAudioBrowserPermission: () => mockBrowserPermission,
+    getVideoBrowserPermission: () => mockBrowserPermission,
     deviceIds$: mockDeviceIds$(),
   };
 });
@@ -48,7 +51,7 @@ class TestInputMediaDeviceManager extends InputMediaDeviceManager<TestInputMedia
       call,
       new TestInputMediaDeviceManagerState(
         'stop-tracks',
-        'camera' as PermissionName,
+        mockBrowserPermission,
       ),
       TrackType.VIDEO,
     );
@@ -315,8 +318,7 @@ describe('InputMediaDeviceManager.test', () => {
     await vi.runAllTimersAsync();
 
     expect(manager.state.status).toBe('disabled');
-    expect(manager.disablePromise).toBeUndefined();
-    expect(manager.enablePromise).toBeUndefined();
+    expect(manager.state.optimisticStatus).toBe('disabled');
     expect(manager.state.selectedDevice).toBe(device.deviceId);
 
     vi.useRealTimers();

package/src/devices/__tests__/InputMediaDeviceManagerFilters.test.ts

@@ -5,7 +5,11 @@ import { StreamClient } from '../../coordinator/connection/client';
 import { StreamVideoWriteableStateStore } from '../../store';
 import { InputMediaDeviceManagerState } from '../InputMediaDeviceManagerState';
 import { InputMediaDeviceManager } from '../InputMediaDeviceManager';
-import { mockVideoDevices, mockVideoStream } from './mocks';
+import {
+  mockBrowserPermission,
+  mockVideoDevices,
+  mockVideoStream,
+} from './mocks';
 import { TrackType } from '../../gen/video/sfu/models/models';
 
 import '../../rtc/__tests__/mocks/webrtc.mocks';
@@ -28,7 +32,7 @@ class TestInputMediaDeviceManager extends InputMediaDeviceManager<TestInputMedia
       call,
       new TestInputMediaDeviceManagerState(
         'stop-tracks',
-        'camera' as PermissionName,
+        mockBrowserPermission,
       ),
       TrackType.VIDEO,
     );

package/src/devices/__tests__/InputMediaDeviceManagerState.test.ts

@@ -1,72 +1,66 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { InputMediaDeviceManagerState } from '../InputMediaDeviceManagerState';
+import { firstValueFrom } from 'rxjs';
+import { BrowserPermission } from '../BrowserPermission';
 
 class TestInputMediaDeviceManagerState extends InputMediaDeviceManagerState {
   constructor() {
-    super('stop-tracks', 'camera' as PermissionName);
+    super(
+      'stop-tracks',
+      new BrowserPermission({
+        queryName: 'camera' as PermissionName,
+        constraints: {},
+      }),
+    );
   }
 
   getDeviceIdFromStream = vi.fn();
 }
 
-describe('InputMediaDeviceManagerState', () => {
-  let state: InputMediaDeviceManagerState;
-
-  beforeEach(() => {
-    state = new TestInputMediaDeviceManagerState();
-  });
+function mockPermissionStatus(state: PermissionState): PermissionStatus {
+  return {
+    state,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  } as any;
+}
 
+describe('InputMediaDeviceManagerState', () => {
   describe('hasBrowserPermission', () => {
     it('should emit true when permission is granted', async () => {
-      const permissionStatus: Partial<PermissionStatus> = {
-        state: 'granted',
-        addEventListener: vi.fn(),
-      };
+      const permissionStatus = mockPermissionStatus('granted');
       const query = vi.fn(() => Promise.resolve(permissionStatus));
-      globalThis.navigator ??= {} as Navigator;
-      // @ts-ignore - navigator is readonly, but we need to mock it
-      globalThis.navigator.permissions = { query };
+      globalThis.navigator = { permissions: { query } } as any;
+      const state = new TestInputMediaDeviceManagerState();
+
+      const hasPermission = await firstValueFrom(state.hasBrowserPermission$);
 
-      const hasPermission = await new Promise((resolve) => {
-        state.hasBrowserPermission$.subscribe((v) => resolve(v));
-      });
       expect(hasPermission).toBe(true);
       expect(query).toHaveBeenCalledWith({ name: 'camera' });
       expect(permissionStatus.addEventListener).toHaveBeenCalled();
     });
 
     it('should emit false when permission is denied', async () => {
-      const permissionStatus: Partial<PermissionStatus> = {
-        state: 'denied',
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-      };
+      const permissionStatus = mockPermissionStatus('denied');
       const query = vi.fn(() => Promise.resolve(permissionStatus));
-      globalThis.navigator ??= {} as Navigator;
-      // @ts-ignore - navigator is readonly, but we need to mock it
-      globalThis.navigator.permissions = { query };
+      globalThis.navigator = { permissions: { query } } as any;
+      const state = new TestInputMediaDeviceManagerState();
+
+      const hasPermission = await firstValueFrom(state.hasBrowserPermission$);
 
-      const hasPermission = await new Promise((resolve) => {
-        state.hasBrowserPermission$.subscribe((v) => resolve(v));
-      });
       expect(hasPermission).toBe(false);
       expect(query).toHaveBeenCalledWith({ name: 'camera' });
       expect(permissionStatus.addEventListener).toHaveBeenCalled();
     });
 
     it('should emit true when prompt is needed', async () => {
-      const permissionStatus: Partial<PermissionStatus> = {
-        state: 'prompt',
-        addEventListener: vi.fn(),
-      };
+      const permissionStatus = mockPermissionStatus('prompt');
       const query = vi.fn(() => Promise.resolve(permissionStatus));
-      globalThis.navigator ??= {} as Navigator;
-      // @ts-ignore - navigator is readonly, but we need to mock it
-      globalThis.navigator.permissions = { query };
+      globalThis.navigator = { permissions: { query } } as any;
+      const state = new TestInputMediaDeviceManagerState();
+
+      const hasPermission = await firstValueFrom(state.hasBrowserPermission$);
 
-      const hasPermission = await new Promise((resolve) => {
-        state.hasBrowserPermission$.subscribe((v) => resolve(v));
-      });
       expect(hasPermission).toBe(true);
       expect(query).toHaveBeenCalledWith({ name: 'camera' });
       expect(permissionStatus.addEventListener).toHaveBeenCalled();
@@ -74,25 +68,21 @@ describe('InputMediaDeviceManagerState', () => {
 
     it('should emit true when permissions cannot be queried', async () => {
       const query = vi.fn(() => Promise.reject());
-      globalThis.navigator ??= {} as Navigator;
-      // @ts-ignore - navigator is readonly, but we need to mock it
-      globalThis.navigator.permissions = { query };
+      globalThis.navigator = { permissions: { query } } as any;
+      const state = new TestInputMediaDeviceManagerState();
+
+      const hasPermission = await firstValueFrom(state.hasBrowserPermission$);
 
-      const hasPermission = await new Promise((resolve) => {
-        state.hasBrowserPermission$.subscribe((v) => resolve(v));
-      });
       expect(hasPermission).toBe(true);
       expect(query).toHaveBeenCalledWith({ name: 'camera' });
     });
 
     it('should emit true when permissions API is unavailable', async () => {
-      globalThis.navigator ??= {} as Navigator;
-      // @ts-ignore - navigator is readonly, but we need to mock it
-      globalThis.navigator.permissions = null;
+      globalThis.navigator = {} as any;
+      const state = new TestInputMediaDeviceManagerState();
+
+      const hasPermission = await firstValueFrom(state.hasBrowserPermission$);
 
-      const hasPermission = await new Promise((resolve) => {
-        state.hasBrowserPermission$.subscribe((v) => resolve(v));
-      });
       expect(hasPermission).toBe(true);
     });
   });

package/src/devices/__tests__/MicrophoneManager.test.ts

@@ -12,6 +12,7 @@ import { CallingState, StreamVideoWriteableStateStore } from '../../store';
 import {
   mockAudioDevices,
   mockAudioStream,
+  mockBrowserPermission,
   mockCall,
   mockDeviceIds$,
 } from './mocks';
@@ -31,6 +32,8 @@ vi.mock('../devices.ts', () => {
       return of(mockAudioDevices);
     }),
     getAudioStream: vi.fn(() => Promise.resolve(mockAudioStream())),
+    getAudioBrowserPermission: () => mockBrowserPermission,
+    getVideoBrowserPermission: () => mockBrowserPermission,
     deviceIds$: mockDeviceIds$(),
   };
 });
@@ -50,7 +53,7 @@ vi.mock('../../Call.ts', () => {
 });
 
 class NoiseCancellationStub implements INoiseCancellation {
-  private listeners: { [event: string]: Array<() => void> } = {};
+  private listeners: { [event: string]: Array<(arg: boolean) => void> } = {};
 
   isSupported = () => true;
   init = () => Promise.resolve(undefined);

package/src/devices/__tests__/MicrophoneManagerRN.test.ts

@@ -4,7 +4,12 @@ import { MicrophoneManager } from '../MicrophoneManager';
 import { Call } from '../../Call';
 import { StreamClient } from '../../coordinator/connection/client';
 import { StreamVideoWriteableStateStore } from '../../store';
-import { mockAudioDevices, mockAudioStream, mockCall } from './mocks';
+import {
+  mockAudioDevices,
+  mockAudioStream,
+  mockBrowserPermission,
+  mockCall,
+} from './mocks';
 import { of } from 'rxjs';
 import '../../rtc/__tests__/mocks/webrtc.mocks';
 import { OwnCapability } from '../../gen/coordinator';
@@ -25,6 +30,8 @@ vi.mock('../devices.ts', () => {
       return of(mockAudioDevices);
     }),
     getAudioStream: vi.fn(() => Promise.resolve(mockAudioStream())),
+    getAudioBrowserPermission: () => mockBrowserPermission,
+    getVideoBrowserPermission: () => mockBrowserPermission,
     deviceIds$: {},
   };
 });

package/src/devices/__tests__/SpeakerManager.test.ts

@@ -1,5 +1,10 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { emitDeviceIds, mockAudioDevices, mockDeviceIds$ } from './mocks';
+import {
+  emitDeviceIds,
+  mockAudioDevices,
+  mockBrowserPermission,
+  mockDeviceIds$,
+} from './mocks';
 import { of } from 'rxjs';
 import { SpeakerManager } from '../SpeakerManager';
 import { checkIfAudioOutputChangeSupported } from '../devices';
@@ -12,6 +17,8 @@ vi.mock('../devices.ts', () => {
   return {
     getAudioOutputDevices: vi.fn(() => of(mockAudioDevices)),
     checkIfAudioOutputChangeSupported: vi.fn(() => true),
+    getAudioBrowserPermission: () => mockBrowserPermission,
+    getVideoBrowserPermission: () => mockBrowserPermission,
     deviceIds$: mockDeviceIds$(),
   };
 });

package/src/devices/__tests__/mocks.ts

@@ -5,7 +5,8 @@ import {
   OwnCapability,
 } from '../../gen/coordinator';
 import { Call } from '../../Call';
-import { Subject } from 'rxjs';
+import { of, Subject } from 'rxjs';
+import { BrowserPermission } from '../BrowserPermission';
 
 export const mockVideoDevices = [
   {
@@ -217,3 +218,7 @@ export const mockDeviceIds$ = () => {
 export const emitDeviceIds = (values: MediaDeviceInfo[]) => {
   deviceIds.next(values);
 };
+
+export const mockBrowserPermission = {
+  asObservable: () => of(true),
+} as BrowserPermission;