@stream-io/video-client 0.6.3 → 0.6.5

package/dist/src/Call.d.ts

@@ -115,7 +115,7 @@ export declare class Call {
     /**
      * Leave the call and stop the media streams that were published by the call.
      */
-    leave: ({ reject }?: CallLeaveOptions) => Promise<void>;
+    leave: ({ reject, reason, }?: CallLeaveOptions) => Promise<void>;
     /**
      * A flag indicating whether the call is "ringing" type of call.
      */

package/dist/src/StreamSfuClient.d.ts

@@ -100,7 +100,7 @@ export declare class StreamSfuClient {
      * @param sessionId the `sessionId` of the currently connected participant.
      */
     constructor({ dispatcher, sfuServer, token, sessionId, }: StreamSfuClientConstructor);
-    close: (code?: number, reason?: string) => void;
+    close: (code: number, reason: string) => void;
     updateSubscriptions: (subscriptions: TrackSubscriptionDetails[]) => Promise<FinishedUnaryCall<import("./gen/video/sfu/signal_rpc/signal").UpdateSubscriptionsRequest, import("./gen/video/sfu/signal_rpc/signal").UpdateSubscriptionsResponse>>;
     setPublisher: (data: Omit<SetPublisherRequest, 'sessionId'>) => Promise<FinishedUnaryCall<SetPublisherRequest, import("./gen/video/sfu/signal_rpc/signal").SetPublisherResponse>>;
     sendAnswer: (data: Omit<SendAnswerRequest, 'sessionId'>) => Promise<FinishedUnaryCall<SendAnswerRequest, import("./gen/video/sfu/signal_rpc/signal").SendAnswerResponse>>;

package/dist/src/StreamVideoClient.d.ts

@@ -72,7 +72,7 @@ export declare class StreamVideoClient {
      * Creates a new call.
      *
      * @param type the type of the call.
-     * @param id the id of the call, if not provided a unique random value is used
+     * @param id the id of the call.
      */
     call: (type: string, id: string) => Call;
     /**

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

@@ -58,7 +58,7 @@ export declare abstract class InputMediaDeviceManager<T extends InputMediaDevice
     /**
      * Selects a device.
      *
-     * Note: this method is not supported in React Native
+     * Note: This method is not supported in React Native
      * @param deviceId the device id to select.
      */
     select(deviceId: string | undefined): Promise<void>;

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

@@ -9,6 +9,7 @@ export declare class SpeakerManager {
      * Lists the available audio output devices
      *
      * Note: It prompts the user for a permission to use devices (if not already granted)
+     * Note: This method is not supported in React Native
      *
      * @returns an Observable that will be updated if a device is connected or disconnected
      */
@@ -16,7 +17,7 @@ export declare class SpeakerManager {
     /**
      * Select a device.
      *
-     * Note: this method is not supported in React Native
+     * Note: This method is not supported in React Native
      *
      * @param deviceId empty string means the system default
      */
@@ -26,13 +27,13 @@ export declare class SpeakerManager {
      * Set the volume of the audio elements
      * @param volume a number between 0 and 1.
      *
-     * Note: this method is not supported in React Native
+     * Note: This method is not supported in React Native
      */
     setVolume(volume: number): void;
     /**
      * Set the volume of a participant.
      *
-     * Note: this method is not supported in React Native.
+     * Note: This method is not supported in React Native.
      *
      * @param sessionId the participant's session id.
      * @param volume a number between 0 and 1. Set it to `undefined` to use the default volume.

package/dist/src/types.d.ts

@@ -133,6 +133,11 @@ export type CallLeaveOptions = {
      * @default `false`.
      */
     reject?: boolean;
+    /**
+     * The reason for leaving the call.
+     * This will be sent to the backend and will be visible in the logs.
+     */
+    reason?: string;
 };
 /**
  * The options to pass to {@link Call} constructor.

package/package.json

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

package/src/Call.ts

@@ -372,7 +372,7 @@ export class Call {
         const currentUserId = this.currentUserId;
         if (currentUserId && blockedUserIds.includes(currentUserId)) {
           this.logger('info', 'Leaving call because of being blocked');
-          await this.leave();
+          await this.leave({ reason: 'user blocked' });
         }
       }),
     );
@@ -459,7 +459,10 @@ export class Call {
   /**
    * Leave the call and stop the media streams that were published by the call.
    */
-  leave = async ({ reject = false }: CallLeaveOptions = {}) => {
+  leave = async ({
+    reject = false,
+    reason = 'user is leaving the call',
+  }: CallLeaveOptions = {}) => {
     const callingState = this.state.callingState;
     if (callingState === CallingState.LEFT) {
       throw new Error('Cannot leave call that has already been left.');
@@ -494,7 +497,7 @@ export class Call {
     this.publisher?.close();
     this.publisher = undefined;
 
-    this.sfuClient?.close();
+    this.sfuClient?.close(StreamSfuClient.NORMAL_CLOSURE, reason);
     this.sfuClient = undefined;
 
     this.dispatcher.offAll();
@@ -740,7 +743,8 @@ export class Call {
      * A closure which hides away the re-connection logic.
      */
     const reconnect = async (
-      strategy: 'full' | 'fast' | 'migrate' = 'full',
+      strategy: 'full' | 'fast' | 'migrate',
+      reason: string,
     ): Promise<void> => {
       const currentState = this.state.callingState;
       if (
@@ -777,7 +781,7 @@ export class Call {
       if (strategy === 'fast') {
         sfuClient.close(
           StreamSfuClient.ERROR_CONNECTION_BROKEN,
-          'js-client: attempting fast reconnect',
+          `attempting fast reconnect: ${reason}`,
         );
       } else if (strategy === 'full') {
         // in migration or recovery scenarios, we don't want to
@@ -797,7 +801,7 @@ export class Call {
         // clean up current connection
         sfuClient.close(
           StreamSfuClient.NORMAL_CLOSURE,
-          'js-client: attempting full reconnect',
+          `attempting full reconnect: ${reason}`,
         );
       }
       await this.join({
@@ -807,10 +811,7 @@ export class Call {
 
       // clean up previous connection
       if (strategy === 'migrate') {
-        sfuClient.close(
-          StreamSfuClient.NORMAL_CLOSURE,
-          'js-client: attempting migration',
-        );
+        sfuClient.close(StreamSfuClient.NORMAL_CLOSURE, 'attempting migration');
       }
 
       this.logger(
@@ -866,7 +867,7 @@ export class Call {
           'info',
           `[Migration]: Going away from SFU... Reason: ${GoAwayReason[reason]}`,
         );
-        reconnect('migrate').catch((err) => {
+        reconnect('migrate', GoAwayReason[reason]).catch((err) => {
           this.logger(
             'warn',
             `[Migration]: Failed to migrate to another SFU.`,
@@ -901,14 +902,16 @@ export class Call {
         if (this.reconnectAttempts < this.maxReconnectAttempts) {
           sfuClient.isFastReconnecting = this.reconnectAttempts === 0;
           const strategy = sfuClient.isFastReconnecting ? 'fast' : 'full';
-          reconnect(strategy).catch((err) => {
-            this.logger(
-              'error',
-              `[Rejoin]: ${strategy} rejoin failed for ${this.reconnectAttempts} times. Giving up.`,
-              err,
-            );
-            this.state.setCallingState(CallingState.RECONNECTING_FAILED);
-          });
+          reconnect(strategy, `SFU closed the WS with code: ${e.code}`).catch(
+            (err) => {
+              this.logger(
+                'error',
+                `[Rejoin]: ${strategy} rejoin failed for ${this.reconnectAttempts} times. Giving up.`,
+                err,
+              );
+              this.state.setCallingState(CallingState.RECONNECTING_FAILED);
+            },
+          );
         } else {
           this.logger(
             'error',
@@ -936,7 +939,10 @@ export class Call {
         do {
           try {
             sfuClient.isFastReconnecting = isFirstReconnectAttempt;
-            await reconnect(isFirstReconnectAttempt ? 'fast' : 'full');
+            await reconnect(
+              isFirstReconnectAttempt ? 'fast' : 'full',
+              'Network: online',
+            );
             return; // break the loop if rejoin is successful
           } catch (err) {
             this.logger(
@@ -1057,7 +1063,7 @@ export class Call {
           await this.publisher.restartIce();
         } else if (previousSfuClient?.isFastReconnecting) {
           // reconnection wasn't possible, so we need to do a full rejoin
-          return await reconnect('full').catch((err) => {
+          return await reconnect('full', 're-attempting').catch((err) => {
             this.logger(
               'error',
               `[Rejoin]: Rejoin failed forced full rejoin.`,
@@ -1125,7 +1131,7 @@ export class Call {
           `[Rejoin]: Rejoin ${this.reconnectAttempts} failed.`,
           err,
         );
-        await reconnect();
+        await reconnect('full', 'previous attempt failed');
         this.logger(
           'info',
           `[Rejoin]: Rejoin ${this.reconnectAttempts} successful!`,
@@ -1825,7 +1831,7 @@ export class Call {
 
         clearTimeout(this.dropTimeout);
         this.dropTimeout = setTimeout(() => {
-          this.leave().catch((err) => {
+          this.leave({ reason: 'ring: timeout' }).catch((err) => {
             this.logger('error', 'Failed to drop call', err);
           });
         }, timeoutInMs);

package/src/StreamSfuClient.ts

@@ -209,13 +209,10 @@ export class StreamSfuClient {
     });
   }
 
-  close = (
-    code: number = StreamSfuClient.NORMAL_CLOSURE,
-    reason: string = 'js-client: requested signal connection close',
-  ) => {
-    this.logger('debug', 'Closing SFU WS connection', code, reason);
+  close = (code: number, reason: string) => {
+    this.logger('debug', `Closing SFU WS connection: ${code} - ${reason}`);
     if (this.signalWs.readyState !== this.signalWs.CLOSED) {
-      this.signalWs.close(code, reason);
+      this.signalWs.close(code, `js-client: ${reason}`);
     }
 
     this.unsubscribeIceTrickle();

package/src/StreamVideoClient.ts

@@ -232,7 +232,7 @@ export class StreamVideoClient {
         // if `call.created` was received before `call.ring`.
         // In that case, we cleanup the already tracked call.
         const prevCall = this.writeableStateStore.findCall(call.type, call.id);
-        await prevCall?.leave();
+        await prevCall?.leave({ reason: 'cleaning-up in call.ring' });
         // we create a new call
         const theCall = new Call({
           streamClient: this.streamClient,
@@ -310,7 +310,7 @@ export class StreamVideoClient {
    * Creates a new call.
    *
    * @param type the type of the call.
-   * @param id the id of the call, if not provided a unique random value is used
+   * @param id the id of the call.
    */
   call = (type: string, id: string) => {
     return new Call({

package/src/devices/InputMediaDeviceManager.ts

@@ -125,12 +125,14 @@ export abstract class InputMediaDeviceManager<
   /**
    * Selects a device.
    *
-   * Note: this method is not supported in React Native
+   * Note: This method is not supported in React Native
    * @param deviceId the device id to select.
    */
   async select(deviceId: string | undefined) {
     if (isReactNative()) {
-      throw new Error('This method is not supported in React Native');
+      throw new Error(
+        'This method is not supported in React Native. Please visit https://getstream.io/video/docs/reactnative/core/camera-and-microphone/#speaker-management for reference.',
+      );
     }
     if (deviceId === this.state.selectedDevice) {
       return;

package/src/devices/InputMediaDeviceManagerState.ts

@@ -7,7 +7,6 @@ import {
 import { isReactNative } from '../helpers/platforms';
 import { RxUtils } from '../store';
 import { getLogger } from '../logger';
-import { isSafari } from '../helpers/browsers';
 
 export type InputDeviceStatus = 'enabled' | 'disabled' | undefined;
 
@@ -67,15 +66,15 @@ export abstract class InputMediaDeviceManagerState<C = MediaTrackConstraints> {
     }
 
     let permissionState: PermissionStatus;
-    const notify = () =>
+    const notify = () => {
       subscriber.next(
-        // In Safari, the `change` event doesn't reliably emit and hence,
+        // In some browsers, the 'change' event doesn't reliably emit and hence,
         // permissionState stays in 'prompt' state forever.
+        // Typically, this happens when a user grants one-time permission.
         // Instead of checking if a permission is granted, we check if it isn't denied
-        isSafari()
-          ? permissionState.state !== 'denied'
-          : permissionState.state === 'granted',
+        permissionState.state !== 'denied',
       );
+    };
     navigator.permissions
       .query({ name: this.permissionName })
       .then((permissionStatus) => {

package/src/devices/SpeakerManager.ts

@@ -34,23 +34,31 @@ export class SpeakerManager {
    * Lists the available audio output devices
    *
    * Note: It prompts the user for a permission to use devices (if not already granted)
+   * Note: This method is not supported in React Native
    *
    * @returns an Observable that will be updated if a device is connected or disconnected
    */
   listDevices() {
+    if (isReactNative()) {
+      throw new Error(
+        'This feature is not supported in React Native. Please visit https://getstream.io/video/docs/reactnative/core/camera-and-microphone/#speaker-management for more details',
+      );
+    }
     return getAudioOutputDevices();
   }
 
   /**
    * Select a device.
    *
-   * Note: this method is not supported in React Native
+   * 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');
+      throw new Error(
+        'This feature is not supported in React Native. Please visit https://getstream.io/video/docs/reactnative/core/camera-and-microphone/#speaker-management for more details',
+      );
     }
     this.state.setDevice(deviceId);
   }
@@ -63,11 +71,13 @@ export class SpeakerManager {
    * Set the volume of the audio elements
    * @param volume a number between 0 and 1.
    *
-   * Note: this method is not supported in React Native
+   * 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');
+      throw new Error(
+        'This feature is not supported in React Native. Please visit https://getstream.io/video/docs/reactnative/core/camera-and-microphone/#speaker-management for more details',
+      );
     }
     if (volume && (volume < 0 || volume > 1)) {
       throw new Error('Volume must be between 0 and 1');
@@ -78,14 +88,16 @@ export class SpeakerManager {
   /**
    * Set the volume of a participant.
    *
-   * Note: this method is not supported in React Native.
+   * Note: This method is not supported in React Native.
    *
    * @param sessionId the participant's session id.
    * @param volume a number between 0 and 1. Set it to `undefined` to use the default volume.
    */
   setParticipantVolume(sessionId: string, volume: number | undefined) {
     if (isReactNative()) {
-      throw new Error('This feature is not supported in React Native');
+      throw new Error(
+        'This feature is not supported in React Native. Please visit https://getstream.io/video/docs/reactnative/core/camera-and-microphone/#speaker-management for more details',
+      );
     }
     if (volume && (volume < 0 || volume > 1)) {
       throw new Error('Volume must be between 0 and 1, or undefined');

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

@@ -54,7 +54,7 @@ describe('InputMediaDeviceManagerState', () => {
       expect(permissionStatus.addEventListener).toHaveBeenCalled();
     });
 
-    it('should emit false when prompt is needed', async () => {
+    it('should emit true when prompt is needed', async () => {
       const permissionStatus: Partial<PermissionStatus> = {
         state: 'prompt',
         addEventListener: vi.fn(),
@@ -64,30 +64,6 @@ describe('InputMediaDeviceManagerState', () => {
       // @ts-ignore - navigator is readonly, but we need to mock it
       globalThis.navigator.permissions = { query };
 
-      const hasPermission = await new Promise((resolve) => {
-        state.hasBrowserPermission$.subscribe((v) => resolve(v));
-      });
-      expect(hasPermission).toBe(false);
-      expect(query).toHaveBeenCalledWith({ name: 'camera' });
-      expect(permissionStatus.addEventListener).toHaveBeenCalled();
-    });
-
-    it('should emit true when prompt is needed in Safari', async () => {
-      const permissionStatus: Partial<PermissionStatus> = {
-        state: 'prompt',
-        addEventListener: vi.fn(),
-      };
-      const query = vi.fn(() => Promise.resolve(permissionStatus));
-      globalThis.navigator ??= { userAgent: 'safari' } as Navigator;
-      // @ts-ignore - navigator is readonly, but we need to mock it
-      globalThis.navigator.permissions = { query };
-
-      Object.defineProperty(globalThis.navigator, 'userAgent', {
-        get() {
-          return 'safari';
-        },
-      });
-
       const hasPermission = await new Promise((resolve) => {
         state.hasBrowserPermission$.subscribe((v) => resolve(v));
       });

package/src/events/call.ts

@@ -56,12 +56,12 @@ export const watchCallRejected = (call: Call) => {
         .every((m) => rejectedBy[m.user_id]);
       if (everyoneElseRejected) {
         call.logger('info', 'everyone rejected, leaving the call');
-        await call.leave();
+        await call.leave({ reason: 'ring: everyone rejected' });
       }
     } else {
       if (rejectedBy[eventCall.created_by.id]) {
         call.logger('info', 'call creator rejected, leaving call');
-        await call.leave();
+        await call.leave({ reason: 'ring: creator rejected' });
       }
     }
   };
@@ -78,7 +78,7 @@ export const watchCallEnded = (call: Call) => {
       callingState === CallingState.JOINED ||
       callingState === CallingState.JOINING
     ) {
-      await call.leave();
+      await call.leave({ reason: 'call.ended event received' });
     }
   };
 };

package/src/events/internal.ts

@@ -69,7 +69,7 @@ export const watchLiveEnded = (dispatcher: Dispatcher, call: Call) => {
     if (e.error && e.error.code !== ErrorCode.LIVE_ENDED) return;
 
     if (!call.permissionsContext.hasPermission(OwnCapability.JOIN_BACKSTAGE)) {
-      call.leave().catch((err) => {
+      call.leave({ reason: 'live ended' }).catch((err) => {
         logger('error', 'Failed to leave call after live ended', err);
       });
     }

package/src/store/CallState.ts

@@ -97,6 +97,15 @@ export enum CallingState {
   OFFLINE = 'offline',
 }
 
+/**
+ * Returns the default egress object - when no egress data is available.
+ */
+const defaultEgress: EgressResponse = {
+  broadcasting: false,
+  hls: { playlist_url: '' },
+  rtmps: [],
+};
+
 /**
  * Holds the state of the current call.
  * @react You don't have to use this class directly, as we are exposing the state through Hooks.
@@ -978,15 +987,15 @@ export class CallState {
   };
 
   private updateFromHLSBroadcastStopped = () => {
-    this.setCurrentValue(this.egressSubject, (egress) => ({
-      ...egress!,
+    this.setCurrentValue(this.egressSubject, (egress = defaultEgress) => ({
+      ...egress,
       broadcasting: false,
     }));
   };
 
   private updateFromHLSBroadcastingFailed = () => {
-    this.setCurrentValue(this.egressSubject, (egress) => ({
-      ...egress!,
+    this.setCurrentValue(this.egressSubject, (egress = defaultEgress) => ({
+      ...egress,
       broadcasting: false,
     }));
   };
@@ -994,11 +1003,11 @@ export class CallState {
   private updateFromHLSBroadcastStarted = (
     event: CallHLSBroadcastingStartedEvent,
   ) => {
-    this.setCurrentValue(this.egressSubject, (egress) => ({
-      ...egress!,
+    this.setCurrentValue(this.egressSubject, (egress = defaultEgress) => ({
+      ...egress,
       broadcasting: true,
       hls: {
-        ...egress!.hls,
+        ...egress.hls,
         playlist_url: event.hls_playlist_url,
       },
     }));

package/src/store/stateStore.ts

@@ -28,9 +28,11 @@ export class StreamVideoWriteableStateStore {
           if (call.state.callingState === CallingState.LEFT) continue;
 
           logger('info', `User disconnected, leaving call: ${call.cid}`);
-          await call.leave().catch((err) => {
-            logger('error', `Error leaving call: ${call.cid}`, err);
-          });
+          await call
+            .leave({ reason: 'client.disconnectUser() called' })
+            .catch((err) => {
+              logger('error', `Error leaving call: ${call.cid}`, err);
+            });
         }
       }
     });

package/src/types.ts

@@ -173,6 +173,12 @@ export type CallLeaveOptions = {
    * @default `false`.
    */
   reject?: boolean;
+
+  /**
+   * The reason for leaving the call.
+   * This will be sent to the backend and will be visible in the logs.
+   */
+  reason?: string;
 };
 
 /**