@stream-io/video-client 0.0.6 → 0.0.8

package/dist/src/Call.d.ts

@@ -30,6 +30,12 @@ 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/StreamVideoClient.d.ts

@@ -1,7 +1,7 @@
 import { Call } from './Call';
 import { StreamClient } from './coordinator/connection/client';
 import { StreamVideoReadOnlyStateStore } from './store';
-import type { CreateCallTypeRequest, CreateCallTypeResponse, CreateDeviceRequest, CreateGuestRequest, CreateGuestResponse, GetCallTypeResponse, GetEdgesResponse, ListCallTypeResponse, ListDevicesResponse, QueryCallsRequest, UpdateCallTypeRequest, UpdateCallTypeResponse } from './gen/coordinator';
+import type { ConnectedEvent, CreateCallTypeRequest, CreateCallTypeResponse, CreateDeviceRequest, CreateGuestRequest, CreateGuestResponse, GetCallTypeResponse, GetEdgesResponse, ListCallTypeResponse, ListDevicesResponse, QueryCallsRequest, UpdateCallTypeRequest, UpdateCallTypeResponse } from './gen/coordinator';
 import type { EventHandler, EventTypes, StreamClientOptions, TokenOrProvider, User } from './coordinator/connection/types';
 /**
  * A `StreamVideoClient` instance lets you communicate with our API, and authenticate users.
@@ -14,6 +14,8 @@ export declare class StreamVideoClient {
     private readonly writeableStateStore;
     streamClient: StreamClient;
     private eventHandlersToUnregister;
+    private connectionPromise;
+    private disconnectionPromise;
     /**
      * You should create only one instance of `StreamVideoClient`.
      * @param apiKey your Stream API key
@@ -28,14 +30,14 @@ export declare class StreamVideoClient {
      * @param user the user to connect.
      * @param tokenOrProvider a token or a function that returns a token.
      */
-    connectUser: (user: User, tokenOrProvider: TokenOrProvider) => Promise<void | import("./gen/coordinator").ConnectedEvent>;
+    connectUser: (user: User, tokenOrProvider: TokenOrProvider) => Promise<void | ConnectedEvent>;
     /**
      * Connects the given anonymous user to the client.
      *
      * @param user the user to connect.
      * @param tokenOrProvider a token or a function that returns a token.
      */
-    connectAnonymousUser: (user: User, tokenOrProvider: TokenOrProvider) => Promise<void>;
+    connectAnonymousUser: (user: User, tokenOrProvider: TokenOrProvider) => Promise<void | ConnectedEvent>;
     /**
      * Disconnects the currently connected user from the client.
      *

package/package.json

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

package/src/Call.ts

@@ -135,6 +135,16 @@ 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.
@@ -370,6 +380,7 @@ 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.
@@ -642,7 +653,7 @@ export class Call {
       await sleep(retryInterval(this.reconnectAttempts));
       await this.join(data);
       console.log(`Rejoin: ${this.reconnectAttempts} successful!`);
-      if (localParticipant) {
+      if (localParticipant && !isReactNative()) {
         const {
           audioStream,
           videoStream,
@@ -657,6 +668,8 @@ export class Call {
       console.log(`Rejoin: state restored ${this.reconnectAttempts}`);
     };
 
+    this.rejoinPromise = rejoin;
+
     // reconnect if the connection was closed unexpectedly. example:
     // - SFU crash or restart
     // - network change
@@ -667,6 +680,8 @@ export class Call {
         // do nothing if the connection was closed because of a policy violation
         // e.g., the user has been blocked by an admin or moderator
         if (e.code === KnownCodes.WS_POLICY_VIOLATION) return;
+        // do nothing for react-native as its handled by SDK
+        if (isReactNative()) return;
         if (this.reconnectAttempts < this.maxReconnectAttempts) {
           rejoin().catch(() => {
             console.log(

package/src/StreamVideoClient.ts

@@ -5,6 +5,7 @@ import {
   StreamVideoWriteableStateStore,
 } from './store';
 import type {
+  ConnectedEvent,
   CreateCallTypeRequest,
   CreateCallTypeResponse,
   CreateDeviceRequest,
@@ -40,6 +41,8 @@ export class StreamVideoClient {
   streamClient: StreamClient;
 
   private eventHandlersToUnregister: Array<() => void> = [];
+  private connectionPromise: Promise<void | ConnectedEvent> | undefined;
+  private disconnectionPromise: Promise<void> | undefined;
 
   /**
    * You should create only one instance of `StreamVideoClient`.
@@ -67,11 +70,19 @@ export class StreamVideoClient {
    * @param tokenOrProvider a token or a function that returns a token.
    */
   connectUser = async (user: User, tokenOrProvider: TokenOrProvider) => {
-    const connectUserResponse = await this.streamClient.connectUser(
-      // @ts-expect-error
-      user,
-      tokenOrProvider,
-    );
+    const connectUser = () => {
+      return this.streamClient.connectUser(
+        // @ts-expect-error
+        user,
+        tokenOrProvider,
+      );
+    };
+    this.connectionPromise = this.disconnectionPromise
+      ? this.disconnectionPromise.then(() => connectUser())
+      : connectUser();
+
+    this.connectionPromise?.finally(() => (this.connectionPromise = undefined));
+    const connectUserResponse = await this.connectionPromise;
     this.writeableStateStore.setConnectedUser(user);
 
     this.eventHandlersToUnregister.push(
@@ -163,8 +174,14 @@ export class StreamVideoClient {
     user: User,
     tokenOrProvider: TokenOrProvider,
   ) => {
-    // @ts-expect-error
-    return this.streamClient.connectAnonymousUser(user, tokenOrProvider);
+    const connectAnonymousUser = () =>
+      // @ts-expect-error
+      this.streamClient.connectAnonymousUser(user, tokenOrProvider);
+    this.connectionPromise = this.disconnectionPromise
+      ? this.disconnectionPromise.then(() => connectAnonymousUser())
+      : connectAnonymousUser();
+    this.connectionPromise.finally(() => (this.connectionPromise = undefined));
+    return this.connectionPromise;
   };
 
   /**
@@ -176,7 +193,14 @@ export class StreamVideoClient {
    *                https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent
    */
   disconnectUser = async (timeout?: number) => {
-    await this.streamClient.disconnectUser(timeout);
+    const disconnectUser = () => this.streamClient.disconnectUser(timeout);
+    this.disconnectionPromise = this.connectionPromise
+      ? this.connectionPromise.then(() => disconnectUser())
+      : disconnectUser();
+    this.disconnectionPromise.finally(
+      () => (this.disconnectionPromise = undefined),
+    );
+    await this.disconnectionPromise;
     this.eventHandlersToUnregister.forEach((unregister) => unregister());
     this.eventHandlersToUnregister = [];
     this.writeableStateStore.setConnectedUser(undefined);

package/src/rtc/signal.ts

@@ -9,15 +9,15 @@ export const createWebSocketSignalChannel = (opts: {
   ws.binaryType = 'arraybuffer'; // do we need this?
 
   ws.addEventListener('error', (e) => {
-    console.error('Error', e);
+    console.log('Signaling WS channel error', e);
   });
 
   ws.addEventListener('close', (e) => {
-    console.warn('Signalling channel is closed', e);
+    console.log('Signaling WS channel is closed', e);
   });
 
   ws.addEventListener('open', (e) => {
-    console.log('Signalling channel is open', e);
+    console.log('Signaling WS channel is open', e);
   });
 
   if (onMessage) {