@stream-io/video-client 1.23.2 → 1.23.3

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

@@ -4,7 +4,16 @@
 
 import '../../rtc/__tests__/mocks/webrtc.mocks';
 
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  afterAll,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  Mock,
+  vi,
+} from 'vitest';
 import { DynascaleManager } from '../DynascaleManager';
 import { Call } from '../../Call';
 import { StreamClient } from '../../coordinator/connection/client';
@@ -89,18 +98,43 @@ describe('DynascaleManager', () => {
     let videoElement: globalThis.HTMLVideoElement;
 
     beforeEach(() => {
+      // Mock global isSafari to false for testing
+      globalThis._isSafari = false;
+      vi.mock(import('../browsers'), async (importOriginal) => {
+        const module = await importOriginal();
+        return {
+          ...module,
+          isSafari: () => globalThis._isSafari ?? false,
+        };
+      });
+
       videoElement = document.createElement('video');
+
+      // circumvent happy-dom's extensive validation rules
+      Object.defineProperties(videoElement, {
+        srcObject: { writable: true },
+        clientWidth: { writable: true },
+        clientHeight: { writable: true },
+      });
+
       // @ts-expect-error private property
       videoElement.clientWidth = 100;
       // @ts-expect-error private property
       videoElement.clientHeight = 100;
     });
 
+    afterAll(() => {
+      delete globalThis._isSafari;
+      vi.resetModules();
+    });
+
     it('audio: should bind audio element', () => {
       vi.useFakeTimers();
       const audioElement = document.createElement('audio');
+      // circumvent happy-dom's MediaStream validation
+      Object.defineProperty(audioElement, 'srcObject', { writable: true });
       const play = vi.spyOn(audioElement, 'play').mockResolvedValue();
-      audioElement.setSinkId = vi.fn();
+      audioElement.setSinkId = vi.fn().mockResolvedValue({});
 
       // @ts-expect-error incomplete data
       call.state.updateOrAddParticipant('session-id', {
@@ -153,9 +187,100 @@ describe('DynascaleManager', () => {
       cleanup?.();
     });
 
+    it('audio: Safari should use AudioContext for audio playback', () => {
+      globalThis._isSafari = true;
+
+      vi.useFakeTimers();
+      const audioElement = document.createElement('audio');
+      // circumvent happy-dom's MediaStream validation
+      Object.defineProperty(audioElement, 'srcObject', { writable: true });
+      const play = vi.spyOn(audioElement, 'play').mockResolvedValue();
+      audioElement.setSinkId = vi.fn().mockResolvedValue({});
+
+      // @ts-expect-error incomplete data
+      call.state.updateOrAddParticipant('session-id', {
+        userId: 'user-id',
+        sessionId: 'session-id',
+        publishedTracks: [],
+      });
+
+      // @ts-expect-error incomplete data
+      call.state.updateOrAddParticipant('session-id-local', {
+        userId: 'user-id-local',
+        sessionId: 'session-id-local',
+        isLocalParticipant: true,
+        publishedTracks: [],
+      });
+
+      const cleanup = dynascaleManager.bindAudioElement(
+        audioElement,
+        'session-id',
+        'audioTrack',
+      );
+      expect(audioElement.autoplay).toBe(true);
+
+      const mediaStream = new MediaStream();
+      call.state.updateParticipant('session-id', { audioStream: mediaStream });
+
+      vi.runAllTimers();
+
+      expect(play).not.toHaveBeenCalled();
+      expect(audioElement.srcObject).toBe(mediaStream);
+      expect(audioElement.volume).toBe(1);
+      expect(audioElement.setSinkId).not.toHaveBeenCalled();
+      expect(audioElement.muted).toBe(true);
+
+      // @ts-expect-error private property
+      const audioContext = dynascaleManager.audioContext;
+      expect(audioContext).toBeDefined();
+      expect(audioContext.resume).toHaveBeenCalled();
+      expect(audioContext.state).toBe('running');
+      expect(audioContext.createMediaStreamSource).toHaveBeenCalledWith(
+        mediaStream,
+      );
+      expect(audioContext.createGain).toHaveBeenCalled();
+      expect(audioContext.resume).toHaveBeenCalled();
+
+      const sourceNode = (
+        audioContext.createMediaStreamSource as Mock<
+          AudioContext['createMediaStreamSource']
+        >
+      ).mock.results[0].value;
+
+      const gainNode = (
+        audioContext.createGain as Mock<AudioContext['createGain']>
+      ).mock.results[0].value;
+
+      expect(sourceNode.connect).toHaveBeenCalledWith(gainNode);
+      expect(gainNode.connect).toHaveBeenCalledWith(audioContext.destination);
+
+      call.speaker.select('different-device-id');
+      expect(audioElement.setSinkId).toHaveBeenCalledWith(
+        'different-device-id',
+      );
+      // @ts-expect-error sinkId isn't available in the TS definition
+      expect(audioContext.sinkId).toBe('different-device-id');
+
+      call.speaker.setVolume(0.5);
+      expect(audioElement.volume).toBe(0.5);
+      expect(gainNode.gain.value).toBe(0.5);
+
+      call.speaker.setParticipantVolume('session-id', 0.7);
+      expect(audioElement.volume).toBe(0.7);
+      expect(gainNode.gain.value).toBe(0.7);
+
+      call.speaker.setParticipantVolume('session-id', undefined);
+      expect(audioElement.volume).toBe(0.5);
+      expect(gainNode.gain.value).toBe(0.5);
+
+      cleanup?.();
+    });
+
     it('audio: should bind screenShare audio element', () => {
       vi.useFakeTimers();
       const audioElement = document.createElement('audio');
+      // circumvent happy-dom's MediaStream validation
+      Object.defineProperty(audioElement, 'srcObject', { writable: true });
       const play = vi.spyOn(audioElement, 'play').mockResolvedValue();
 
       // @ts-expect-error incomplete data
@@ -245,6 +370,55 @@ describe('DynascaleManager', () => {
     it('video: should play video when track becomes available', () => {
       vi.useFakeTimers();
 
+      const updateSubscription = vi.spyOn(
+        call.state,
+        'updateParticipantTracks',
+      );
+
+      // @ts-expect-error incomplete data
+      call.state.updateOrAddParticipant('session-id', {
+        userId: 'user-id',
+        sessionId: 'session-id',
+        publishedTracks: [],
+      });
+
+      const cleanup = dynascaleManager.bindVideoElement(
+        videoElement,
+        'session-id',
+        'videoTrack',
+      );
+
+      const mediaStream = new MediaStream();
+      call.state.updateParticipant('session-id', {
+        publishedTracks: [TrackType.VIDEO],
+        videoStream: mediaStream,
+      });
+
+      vi.runAllTimers();
+
+      expect(updateSubscription).toHaveBeenCalledWith('videoTrack', {
+        'session-id': {
+          dimension: {
+            width: videoElement.clientWidth,
+            height: videoElement.clientHeight,
+          },
+        },
+      });
+
+      expect(videoElement.srcObject).toBe(mediaStream);
+
+      expect(cleanup).toBeDefined();
+      cleanup?.();
+
+      expect(updateSubscription).toHaveBeenLastCalledWith('videoTrack', {
+        'session-id': { dimension: undefined },
+      });
+    });
+
+    it('video: Safari should force play video when track becomes available', () => {
+      globalThis._isSafari = true;
+
+      vi.useFakeTimers();
       const updateSubscription = vi.spyOn(
         call.state,
         'updateParticipantTracks',
@@ -280,9 +454,11 @@ describe('DynascaleManager', () => {
           },
         },
       });
-      expect(play).toHaveBeenCalled();
+
+      expect(play).toHaveBeenCalledOnce();
       expect(videoElement.srcObject).toBe(mediaStream);
 
+      expect(cleanup).toBeDefined();
       cleanup?.();
 
       expect(updateSubscription).toHaveBeenLastCalledWith('videoTrack', {

package/src/rtc/__tests__/mocks/webrtc.mocks.ts

@@ -89,3 +89,35 @@ const RTCRtpSenderMock = vi.fn((): Partial<typeof RTCRtpSender> => {
   };
 });
 vi.stubGlobal('RTCRtpSender', RTCRtpSenderMock);
+
+const AudioContextMock = vi.fn((): Partial<AudioContext> => {
+  return {
+    state: 'suspended',
+    sinkId: '',
+    // @ts-expect-error - incomplete data
+    destination: {},
+    createMediaStreamSource: vi.fn(() => {
+      return {
+        connect: vi.fn((v) => v),
+        disconnect: vi.fn(),
+      } as unknown as MediaStreamAudioSourceNode;
+    }),
+    createGain: vi.fn(() => {
+      return {
+        connect: vi.fn((v) => v),
+        disconnect: vi.fn(),
+        gain: { value: 1 },
+      } as unknown as GainNode;
+    }),
+    close: vi.fn(async function () {
+      this.state = 'closed';
+    }),
+    resume: vi.fn(async function () {
+      this.state = 'running';
+    }),
+    setSinkId: vi.fn(async function (sinkId: string) {
+      this.sinkId = sinkId;
+    }),
+  };
+});
+vi.stubGlobal('AudioContext', AudioContextMock);

package/src/store/CallState.ts

@@ -149,7 +149,14 @@ export class CallState {
   anonymousParticipantCount$: Observable<number>;
 
   /**
-   * All participants of the current call (this includes the current user and other participants as well).
+   * All participants of the current call (this includes the current user and other participants as well),
+   * unsorted. This observable only updates when participants join or leave the call.
+   */
+  rawParticipants$: Observable<StreamVideoParticipant[]>;
+
+  /**
+   * All participants of the current call (this includes the current user and other participants as well),
+   * sorted according to the current `sortByParticipantsBy` setting
    */
   participants$: Observable<StreamVideoParticipant[]>;
 
@@ -323,6 +330,10 @@ export class CallState {
    *
    */
   constructor() {
+    this.rawParticipants$ = this.participantsSubject
+      .asObservable()
+      .pipe(shareReplay({ bufferSize: 1, refCount: true }));
+
     this.participants$ = this.participantsSubject.asObservable().pipe(
       // maintain stable-sort by mutating the participants stored
       // in the original subject
@@ -622,6 +633,13 @@ export class CallState {
     return this.getCurrentValue(this.participants$);
   }
 
+  /**
+   * The stable list of participants in the current call, unsorted.
+   */
+  get rawParticipants() {
+    return this.getCurrentValue(this.rawParticipants$);
+  }
+
   /**
    * Sets the list of participants in the current call.
    *