@stream-io/video-client 1.52.1-beta.0 → 1.53.1

package/src/gen/video/sfu/signal_rpc/signal.client.ts

@@ -1,33 +1,37 @@
- 
 // @generated by protobuf-ts 2.10.0 with parameter long_type_string,client_generic,server_none,eslint_disable,optimize_code_size
 // @generated from protobuf file "video/sfu/signal_rpc/signal.proto" (package "stream.video.sfu.signal", syntax proto3)
 // tslint:disable
-import type { RpcTransport } from '@protobuf-ts/runtime-rpc';
-import type { ServiceInfo } from '@protobuf-ts/runtime-rpc';
+import type {
+  RpcOptions,
+  RpcTransport,
+  ServiceInfo,
+  UnaryCall,
+} from '@protobuf-ts/runtime-rpc';
+import { stackIntercept } from '@protobuf-ts/runtime-rpc';
+import type {
+  ICERestartRequest,
+  ICERestartResponse,
+  ICETrickleResponse,
+  SendAnswerRequest,
+  SendAnswerResponse,
+  SendMetricsRequest,
+  SendMetricsResponse,
+  SendStatsRequest,
+  SendStatsResponse,
+  SetPublisherRequest,
+  SetPublisherResponse,
+  StartNoiseCancellationRequest,
+  StartNoiseCancellationResponse,
+  StopNoiseCancellationRequest,
+  StopNoiseCancellationResponse,
+  UpdateMuteStatesRequest,
+  UpdateMuteStatesResponse,
+  UpdateSubscriptionsRequest,
+  UpdateSubscriptionsResponse,
+} from './signal';
 import { SignalServer } from './signal';
-import type { StopNoiseCancellationResponse } from './signal';
-import type { StopNoiseCancellationRequest } from './signal';
-import type { StartNoiseCancellationResponse } from './signal';
-import type { StartNoiseCancellationRequest } from './signal';
-import type { SendMetricsResponse } from './signal';
-import type { SendMetricsRequest } from './signal';
-import type { SendStatsResponse } from './signal';
-import type { SendStatsRequest } from './signal';
-import type { ICERestartResponse } from './signal';
-import type { ICERestartRequest } from './signal';
-import type { UpdateMuteStatesResponse } from './signal';
-import type { UpdateMuteStatesRequest } from './signal';
-import type { UpdateSubscriptionsResponse } from './signal';
-import type { UpdateSubscriptionsRequest } from './signal';
-import type { ICETrickleResponse } from './signal';
 import type { ICETrickle } from '../models/models';
-import type { SendAnswerResponse } from './signal';
-import type { SendAnswerRequest } from './signal';
-import { stackIntercept } from '@protobuf-ts/runtime-rpc';
-import type { SetPublisherResponse } from './signal';
-import type { SetPublisherRequest } from './signal';
-import type { UnaryCall } from '@protobuf-ts/runtime-rpc';
-import type { RpcOptions } from '@protobuf-ts/runtime-rpc';
+
 /**
  * @generated from protobuf service stream.video.sfu.signal.SignalServer
  */

package/src/gen/video/sfu/signal_rpc/signal.ts

@@ -1,4 +1,3 @@
- 
 // @generated by protobuf-ts 2.10.0 with parameter long_type_string,client_generic,server_none,eslint_disable,optimize_code_size
 // @generated from protobuf file "video/sfu/signal_rpc/signal.proto" (package "stream.video.sfu.signal", syntax proto3)
 // tslint:disable

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/client-details.ts

@@ -192,6 +192,6 @@ export const getClientDetails = async (): Promise<ClientDetails> => {
         .join(' '),
       version: '',
     },
-    webrtcVersion: webRtcInfo?.version || '',
+    webrtcVersion: browserVersion,
   };
 };

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);
+  };
+};