@stream-io/video-client 0.0.11 → 0.0.13

package/dist/src/StreamVideoClient.d.ts

@@ -2,7 +2,7 @@ import { Call } from './Call';
 import { StreamClient } from './coordinator/connection/client';
 import { StreamVideoReadOnlyStateStore } from './store';
 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';
+import type { EventHandler, EventTypes, StreamClientOptions, TokenOrProvider, TokenProvider, User } from './coordinator/connection/types';
 /**
  * A `StreamVideoClient` instance lets you communicate with our API, and authenticate users.
  */
@@ -11,6 +11,8 @@ export declare class StreamVideoClient {
      * A reactive store that exposes all the state variables in a reactive manner - you can subscribe to changes of the different state variables. Our library is built in a way that all state changes are exposed in this store, so all UI changes in your application should be handled by subscribing to these variables.
      */
     readonly readOnlyStateStore: StreamVideoReadOnlyStateStore;
+    readonly user?: User;
+    readonly token?: TokenOrProvider;
     private readonly writeableStateStore;
     streamClient: StreamClient;
     private eventHandlersToUnregister;
@@ -18,19 +20,24 @@ export declare class StreamVideoClient {
     private disconnectionPromise;
     /**
      * You should create only one instance of `StreamVideoClient`.
-     * @param apiKey your Stream API key
-     * @param opts the options for the client.
      */
     constructor(apiKey: string, opts?: StreamClientOptions);
+    constructor(args: {
+        apiKey: string;
+        options?: StreamClientOptions;
+        user?: User;
+        token?: string;
+        tokenProvider?: TokenProvider;
+    });
     /**
      * Connects the given user to the client.
      * Only one user can connect at a time, if you want to change users, call `disconnectUser` before connecting a new user.
      * If the connection is successful, the connected user [state variable](#readonlystatestore) will be updated accordingly.
      *
      * @param user the user to connect.
-     * @param tokenOrProvider a token or a function that returns a token.
+     * @param token a token or a function that returns a token.
      */
-    connectUser(user: User, token: TokenOrProvider): Promise<void | ConnectedEvent>;
+    connectUser(user?: User, token?: TokenOrProvider): Promise<void | ConnectedEvent>;
     /**
      * Disconnects the currently connected user from the client.
      *

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

@@ -38,6 +38,8 @@ export declare class StreamClient {
     rejectConnectionId: Function;
     connectionIdPromise: Promise<string | undefined>;
     private nextRequestAbortController;
+    private waitForConnectPromise?;
+    private resolveConnectPromise?;
     /**
      * Initialize a client.
      *
@@ -56,6 +58,10 @@ export declare class StreamClient {
     setBaseURL(baseURL: string): void;
     _getConnectionID: () => string | undefined;
     _hasConnectionID: () => boolean;
+    /**
+     * This will start a promise to hold API calls until `connectUser` is called, useful when user is set in `StreamVideoClient constructor`
+     */
+    startWaitingForConnection: () => void;
     /**
      * connectUser - Set the current user and open a WebSocket connection
      *

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

@@ -11,16 +11,6 @@ export declare class StreamVideoWriteableStateStore {
      * A list of {@link Call} objects created/tracked by this client.
      */
     callsSubject: BehaviorSubject<Call[]>;
-    /**
-     * A list of objects describing incoming calls.
-     * @deprecated derive from calls$ instead.
-     */
-    incomingCalls$: Observable<Call[]>;
-    /**
-     * A list of objects describing calls initiated by the current user (connectedUser).
-     * @deprecated derive from calls$ instead.
-     */
-    outgoingCalls$: Observable<Call[]>;
     constructor();
     /**
      * Gets the current value of an observable, or undefined if the observable has
@@ -78,16 +68,6 @@ export declare class StreamVideoWriteableStateStore {
      * @param id the id of the call to find.
      */
     findCall: (type: string, id: string) => Call | undefined;
-    /**
-     * A list of objects describing incoming calls.
-     * @deprecated derive from calls$ instead.
-     */
-    get incomingCalls(): Call[];
-    /**
-     * A list of objects describing calls initiated by the current user.
-     * @deprecated derive from calls$ instead.
-     */
-    get outgoingCalls(): Call[];
 }
 /**
  * A reactive store that exposes state variables in a reactive manner.
@@ -103,16 +83,6 @@ export declare class StreamVideoReadOnlyStateStore {
      * A list of {@link Call} objects created/tracked by this client.
      */
     calls$: Observable<Call[]>;
-    /**
-     * A list of objects describing calls initiated by the current user (connectedUser).
-     * @deprecated derive from calls$ instead.
-     */
-    outgoingCalls$: Observable<Call[]>;
-    /**
-     * A list of objects describing incoming calls.
-     * @deprecated derive from calls$ instead.
-     */
-    incomingCalls$: Observable<Call[]>;
     /**
      * This method allows you the get the current value of a state variable.
      *
@@ -129,14 +99,4 @@ export declare class StreamVideoReadOnlyStateStore {
      * A list of {@link Call} objects created/tracked by this client.
      */
     get calls(): Call[];
-    /**
-     * A list of objects describing incoming calls.
-     * @deprecated derive from calls$ instead.
-     */
-    get incomingCalls(): Call[];
-    /**
-     * A list of objects describing calls initiated by the current user.
-     * @deprecated derive from calls$ instead.
-     */
-    get outgoingCalls(): Call[];
 }

package/package.json

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

package/src/StreamVideoClient.ts

@@ -26,6 +26,7 @@ import type {
   EventTypes,
   StreamClientOptions,
   TokenOrProvider,
+  TokenProvider,
   User,
   UserWithId,
 } from './coordinator/connection/types';
@@ -38,6 +39,8 @@ export class StreamVideoClient {
    * A reactive store that exposes all the state variables in a reactive manner - you can subscribe to changes of the different state variables. Our library is built in a way that all state changes are exposed in this store, so all UI changes in your application should be handled by subscribing to these variables.
    */
   readonly readOnlyStateStore: StreamVideoReadOnlyStateStore;
+  readonly user?: User;
+  readonly token?: TokenOrProvider;
   private readonly writeableStateStore: StreamVideoWriteableStateStore;
   streamClient: StreamClient;
 
@@ -47,14 +50,44 @@ export class StreamVideoClient {
 
   /**
    * You should create only one instance of `StreamVideoClient`.
-   * @param apiKey your Stream API key
-   * @param opts the options for the client.
    */
-  constructor(apiKey: string, opts?: StreamClientOptions) {
-    this.streamClient = new StreamClient(apiKey, {
-      persistUserOnConnectionFailure: true,
-      ...opts,
-    });
+  constructor(apiKey: string, opts?: StreamClientOptions);
+  constructor(args: {
+    apiKey: string;
+    options?: StreamClientOptions;
+    user?: User;
+    token?: string;
+    tokenProvider?: TokenProvider;
+  });
+  constructor(
+    apiKeyOrArgs:
+      | string
+      | {
+          apiKey: string;
+          options?: StreamClientOptions;
+          user?: User;
+          token?: string;
+          tokenProvider?: TokenProvider;
+        },
+    opts?: StreamClientOptions,
+  ) {
+    if (typeof apiKeyOrArgs === 'string') {
+      this.streamClient = new StreamClient(apiKeyOrArgs, {
+        persistUserOnConnectionFailure: true,
+        ...opts,
+      });
+    } else {
+      this.streamClient = new StreamClient(apiKeyOrArgs.apiKey, {
+        persistUserOnConnectionFailure: true,
+        ...apiKeyOrArgs.options,
+      });
+
+      this.user = apiKeyOrArgs.user;
+      this.token = apiKeyOrArgs.token || apiKeyOrArgs.tokenProvider;
+      if (this.user) {
+        this.streamClient.startWaitingForConnection();
+      }
+    }
 
     this.writeableStateStore = new StreamVideoWriteableStateStore();
     this.readOnlyStateStore = new StreamVideoReadOnlyStateStore(
@@ -68,27 +101,32 @@ export class StreamVideoClient {
    * If the connection is successful, the connected user [state variable](#readonlystatestore) will be updated accordingly.
    *
    * @param user the user to connect.
-   * @param tokenOrProvider a token or a function that returns a token.
+   * @param token a token or a function that returns a token.
    */
   async connectUser(
-    user: User,
-    token: TokenOrProvider,
+    user?: User,
+    token?: TokenOrProvider,
   ): Promise<void | ConnectedEvent> {
-    if (user.type === 'anonymous') {
-      user.id = '!anon';
-      return this.connectAnonymousUser(user as UserWithId, token);
+    const userToConnect = user || this.user;
+    const tokenToUse = token || this.token;
+    if (!userToConnect) {
+      throw new Error('Connect user is called without user');
     }
-    if (user.type === 'guest') {
+    if (userToConnect.type === 'anonymous') {
+      userToConnect.id = '!anon';
+      return this.connectAnonymousUser(userToConnect as UserWithId, tokenToUse);
+    }
+    if (userToConnect.type === 'guest') {
       const response = await this.createGuestUser({
         user: {
-          ...user,
+          ...userToConnect,
           role: 'guest',
         },
       });
       return this.connectUser(response.user, response.access_token);
     }
     const connectUser = () => {
-      return this.streamClient.connectUser(user, token);
+      return this.streamClient.connectUser(userToConnect, tokenToUse);
     };
     this.connectionPromise = this.disconnectionPromise
       ? this.disconnectionPromise.then(() => connectUser())
@@ -128,7 +166,7 @@ export class StreamVideoClient {
       this.on('call.created', (event) => {
         if (event.type !== 'call.created') return;
         const { call, members } = event;
-        if (user.id === call.created_by.id) {
+        if (userToConnect.id === call.created_by.id) {
           console.warn('Received `call.created` sent by the current user');
           return;
         }
@@ -150,29 +188,27 @@ export class StreamVideoClient {
       this.on('call.ring', async (event) => {
         if (event.type !== 'call.ring') return;
         const { call, members } = event;
-        if (user.id === call.created_by.id) {
+        if (userToConnect.id === call.created_by.id) {
           console.warn('Received `call.ring` sent by the current user');
           return;
         }
 
         // The call might already be tracked by the client,
         // if `call.created` was received before `call.ring`.
-        // In that case, we just reuse the already tracked call.
-        let theCall = this.writeableStateStore.findCall(call.type, call.id);
-        if (!theCall) {
-          // otherwise, we create a new call
-          theCall = new Call({
-            streamClient: this.streamClient,
-            type: call.type,
-            id: call.id,
-            members,
-            clientStore: this.writeableStateStore,
-            ringing: true,
-          });
-        }
-
+        // In that case, we cleanup the already tracked call.
+        const prevCall = this.writeableStateStore.findCall(call.type, call.id);
+        await prevCall?.leave();
+        // we create a new call
+        const theCall = new Call({
+          streamClient: this.streamClient,
+          type: call.type,
+          id: call.id,
+          members,
+          clientStore: this.writeableStateStore,
+          ringing: true,
+        });
         // we fetch the latest metadata for the call from the server
-        await theCall.get({ ring: true });
+        await theCall.get();
         this.writeableStateStore.registerCall(theCall);
       }),
     );
@@ -189,6 +225,9 @@ export class StreamVideoClient {
    *                https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent
    */
   disconnectUser = async (timeout?: number) => {
+    if (!this.streamClient.user) {
+      return;
+    }
     const disconnectUser = () => this.streamClient.disconnectUser(timeout);
     this.disconnectionPromise = this.connectionPromise
       ? this.connectionPromise.then(() => disconnectUser())

package/src/coordinator/connection/client.ts

@@ -67,6 +67,8 @@ export class StreamClient {
   rejectConnectionId!: Function;
   connectionIdPromise: Promise<string | undefined>;
   private nextRequestAbortController: AbortController | null = null;
+  private waitForConnectPromise?: Promise<void>;
+  private resolveConnectPromise?: Function;
 
   /**
    * Initialize a client.
@@ -180,6 +182,15 @@ export class StreamClient {
 
   _hasConnectionID = () => Boolean(this._getConnectionID());
 
+  /**
+   * This will start a promise to hold API calls until `connectUser` is called, useful when user is set in `StreamVideoClient constructor`
+   */
+  startWaitingForConnection = () => {
+    this.waitForConnectPromise = new Promise((resolve) => {
+      this.resolveConnectPromise = resolve;
+    });
+  };
+
   /**
    * connectUser - Set the current user and open a WebSocket connection
    *
@@ -239,6 +250,12 @@ export class StreamClient {
       (result) => result[1], // We only return connection promise;
     );
 
+    if (this.resolveConnectPromise) {
+      this.resolveConnectPromise();
+      this.waitForConnectPromise = undefined;
+      this.resolveConnectPromise = undefined;
+    }
+
     try {
       return await this.setUserPromise;
     } catch (err) {
@@ -387,6 +404,12 @@ export class StreamClient {
   ) => {
     this.anonymous = true;
     await this._setToken(user, tokenOrProvider, this.anonymous);
+
+    if (this.resolveConnectPromise) {
+      this.resolveConnectPromise();
+      this.waitForConnectPromise = undefined;
+      this.resolveConnectPromise = undefined;
+    }
     this._setUser(user);
     // some endpoints require a connection_id to be resolved.
     // as anonymous users aren't allowed to open WS connections, we just
@@ -496,6 +519,9 @@ export class StreamClient {
     } & { publicEndpoint?: boolean } = {},
   ): Promise<T> => {
     if (!options.publicEndpoint || this.user) {
+      if (this.waitForConnectPromise) {
+        await this.waitForConnectPromise;
+      }
       await this.tokenManager.tokenReady();
     }
     const requestConfig = this._enrichAxiosOptions(options);

package/src/store/stateStore.ts

@@ -1,10 +1,8 @@
 import { BehaviorSubject, Observable } from 'rxjs';
-import { combineLatestWith, map } from 'rxjs/operators';
 import type { Patch } from './rxUtils';
 import * as RxUtils from './rxUtils';
 import { Call } from '../Call';
 import type { OwnUserResponse } from '../coordinator/connection/types';
-import { CallingState } from './CallState';
 
 export class StreamVideoWriteableStateStore {
   /**
@@ -19,18 +17,6 @@ export class StreamVideoWriteableStateStore {
    */
   callsSubject = new BehaviorSubject<Call[]>([]);
 
-  /**
-   * A list of objects describing incoming calls.
-   * @deprecated derive from calls$ instead.
-   */
-  incomingCalls$: Observable<Call[]>;
-
-  /**
-   * A list of objects describing calls initiated by the current user (connectedUser).
-   * @deprecated derive from calls$ instead.
-   */
-  outgoingCalls$: Observable<Call[]>;
-
   constructor() {
     this.connectedUserSubject.subscribe(async (user) => {
       // leave all calls when the user disconnects.
@@ -40,32 +26,6 @@ export class StreamVideoWriteableStateStore {
         }
       }
     });
-
-    this.incomingCalls$ = this.callsSubject.pipe(
-      combineLatestWith(this.connectedUserSubject),
-      map(([calls, connectedUser]) =>
-        calls.filter((call) => {
-          const { metadata, callingState } = call.state;
-          return (
-            metadata?.created_by.id !== connectedUser?.id &&
-            callingState === CallingState.RINGING
-          );
-        }),
-      ),
-    );
-
-    this.outgoingCalls$ = this.callsSubject.pipe(
-      combineLatestWith(this.connectedUserSubject),
-      map(([calls, connectedUser]) =>
-        calls.filter((call) => {
-          const { metadata, callingState } = call.state;
-          return (
-            metadata?.created_by.id === connectedUser?.id &&
-            callingState === CallingState.RINGING
-          );
-        }),
-      ),
-    );
   }
 
   /**
@@ -148,22 +108,6 @@ export class StreamVideoWriteableStateStore {
   findCall = (type: string, id: string) => {
     return this.calls.find((c) => c.type === type && c.id === id);
   };
-
-  /**
-   * A list of objects describing incoming calls.
-   * @deprecated derive from calls$ instead.
-   */
-  get incomingCalls(): Call[] {
-    return this.getCurrentValue(this.incomingCalls$);
-  }
-
-  /**
-   * A list of objects describing calls initiated by the current user.
-   * @deprecated derive from calls$ instead.
-   */
-  get outgoingCalls(): Call[] {
-    return this.getCurrentValue(this.outgoingCalls$);
-  }
 }
 
 /**
@@ -182,18 +126,6 @@ export class StreamVideoReadOnlyStateStore {
    */
   calls$: Observable<Call[]>;
 
-  /**
-   * A list of objects describing calls initiated by the current user (connectedUser).
-   * @deprecated derive from calls$ instead.
-   */
-  outgoingCalls$: Observable<Call[]>;
-
-  /**
-   * A list of objects describing incoming calls.
-   * @deprecated derive from calls$ instead.
-   */
-  incomingCalls$: Observable<Call[]>;
-
   /**
    * This method allows you the get the current value of a state variable.
    *
@@ -206,10 +138,6 @@ export class StreamVideoReadOnlyStateStore {
     // convert and expose subjects as observables
     this.connectedUser$ = store.connectedUserSubject.asObservable();
     this.calls$ = store.callsSubject.asObservable();
-
-    // re-expose observables
-    this.incomingCalls$ = store.incomingCalls$;
-    this.outgoingCalls$ = store.outgoingCalls$;
   }
 
   /**
@@ -225,20 +153,4 @@ export class StreamVideoReadOnlyStateStore {
   get calls(): Call[] {
     return RxUtils.getCurrentValue(this.calls$);
   }
-
-  /**
-   * A list of objects describing incoming calls.
-   * @deprecated derive from calls$ instead.
-   */
-  get incomingCalls(): Call[] {
-    return RxUtils.getCurrentValue(this.incomingCalls$);
-  }
-
-  /**
-   * A list of objects describing calls initiated by the current user.
-   * @deprecated derive from calls$ instead.
-   */
-  get outgoingCalls(): Call[] {
-    return RxUtils.getCurrentValue(this.outgoingCalls$);
-  }
 }