@stream-io/video-client 0.3.12 → 0.3.13

package/dist/src/Call.d.ts

@@ -7,7 +7,9 @@ import { DynascaleManager } from './helpers/DynascaleManager';
 import { PermissionsContext } from './permissions';
 import { StreamClient } from './coordinator/connection/client';
 import { CallEventHandler, CallEventTypes, EventTypes, Logger } from './coordinator/connection/types';
-import { CameraManager, MicrophoneManager } from './devices';
+import { CameraManager } from './devices/CameraManager';
+import { MicrophoneManager } from './devices/MicrophoneManager';
+import { SpeakerManager } from './devices/SpeakerManager';
 /**
  * An object representation of a `Call`.
  */
@@ -45,6 +47,7 @@ export declare class Call {
      * The DynascaleManager instance.
      */
     readonly dynascaleManager: DynascaleManager;
+    readonly speaker: SpeakerManager;
     /**
      * Flag telling whether this call is a "ringing" call.
      */
@@ -251,6 +254,8 @@ export declare class Call {
      *
      *
      * @param deviceId the selected device, `undefined` means the user wants to use the system's default audio output
+     *
+     * @deprecated use `call.speaker` instead
      */
     setAudioOutputDevice: (deviceId?: string) => void;
     /**

package/dist/src/devices/SpeakerManager.d.ts

@@ -0,0 +1,28 @@
+import { SpeakerState } from './SpeakerState';
+export declare class SpeakerManager {
+    readonly state: SpeakerState;
+    constructor();
+    /**
+     * Lists the available audio output devices
+     *
+     * Note: It prompts the user for a permission to use devices (if not already granted)
+     *
+     * @returns an Observable that will be updated if a device is connected or disconnected
+     */
+    listDevices(): import("rxjs").Observable<MediaDeviceInfo[]>;
+    /**
+     * Select device
+     *
+     * Note: this method is not supported in React Native
+     *
+     * @param deviceId empty string means the system default
+     */
+    select(deviceId: string): void;
+    /**
+     * Set the volume of the audio elements
+     * @param volume a number between 0 and 1
+     *
+     * Note: this method is not supported in React Native
+     */
+    setVolume(volume: number): void;
+}

package/dist/src/devices/SpeakerState.d.ts

@@ -0,0 +1,64 @@
+import { BehaviorSubject, Observable } from 'rxjs';
+import { RxUtils } from '../store';
+export declare class SpeakerState {
+    protected selectedDeviceSubject: BehaviorSubject<string>;
+    protected volumeSubject: BehaviorSubject<number>;
+    /**
+     * [Tells if the browser supports audio output change on 'audio' elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId).
+     */
+    readonly isDeviceSelectionSupported: boolean;
+    /**
+     * An Observable that emits the currently selected device
+     *
+     * Note: this feature is not supported in React Native
+     */
+    selectedDevice$: Observable<string>;
+    /**
+     * An Observable that emits the currently selected volume
+     *
+     * Note: this feature is not supported in React Native
+     */
+    volume$: Observable<number>;
+    constructor();
+    /**
+     * The currently selected device
+     *
+     * Note: this feature is not supported in React Native
+     */
+    get selectedDevice(): string;
+    /**
+     * The currently selected volume
+     *
+     * Note: this feature is not supported in React Native
+     */
+    get volume(): number;
+    /**
+     * Gets the current value of an observable, or undefined if the observable has
+     * not emitted a value yet.
+     *
+     * @param observable$ the observable to get the value from.
+     */
+    getCurrentValue: <T>(observable$: Observable<T>) => T;
+    /**
+     * @internal
+     * @param deviceId
+     */
+    setDevice(deviceId: string): void;
+    /**
+     * @internal
+     * @param volume
+     */
+    setVolume(volume: number): void;
+    /**
+     * Updates the value of the provided Subject.
+     * An `update` can either be a new value or a function which takes
+     * the current value and returns a new value.
+     *
+     * @internal
+     *
+     * @param subject the subject to update.
+     * @param update the update to apply to the subject.
+     * @return the updated value.
+     */
+    protected setCurrentValue: <T>(subject: import("rxjs").Subject<T>, update: RxUtils.Patch<T>) => T;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/src/types.d.ts

@@ -77,6 +77,8 @@ export interface StreamVideoLocalParticipant extends StreamVideoParticipant {
      * The device ID of the currently selected audio output device of the local participant (returned by the [MediaDevices API](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia))
      *
      * If the value is not defined, the user hasn't selected any device (in these cases the default system audio output could be used)
+     *
+     * @deprecated use call.speaker.state.selectedDevice
      */
     audioOutputDeviceId?: string;
 }

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.3.12";
+export declare const version = "0.3.13";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "packageManager": "yarn@3.2.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/Call.ts

@@ -116,7 +116,10 @@ import {
 } from './coordinator/connection/types';
 import { getClientDetails, getSdkInfo } from './client-details';
 import { getLogger } from './logger';
-import { CameraDirection, CameraManager, MicrophoneManager } from './devices';
+import { CameraManager } from './devices/CameraManager';
+import { MicrophoneManager } from './devices/MicrophoneManager';
+import { CameraDirection } from './devices/CameraManagerState';
+import { SpeakerManager } from './devices/SpeakerManager';
 
 /**
  * An object representation of a `Call`.
@@ -163,6 +166,11 @@ export class Call {
    */
   readonly dynascaleManager = new DynascaleManager(this);
 
+  /*
+   * Device manager for the speaker
+   */
+  readonly speaker: SpeakerManager;
+
   /**
    * Flag telling whether this call is a "ringing" call.
    */
@@ -269,6 +277,7 @@ export class Call {
 
     this.camera = new CameraManager(this);
     this.microphone = new MicrophoneManager(this);
+    this.speaker = new SpeakerManager();
   }
 
   private registerEffects() {
@@ -1230,6 +1239,8 @@ export class Call {
    *
    *
    * @param deviceId the selected device, `undefined` means the user wants to use the system's default audio output
+   *
+   * @deprecated use `call.speaker` instead
    */
   setAudioOutputDevice = (deviceId?: string) => {
     if (!this.sfuClient) return;

package/src/devices/SpeakerManager.ts

@@ -0,0 +1,50 @@
+import { isReactNative } from '../helpers/platforms';
+import { SpeakerState } from './SpeakerState';
+import { getAudioOutputDevices } from './devices';
+
+export class SpeakerManager {
+  public readonly state = new SpeakerState();
+
+  constructor() {}
+
+  /**
+   * Lists the available audio output devices
+   *
+   * Note: It prompts the user for a permission to use devices (if not already granted)
+   *
+   * @returns an Observable that will be updated if a device is connected or disconnected
+   */
+  listDevices() {
+    return getAudioOutputDevices();
+  }
+
+  /**
+   * Select device
+   *
+   * Note: this method is not supported in React Native
+   *
+   * @param deviceId empty string means the system default
+   */
+  select(deviceId: string) {
+    if (isReactNative()) {
+      throw new Error('This feature is not supported in React Native');
+    }
+    this.state.setDevice(deviceId);
+  }
+
+  /**
+   * Set the volume of the audio elements
+   * @param volume a number between 0 and 1
+   *
+   * Note: this method is not supported in React Native
+   */
+  setVolume(volume: number) {
+    if (isReactNative()) {
+      throw new Error('This feature is not supported in React Native');
+    }
+    if (volume && (volume < 0 || volume > 1)) {
+      throw new Error('Volume must be between 0 and 1');
+    }
+    this.state.setVolume(volume);
+  }
+}

package/src/devices/SpeakerState.ts

@@ -0,0 +1,90 @@
+import { BehaviorSubject, Observable, distinctUntilChanged } from 'rxjs';
+import { RxUtils } from '../store';
+import { checkIfAudioOutputChangeSupported } from './devices';
+
+export class SpeakerState {
+  protected selectedDeviceSubject = new BehaviorSubject<string>('');
+  protected volumeSubject = new BehaviorSubject<number>(1);
+  /**
+   * [Tells if the browser supports audio output change on 'audio' elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId).
+   */
+  readonly isDeviceSelectionSupported = checkIfAudioOutputChangeSupported();
+
+  /**
+   * An Observable that emits the currently selected device
+   *
+   * Note: this feature is not supported in React Native
+   */
+  selectedDevice$: Observable<string>;
+
+  /**
+   * An Observable that emits the currently selected volume
+   *
+   * Note: this feature is not supported in React Native
+   */
+  volume$: Observable<number>;
+
+  constructor() {
+    this.selectedDevice$ = this.selectedDeviceSubject
+      .asObservable()
+      .pipe(distinctUntilChanged());
+    this.volume$ = this.volumeSubject
+      .asObservable()
+      .pipe(distinctUntilChanged());
+  }
+
+  /**
+   * The currently selected device
+   *
+   * Note: this feature is not supported in React Native
+   */
+  get selectedDevice() {
+    return this.getCurrentValue(this.selectedDevice$);
+  }
+
+  /**
+   * The currently selected volume
+   *
+   * Note: this feature is not supported in React Native
+   */
+  get volume() {
+    return this.getCurrentValue(this.volume$);
+  }
+
+  /**
+   * Gets the current value of an observable, or undefined if the observable has
+   * not emitted a value yet.
+   *
+   * @param observable$ the observable to get the value from.
+   */
+  getCurrentValue = RxUtils.getCurrentValue;
+
+  /**
+   * @internal
+   * @param deviceId
+   */
+  setDevice(deviceId: string) {
+    this.setCurrentValue(this.selectedDeviceSubject, deviceId);
+  }
+
+  /**
+   * @internal
+   * @param volume
+   */
+  setVolume(volume: number) {
+    this.setCurrentValue(this.volumeSubject, volume);
+  }
+
+  /**
+   * Updates the value of the provided Subject.
+   * An `update` can either be a new value or a function which takes
+   * the current value and returns a new value.
+   *
+   * @internal
+   *
+   * @param subject the subject to update.
+   * @param update the update to apply to the subject.
+   * @return the updated value.
+   */
+  protected setCurrentValue = RxUtils.setCurrentValue;
+}

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

@@ -0,0 +1,66 @@
+import { afterEach, beforeEach, describe, vi, it, expect } from 'vitest';
+import { mockAudioDevices } from './mocks';
+import { of } from 'rxjs';
+import { SpeakerManager } from '../SpeakerManager';
+import { checkIfAudioOutputChangeSupported } from '../devices';
+
+vi.mock('../devices.ts', () => {
+  console.log('MOCKING devices');
+  return {
+    getAudioOutputDevices: vi.fn(() => of(mockAudioDevices)),
+    checkIfAudioOutputChangeSupported: vi.fn(() => true),
+  };
+});
+
+describe('SpeakerManager.test', () => {
+  let manager: SpeakerManager;
+
+  beforeEach(() => {
+    manager = new SpeakerManager();
+  });
+
+  it('list devices', () => {
+    const spy = vi.fn();
+    manager.listDevices().subscribe(spy);
+
+    expect(spy).toHaveBeenCalledWith(mockAudioDevices);
+  });
+
+  it('tell is browser supports audio output selection', async () => {
+    expect(checkIfAudioOutputChangeSupported).toHaveBeenCalled();
+    expect(manager.state.isDeviceSelectionSupported).toBe(true);
+  });
+
+  it('select', async () => {
+    expect(manager.state.selectedDevice).toBe('');
+
+    manager.select('new-device');
+
+    expect(manager.state.selectedDevice).toBe('new-device');
+  });
+
+  it('set volume', async () => {
+    expect(manager.state.volume).toBe(1);
+
+    expect(() => manager.setVolume(2)).toThrowError();
+
+    expect(manager.state.volume).toBe(1);
+
+    manager.setVolume(0);
+
+    expect(manager.state.volume).toBe(0);
+
+    manager.setVolume(1);
+
+    expect(manager.state.volume).toBe(1);
+
+    manager.setVolume(0.5);
+
+    expect(manager.state.volume).toBe(0.5);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.resetModules();
+  });
+});

package/src/helpers/DynascaleManager.ts

@@ -6,8 +6,13 @@ import {
   VideoTrackType,
   VisibilityState,
 } from '../types';
-import { TrackType, VideoDimension } from '../gen/video/sfu/models/models';
 import {
+  SdkType,
+  TrackType,
+  VideoDimension,
+} from '../gen/video/sfu/models/models';
+import {
+  combineLatest,
   distinctUntilChanged,
   distinctUntilKeyChanged,
   map,
@@ -15,6 +20,7 @@ import {
 } from 'rxjs';
 import { ViewportTracker } from './ViewportTracker';
 import { getLogger } from '../logger';
+import { getSdkInfo } from '../client-details';
 
 const DEFAULT_VIEWPORT_VISIBILITY_STATE: Record<
   VideoTrackType,
@@ -326,12 +332,23 @@ export class DynascaleManager {
         });
       });
 
-    const sinkIdSubscription = this.call.state.localParticipant$.subscribe(
-      (p) => {
-        if (p && p.audioOutputDeviceId && 'setSinkId' in audioElement) {
-          // @ts-expect-error setSinkId is not yet in the lib
-          audioElement.setSinkId(p.audioOutputDeviceId);
-        }
+    const sinkIdSubscription = combineLatest([
+      this.call.state.localParticipant$,
+      this.call.speaker.state.selectedDevice$,
+    ]).subscribe(([p, selectedDevice]) => {
+      const deviceId =
+        getSdkInfo()?.type === SdkType.REACT
+          ? p?.audioOutputDeviceId
+          : selectedDevice;
+      if ('setSinkId' in audioElement) {
+        // @ts-expect-error setSinkId is not yet in the lib
+        audioElement.setSinkId(deviceId);
+      }
+    });
+
+    const volumeSubscription = this.call.speaker.state.volume$.subscribe(
+      (volume) => {
+        audioElement.volume = volume;
       },
     );
 
@@ -339,6 +356,7 @@ export class DynascaleManager {
 
     return () => {
       sinkIdSubscription.unsubscribe();
+      volumeSubscription.unsubscribe();
       updateMediaStreamSubscription.unsubscribe();
     };
   };

package/src/helpers/__tests__/DynascaleManager.test.ts

@@ -4,14 +4,21 @@
 
 import '../../rtc/__tests__/mocks/webrtc.mocks';
 
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { DynascaleManager } from '../DynascaleManager';
 import { Call } from '../../Call';
 import { StreamClient } from '../../coordinator/connection/client';
 import { StreamVideoWriteableStateStore } from '../../store';
 import { DebounceType, VisibilityState } from '../../types';
 import { noopComparator } from '../../sorting';
-import { TrackType } from '../../gen/video/sfu/models/models';
+import { SdkType, TrackType } from '../../gen/video/sfu/models/models';
+import { getSdkInfo } from '../../client-details';
+
+vi.mock('../../client-details.ts', () => {
+  return {
+    getSdkInfo: vi.fn(),
+  };
+});
 
 describe('DynascaleManager', () => {
   let dynascaleManager: DynascaleManager;
@@ -131,6 +138,23 @@ describe('DynascaleManager', () => {
       expect(play).toHaveBeenCalled();
       expect(audioElement.srcObject).toBe(mediaStream);
 
+      expect(audioElement.volume).toBe(1);
+
+      // @ts-expect-error setSinkId is not defined in types
+      expect(audioElement.setSinkId).toHaveBeenCalledWith('');
+
+      call.speaker.select('different-device-id');
+
+      // @ts-expect-error setSinkId is not defined in types
+      expect(audioElement.setSinkId).toHaveBeenCalledWith(
+        'different-device-id',
+      );
+
+      const mock = getSdkInfo as Mock;
+      mock.mockImplementation(() => ({
+        type: SdkType.REACT,
+      }));
+
       call.state.updateParticipant('session-id-local', {
         audioOutputDeviceId: 'new-device-id',
       });
@@ -138,6 +162,10 @@ describe('DynascaleManager', () => {
       // @ts-expect-error setSinkId is not defined in types
       expect(audioElement.setSinkId).toHaveBeenCalledWith('new-device-id');
 
+      call.speaker.setVolume(0.5);
+
+      expect(audioElement.volume).toBe(0.5);
+
       cleanup?.();
     });
 

package/src/types.ts

@@ -103,6 +103,8 @@ export interface StreamVideoLocalParticipant extends StreamVideoParticipant {
    * The device ID of the currently selected audio output device of the local participant (returned by the [MediaDevices API](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia))
    *
    * If the value is not defined, the user hasn't selected any device (in these cases the default system audio output could be used)
+   *
+   * @deprecated use call.speaker.state.selectedDevice
    */
   audioOutputDeviceId?: string;
 }