@stream-io/video-client 1.52.0 → 1.53.0

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

@@ -1,6 +1,7 @@
 /* @vitest-environment happy-dom */
 import { Call } from '../../Call';
 import { StreamClient } from '../../coordinator/connection/client';
+import { ClientEventReporter } from '../../reporting';
 import { CallingState, StreamVideoWriteableStateStore } from '../../store';
 
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
@@ -22,6 +23,12 @@ import { TrackType } from '../../gen/video/sfu/models/models';
 import { PermissionsContext } from '../../permissions';
 import { readPreferences } from '../devicePersistence';
 
+vi.mock('../../reporting/ClientEventReporter', () => ({
+  ClientEventReporter: vi.fn(function () {
+    return {};
+  }),
+}));
+
 vi.mock('../../Call.ts', () => {
   console.log('MOCKING Call');
   return {
@@ -85,11 +92,13 @@ describe('Device Manager', () => {
       configurable: true,
       value: localStorageMock,
     });
+    const streamClient = new StreamClient('abc123');
     manager = new TestInputMediaDeviceManager(
       new Call({
         id: '',
         type: '',
-        streamClient: new StreamClient('abc123'),
+        streamClient,
+        clientEventReporter: new ClientEventReporter({ streamClient }),
         clientStore: new StreamVideoWriteableStateStore(),
       }),
       { enabled: false, storageKey },

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

@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { of } from 'rxjs';
 import { Call } from '../../Call';
 import { StreamClient } from '../../coordinator/connection/client';
+import { ClientEventReporter } from '../../reporting';
 import { StreamVideoWriteableStateStore } from '../../store';
 import { DeviceManagerState } from '../DeviceManagerState';
 import { DeviceManager } from '../DeviceManager';
@@ -45,11 +46,13 @@ describe('MediaStream Filters', () => {
   let manager: TestInputMediaDeviceManager;
 
   beforeEach(() => {
+    const streamClient = new StreamClient('abc123');
     manager = new TestInputMediaDeviceManager(
       new Call({
         id: '',
         type: '',
-        streamClient: new StreamClient('abc123'),
+        streamClient,
+        clientEventReporter: new ClientEventReporter({ streamClient }),
         clientStore: new StreamVideoWriteableStateStore(),
       }),
     );

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

@@ -43,6 +43,7 @@ import {
   readPreferences,
   toPreferenceList,
 } from '../devicePersistence';
+import { ClientEventReporter } from '../../reporting';
 
 vi.mock('../devices.ts', () => {
   console.log('MOCKING devices API');
@@ -82,6 +83,12 @@ vi.mock('../../Call.ts', () => {
   };
 });
 
+vi.mock('../../reporting/ClientEventReporter', () => ({
+  ClientEventReporter: vi.fn(function () {
+    return {};
+  }),
+}));
+
 describe('MicrophoneManager', () => {
   let manager: MicrophoneManager;
   let call: Call;
@@ -92,10 +99,12 @@ describe('MicrophoneManager', () => {
       of('granted'),
     );
 
+    const streamClient = new StreamClient('abc123');
     call = new Call({
       id: '',
       type: '',
-      streamClient: new StreamClient('abc123'),
+      streamClient,
+      clientEventReporter: new ClientEventReporter({ streamClient }),
       clientStore: new StreamVideoWriteableStateStore(),
     });
     const devicePersistence = { enabled: false, storageKey: '' };

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

@@ -13,6 +13,7 @@ import { of } from 'rxjs';
 import '../../rtc/__tests__/mocks/webrtc.mocks';
 import { OwnCapability } from '../../gen/coordinator';
 import { settled, withoutConcurrency } from '../../helpers/concurrency';
+import { ClientEventReporter } from '../../reporting';
 
 let speechActivityCallback:
   | ((state: { isSoundDetected: boolean }) => void)
@@ -82,12 +83,14 @@ describe('MicrophoneManager React Native', () => {
     };
 
     const devicePersistence = { enabled: false, storageKey: '' };
+    const streamClient = new StreamClient('abc123');
     manager = new MicrophoneManager(
       new Call({
         id: '',
         type: '',
-        streamClient: new StreamClient('abc123'),
+        streamClient,
         clientStore: new StreamVideoWriteableStateStore(),
+        clientEventReporter: new ClientEventReporter({ streamClient }),
       }),
       devicePersistence,
     );

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

@@ -2,6 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { ScreenShareManager } from '../ScreenShareManager';
 import { Call } from '../../Call';
 import { StreamClient } from '../../coordinator/connection/client';
+import { ClientEventReporter } from '../../reporting';
 import { CallingState, StreamVideoWriteableStateStore } from '../../store';
 import * as RxUtils from '../../store/rxUtils';
 import { mockCall, mockDeviceIds$, mockScreenShareStream } from './mocks';
@@ -36,11 +37,13 @@ describe('ScreenShareManager', () => {
   let manager: ScreenShareManager;
 
   beforeEach(() => {
+    const streamClient = new StreamClient('abc123');
     manager = new ScreenShareManager(
       new Call({
         id: '',
         type: '',
-        streamClient: new StreamClient('abc123'),
+        streamClient,
+        clientEventReporter: new ClientEventReporter({ streamClient }),
         clientStore: new StreamVideoWriteableStateStore(),
       }),
     );

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

@@ -14,6 +14,7 @@ import { SpeakerManager } from '../SpeakerManager';
 import { checkIfAudioOutputChangeSupported } from '../devices';
 import { Call } from '../../Call';
 import { StreamClient } from '../../coordinator/connection/client';
+import { ClientEventReporter } from '../../reporting';
 import { StreamVideoWriteableStateStore } from '../../store';
 import { defaultDeviceId } from '../devicePersistence';
 
@@ -45,11 +46,13 @@ describe('SpeakerManager.test', () => {
       value: localStorageMock,
     });
     const devicePersistence = { enabled: false, storageKey };
+    const streamClient = new StreamClient('abc123');
     manager = new SpeakerManager(
       new Call({
         id: '',
         type: '',
-        streamClient: new StreamClient('abc123'),
+        streamClient,
+        clientEventReporter: new ClientEventReporter({ streamClient }),
         clientStore: new StreamVideoWriteableStateStore(),
       }),
       devicePersistence,
@@ -129,11 +132,13 @@ describe('SpeakerManager.test', () => {
   });
 
   it('persists speaker selection when permission is granted', async () => {
+    const streamClient = new StreamClient('abc123');
     const persistedManager = new SpeakerManager(
       new Call({
         id: '',
         type: '',
-        streamClient: new StreamClient('abc123'),
+        streamClient,
+        clientEventReporter: new ClientEventReporter({ streamClient }),
         clientStore: new StreamVideoWriteableStateStore(),
       }),
       { enabled: true, storageKey },
@@ -162,11 +167,13 @@ describe('SpeakerManager.test', () => {
     });
 
     it('selects the persisted speaker device', () => {
+      const streamClient = new StreamClient('abc123');
       const persistedManager = new SpeakerManager(
         new Call({
           id: '',
           type: '',
-          streamClient: new StreamClient('abc123'),
+          streamClient,
+          clientEventReporter: new ClientEventReporter({ streamClient }),
           clientStore: new StreamVideoWriteableStateStore(),
         }),
         { enabled: true, storageKey },
@@ -193,11 +200,13 @@ describe('SpeakerManager.test', () => {
     });
 
     it('selects system default when persisted device is default', () => {
+      const streamClient = new StreamClient('abc123');
       const persistedManager = new SpeakerManager(
         new Call({
           id: '',
           type: '',
-          streamClient: new StreamClient('abc123'),
+          streamClient,
+          clientEventReporter: new ClientEventReporter({ streamClient }),
           clientStore: new StreamVideoWriteableStateStore(),
         }),
         { enabled: true, storageKey },

package/src/errors/SfuTimeoutError.ts

@@ -0,0 +1,7 @@
+/**
+ * An error thrown when a client-side SFU deadline (e.g., waiting for the
+ * signaling WS to open or for the `joinResponse` to arrive) fires before
+ * the awaited operation resolves. Allows consumers (e.g., the client event
+ * reporter) to classify timeouts without relying on message wording.
+ */
+export class SfuTimeoutError extends Error {}

package/src/errors/index.ts

@@ -1 +1,2 @@
 export * from './SfuJoinError';
+export * from './SfuTimeoutError';

package/src/events/__tests__/call.test.ts

@@ -16,6 +16,7 @@ import {
 } from '../../gen/coordinator';
 import { Call } from '../../Call';
 import { StreamClient } from '../../coordinator/connection/client';
+import { ClientEventReporter } from '../../reporting';
 import { SfuEvent } from '../../gen/video/sfu/event/events';
 import { CallEndedReason } from '../../gen/video/sfu/models/models';
 
@@ -372,6 +373,7 @@ const fakeCall = ({ ring = true, currentUserId = 'test-user-id' } = {}) => {
     id: '12345',
     clientStore: store,
     streamClient: client,
+    clientEventReporter: new ClientEventReporter({ streamClient: client }),
     ringing: ring,
   });
 };

package/src/events/__tests__/mutes.test.ts

@@ -5,6 +5,7 @@ import {
   TrackUnpublishReason,
 } from '../../gen/video/sfu/models/models';
 import { StreamClient } from '../../coordinator/connection/client';
+import { ClientEventReporter } from '../../reporting';
 import { handleRemoteSoftMute } from '../mutes';
 import type { CallEventListener } from '../../coordinator/connection/types';
 
@@ -15,10 +16,12 @@ describe('mutes', () => {
 
     beforeEach(() => {
       // @ts-expect-error incomplete data
+      const streamClient = new StreamClient('api-key');
       call = new Call({
         type: 'test',
         id: 'test',
-        streamClient: new StreamClient('api-key'),
+        streamClient,
+        clientEventReporter: new ClientEventReporter({ streamClient }),
       });
 
       // @ts-expect-error partial data

package/src/events/call.ts

@@ -87,6 +87,10 @@ export const watchCallEnded = (call: Call) => {
       callingState !== CallingState.IDLE &&
       callingState !== CallingState.LEFT
     ) {
+      call.clientEventReporter.abort(call.cid, {
+        code: 'BACKEND_LEAVE',
+        reason: 'call.ended event received',
+      });
       call
         .leave({ message: 'call.ended event received', reject: false })
         .catch((err) => {
@@ -116,6 +120,10 @@ export const watchSfuCallEnded = (call: Call) => {
       call.state.setEndedAt(new Date());
       const reason = CallEndedReason[e.reason];
       globalThis.streamRNVideoSDK?.callingX?.endCall(call, 'remote');
+      call.clientEventReporter.abort(call.cid, {
+        code: 'BACKEND_LEAVE',
+        reason: `callEnded received: ${reason}`,
+      });
       await call.leave({ message: `callEnded received: ${reason}` });
     } catch (err) {
       call.logger.error(

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

@@ -8,6 +8,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { AudioBindingsWatchdog } from '../AudioBindingsWatchdog';
 import { Call } from '../../Call';
 import { StreamClient } from '../../coordinator/connection/client';
+import { ClientEventReporter } from '../../reporting';
 import { CallingState, StreamVideoWriteableStateStore } from '../../store';
 import { noopComparator } from '../../sorting';
 import { fromPartial } from '@total-typescript/shoehorn';
@@ -19,12 +20,14 @@ describe('AudioBindingsWatchdog', () => {
 
   beforeEach(() => {
     vi.useFakeTimers();
+    const streamClient = new StreamClient('api-key', {
+      devicePersistence: { enabled: false },
+    });
     call = new Call({
       id: 'id',
       type: 'default',
-      streamClient: new StreamClient('api-key', {
-        devicePersistence: { enabled: false },
-      }),
+      streamClient,
+      clientEventReporter: new ClientEventReporter({ streamClient }),
       clientStore: new StreamVideoWriteableStateStore(),
     });
     call.setSortParticipantsBy(noopComparator());

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

@@ -17,6 +17,7 @@ import {
 import { DynascaleManager } from '../DynascaleManager';
 import { Call } from '../../Call';
 import { StreamClient } from '../../coordinator/connection/client';
+import { ClientEventReporter } from '../../reporting';
 import { StreamVideoWriteableStateStore } from '../../store';
 import { getCurrentValue } from '../../store/rxUtils';
 import { VisibilityState } from '../../types';
@@ -36,12 +37,14 @@ describe('DynascaleManager', () => {
   let call: Call;
 
   beforeEach(() => {
+    const streamClient = new StreamClient('api-key', {
+      devicePersistence: { enabled: false },
+    });
     call = new Call({
       id: 'id',
       type: 'default',
-      streamClient: new StreamClient('api-key', {
-        devicePersistence: { enabled: false },
-      }),
+      streamClient,
+      clientEventReporter: new ClientEventReporter({ streamClient }),
       clientStore: new StreamVideoWriteableStateStore(),
     });
     call.setSortParticipantsBy(noopComparator());

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

@@ -7,6 +7,7 @@ import '../../rtc/__tests__/mocks/webrtc.mocks';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { Call } from '../../Call';
 import { StreamClient } from '../../coordinator/connection/client';
+import { ClientEventReporter } from '../../reporting';
 import { StreamVideoWriteableStateStore } from '../../store';
 import { noopComparator } from '../../sorting';
 import { VisibilityState } from '../../types';
@@ -17,12 +18,14 @@ describe('ViewportTracker', () => {
   let viewportTracker: ViewportTracker;
 
   beforeEach(() => {
+    const streamClient = new StreamClient('api-key', {
+      devicePersistence: { enabled: false },
+    });
     call = new Call({
       id: 'id',
       type: 'default',
-      streamClient: new StreamClient('api-key', {
-        devicePersistence: { enabled: false },
-      }),
+      streamClient,
+      clientEventReporter: new ClientEventReporter({ streamClient }),
       clientStore: new StreamVideoWriteableStateStore(),
     });
     call.setSortParticipantsBy(noopComparator());

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

@@ -0,0 +1,91 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { createFirstVideoFrameDetector } from '../firstVideoFrame';
+
+const createVideoElement = () => {
+  const listeners = new Map<string, EventListener>();
+
+  return {
+    readyState: 0,
+    HAVE_CURRENT_DATA: 2,
+    addEventListener: vi.fn((type: string, listener: EventListener) => {
+      listeners.set(type, listener);
+    }),
+    removeEventListener: vi.fn((type: string, listener: EventListener) => {
+      if (listeners.get(type) === listener) {
+        listeners.delete(type);
+      }
+    }),
+    dispatchEvent: vi.fn((event: Event) => {
+      listeners.get(event.type)?.(event);
+      return true;
+    }),
+  } as unknown as HTMLVideoElement;
+};
+
+describe('createFirstVideoFrameDetector', () => {
+  let videoElement: HTMLVideoElement;
+
+  beforeEach(() => {
+    videoElement = createVideoElement();
+  });
+
+  it('invokes the callback once on loadeddata when video frame callbacks are unavailable', () => {
+    const onFirstFrame = vi.fn();
+    const stop = createFirstVideoFrameDetector(videoElement, onFirstFrame);
+
+    videoElement.dispatchEvent(new Event('loadeddata'));
+    videoElement.dispatchEvent(new Event('loadeddata'));
+
+    expect(onFirstFrame).toHaveBeenCalledOnce();
+    stop();
+  });
+
+  it('cancels the loadeddata fallback', () => {
+    const onFirstFrame = vi.fn();
+    const stop = createFirstVideoFrameDetector(videoElement, onFirstFrame);
+
+    stop();
+    videoElement.dispatchEvent(new Event('loadeddata'));
+
+    expect(onFirstFrame).not.toHaveBeenCalled();
+  });
+
+  it('invokes the callback when frame data is already available', async () => {
+    const onFirstFrame = vi.fn();
+    Object.defineProperty(videoElement, 'requestVideoFrameCallback', {
+      configurable: true,
+      value: undefined,
+    });
+    Object.defineProperty(videoElement, 'HAVE_CURRENT_DATA', {
+      configurable: true,
+      value: 2,
+    });
+    Object.defineProperty(videoElement, 'readyState', {
+      configurable: true,
+      value: 2,
+    });
+
+    createFirstVideoFrameDetector(videoElement, onFirstFrame);
+    await Promise.resolve();
+
+    expect(onFirstFrame).toHaveBeenCalledOnce();
+  });
+
+  it('uses requestVideoFrameCallback when available', () => {
+    const onFirstFrame = vi.fn();
+    let frameCallback: VideoFrameRequestCallback | undefined;
+    videoElement.requestVideoFrameCallback = vi.fn((callback) => {
+      frameCallback = callback;
+      return 1;
+    });
+    videoElement.cancelVideoFrameCallback = vi.fn();
+
+    const stop = createFirstVideoFrameDetector(videoElement, onFirstFrame);
+    frameCallback?.(0, {} as VideoFrameCallbackMetadata);
+
+    expect(onFirstFrame).toHaveBeenCalledOnce();
+
+    stop();
+    expect(videoElement.cancelVideoFrameCallback).toHaveBeenCalledWith(1);
+  });
+});

package/src/helpers/firstVideoFrame.ts

@@ -0,0 +1,38 @@
+/**
+ * Invokes `onFirstFrame` once when the video element renders a frame.
+ *
+ * Uses `requestVideoFrameCallback` when available, falling back to `loadeddata`
+ * for browsers that don't support it.
+ */
+export const createFirstVideoFrameDetector = (
+  videoElement: HTMLVideoElement,
+  onFirstFrame: () => void,
+) => {
+  let done = false;
+  const notify = () => {
+    if (done) return;
+    done = true;
+    onFirstFrame();
+  };
+
+  if (typeof videoElement.requestVideoFrameCallback === 'function') {
+    const handle = videoElement.requestVideoFrameCallback(notify);
+    return () => {
+      done = true;
+      videoElement.cancelVideoFrameCallback(handle);
+    };
+  }
+
+  if (videoElement.readyState >= videoElement.HAVE_CURRENT_DATA) {
+    queueMicrotask(notify);
+    return () => {
+      done = true;
+    };
+  }
+
+  videoElement.addEventListener('loadeddata', notify, { once: true });
+  return () => {
+    done = true;
+    videoElement.removeEventListener('loadeddata', notify);
+  };
+};