@stream-io/video-client 0.3.32 → 0.3.34

package/dist/src/coordinator/connection/insights.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="ws" />
 import { StableWSConnection } from './connection';
 export type InsightTypes = 'ws_fatal' | 'ws_success_after_failure' | 'http_hi_failed';
 export declare class InsightMetrics {

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

@@ -7,23 +7,14 @@ import { Observable } from 'rxjs';
 export declare const checkIfAudioOutputChangeSupported: () => boolean;
 /**
  * Prompts the user for a permission to use audio devices (if not already granted) and lists the available 'audioinput' devices, if devices are added/removed the list is updated.
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @returns
  */
 export declare const getAudioDevices: () => Observable<MediaDeviceInfo[]>;
 /**
  * Prompts the user for a permission to use video devices (if not already granted) and lists the available 'videoinput' devices, if devices are added/removed the list is updated.
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @returns
  */
 export declare const getVideoDevices: () => Observable<MediaDeviceInfo[]>;
 /**
  * Prompts the user for a permission to use audio devices (if not already granted) and lists the available 'audiooutput' devices, if devices are added/removed the list is updated. Selecting 'audiooutput' device only makes sense if [the browser has support for changing audio output on 'audio' elements](#checkifaudiooutputchangesupported)
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @returns
  */
 export declare const getAudioOutputDevices: () => Observable<MediaDeviceInfo[]>;
 /**

package/dist/src/store/rxUtils.d.ts

@@ -1,8 +1,9 @@
 import { Observable, Subject } from 'rxjs';
+type FunctionPatch<T> = (currentValue: T) => T;
 /**
  * A value or a function which takes the current value and returns a new value.
  */
-export type Patch<T> = T | ((currentValue: T) => T);
+export type Patch<T> = T | FunctionPatch<T>;
 /**
  * Gets the current value of an observable, or undefined if the observable has
  * not emitted a value yet.
@@ -27,3 +28,4 @@ export declare const setCurrentValue: <T>(subject: Subject<T>, update: Patch<T>)
  * @param handler the handler to call when the observable emits a value.
  */
 export declare const createSubscription: <T>(observable: Observable<T>, handler: (value: T) => void) => () => void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "0.3.32",
+  "version": "0.3.34",
   "packageManager": "yarn@3.2.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -9,16 +9,14 @@
   "types": "dist/index.d.ts",
   "license": "See license in LICENSE",
   "scripts": {
-    "postinstall": "yarn copy-version",
     "clean": "rimraf dist",
-    "start": "yarn copy-version && rollup -w -c",
-    "build": "yarn clean && yarn copy-version && rollup -c",
+    "start": "rollup -w -c",
+    "build": "yarn clean && rollup -c",
     "test": "vitest",
     "clean:docs": "rimraf generated-docs",
     "test-ci": "vitest --coverage",
     "generate:open-api": "./generate-openapi.sh protocol",
-    "generate:open-api:dev": "./generate-openapi.sh chat",
-    "copy-version": "echo \"export const version = '$npm_package_version';\" > ./version.ts"
+    "generate:open-api:dev": "./generate-openapi.sh chat"
   },
   "files": [
     "dist",
@@ -33,7 +31,7 @@
     "@protobuf-ts/runtime": "^2.9.1",
     "@protobuf-ts/runtime-rpc": "^2.9.1",
     "@protobuf-ts/twirp-transport": "^2.9.1",
-    "@types/ws": "^8.5.6",
+    "@types/ws": "^8.5.7",
     "axios": "^1.5.1",
     "base64-js": "^1.5.1",
     "isomorphic-ws": "^5.0.0",
@@ -46,19 +44,19 @@
   },
   "devDependencies": {
     "@openapitools/openapi-generator-cli": "^2.7.0",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-typescript": "^11.1.2",
+    "@rollup/plugin-replace": "^5.0.4",
+    "@rollup/plugin-typescript": "^11.1.5",
     "@types/jsonwebtoken": "^9.0.3",
     "@types/sdp-transform": "^2.4.7",
     "@types/ua-parser-js": "^0.7.37",
     "@vitest/coverage-v8": "^0.34.4",
     "dotenv": "^16.3.1",
     "happy-dom": "^11.0.2",
-    "prettier": "^2.8.4",
-    "rimraf": "^5.0.1",
-    "rollup": "^3.28.1",
-    "typescript": "^4.9.5",
-    "vite": "^4.4.9",
+    "prettier": "^2.8.8",
+    "rimraf": "^5.0.5",
+    "rollup": "^3.29.4",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.11",
     "vitest": "^0.34.4",
     "vitest-mock-extended": "^1.2.1"
   }

package/src/__tests__/server-side/call-types.test.ts

@@ -92,7 +92,7 @@ describe('call types CRUD API', () => {
     });
   });
 
-  it.skip('update', async () => {
+  it('update', async () => {
     const updateResponse = await client.updateCallType(callTypeName, {
       settings: {
         audio: { mic_default_on: false, default_device: 'earpiece' },

package/src/coordinator/connection/client.ts

@@ -34,7 +34,6 @@ import {
   UserWithId,
 } from './types';
 import { InsightMetrics, postInsights } from './insights';
-import { version } from '../../../version';
 import { getLocationHint } from './location';
 import { CreateGuestRequest, CreateGuestResponse } from '../../gen/coordinator';
 
@@ -796,6 +795,7 @@ export class StreamClient {
   };
 
   getUserAgent = () => {
+    const version = process.env.PKG_VERSION || '0.0.0-development';
     return (
       this.userAgent ||
       `stream-video-javascript-client-${

package/src/devices/ScreenShareState.ts

@@ -1,6 +1,5 @@
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, distinctUntilChanged } from 'rxjs';
 import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
-import { distinctUntilChanged } from 'rxjs/operators';
 import { ScreenShareSettings } from '../types';
 
 export class ScreenShareState extends InputMediaDeviceManagerState<DisplayMediaStreamOptions> {

package/src/devices/devices.ts

@@ -65,68 +65,77 @@ const videoDeviceConstraints = {
   },
 } satisfies MediaStreamConstraints;
 
-// Audio and video devices are requested in two separate requests: that way users will be presented with two separate prompts -> they can give access to just camera, or just microphone
-const deviceChange$ = new Observable((subscriber) => {
-  const deviceChangeHandler = () => subscriber.next();
+/**
+ * Creates a memoized observable instance
+ * that will be created only once and shared between all callers.
+ *
+ * @param create a function that creates an Observable.
+ */
+const memoizedObservable = <T>(create: () => Observable<T>) => {
+  let memoized: Observable<T>;
+  return () => {
+    if (!memoized) memoized = create();
+    return memoized;
+  };
+};
 
-  navigator.mediaDevices.addEventListener?.(
-    'devicechange',
-    deviceChangeHandler,
-  );
+const getDeviceChangeObserver = memoizedObservable(() => {
+  // Audio and video devices are requested in two separate requests.
+  // That way, users will be presented with two separate prompts
+  // -> they can give access to just camera, or just microphone
+  return new Observable((subscriber) => {
+    // 'addEventListener' is not available in React Native
+    if (!navigator.mediaDevices.addEventListener) return;
 
-  return () =>
-    navigator.mediaDevices.removeEventListener?.(
-      'devicechange',
-      deviceChangeHandler,
-    );
-}).pipe(
-  debounceTime(500),
-  concatMap(() => from(navigator.mediaDevices.enumerateDevices())),
-  shareReplay(1),
-);
+    const notify = () => subscriber.next();
+    navigator.mediaDevices.addEventListener('devicechange', notify);
+    return () => {
+      navigator.mediaDevices.removeEventListener('devicechange', notify);
+    };
+  }).pipe(
+    debounceTime(500),
+    concatMap(() => from(navigator.mediaDevices.enumerateDevices())),
+    shareReplay(1),
+  );
+});
 
-const audioDevices$ = merge(
-  getDevices(audioDeviceConstraints),
-  deviceChange$,
-).pipe(shareReplay(1));
+const getAudioDevicesObserver = memoizedObservable(() => {
+  return merge(
+    getDevices(audioDeviceConstraints),
+    getDeviceChangeObserver(),
+  ).pipe(shareReplay(1));
+});
 
-const videoDevices$ = merge(
-  getDevices(videoDeviceConstraints),
-  deviceChange$,
-).pipe(shareReplay(1));
+const getVideoDevicesObserver = memoizedObservable(() => {
+  return merge(
+    getDevices(videoDeviceConstraints),
+    getDeviceChangeObserver(),
+  ).pipe(shareReplay(1));
+});
 
 /**
  * Prompts the user for a permission to use audio devices (if not already granted) and lists the available 'audioinput' devices, if devices are added/removed the list is updated.
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @returns
  */
-export const getAudioDevices = () =>
-  audioDevices$.pipe(
+export const getAudioDevices = () => {
+  return getAudioDevicesObserver().pipe(
     map((values) => values.filter((d) => d.kind === 'audioinput')),
   );
+};
 
 /**
  * Prompts the user for a permission to use video devices (if not already granted) and lists the available 'videoinput' devices, if devices are added/removed the list is updated.
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @returns
  */
-export const getVideoDevices = () =>
-  videoDevices$.pipe(
-    map((values) =>
-      values.filter((d) => d.kind === 'videoinput' && d.deviceId.length),
-    ),
+export const getVideoDevices = () => {
+  return getVideoDevicesObserver().pipe(
+    map((values) => values.filter((d) => d.kind === 'videoinput')),
   );
+};
 
 /**
  * Prompts the user for a permission to use audio devices (if not already granted) and lists the available 'audiooutput' devices, if devices are added/removed the list is updated. Selecting 'audiooutput' device only makes sense if [the browser has support for changing audio output on 'audio' elements](#checkifaudiooutputchangesupported)
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @returns
  */
 export const getAudioOutputDevices = () => {
-  return audioDevices$.pipe(
+  return getAudioDevicesObserver().pipe(
     map((values) => values.filter((d) => d.kind === 'audiooutput')),
   );
 };

package/src/rtc/Publisher.ts

@@ -707,7 +707,6 @@ export class Publisher {
         ].includes(trackType);
 
         const trackSettings = track.getSettings();
-        // @ts-expect-error - `channelCount` is not defined on `MediaTrackSettings`
         const isStereo = isAudioTrack && trackSettings.channelCount === 2;
 
         return {

package/src/sorting/presets.ts

@@ -39,11 +39,15 @@ const ifInvisibleOrUnknownBy = conditional(
 export const defaultSortPreset = combineComparators(
   pinned,
   screenSharing,
-  ifInvisibleBy(dominantSpeaker),
-  ifInvisibleBy(speaking),
-  ifInvisibleBy(reactionType('raised-hand')),
-  ifInvisibleBy(publishingVideo),
-  ifInvisibleBy(publishingAudio),
+  ifInvisibleBy(
+    combineComparators(
+      dominantSpeaker,
+      speaking,
+      reactionType('raised-hand'),
+      publishingVideo,
+      publishingAudio,
+    ),
+  ),
   // ifInvisibleBy(name),
 );
 
@@ -54,10 +58,14 @@ export const speakerLayoutSortPreset = combineComparators(
   pinned,
   screenSharing,
   dominantSpeaker,
-  ifInvisibleBy(speaking),
-  ifInvisibleBy(reactionType('raised-hand')),
-  ifInvisibleBy(publishingVideo),
-  ifInvisibleBy(publishingAudio),
+  ifInvisibleBy(
+    combineComparators(
+      speaking,
+      reactionType('raised-hand'),
+      publishingVideo,
+      publishingAudio,
+    ),
+  ),
   // ifInvisibleBy(name),
 );
 
@@ -67,11 +75,15 @@ export const speakerLayoutSortPreset = combineComparators(
  */
 export const paginatedLayoutSortPreset = combineComparators(
   pinned,
-  ifInvisibleOrUnknownBy(dominantSpeaker),
-  ifInvisibleOrUnknownBy(speaking),
-  ifInvisibleOrUnknownBy(reactionType('raised-hand')),
-  ifInvisibleOrUnknownBy(publishingVideo),
-  ifInvisibleOrUnknownBy(publishingAudio),
+  ifInvisibleOrUnknownBy(
+    combineComparators(
+      dominantSpeaker,
+      speaking,
+      reactionType('raised-hand'),
+      publishingVideo,
+      publishingAudio,
+    ),
+  ),
   // ifInvisibleOrUnknownBy(name),
 );
 
@@ -79,11 +91,15 @@ export const paginatedLayoutSortPreset = combineComparators(
  * The sorting preset for livestreams and audio rooms.
  */
 export const livestreamOrAudioRoomSortPreset = combineComparators(
-  ifInvisibleBy(dominantSpeaker),
-  ifInvisibleBy(speaking),
-  ifInvisibleBy(reactionType('raised-hand')),
-  ifInvisibleBy(publishingVideo),
-  ifInvisibleBy(publishingAudio),
+  ifInvisibleBy(
+    combineComparators(
+      dominantSpeaker,
+      speaking,
+      reactionType('raised-hand'),
+      publishingVideo,
+      publishingAudio,
+    ),
+  ),
   role('admin', 'host', 'speaker'),
   // name,
 );

package/src/store/CallState.ts

@@ -1,5 +1,10 @@
-import { BehaviorSubject, Observable } from 'rxjs';
-import { distinctUntilChanged, map, shareReplay } from 'rxjs/operators';
+import {
+  BehaviorSubject,
+  distinctUntilChanged,
+  map,
+  Observable,
+  shareReplay,
+} from 'rxjs';
 import type { Patch } from './rxUtils';
 import * as RxUtils from './rxUtils';
 import {
@@ -406,38 +411,38 @@ export class CallState {
 
       // events that update call state:
       'call.accepted': (e) => this.updateFromCallResponse(e.call),
+      'call.blocked_user': this.blockUser,
       'call.created': (e) => this.updateFromCallResponse(e.call),
-      'call.notification': (e) => {
+      'call.ended': (e) => {
         this.updateFromCallResponse(e.call);
-        this.setMembers(e.members);
+        this.setCurrentValue(this.endedBySubject, e.user);
       },
-      'call.rejected': (e) => this.updateFromCallResponse(e.call),
-      'call.ring': (e) => this.updateFromCallResponse(e.call),
+      'call.hls_broadcasting_started': this.updateFromHLSBroadcastStarted,
+      'call.hls_broadcasting_stopped': this.updateFromHLSBroadcastStopped,
       'call.live_started': (e) => this.updateFromCallResponse(e.call),
-      'call.updated': (e) => this.updateFromCallResponse(e.call),
-      'call.session_started': (e) => this.updateFromCallResponse(e.call),
-      'call.session_ended': (e) => this.updateFromCallResponse(e.call),
-      'call.ended': (e) => {
+      'call.member_added': this.updateFromMemberAdded,
+      'call.member_removed': this.updateFromMemberRemoved,
+      'call.member_updated_permission': this.updateMembers,
+      'call.member_updated': this.updateMembers,
+      'call.notification': (e) => {
         this.updateFromCallResponse(e.call);
-        this.setCurrentValue(this.endedBySubject, e.user);
+        this.setMembers(e.members);
       },
+      'call.permissions_updated': this.updateOwnCapabilities,
+      'call.reaction_new': this.updateParticipantReaction,
       'call.recording_started': () =>
         this.setCurrentValue(this.recordingSubject, true),
       'call.recording_stopped': () =>
         this.setCurrentValue(this.recordingSubject, false),
-      'call.hls_broadcasting_started': this.updateFromHLSBroadcastStarted,
-      'call.hls_broadcasting_stopped': this.updateFromHLSBroadcastStopped,
+      'call.rejected': (e) => this.updateFromCallResponse(e.call),
+      'call.ring': (e) => this.updateFromCallResponse(e.call),
+      'call.session_ended': (e) => this.updateFromCallResponse(e.call),
       'call.session_participant_joined':
         this.updateFromSessionParticipantJoined,
       'call.session_participant_left': this.updateFromSessionParticipantLeft,
-      'call.blocked_user': this.blockUser,
+      'call.session_started': (e) => this.updateFromCallResponse(e.call),
       'call.unblocked_user': this.unblockUser,
-      'call.permissions_updated': this.updateOwnCapabilities,
-      'call.member_added': this.updateFromMemberAdded,
-      'call.member_removed': this.updateFromMemberRemoved,
-      'call.member_updated': this.updateMembers,
-      'call.member_updated_permission': this.updateMembers,
-      'call.reaction_new': this.updateParticipantReaction,
+      'call.updated': (e) => this.updateFromCallResponse(e.call),
     };
   }
 

package/src/store/rxUtils.ts

@@ -1,9 +1,19 @@
-import { Observable, Subject, combineLatest } from 'rxjs';
+import { combineLatest, Observable, Subject } from 'rxjs';
+
+type FunctionPatch<T> = (currentValue: T) => T;
 
 /**
  * A value or a function which takes the current value and returns a new value.
  */
-export type Patch<T> = T | ((currentValue: T) => T);
+export type Patch<T> = T | FunctionPatch<T>;
+
+/**
+ * Checks if the provided update is a function patch.
+ *
+ * @param update the value to check.
+ */
+const isFunctionPatch = <T>(update: Patch<T>): update is FunctionPatch<T> =>
+  typeof update === 'function';
 
 /**
  * Gets the current value of an observable, or undefined if the observable has
@@ -39,11 +49,9 @@ export const getCurrentValue = <T>(observable$: Observable<T>) => {
  * @return the updated value.
  */
 export const setCurrentValue = <T>(subject: Subject<T>, update: Patch<T>) => {
-  const next =
-    // TypeScript needs more context to infer the type of update
-    typeof update === 'function' && update instanceof Function
-      ? update(getCurrentValue(subject))
-      : update;
+  const next = isFunctionPatch(update)
+    ? update(getCurrentValue(subject))
+    : update;
 
   subject.next(next);
   return next;

package/dist/src/__tests__/StreamVideoClient.test.d.ts

@@ -1 +0,0 @@
-import 'dotenv/config';

package/dist/src/__tests__/server-side/call-members.test.d.ts

@@ -1 +0,0 @@
-import 'dotenv/config';

package/dist/src/__tests__/server-side/call-types.test.d.ts

@@ -1 +0,0 @@
-import 'dotenv/config';

package/dist/src/__tests__/server-side/call.test.d.ts

@@ -1 +0,0 @@
-import 'dotenv/config';

package/dist/src/__tests__/server-side/create-token.test.d.ts

@@ -1 +0,0 @@
-import 'dotenv/config';

package/dist/src/__tests__/server-side/server-side-user.test.d.ts

@@ -1 +0,0 @@
-import 'dotenv/config';

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

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

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

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

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

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

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

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

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

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

package/dist/src/devices/__tests__/mocks.d.ts

@@ -1,7 +0,0 @@
-import { Call } from '../../Call';
-export declare const mockVideoDevices: MediaDeviceInfo[];
-export declare const mockAudioDevices: MediaDeviceInfo[];
-export declare const mockCall: () => Partial<Call>;
-export declare const mockAudioStream: () => MediaStream;
-export declare const mockVideoStream: () => MediaStream;
-export declare const mockScreenShareStream: (includeAudio?: boolean) => MediaStream;

package/dist/src/events/__tests__/call-permissions.test.d.ts

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

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

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

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

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

package/dist/src/events/__tests__/participant.test.d.ts

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

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

@@ -1,4 +0,0 @@
-/**
- * @vitest-environment happy-dom
- */
-import '../../rtc/__tests__/mocks/webrtc.mocks';

package/dist/src/helpers/__tests__/hq-audio-sdp.d.ts

@@ -1 +0,0 @@
-export declare const initialSdp: string;

package/dist/src/helpers/__tests__/sdp-munging.test.d.ts

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

package/dist/src/rtc/__tests__/Publisher.test.d.ts

@@ -1 +0,0 @@
-import './mocks/webrtc.mocks';

package/dist/src/rtc/__tests__/Subscriber.test.d.ts

@@ -1 +0,0 @@
-import './mocks/webrtc.mocks';

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

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

package/dist/src/rtc/__tests__/videoLayers.test.d.ts

@@ -1 +0,0 @@
-import './mocks/webrtc.mocks';

package/dist/src/sorting/__tests__/participant-data.d.ts

@@ -1,2 +0,0 @@
-import { StreamVideoParticipant } from '../../types';
-export declare const participants: () => StreamVideoParticipant[];

package/dist/src/sorting/__tests__/presets.test.d.ts

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

package/dist/src/sorting/__tests__/sorting.test.d.ts

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

package/dist/src/store/__tests__/CallState.test.d.ts

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

package/dist/version.d.ts

@@ -1 +0,0 @@
-export declare const version = "0.3.32";