@stream-io/video-client 0.0.39 → 0.0.41

package/dist/src/Call.d.ts

@@ -30,12 +30,6 @@ export declare class Call {
      * The state of this call.
      */
     readonly state: CallState;
-    private rejoinPromise;
-    /**
-     * A promise that exposes the reconnection logic
-     * The use-case is for the react-native platform where online/offline events are not available in the window
-     */
-    get rejoin(): (() => Promise<void>) | undefined;
     /**
      * Flag indicating whether this call is "watched" and receives
      * updates from the backend.

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

@@ -53,9 +53,9 @@ export declare class StreamClient {
      * @param {httpsAgent} [options.httpsAgent] - custom httpsAgent, in node it's default to https.agent()
      */
     constructor(key: string, options?: StreamClientOptions);
-    devToken(userID: string): string;
-    getAuthType(): "anonymous" | "jwt";
-    setBaseURL(baseURL: string): void;
+    devToken: (userID: string) => string;
+    getAuthType: () => "anonymous" | "jwt";
+    setBaseURL: (baseURL: string) => void;
     _getConnectionID: () => string | undefined;
     _hasConnectionID: () => boolean;
     /**
@@ -72,7 +72,7 @@ export declare class StreamClient {
      */
     connectUser: (user: UserWithId, userTokenOrProvider: TokenOrProvider) => Promise<void | import("../../..").ConnectedEvent>;
     _setToken: (user: UserWithId, userTokenOrProvider: TokenOrProvider, isAnonymous: boolean) => Promise<void>;
-    _setUser(user: UserWithId): void;
+    _setUser: (user: UserWithId) => void;
     /**
      * Disconnects the websocket connection, without removing the user set on client.
      * client.closeConnection will not trigger default auto-retry mechanism for reconnection. You need
@@ -115,19 +115,19 @@ export declare class StreamClient {
      *
      * @return {Function} Returns a function which, when called, unsubscribes the event handler.
      */
-    on(callbackOrEventName: EventHandler | string, callbackOrNothing?: EventHandler): () => void;
+    on: (callbackOrEventName: EventHandler | string, callbackOrNothing?: EventHandler) => () => void;
     /**
      * off - Remove the event handler
      *
      */
-    off(callbackOrEventName: EventHandler | string, callbackOrNothing?: EventHandler): void;
-    _logApiRequest(type: string, url: string, data: unknown, config: AxiosRequestConfig & {
-        config?: AxiosRequestConfig & {
-            maxBodyLength?: number;
-        };
-    }): void;
-    _logApiResponse<T>(type: string, url: string, response: AxiosResponse<T>): void;
-    _logApiError(type: string, url: string, error: unknown): void;
+    off: (callbackOrEventName: EventHandler | string, callbackOrNothing?: EventHandler) => void;
+    _logApiRequest: (type: string, url: string, data: unknown, config: AxiosRequestConfig<any> & {
+        config?: (AxiosRequestConfig<any> & {
+            maxBodyLength?: number | undefined;
+        }) | undefined;
+    }) => void;
+    _logApiResponse: <T>(type: string, url: string, response: AxiosResponse<T, any>) => void;
+    _logApiError: (type: string, url: string, error: unknown) => void;
     doAxiosRequest: <T, D = unknown>(type: string, url: string, data?: D | undefined, options?: AxiosRequestConfig & {
         config?: AxiosRequestConfig & {
             maxBodyLength?: number;
@@ -135,38 +135,38 @@ export declare class StreamClient {
     } & {
         publicEndpoint?: boolean;
     }) => Promise<T>;
-    get<T>(url: string, params?: AxiosRequestConfig['params']): Promise<T>;
-    put<T, D = unknown>(url: string, data?: D): Promise<T>;
-    post<T, D = unknown>(url: string, data?: D): Promise<T>;
-    patch<T, D = unknown>(url: string, data?: D): Promise<T>;
-    delete<T>(url: string, params?: AxiosRequestConfig['params']): Promise<T>;
-    errorFromResponse(response: AxiosResponse<APIErrorResponse>): ErrorFromResponse<APIErrorResponse>;
-    handleResponse<T>(response: AxiosResponse<T>): T;
+    get: <T>(url: string, params?: AxiosRequestConfig['params']) => Promise<T>;
+    put: <T, D = unknown>(url: string, data?: D | undefined) => Promise<T>;
+    post: <T, D = unknown>(url: string, data?: D | undefined) => Promise<T>;
+    patch: <T, D = unknown>(url: string, data?: D | undefined) => Promise<T>;
+    delete: <T>(url: string, params?: AxiosRequestConfig['params']) => Promise<T>;
+    errorFromResponse: (response: AxiosResponse<APIErrorResponse>) => ErrorFromResponse<APIErrorResponse>;
+    handleResponse: <T>(response: AxiosResponse<T, any>) => T;
     dispatchEvent: (event: StreamVideoEvent) => void;
     handleEvent: (messageEvent: WebSocket.MessageEvent) => void;
     _callClientListeners: (event: StreamVideoEvent) => void;
     /**
      * @private
      */
-    connect(): Promise<void | import("../../..").ConnectedEvent>;
+    connect: () => Promise<void | import("../../..").ConnectedEvent>;
     /**
      * Check the connectivity with server for warmup purpose.
      *
      * @private
      */
-    _sayHi(): void;
-    getUserAgent(): string;
-    setUserAgent(userAgent: string): void;
+    _sayHi: () => void;
+    getUserAgent: () => string;
+    setUserAgent: (userAgent: string) => void;
     /**
      * _isUsingServerAuth - Returns true if we're using server side auth
      */
     _isUsingServerAuth: () => boolean;
-    _enrichAxiosOptions(options?: AxiosRequestConfig & {
+    _enrichAxiosOptions: (options?: AxiosRequestConfig & {
         config?: AxiosRequestConfig;
     } & {
         publicEndpoint?: boolean;
-    }): AxiosRequestConfig;
-    _getToken(): string | null | undefined;
+    }) => AxiosRequestConfig;
+    _getToken: () => string | null | undefined;
     /**
      * encode ws url payload
      * @private
@@ -176,7 +176,7 @@ export declare class StreamClient {
     /**
      * creates an abort controller that will be used by the next HTTP Request.
      */
-    createAbortControllerForNextRequest(): AbortController;
+    createAbortControllerForNextRequest: () => AbortController;
     /**
      * createToken - Creates a token to authenticate this user. This function is used server side.
      * The resulting token should be passed to the client side when the users registers or logs in.
@@ -187,5 +187,5 @@ export declare class StreamClient {
      *
      * @return {string} Returns a token
      */
-    createToken(userID: string, exp?: number, iat?: number, call_cids?: string[]): string;
+    createToken: (userID: string, exp?: number, iat?: number, call_cids?: string[]) => string;
 }

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

@@ -47,7 +47,7 @@ export declare class StableWSConnection {
     wsID: number;
     client: StreamClient;
     constructor(client: StreamClient);
-    _log(msg: string, extra?: UR, level?: LogLevel): void;
+    _log: (msg: string, extra?: UR, level?: LogLevel) => void;
     setClient: (client: StreamClient) => void;
     /**
      * connect - Connect to the WS URL
@@ -106,9 +106,10 @@ export declare class StableWSConnection {
      * Broadcasts an event in case the connection status changed.
      *
      * @param {boolean} healthy boolean indicating if the connection is healthy or not
+     * @param {boolean} dispatchImmediately boolean indicating to dispatch event immediately even if the connection is unhealthy
      *
      */
-    _setHealth: (healthy: boolean) => void;
+    _setHealth: (healthy: boolean, dispatchImmediately?: boolean) => void;
     /**
      * _errorFromWSEvent - Creates an error object for the WS event
      *

package/dist/src/events/internal.d.ts

@@ -11,6 +11,7 @@ export declare const watchConnectionQualityChanged: (dispatcher: Dispatcher, sta
  * health check events that our SFU sends.
  */
 export declare const watchParticipantCountChanged: (dispatcher: Dispatcher, state: CallState) => () => void;
+export declare const watchLiveEnded: (dispatcher: Dispatcher, call: Call) => () => void;
 /**
  * Watches and logs the errors reported by the currently connected SFU.
  */

package/package.json

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

package/src/Call.ts

@@ -103,7 +103,6 @@ import {
   StreamCallEvent,
 } from './coordinator/connection/types';
 import { getClientDetails } from './client-details';
-import { isReactNative } from './helpers/platforms';
 import { getLogger } from './logger';
 
 /**
@@ -135,16 +134,6 @@ export class Call {
    */
   readonly state = new CallState();
 
-  private rejoinPromise: (() => Promise<void>) | undefined;
-
-  /**
-   * A promise that exposes the reconnection logic
-   * The use-case is for the react-native platform where online/offline events are not available in the window
-   */
-  get rejoin(): (() => Promise<void>) | undefined {
-    return this.rejoinPromise;
-  }
-
   /**
    * Flag indicating whether this call is "watched" and receives
    * updates from the backend.
@@ -387,7 +376,6 @@ export class Call {
     if (callingState === CallingState.LEFT) {
       throw new Error('Cannot leave call that has already been left.');
     }
-    this.rejoinPromise = undefined;
 
     if (this.ringing) {
       // I'm the one who started the call, so I should cancel it.
@@ -685,7 +673,7 @@ export class Call {
       // we shouldn't be republishing the streams if we're migrating
       // as the underlying peer connection will take care of it as part
       // of the ice-restart process
-      if (localParticipant && !isReactNative() && !migrate) {
+      if (localParticipant && !migrate) {
         const {
           audioStream,
           videoStream,
@@ -703,8 +691,6 @@ export class Call {
       );
     };
 
-    this.rejoinPromise = rejoin;
-
     // reconnect if the connection was closed unexpectedly. example:
     // - SFU crash or restart
     // - network change
@@ -744,8 +730,6 @@ export class Call {
           sfuClient.isMigratingAway
         )
           return;
-        // do nothing for react-native as it is handled by SDK
-        if (isReactNative()) return;
         if (this.reconnectAttempts < this.maxReconnectAttempts) {
           rejoin().catch((err) => {
             this.logger(
@@ -766,17 +750,17 @@ export class Call {
     });
 
     // handlers for connection online/offline events
-    // Note: window.addEventListener is not available in React Native, hence the check
-    if (typeof window !== 'undefined' && window.addEventListener) {
-      const handleOnOffline = () => {
-        window.removeEventListener('offline', handleOnOffline);
-        this.logger('warn', '[Rejoin]: Going offline...');
-        this.state.setCallingState(CallingState.OFFLINE);
-      };
-
-      const handleOnOnline = () => {
-        window.removeEventListener('online', handleOnOnline);
-        if (this.state.callingState === CallingState.OFFLINE) {
+    const unsubscribeOnlineEvent = this.streamClient.on(
+      'connection.changed',
+      (e) => {
+        if (e.type !== 'connection.changed') return;
+        if (!e.online) return;
+        unsubscribeOnlineEvent();
+        const currentCallingState = this.state.callingState;
+        if (
+          currentCallingState === CallingState.OFFLINE ||
+          currentCallingState === CallingState.RECONNECTING_FAILED
+        ) {
           this.logger('info', '[Rejoin]: Going online...');
           rejoin().catch((err) => {
             this.logger(
@@ -787,17 +771,22 @@ export class Call {
             this.state.setCallingState(CallingState.RECONNECTING_FAILED);
           });
         }
-      };
-
-      window.addEventListener('offline', handleOnOffline);
-      window.addEventListener('online', handleOnOnline);
+      },
+    );
+    const unsubscribeOfflineEvent = this.streamClient.on(
+      'connection.changed',
+      (e) => {
+        if (e.type !== 'connection.changed') return;
+        if (e.online) return;
+        unsubscribeOfflineEvent();
+        this.state.setCallingState(CallingState.OFFLINE);
+      },
+    );
 
-      // register cleanup hooks
-      this.leaveCallHooks.push(
-        () => window.removeEventListener('offline', handleOnOffline),
-        () => window.removeEventListener('online', handleOnOnline),
-      );
-    }
+    this.leaveCallHooks.push(() => {
+      unsubscribeOnlineEvent();
+      unsubscribeOfflineEvent();
+    });
 
     if (!this.subscriber) {
       this.subscriber = new Subscriber({

package/src/StreamSfuClient.ts

@@ -106,7 +106,7 @@ export class StreamSfuClient {
   private readonly rpc: SignalServerClient;
   private keepAliveInterval?: NodeJS.Timeout;
   private connectionCheckTimeout?: NodeJS.Timeout;
-  private pingIntervalInMs = 25 * 1000;
+  private pingIntervalInMs = 10 * 1000;
   private unhealthyTimeoutInMs = this.pingIntervalInMs + 5 * 1000;
   private lastMessageTimestamp?: Date;
   private readonly unsubscribeIceTrickle: () => void;
@@ -319,7 +319,7 @@ export class StreamSfuClient {
           new Date().getTime() - this.lastMessageTimestamp.getTime();
 
         if (timeSinceLastMessage > this.unhealthyTimeoutInMs) {
-          this.logger('error', 'SFU connection unhealthy, closing');
+          this.logger('debug', 'SFU connection unhealthy, closing');
           this.close(
             4001,
             `SFU connection unhealthy. Didn't receive any healthcheck messages for ${this.unhealthyTimeoutInMs}ms`,

package/src/StreamVideoClient.ts

@@ -221,7 +221,10 @@ export class StreamVideoClient {
         if (event.type !== 'call.ring') return;
         const { call, members } = event;
         if (userToConnect.id === call.created_by.id) {
-          this.logger('warn', 'Received `call.ring` sent by the current user');
+          this.logger(
+            'debug',
+            'Received `call.ring` sent by the current user so ignoring the event',
+          );
           return;
         }
 

package/src/coordinator/connection/client.ts

@@ -162,20 +162,20 @@ export class StreamClient {
       : () => null;
   }
 
-  devToken(userID: string) {
+  devToken = (userID: string) => {
     return DevToken(userID);
-  }
+  };
 
-  getAuthType() {
+  getAuthType = () => {
     return this.anonymous ? 'anonymous' : 'jwt';
-  }
+  };
 
-  setBaseURL(baseURL: string) {
+  setBaseURL = (baseURL: string) => {
     this.baseURL = baseURL;
     this.wsBaseURL = this.baseURL
       .replace('http', 'ws')
       .replace(':3030', ':8800');
-  }
+  };
 
   _getConnectionID = () =>
     this.wsConnection?.connectionID || this.wsFallback?.connectionID;
@@ -282,7 +282,7 @@ export class StreamClient {
       isAnonymous,
     );
 
-  _setUser(user: UserWithId) {
+  _setUser = (user: UserWithId) => {
     /**
      * This one is used by the frontend. This is a copy of the current user object stored on backend.
      * It contains reserved properties and own user properties which are not present in `this._user`.
@@ -291,7 +291,7 @@ export class StreamClient {
     this.userID = user.id;
     // this one is actually used for requests. This is a copy of current user provided to `connectUser` function.
     this._user = { ...user };
-  }
+  };
 
   /**
    * Disconnects the websocket connection, without removing the user set on client.
@@ -423,10 +423,10 @@ export class StreamClient {
    *
    * @return {Function} Returns a function which, when called, unsubscribes the event handler.
    */
-  on(
+  on = (
     callbackOrEventName: EventHandler | string,
     callbackOrNothing?: EventHandler,
-  ) {
+  ) => {
     const key = callbackOrNothing ? (callbackOrEventName as string) : 'all';
     const callback = callbackOrNothing
       ? callbackOrNothing
@@ -439,16 +439,16 @@ export class StreamClient {
     return () => {
       this.off(key, callback);
     };
-  }
+  };
 
   /**
    * off - Remove the event handler
    *
    */
-  off(
+  off = (
     callbackOrEventName: EventHandler | string,
     callbackOrNothing?: EventHandler,
-  ) {
+  ) => {
     const key = callbackOrNothing ? (callbackOrEventName as string) : 'all';
     const callback = callbackOrNothing
       ? callbackOrNothing
@@ -461,23 +461,27 @@ export class StreamClient {
     this.listeners[key] = this.listeners[key].filter(
       (value) => value !== callback,
     );
-  }
+  };
 
-  _logApiRequest(
+  _logApiRequest = (
     type: string,
     url: string,
     data: unknown,
     config: AxiosRequestConfig & {
       config?: AxiosRequestConfig & { maxBodyLength?: number };
     },
-  ) {
+  ) => {
     this.logger('trace', `client: ${type} - Request - ${url}`, {
       payload: data,
       config,
     });
-  }
+  };
 
-  _logApiResponse<T>(type: string, url: string, response: AxiosResponse<T>) {
+  _logApiResponse = <T>(
+    type: string,
+    url: string,
+    response: AxiosResponse<T>,
+  ) => {
     this.logger(
       'trace',
       `client:${type} - Response - url: ${url} > status ${response.status}`,
@@ -488,14 +492,14 @@ export class StreamClient {
     this.logger('trace', `client:${type} - Response payload`, {
       response,
     });
-  }
+  };
 
-  _logApiError(type: string, url: string, error: unknown) {
+  _logApiError = (type: string, url: string, error: unknown) => {
     this.logger('error', `client:${type} - Error - url: ${url}`, {
       url,
       error,
     });
-  }
+  };
 
   doAxiosRequest = async <T, D = unknown>(
     type: string,
@@ -568,33 +572,33 @@ export class StreamClient {
     }
   };
 
-  get<T>(url: string, params?: AxiosRequestConfig['params']) {
+  get = <T>(url: string, params?: AxiosRequestConfig['params']) => {
     return this.doAxiosRequest<T, unknown>('get', url, null, {
       params,
     });
-  }
+  };
 
-  put<T, D = unknown>(url: string, data?: D) {
+  put = <T, D = unknown>(url: string, data?: D) => {
     return this.doAxiosRequest<T, D>('put', url, data);
-  }
+  };
 
-  post<T, D = unknown>(url: string, data?: D) {
+  post = <T, D = unknown>(url: string, data?: D) => {
     return this.doAxiosRequest<T, D>('post', url, data);
-  }
+  };
 
-  patch<T, D = unknown>(url: string, data?: D) {
+  patch = <T, D = unknown>(url: string, data?: D) => {
     return this.doAxiosRequest<T, D>('patch', url, data);
-  }
+  };
 
-  delete<T>(url: string, params?: AxiosRequestConfig['params']) {
+  delete = <T>(url: string, params?: AxiosRequestConfig['params']) => {
     return this.doAxiosRequest<T, unknown>('delete', url, null, {
       params,
     });
-  }
+  };
 
-  errorFromResponse(
+  errorFromResponse = (
     response: AxiosResponse<APIErrorResponse>,
-  ): ErrorFromResponse<APIErrorResponse> {
+  ): ErrorFromResponse<APIErrorResponse> => {
     let err: ErrorFromResponse<APIErrorResponse>;
     err = new ErrorFromResponse(`Stream error HTTP code: ${response.status}`);
     if (response.data && response.data.code) {
@@ -606,15 +610,15 @@ export class StreamClient {
     err.response = response;
     err.status = response.status;
     return err;
-  }
+  };
 
-  handleResponse<T>(response: AxiosResponse<T>) {
+  handleResponse = <T>(response: AxiosResponse<T>) => {
     const data = response.data;
     if (isErrorResponse(response)) {
       throw this.errorFromResponse(response);
     }
     return data;
-  }
+  };
 
   dispatchEvent = (event: StreamVideoEvent) => {
     if (!event.received_at) event.received_at = new Date();
@@ -650,7 +654,7 @@ export class StreamClient {
   /**
    * @private
    */
-  async connect() {
+  connect = async () => {
     if (!this.userID || !this._user) {
       throw Error(
         'Call connectUser or connectAnonymousUser before starting the connection',
@@ -716,14 +720,14 @@ export class StreamClient {
 
       throw err;
     }
-  }
+  };
 
   /**
    * Check the connectivity with server for warmup purpose.
    *
    * @private
    */
-  _sayHi() {
+  _sayHi = () => {
     const client_request_id = randomId();
     const opts = {
       headers: AxiosHeaders.from({
@@ -739,27 +743,27 @@ export class StreamClient {
         });
       }
     });
-  }
+  };
 
-  getUserAgent() {
+  getUserAgent = () => {
     return (
       this.userAgent ||
       `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${
         process.env.PKG_VERSION
       }`
     );
-  }
+  };
 
-  setUserAgent(userAgent: string) {
+  setUserAgent = (userAgent: string) => {
     this.userAgent = userAgent;
-  }
+  };
 
   /**
    * _isUsingServerAuth - Returns true if we're using server side auth
    */
   _isUsingServerAuth = () => !!this.secret;
 
-  _enrichAxiosOptions(
+  _enrichAxiosOptions = (
     options: AxiosRequestConfig & { config?: AxiosRequestConfig } & {
       publicEndpoint?: boolean;
     } = {
@@ -767,7 +771,7 @@ export class StreamClient {
       headers: {},
       config: {},
     },
-  ): AxiosRequestConfig {
+  ): AxiosRequestConfig => {
     const token =
       options.publicEndpoint && !this.user ? undefined : this._getToken();
     const authorization = token ? { Authorization: token } : undefined;
@@ -804,13 +808,13 @@ export class StreamClient {
       ...options.config,
       ...this.options.axiosRequestConfig,
     };
-  }
+  };
 
-  _getToken() {
+  _getToken = () => {
     if (!this.tokenManager) return null;
 
     return this.tokenManager.getToken();
-  }
+  };
 
   /**
    * encode ws url payload
@@ -828,9 +832,9 @@ export class StreamClient {
   /**
    * creates an abort controller that will be used by the next HTTP Request.
    */
-  createAbortControllerForNextRequest() {
+  createAbortControllerForNextRequest = () => {
     return (this.nextRequestAbortController = new AbortController());
-  }
+  };
 
   /**
    * createToken - Creates a token to authenticate this user. This function is used server side.
@@ -842,12 +846,12 @@ export class StreamClient {
    *
    * @return {string} Returns a token
    */
-  createToken(
+  createToken = (
     userID: string,
     exp?: number,
     iat?: number,
     call_cids?: string[],
-  ) {
+  ) => {
     if (this.secret == null) {
       throw Error(
         `tokens can only be created server-side using the API Secret`,
@@ -868,5 +872,5 @@ export class StreamClient {
     }
 
     return JWTUserToken(this.secret, userID, extra, {});
-  }
+  };
 }

package/src/coordinator/connection/connection.ts

@@ -105,11 +105,11 @@ export class StableWSConnection {
     addConnectionEventListeners(this.onlineStatusChanged);
   }
 
-  _log(msg: string, extra: UR = {}, level: LogLevel = 'info') {
+  _log = (msg: string, extra: UR = {}, level: LogLevel = 'info') => {
     this.client.logger(level, 'connection:' + msg, {
       ...extra,
     });
-  }
+  };
 
   setClient = (client: StreamClient) => {
     this.client = client;
@@ -475,7 +475,8 @@ export class StableWSConnection {
     if (event.type === 'offline') {
       // mark the connection as down
       this._log('onlineStatusChanged() - Status changing to offline');
-      this._setHealth(false);
+      // we know that the app is offline so dispatch the unhealthy connection event immediately
+      this._setHealth(false, true);
     } else if (event.type === 'online') {
       // retry right now...
       // We check this.isHealthy, not sure if it's always
@@ -628,14 +629,15 @@ export class StableWSConnection {
    * Broadcasts an event in case the connection status changed.
    *
    * @param {boolean} healthy boolean indicating if the connection is healthy or not
+   * @param {boolean} dispatchImmediately boolean indicating to dispatch event immediately even if the connection is unhealthy
    *
    */
-  _setHealth = (healthy: boolean) => {
+  _setHealth = (healthy: boolean, dispatchImmediately = false) => {
     if (healthy === this.isHealthy) return;
 
     this.isHealthy = healthy;
 
-    if (this.isHealthy) {
+    if (this.isHealthy || dispatchImmediately) {
       this.client.dispatchEvent({
         type: 'connection.changed',
         online: this.isHealthy,