@stream-io/video-client 0.5.11 → 0.6.1

package/dist/src/Call.d.ts

@@ -1,4 +1,4 @@
-import { Publisher, SfuEventKinds, SfuEventListener, Subscriber } from './rtc';
+import { Publisher, Subscriber } from './rtc';
 import { TrackType } from './gen/video/sfu/models/models';
 import { CallState } from './store';
 import { AcceptCallResponse, BlockUserResponse, EndCallResponse, GetCallResponse, GetOrCreateCallRequest, GetOrCreateCallResponse, GoLiveRequest, GoLiveResponse, ListRecordingsResponse, MuteUsersResponse, PinRequest, PinResponse, QueryMembersRequest, QueryMembersResponse, RejectCallResponse, RequestPermissionRequest, RequestPermissionResponse, SendEventResponse, SendReactionRequest, SendReactionResponse, StartHLSBroadcastingResponse, StartRecordingRequest, StartRecordingResponse, StopHLSBroadcastingResponse, StopLiveResponse, StopRecordingResponse, UnblockUserResponse, UnpinRequest, UnpinResponse, UpdateCallMembersRequest, UpdateCallMembersResponse, UpdateCallRequest, UpdateCallResponse, UpdateUserPermissionsRequest, UpdateUserPermissionsResponse } from './gen/coordinator';
@@ -7,7 +7,7 @@ import { VideoLayerSetting } from './gen/video/sfu/event/events';
 import { DynascaleManager } from './helpers/DynascaleManager';
 import { PermissionsContext } from './permissions';
 import { StreamClient } from './coordinator/connection/client';
-import { CallEventHandler, CallEventTypes, EventTypes, Logger } from './coordinator/connection/types';
+import { CallEventListener, Logger } from './coordinator/connection/types';
 import { CameraManager, MicrophoneManager, ScreenShareManager, SpeakerManager } from './devices';
 /**
  * An object representation of a `Call`.
@@ -97,21 +97,20 @@ export declare class Call {
     private registerEffects;
     /**
      * You can subscribe to WebSocket events provided by the API. To remove a subscription, call the `off` method.
-     * Please note that subscribing to WebSocket events is an advanced use-case, for most use-cases it should be enough to watch for changes in the [reactive state store](./StreamVideoClient.md/#readonlystatestore).
-     * @param eventName
-     * @param fn
-     * @returns a function which can be called to unsubscribe from the given event(s)
+     * Please note that subscribing to WebSocket events is an advanced use-case.
+     * For most use-cases, it should be enough to watch for state changes.
+     *
+     * @param eventName the event name.
+     * @param fn the event handler.
      */
-    on(eventName: SfuEventKinds, fn: SfuEventListener): () => void;
-    on(eventName: EventTypes, fn: CallEventHandler): () => void;
+    on: <E extends import("./coordinator/connection/types").EventTypes | import("./rtc").SfuEventKinds>(eventName: E, fn: CallEventListener<E>) => () => void;
     /**
      * Remove subscription for WebSocket events that were created by the `on` method.
-     * @param eventName
-     * @param fn
-     * @returns
+     *
+     * @param eventName the event name.
+     * @param fn the event handler.
      */
-    off(eventName: SfuEventKinds, fn: SfuEventListener): void;
-    off(eventName: CallEventTypes, fn: CallEventHandler): void;
+    off: <E extends import("./coordinator/connection/types").EventTypes | import("./rtc").SfuEventKinds>(eventName: E, fn: CallEventListener<E>) => void;
     /**
      * Leave the call and stop the media streams that were published by the call.
      */

package/dist/src/StreamVideoClient.d.ts

@@ -2,7 +2,7 @@ import { Call } from './Call';
 import { StreamClient } from './coordinator/connection/client';
 import { StreamVideoReadOnlyStateStore, StreamVideoWriteableStateStore } from './store';
 import type { ConnectedEvent, CreateDeviceRequest, CreateGuestRequest, CreateGuestResponse, GetEdgesResponse, ListDevicesResponse, QueryCallsRequest } from './gen/coordinator';
-import type { EventHandler, EventTypes, Logger, LogLevel, StreamClientOptions, TokenOrProvider, TokenProvider, User, UserWithId } from './coordinator/connection/types';
+import { ClientEventListener, Logger, LogLevel, StreamClientOptions, TokenOrProvider, TokenProvider, User, UserWithId } from './coordinator/connection/types';
 /**
  * A `StreamVideoClient` instance lets you communicate with our API, and authenticate users.
  */
@@ -60,14 +60,14 @@ export declare class StreamVideoClient {
      * @param callback the callback which will be called when the event is emitted.
      * @returns an unsubscribe function.
      */
-    on: (eventName: EventTypes, callback: EventHandler) => () => void;
+    on: <E extends import("./coordinator/connection/types").AllClientEventTypes>(eventName: E, callback: ClientEventListener<E>) => () => void;
     /**
      * Remove subscription for WebSocket events that were created by the `on` method.
      *
-     * @param event the event name.
+     * @param eventName the event name.
      * @param callback the callback which was passed to the `on` method.
      */
-    off: (event: string, callback: EventHandler) => void;
+    off: <E extends import("./coordinator/connection/types").AllClientEventTypes>(eventName: E, callback: ClientEventListener<E>) => void;
     /**
      * Creates a new call.
      *
@@ -125,7 +125,6 @@ export declare class StreamVideoClient {
      *
      * @param {string} id The device id
      * @param {string} [userID] The user id. Only specify this for serverside requests
-     *
      */
     removeDevice: (id: string, userID?: string) => Promise<unknown>;
     /**

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

@@ -1,10 +1,9 @@
 /// <reference types="node" />
 import { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
-import WebSocket from 'isomorphic-ws';
 import { StableWSConnection } from './connection';
 import { TokenManager } from './token_manager';
 import { WSConnectionFallback } from './connection_fallback';
-import { APIErrorResponse, ConnectAPIResponse, ErrorFromResponse, EventHandler, Logger, StreamClientOptions, StreamVideoEvent, TokenOrProvider, User, UserWithId } from './types';
+import { AllClientEventTypes, APIErrorResponse, ClientEventListener, ConnectAPIResponse, ErrorFromResponse, Logger, StreamClientOptions, StreamVideoEvent, TokenOrProvider, User, UserWithId } from './types';
 import { InsightMetrics } from './insights';
 import { CreateGuestResponse } from '../../gen/coordinator';
 export declare class StreamClient {
@@ -17,7 +16,7 @@ export declare class StreamClient {
     cleaningIntervalRef?: NodeJS.Timeout;
     clientID?: string;
     key: string;
-    listeners: Record<string, Array<(event: StreamVideoEvent) => void>>;
+    listeners: Partial<Record<AllClientEventTypes, ClientEventListener<any>[] | undefined>>;
     logger: Logger;
     private locationHint;
     node: boolean;
@@ -108,20 +107,17 @@ export declare class StreamClient {
      * on - Listen to events on all channels and users your watching
      *
      * client.on('message.new', event => {console.log("my new message", event, channel.state.messages)})
-     * or
-     * client.on(event => {console.log(event.type)})
      *
-     * @param {EventHandler | string} callbackOrEventName  The event type to listen for (optional)
-     * @param {EventHandler} [callbackOrNothing] The callback to call
+     * @param eventName The event type to listen for (optional)
+     * @param callback The callback to call
      *
-     * @return {Function} Returns a function which, when called, unsubscribes the event handler.
+     * @return  Returns a function which, when called, unsubscribes the event handler.
      */
-    on: (callbackOrEventName: EventHandler | string, callbackOrNothing?: EventHandler) => () => void;
+    on: <E extends AllClientEventTypes>(eventName: E, callback: ClientEventListener<E>) => () => void;
     /**
      * off - Remove the event handler
-     *
      */
-    off: (callbackOrEventName: EventHandler | string, callbackOrNothing?: EventHandler) => void;
+    off: <E extends AllClientEventTypes>(eventName: E, callback: ClientEventListener<E>) => void;
     _logApiRequest: (type: string, url: string, data: unknown, config: AxiosRequestConfig<any> & {
         config?: (AxiosRequestConfig<any> & {
             maxBodyLength?: number | undefined;
@@ -144,8 +140,6 @@ export declare class StreamClient {
     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
      */

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

@@ -1,6 +1,7 @@
 import { AxiosRequestConfig, AxiosResponse } from 'axios';
 import { StableWSConnection } from './connection';
 import { ConnectedEvent, UserRequest, VideoEvent } from '../../gen/coordinator';
+import { AllSfuEvents } from '../../rtc';
 export type UR = Record<string, unknown>;
 export type User = (Omit<UserRequest, 'role'> & {
     type?: 'authenticated';
@@ -55,10 +56,21 @@ export type StreamVideoEvent = (VideoEvent | ConnectionChangedEvent | TransportC
 export type StreamCallEvent = Extract<StreamVideoEvent, {
     call_cid: string;
 }>;
-export type EventHandler = (event: StreamVideoEvent) => void;
-export type CallEventHandler = (event: StreamCallEvent) => void;
-export type EventTypes = 'all' | StreamVideoEvent['type'];
-export type CallEventTypes = StreamCallEvent['type'];
+export type EventTypes = 'all' | VideoEvent['type'];
+export type AllClientEventTypes = 'all' | StreamVideoEvent['type'];
+export type AllClientEvents = {
+    [K in AllClientEventTypes]: Extract<StreamVideoEvent, {
+        type: K;
+    }>;
+};
+export type ClientEventListener<E extends keyof AllClientEvents> = (event: AllClientEvents[E]) => void;
+export type AllClientCallEvents = {
+    [K in EventTypes]: Extract<VideoEvent, {
+        type: K;
+    }>;
+};
+export type AllCallEvents = AllClientCallEvents & AllSfuEvents;
+export type CallEventListener<E extends keyof AllCallEvents> = (event: AllCallEvents[E]) => void;
 export type Logger = (logLevel: LogLevel, message: string, ...args: unknown[]) => void;
 export type StreamClientOptions = Partial<AxiosRequestConfig> & {
     /**

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

@@ -1,8 +1,10 @@
+import { Call } from '../Call';
 import { SpeakerState } from './SpeakerState';
 export declare class SpeakerManager {
     readonly state: SpeakerState;
     private subscriptions;
-    constructor();
+    private readonly call;
+    constructor(call: Call);
     /**
      * Lists the available audio output devices
      *
@@ -12,7 +14,7 @@ export declare class SpeakerManager {
      */
     listDevices(): import("rxjs").Observable<MediaDeviceInfo[]>;
     /**
-     * Select device
+     * Select a device.
      *
      * Note: this method is not supported in React Native
      *
@@ -22,9 +24,18 @@ export declare class SpeakerManager {
     removeSubscriptions: () => void;
     /**
      * Set the volume of the audio elements
-     * @param volume a number between 0 and 1
+     * @param volume a number between 0 and 1.
      *
      * 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.
+     *
+     * @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): void;
 }

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

@@ -1,8 +1,8 @@
 import { CallState } from '../store';
-import { SfuEvent } from '../gen/video/sfu/event/events';
+import type { CallGrantsUpdated } from '../gen/video/sfu/event/events';
 /**
  * Event handler that watches for `callGrantsUpdated` events.
  *
  * @param state the call state to update.
  */
-export declare const watchCallGrantsUpdated: (state: CallState) => (event: SfuEvent) => void;
+export declare const watchCallGrantsUpdated: (state: CallState) => (event: CallGrantsUpdated) => void;

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

@@ -1,16 +1,16 @@
-import { StreamVideoEvent } from '../coordinator/connection/types';
 import { Call } from '../Call';
+import type { CallAcceptedEvent, CallRejectedEvent } from '../gen/coordinator';
 /**
  * Event handler that watched the delivery of `call.accepted`.
  * Once the event is received, the call is joined.
  */
-export declare const watchCallAccepted: (call: Call) => (event: StreamVideoEvent) => Promise<void>;
+export declare const watchCallAccepted: (call: Call) => (event: CallAcceptedEvent) => Promise<void>;
 /**
  * Event handler that watches delivery of `call.rejected` Websocket event.
  * Once the event is received, the call is left.
  */
-export declare const watchCallRejected: (call: Call) => (event: StreamVideoEvent) => Promise<void>;
+export declare const watchCallRejected: (call: Call) => (event: CallRejectedEvent) => Promise<void>;
 /**
  * Event handler that watches the delivery of `call.ended` Websocket event.
  */
-export declare const watchCallEnded: (call: Call) => (event: StreamVideoEvent) => Promise<void>;
+export declare const watchCallEnded: (call: Call) => () => Promise<void>;

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

@@ -1,7 +1,7 @@
 import { Dispatcher } from '../rtc';
 import { Call } from '../Call';
 import { CallState } from '../store';
-import { SfuEvent } from '../gen/video/sfu/event/events';
+import type { PinsChanged } from '../gen/video/sfu/event/events';
 /**
  * An event responder which handles the `changePublishQuality` event.
  */
@@ -21,4 +21,4 @@ export declare const watchSfuErrorReports: (dispatcher: Dispatcher) => () => voi
  * Watches for `pinsUpdated` events and updates the pinned state of participants
  * in the call.
  */
-export declare const watchPinsUpdated: (state: CallState) => (e: SfuEvent) => void;
+export declare const watchPinsUpdated: (state: CallState) => (e: PinsChanged) => void;

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

@@ -1,20 +1,20 @@
-import { SfuEvent } from '../gen/video/sfu/event/events';
+import type { ParticipantJoined, ParticipantLeft, TrackPublished, TrackUnpublished } from '../gen/video/sfu/event/events';
 import { CallState } from '../store';
 /**
  * An event responder which handles the `participantJoined` event.
  */
-export declare const watchParticipantJoined: (state: CallState) => (e: SfuEvent) => void;
+export declare const watchParticipantJoined: (state: CallState) => (e: ParticipantJoined) => void;
 /**
  * An event responder which handles the `participantLeft` event.
  */
-export declare const watchParticipantLeft: (state: CallState) => (e: SfuEvent) => void;
+export declare const watchParticipantLeft: (state: CallState) => (e: ParticipantLeft) => void;
 /**
  * An event responder which handles the `trackPublished` event.
  * The SFU will send this event when a participant publishes a track.
  */
-export declare const watchTrackPublished: (state: CallState) => (e: SfuEvent) => void;
+export declare const watchTrackPublished: (state: CallState) => (e: TrackPublished) => void;
 /**
  * An event responder which handles the `trackUnpublished` event.
  * The SFU will send this event when a participant unpublishes a track.
  */
-export declare const watchTrackUnpublished: (state: CallState) => (e: SfuEvent) => void;
+export declare const watchTrackUnpublished: (state: CallState) => (e: TrackUnpublished) => void;

package/dist/src/rtc/Dispatcher.d.ts

@@ -1,13 +1,26 @@
-import { EventTypes } from '../coordinator/connection/types';
+import { CallEventListener, EventTypes } from '../coordinator/connection/types';
 import type { SfuEvent } from '../gen/video/sfu/event/events';
 export type SfuEventKinds = NonNullable<SfuEvent['eventPayload']['oneofKind']>;
+export type AllSfuEvents = {
+    [K in SfuEventKinds]: K extends keyof Extract<SfuEvent['eventPayload'], {
+        oneofKind: K;
+    }> ? Extract<SfuEvent['eventPayload'], {
+        oneofKind: K;
+    }>[K] : never;
+};
+export type DispatchableMessage<K extends SfuEventKinds> = {
+    eventPayload: {
+        oneofKind: K;
+    } & {
+        [Key in K]: AllSfuEvents[Key];
+    };
+};
 export declare const isSfuEvent: (eventName: SfuEventKinds | EventTypes) => eventName is SfuEventKinds;
-export type SfuEventListener = (event: SfuEvent) => void;
 export declare class Dispatcher {
-    private subscribers;
     private readonly logger;
-    dispatch: (message: SfuEvent) => void;
-    on: (eventName: SfuEventKinds, fn: SfuEventListener) => () => void;
-    off: (eventName: SfuEventKinds, fn: SfuEventListener) => void;
+    private subscribers;
+    dispatch: <K extends SfuEventKinds>(message: DispatchableMessage<K>) => void;
+    on: <E extends SfuEventKinds>(eventName: E, fn: CallEventListener<E>) => () => void;
+    off: <E extends SfuEventKinds>(eventName: E, fn: CallEventListener<E>) => void;
     offAll: (eventName?: SfuEventKinds) => void;
 }

package/dist/src/rtc/IceTrickleBuffer.d.ts

@@ -1,5 +1,5 @@
 import { ReplaySubject } from 'rxjs';
-import { ICETrickle } from '../gen/video/sfu/models/models';
+import { ICETrickle } from '../gen/video/sfu/event/events';
 /**
  * A buffer for ICE Candidates. Used for ICE Trickle:
  * - https://bloggeek.me/webrtcglossary/trickle-ice/
@@ -7,7 +7,6 @@ import { ICETrickle } from '../gen/video/sfu/models/models';
 export declare class IceTrickleBuffer {
     readonly subscriberCandidates: ReplaySubject<ICETrickle>;
     readonly publisherCandidates: ReplaySubject<ICETrickle>;
-    private logger?;
-    constructor();
+    private readonly logger;
     push: (iceTrickle: ICETrickle) => void;
 }

package/dist/src/rtc/signal.d.ts

@@ -1,6 +1,6 @@
 import WebSocket from 'isomorphic-ws';
-import { SfuEvent } from '../gen/video/sfu/event/events';
+import { DispatchableMessage, SfuEventKinds } from './Dispatcher';
 export declare const createWebSocketSignalChannel: (opts: {
     endpoint: string;
-    onMessage: (message: SfuEvent) => void;
+    onMessage: <K extends SfuEventKinds>(message: DispatchableMessage<K>) => void;
 }) => WebSocket;

package/dist/src/types.d.ts

@@ -64,6 +64,13 @@ export interface StreamVideoParticipant extends Participant {
      * The visibility state of the participant's tracks within a defined viewport.
      */
     viewportVisibilityState?: Record<VideoTrackType, VisibilityState>;
+    /**
+     * The volume of the participant's audio stream (from 0 to 1).
+     * Set it to `undefined` to use the default volume.
+     *
+     * Note: this value is not applicable in React Native.
+     */
+    audioVolume?: number;
 }
 export type VideoTrackType = 'videoTrack' | 'screenShareTrack';
 export type AudioTrackType = 'audioTrack' | 'screenShareAudioTrack';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "0.5.11",
+  "version": "0.6.1",
   "packageManager": "yarn@3.2.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -28,9 +28,9 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@protobuf-ts/runtime": "^2.9.1",
-    "@protobuf-ts/runtime-rpc": "^2.9.1",
-    "@protobuf-ts/twirp-transport": "^2.9.1",
+    "@protobuf-ts/runtime": "^2.9.3",
+    "@protobuf-ts/runtime-rpc": "^2.9.3",
+    "@protobuf-ts/twirp-transport": "^2.9.3",
     "@types/ws": "^8.5.7",
     "axios": "^1.6.0",
     "base64-js": "^1.5.1",

package/src/Call.ts

@@ -4,8 +4,6 @@ import {
   getGenericSdp,
   isSfuEvent,
   Publisher,
-  SfuEventKinds,
-  SfuEventListener,
   Subscriber,
 } from './rtc';
 import { muteTypeToTrackType } from './rtc/helpers/tracks';
@@ -108,10 +106,8 @@ import {
   sleep,
 } from './coordinator/connection/utils';
 import {
-  CallEventHandler,
-  CallEventTypes,
-  EventHandler,
-  EventTypes,
+  AllCallEvents,
+  CallEventListener,
   Logger,
   StreamCallEvent,
 } from './coordinator/connection/types';
@@ -222,7 +218,7 @@ export class Call {
   private readonly leaveCallHooks: Set<Function> = new Set();
 
   private readonly streamClientBasePath: string;
-  private streamClientEventHandlers = new Map<Function, CallEventHandler>();
+  private streamClientEventHandlers = new Map<Function, () => void>();
 
   /**
    * Constructs a new `Call` instance.
@@ -287,7 +283,7 @@ export class Call {
 
     this.camera = new CameraManager(this);
     this.microphone = new MicrophoneManager(this);
-    this.speaker = new SpeakerManager();
+    this.speaker = new SpeakerManager(this);
     this.screenShare = new ScreenShareManager(this);
   }
 
@@ -411,55 +407,54 @@ export class Call {
 
   /**
    * You can subscribe to WebSocket events provided by the API. To remove a subscription, call the `off` method.
-   * Please note that subscribing to WebSocket events is an advanced use-case, for most use-cases it should be enough to watch for changes in the [reactive state store](./StreamVideoClient.md/#readonlystatestore).
-   * @param eventName
-   * @param fn
-   * @returns a function which can be called to unsubscribe from the given event(s)
-   */
-  on(eventName: SfuEventKinds, fn: SfuEventListener): () => void;
-  on(eventName: EventTypes, fn: CallEventHandler): () => void;
-  on(
-    eventName: SfuEventKinds | EventTypes,
-    fn: SfuEventListener | CallEventHandler,
-  ) {
+   * Please note that subscribing to WebSocket events is an advanced use-case.
+   * For most use-cases, it should be enough to watch for state changes.
+   *
+   * @param eventName the event name.
+   * @param fn the event handler.
+   */
+  on = <E extends keyof AllCallEvents>(
+    eventName: E,
+    fn: CallEventListener<E>,
+  ) => {
     if (isSfuEvent(eventName)) {
-      return this.dispatcher.on(eventName, fn as SfuEventListener);
-    } else {
-      const eventHandler: CallEventHandler = (event: StreamCallEvent) => {
-        if (event.call_cid && event.call_cid === this.cid) {
-          (fn as EventHandler)(event);
-        }
-      };
-      this.streamClientEventHandlers.set(fn, eventHandler);
-
-      return this.streamClient.on(eventName, eventHandler as EventHandler);
+      return this.dispatcher.on(eventName, fn);
     }
-  }
+
+    const offHandler = this.streamClient.on(eventName, (e) => {
+      const event = e as StreamCallEvent;
+      if (event.call_cid && event.call_cid === this.cid) {
+        fn(event as AllCallEvents[E]);
+      }
+    });
+
+    // keep the 'off' reference returned by the stream client
+    this.streamClientEventHandlers.set(fn, offHandler);
+    return () => {
+      this.off(eventName, fn);
+    };
+  };
 
   /**
    * Remove subscription for WebSocket events that were created by the `on` method.
-   * @param eventName
-   * @param fn
-   * @returns
+   *
+   * @param eventName the event name.
+   * @param fn the event handler.
    */
-  off(eventName: SfuEventKinds, fn: SfuEventListener): void;
-  off(eventName: CallEventTypes, fn: CallEventHandler): void;
-  off(
-    eventName: SfuEventKinds | CallEventTypes,
-    fn: SfuEventListener | CallEventHandler,
-  ) {
+  off = <E extends keyof AllCallEvents>(
+    eventName: E,
+    fn: CallEventListener<E>,
+  ) => {
     if (isSfuEvent(eventName)) {
-      return this.dispatcher.off(eventName, fn as SfuEventListener);
-    } else {
-      const registeredEventHandler = this.streamClientEventHandlers.get(fn);
-      if (registeredEventHandler) {
-        return this.streamClient.off(
-          eventName,
-          registeredEventHandler as EventHandler,
-        );
-      }
+      return this.dispatcher.off(eventName, fn);
     }
-  }
+
+    // unsubscribe from the stream client event by using the 'off' reference
+    const registeredOffHandler = this.streamClientEventHandlers.get(fn);
+    if (registeredOffHandler) {
+      registeredOffHandler();
+    }
+  };
 
   /**
    * Leave the call and stop the media streams that were published by the call.
@@ -858,8 +853,7 @@ export class Call {
     sfuClient.signalReady.then(() => {
       // register a handler for the "goAway" event
       const unregisterGoAway = this.dispatcher.on('goAway', (event) => {
-        if (event.eventPayload.oneofKind !== 'goAway') return;
-        const { reason } = event.eventPayload.goAway;
+        const { reason } = event;
         this.logger(
           'info',
           `[Migration]: Going away from SFU... Reason: ${GoAwayReason[reason]}`,
@@ -1132,10 +1126,9 @@ export class Call {
   private waitForJoinResponse = (timeout: number = 5000) => {
     return new Promise<JoinResponse>((resolve, reject) => {
       const unsubscribe = this.on('joinResponse', (event) => {
-        if (event.eventPayload.oneofKind !== 'joinResponse') return;
         clearTimeout(timeoutId);
         unsubscribe();
-        resolve(event.eventPayload.joinResponse);
+        resolve(event);
       });
 
       const timeoutId = setTimeout(() => {

package/src/StreamSfuClient.ts

@@ -185,9 +185,7 @@ export class StreamSfuClient {
     // connection is established. In that case, those events (ICE candidates)
     // need to be buffered and later added to the appropriate PeerConnection
     // once the remoteDescription is known and set.
-    this.unsubscribeIceTrickle = dispatcher.on('iceTrickle', (e) => {
-      if (e.eventPayload.oneofKind !== 'iceTrickle') return;
-      const { iceTrickle } = e.eventPayload;
+    this.unsubscribeIceTrickle = dispatcher.on('iceTrickle', (iceTrickle) => {
       this.iceTrickleBuffer.push(iceTrickle);
     });
 

package/src/StreamVideoClient.ts

@@ -14,10 +14,9 @@ import type {
   QueryCallsRequest,
   QueryCallsResponse,
 } from './gen/coordinator';
-import type {
-  ConnectionChangedEvent,
-  EventHandler,
-  EventTypes,
+import {
+  AllClientEvents,
+  ClientEventListener,
   Logger,
   LogLevel,
   StreamClientOptions,
@@ -167,8 +166,7 @@ export class StreamVideoClient {
     }
 
     this.eventHandlersToUnregister.push(
-      this.on('connection.changed', (e) => {
-        const event = e as ConnectionChangedEvent;
+      this.on('connection.changed', (event) => {
         if (event.online) {
           const callsToReWatch = this.writeableStateStore.calls
             .filter((call) => call.watching)
@@ -197,7 +195,6 @@ export class StreamVideoClient {
 
     this.eventHandlersToUnregister.push(
       this.on('call.created', (event) => {
-        if (event.type !== 'call.created') return;
         const { call, members } = event;
         if (user.id === call.created_by.id) {
           this.logger(
@@ -222,7 +219,6 @@ export class StreamVideoClient {
 
     this.eventHandlersToUnregister.push(
       this.on('call.ring', async (event) => {
-        if (event.type !== 'call.ring') return;
         const { call, members } = event;
         if (user.id === call.created_by.id) {
           this.logger(
@@ -290,18 +286,24 @@ export class StreamVideoClient {
    * @param callback the callback which will be called when the event is emitted.
    * @returns an unsubscribe function.
    */
-  on = (eventName: EventTypes, callback: EventHandler) => {
+  on = <E extends keyof AllClientEvents>(
+    eventName: E,
+    callback: ClientEventListener<E>,
+  ) => {
     return this.streamClient.on(eventName, callback);
   };
 
   /**
    * Remove subscription for WebSocket events that were created by the `on` method.
    *
-   * @param event the event name.
+   * @param eventName the event name.
    * @param callback the callback which was passed to the `on` method.
    */
-  off = (event: string, callback: EventHandler) => {
-    return this.streamClient.off(event, callback);
+  off = <E extends keyof AllClientEvents>(
+    eventName: E,
+    callback: ClientEventListener<E>,
+  ) => {
+    return this.streamClient.off(eventName, callback);
   };
 
   /**
@@ -435,7 +437,6 @@ export class StreamVideoClient {
    *
    * @param {string} id The device id
    * @param {string} [userID] The user id. Only specify this for serverside requests
-   *
    */
   removeDevice = async (id: string, userID?: string) => {
     return await this.streamClient.delete('/devices', {