@100mslive/react-native-hms 1.5.0 → 1.6.1

package/src/classes/HMSSDK.tsx

@@ -25,10 +25,8 @@ import type { HMSAudioMixingMode } from './HMSAudioMixingMode';
 import type { HMSLogSettings } from './HMSLogSettings';
 import { HMSMessageType } from './HMSMessageType';
 import { HMSPIPListenerActions } from './HMSPIPListenerActions';
-import {
-  type HMSEventSubscription,
-  HMSNativeEventEmitter,
-} from './HMSNativeEventEmitter';
+import type { HMSEventSubscription } from './HMSNativeEventEmitter';
+import { HMSNativeEventEmitter } from './HMSNativeEventEmitter';
 import {
   clearHmsPeersCache,
   getHmsPeersCache,
@@ -42,6 +40,7 @@ import {
   setHmsRoomCache,
 } from './HMSRoomCache';
 import { HMSPeerUpdateOrdinals } from './HMSPeerUpdate';
+import { HMSSessionStore } from './HMSSessionStore';
 
 type HmsViewProps = Omit<HmsComponentProps, 'id'>;
 
@@ -89,6 +88,7 @@ export class HMSSDK {
   private onRemoteAudioStatsDelegate?: any;
   private onRemoteVideoStatsDelegate?: any;
   private onAudioDeviceChangedDelegate?: any;
+  private onSessionStoreAvailableDelegate?: any;
   private onPIPRoomLeaveDelegate?: any;
 
   private emitterSubscriptions: Partial<
@@ -1058,6 +1058,12 @@ export class HMSSDK {
     }
   };
 
+  /**
+   * @deprecated Older SessionMetaData APIs has been deprecated in favour of newer Session Store APIs.
+   * You can subscribe to `ON_SESSION_STORE_AVAILABLE` event to get notified when the `HMSSessionStore`
+   * is available and use `set` method on `HMSSessionStore` instance
+   * checkout {@link https://www.100ms.live/docs/react-native/v2/how-to-guides/}
+   */
   setSessionMetaData = async (sessionMetaData: string | null) => {
     logger?.verbose('#Function setSessionMetaData', {
       id: this.id,
@@ -1069,6 +1075,12 @@ export class HMSSDK {
     });
   };
 
+  /**
+   * @deprecated Older SessionMetaData APIs has been deprecated in favour of newer Session Store APIs.
+   * You can subscribe to `ON_SESSION_STORE_AVAILABLE` event to get notified when the `HMSSessionStore`
+   * is available and use `get` or `addKeyChangeListener` method on `HMSSessionStore` instance
+   * checkout {@link https://www.100ms.live/docs/react-native/v2/how-to-guides/}
+   */
   getSessionMetaData = async () => {
     logger?.verbose('#Function getSessionMetaData', {
       id: this.id,
@@ -1470,6 +1482,27 @@ export class HMSSDK {
         this.onAudioDeviceChangedDelegate = callback;
         break;
       }
+      case HMSUpdateListenerActions.ON_SESSION_STORE_AVAILABLE: {
+        // Checking if we already have ON_SESSION_STORE_AVAILABLE subscription
+        if (
+          !this.emitterSubscriptions[
+            HMSUpdateListenerActions.ON_SESSION_STORE_AVAILABLE
+          ]
+        ) {
+          // Adding ON_SESSION_STORE_AVAILABLE native listener
+          const sessionStoreAvailableSubscription = HmsEventEmitter.addListener(
+            this.id,
+            HMSUpdateListenerActions.ON_SESSION_STORE_AVAILABLE,
+            this.onSessionStoreAvailableListener
+          );
+          this.emitterSubscriptions[
+            HMSUpdateListenerActions.ON_SESSION_STORE_AVAILABLE
+          ] = sessionStoreAvailableSubscription;
+        }
+        // Adding Session Store Available App Delegate listener
+        this.onSessionStoreAvailableDelegate = callback;
+        break;
+      }
       case HMSPIPListenerActions.ON_PIP_ROOM_LEAVE: {
         if (Platform.OS === 'android') {
           // Checking if we already have ON_PIP_ROOM_LEAVE subscription
@@ -1796,6 +1829,23 @@ export class HMSSDK {
         this.onAudioDeviceChangedDelegate = null;
         break;
       }
+      case HMSUpdateListenerActions.ON_SESSION_STORE_AVAILABLE: {
+        const subscription =
+          this.emitterSubscriptions[
+            HMSUpdateListenerActions.ON_SESSION_STORE_AVAILABLE
+          ];
+        // Removing ON_SESSION_STORE_AVAILABLE native listener
+        if (subscription) {
+          subscription.remove();
+
+          this.emitterSubscriptions[
+            HMSUpdateListenerActions.ON_SESSION_STORE_AVAILABLE
+          ] = undefined;
+        }
+        // Removing App Delegate listener
+        this.onSessionStoreAvailableDelegate = null;
+        break;
+      }
       case HMSPIPListenerActions.ON_PIP_ROOM_LEAVE: {
         if (Platform.OS === 'android') {
           const subscription =
@@ -2212,6 +2262,22 @@ export class HMSSDK {
     }
   };
 
+  onSessionStoreAvailableListener = (data: { id: string }) => {
+    if (data.id !== this.id) {
+      return;
+    }
+    if (this.onSessionStoreAvailableDelegate) {
+      logger?.verbose(
+        '#Listener ON_SESSION_STORE_AVAILABLE_LISTENER_CALL',
+        data
+      );
+      this.onSessionStoreAvailableDelegate({
+        ...data,
+        sessionStore: new HMSSessionStore(),
+      });
+    }
+  };
+
   onPIPRoomLeaveListener = (data: { id: string }) => {
     if (data.id !== this.id) {
       return;

package/src/classes/HMSSessionStore.ts

@@ -0,0 +1,209 @@
+import {
+  NativeModules,
+  DeviceEventEmitter,
+  EmitterSubscription as RNEmitterSubscription,
+} from 'react-native';
+import { HMSConstants } from './HMSConstants';
+import { getLogger } from './HMSLogger';
+import { HMSUpdateListenerActions } from './HMSUpdateListenerActions';
+import { EventEmitter } from '../utils';
+import type { EmitterSubscription } from '../utils';
+
+const { HMSManager } = NativeModules;
+
+type Nullable<T> = T | null | undefined;
+
+export type HMSSessionStoreValue = Nullable<string>;
+
+/**
+ * Session store is a shared realtime key-value store that is accessible by everyone in the room.
+ * It can be utilized to implement features such as pinned text, spotlight (which brings a particular
+ * peer to the center stage for everyone in the room) and more.
+ *
+ * To get an instance of `HMSSessionStore` class, You can add an event listener for `ON_SESSION_STORE_AVAILABLE`
+ * event on the `HMSSDK` instance
+ *
+ * For example:
+ * ```
+ * hmsInstance.addEventListener(HMSUpdateListenerActions.ON_SESSION_STORE_AVAILABLE, <your callback function>);
+ * ```
+ *
+ * Checkout Session Store docs fore more details ${@link https://www.100ms.live/docs/react-native/v2/how-to-guides/interact-with-room/room/session-store}
+ */
+export class HMSSessionStore {
+  private _deviceEventEmitterSubscription?: RNEmitterSubscription;
+  private _eventEmitter?: EventEmitter;
+  private _addedKeyChangeListenerCount = 0;
+
+  /**
+   * This method sets a value for a specific key on session store.
+   * Once a value is assigned, it will be available for other peers in the room
+   * who are listening for changes in value for that specific key.
+   *
+   * @param {HMSSessionStoreValue} value
+   * @param {string} key
+   * @returns {Promise}
+   */
+  async set(value: HMSSessionStoreValue, key: string) {
+    const data: { success: true; finalValue: HMSSessionStoreValue } =
+      await HMSManager.setSessionMetadataForKey({
+        id: HMSConstants.DEFAULT_SDK_ID,
+        key,
+        value,
+      });
+    return data;
+  }
+
+  /**
+   * This method returns the value of any specified key on session store.
+   * Note that you will not get updates for any change in value of the specified key,
+   * It returns the latest value at the time it was called.
+   *
+   * To listen to value change updates use `addKeyChangeListener` method instead.
+   *
+   * @param {string} key
+   * @returns {Promise}
+   */
+  async get(key: string) {
+    const data: HMSSessionStoreValue =
+      await HMSManager.getSessionMetadataForKey({
+        id: HMSConstants.DEFAULT_SDK_ID,
+        key,
+      });
+    return data;
+  }
+
+  /**
+   * This method registers a callback function for listening to value changes of a particular key.
+   * Registered Callback function will be called initially with latest value and whenever the value updates
+   *
+   * @param {string[]} forKeys
+   * @param {Function} callback
+   * @returns {Object} subscription object
+   */
+  addKeyChangeListener<T extends string[]>(
+    forKeys: T,
+    callback: (
+      error: string | null,
+      data: { key: T[number]; value: HMSSessionStoreValue } | null
+    ) => void
+  ) {
+    // Add Native Device Event Emitter if it is not already added
+    if (!this._deviceEventEmitterSubscription) {
+      this._deviceEventEmitterSubscription = DeviceEventEmitter.addListener(
+        HMSUpdateListenerActions.ON_SESSION_STORE_CHANGED,
+        this._deviceEventEmitterListener.bind(this)
+      );
+    }
+
+    // Create JS side EventEmitter
+    if (!this._eventEmitter) {
+      this._eventEmitter = new EventEmitter();
+    }
+
+    // Unique Identifier for adding native event listener
+    const uniqueId = forKeys.join('') + '_' + Date.now().toString();
+
+    const eventEmitter = this._eventEmitter;
+
+    // Add listeners on eventEmitter for each key
+    const subscriptions = forKeys.map((key) =>
+      eventEmitter.addListener(key, callback, { uniqueId })
+    );
+
+    //
+    let cleanupHandler: (() => void) | null = () => {
+      this._cleanup(subscriptions);
+    };
+
+    // Adding 'KeyChangeListener' on native side
+    HMSManager.addKeyChangeListener({
+      id: HMSConstants.DEFAULT_SDK_ID,
+      keys: forKeys,
+      uniqueId,
+    })
+      // Adding 'KeyChangeListener' fails on native side
+      .catch((err: any) => {
+        if (typeof cleanupHandler === 'function') {
+          callback(err, null);
+          cleanupHandler();
+          cleanupHandler = null;
+        }
+      });
+
+    this._addedKeyChangeListenerCount += 1;
+
+    return {
+      remove: () => {
+        if (typeof cleanupHandler === 'function') {
+          cleanupHandler();
+          cleanupHandler = null;
+        }
+      },
+    };
+  }
+
+  private _cleanup(subscriptionsToRemove: EmitterSubscription[]) {
+    // Extracting `uniqueId` from first subscription (all subscriptions have same uniqueId)
+    // this `uniqueId` will be used to remove 'KeyChangeListener' from native side
+    const uniqueId =
+      subscriptionsToRemove.length > 0
+        ? (subscriptionsToRemove[0].context as { uniqueId: string }).uniqueId
+        : null;
+
+    // Removing required subscriptions from 'eventEmitter'
+    subscriptionsToRemove.forEach((subscription) => subscription.remove());
+
+    // Removing 'KeyChangeListener' from native side
+    HMSManager.removeKeyChangeListener({
+      id: HMSConstants.DEFAULT_SDK_ID,
+      uniqueId,
+    }).catch((error: any) => {
+      const logger = getLogger();
+      logger?.verbose(
+        "Error while removing key change listener, Listener didn't get registerred at first place or was already removed",
+        error
+      );
+    });
+
+    this._addedKeyChangeListenerCount -= 1;
+
+    if (this._addedKeyChangeListenerCount <= 0) {
+      this._addedKeyChangeListenerCount = 0;
+      if (
+        this._deviceEventEmitterSubscription &&
+        Object.getOwnPropertyNames(
+          this._deviceEventEmitterSubscription
+        ).includes('remove') &&
+        typeof this._deviceEventEmitterSubscription.remove === 'function'
+      ) {
+        this._deviceEventEmitterSubscription.remove();
+      } else {
+        DeviceEventEmitter.removeListener(
+          HMSUpdateListenerActions.ON_SESSION_STORE_CHANGED,
+          this._deviceEventEmitterListener
+        );
+      }
+
+      this._deviceEventEmitterSubscription = undefined;
+
+      this._eventEmitter = undefined;
+    }
+  }
+
+  private _deviceEventEmitterListener(data: {
+    id: string;
+    key: string;
+    value: HMSSessionStoreValue;
+  }) {
+    // if id is different from default sdk_id, return early
+    if (data.id !== HMSConstants.DEFAULT_SDK_ID) {
+      return;
+    }
+
+    // emit event for the key
+    getLogger()?.verbose('#Listener ON_SESSION_STORE_CHANGED event: ', data);
+
+    this._eventEmitter?.emit(data.key, null, data);
+  }
+}

package/src/classes/HMSUpdateListenerActions.ts

@@ -1,3 +1,9 @@
+/**
+ * These are the available events emitted by the `HMSSDK`
+ *
+ * For more info about these events, checkout Event Listener docs
+ * {@link https://www.100ms.live/docs/react-native/v2/how-to-guides/listen-to-room-updates/event-listeners}
+ */
 export enum HMSUpdateListenerActions {
   ON_PREVIEW = 'ON_PREVIEW',
   ON_JOIN = 'ON_JOIN',
@@ -18,4 +24,6 @@ export enum HMSUpdateListenerActions {
   ON_REMOTE_AUDIO_STATS = 'ON_REMOTE_AUDIO_STATS',
   ON_REMOTE_VIDEO_STATS = 'ON_REMOTE_VIDEO_STATS',
   ON_AUDIO_DEVICE_CHANGED = 'ON_AUDIO_DEVICE_CHANGED',
+  ON_SESSION_STORE_AVAILABLE = 'ON_SESSION_STORE_AVAILABLE',
+  ON_SESSION_STORE_CHANGED = 'ON_SESSION_STORE_CHANGED',
 }

package/src/classes/HMSVideoTrackSettings.ts

@@ -2,6 +2,11 @@ import type { HMSSimulcastLayerSettings } from './HMSSimulcastLayerSettings';
 import type { HMSCameraFacing } from './HMSCameraFacing';
 import type { HMSTrackSettingsInitState } from './HMSTrackSettingsInitState';
 
+/**
+ * Customize local peer's Video track settings before Joining the Room.
+ *
+ * Checkout Track Settings docs for more details {@link https://www.100ms.live/docs/react-native/v2/how-to-guides/interact-with-room/track/track-settings}
+ */
 export class HMSVideoTrackSettings {
   readonly simulcastSettings?: HMSSimulcastLayerSettings[];
   initialState?: HMSTrackSettingsInitState;

package/src/classes/HmsView.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useEffect, useImperativeHandle, useRef } from 'react';
+import React, { useState, useImperativeHandle, useRef } from 'react';
 import {
   findNodeHandle,
   requireNativeComponent,
   StyleSheet,
   UIManager,
   ViewStyle,
+  Platform,
 } from 'react-native';
 import { HMSConstants } from './HMSConstants';
 import { HMSVideoViewMode } from './HMSVideoViewMode';
@@ -14,6 +15,7 @@ interface HmsViewProps {
     trackId: string;
     id: string;
     mirror: boolean;
+    scaleType: HMSVideoViewMode;
   };
   autoSimulcast: boolean;
   setZOrderMediaOverlay: boolean;
@@ -41,7 +43,7 @@ export const HmsViewComponent = React.forwardRef<any, HmsComponentProps>(
   (props, ref) => {
     const {
       trackId,
-      style = temporaryStyles.customStyle,
+      style = styles.hmsView,
       id = HMSConstants.DEFAULT_SDK_ID,
       mirror = false,
       setZOrderMediaOverlay = false,
@@ -50,34 +52,24 @@ export const HmsViewComponent = React.forwardRef<any, HmsComponentProps>(
     } = props;
 
     const hmsViewRef: any = useRef();
-    const timerRef = useRef<null | NodeJS.Timeout>(null);
-    const [tempVal, setTempVal] = useState(0);
+    const [applyStyles_ANDROID, setApplyStyles_ANDROID] = useState(false);
     const data = {
       trackId,
       id,
       mirror,
+      scaleType,
     };
 
-    useEffect(() => {
-      return () => {
-        if (timerRef.current) {
-          clearTimeout(timerRef.current);
-        }
-      };
-    }, []);
-
-    const onChange = (values: any) => {
-      console.log(values, 'values');
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-      }
-
-      timerRef.current = setTimeout(() => {
-        setTempVal(1);
-        timerRef.current = null;
-      }, 2000);
-    };
+    /**
+     * This method is passed to `onChange` prop of `HmsView` Native Component.
+     * It is invoked when `HmsView` emits 'topChange' event.
+     */
+    const onChange = () => setApplyStyles_ANDROID(true);
 
+    /**
+     * This method is passed to `onDataReturned` prop of `HmsView` Native Component.
+     * It is invoked when `HmsView` emits 'captureFrame' event.
+     */
     const _onDataReturned = (event: {
       nativeEvent: { requestId: any; result: any; error: any };
     }) => {
@@ -120,16 +112,14 @@ export const HmsViewComponent = React.forwardRef<any, HmsComponentProps>(
       };
     });
 
-    useEffect(() => {
-      setTempVal(0);
-    }, [tempVal]);
-
     return (
       <HmsView
         ref={hmsViewRef}
         onChange={onChange}
         data={data}
-        style={tempVal === 0 ? style : temporaryStyles.customStyle}
+        style={
+          Platform.OS === 'android' ? (applyStyles_ANDROID ? style : {}) : style
+        }
         autoSimulcast={autoSimulcast}
         scaleType={scaleType}
         setZOrderMediaOverlay={setZOrderMediaOverlay}
@@ -139,9 +129,8 @@ export const HmsViewComponent = React.forwardRef<any, HmsComponentProps>(
   }
 );
 
-const temporaryStyles = StyleSheet.create({
-  customStyle: {
-    width: '100%',
-    height: '50%',
+const styles = StyleSheet.create({
+  hmsView: {
+    flex: 1,
   },
 });

package/src/index.ts

@@ -80,6 +80,11 @@ export * from './classes/HMSSimulcastLayerDefinition';
 export * from './classes/HMSQualityLimitationReasons';
 export * from './classes/HMSQualityLimitationReason';
 export * from './classes/HMSCameraControl';
+export * from './classes/HMSIOSAudioMode';
+export type {
+  HMSSessionStore,
+  HMSSessionStoreValue,
+} from './classes/HMSSessionStore';
 export type { HmsViewComponent as HMSView } from './classes/HmsView';
 
 import { HMSSDK as HmsManager } from './classes/HMSSDK';

package/src/utils/emitter/EventEmitter.ts

@@ -0,0 +1,160 @@
+import { EmitterSubscription } from './_EmitterSubscription';
+import { EventSubscriptionVendor } from './_EventSubscriptionVendor';
+
+const sparseFilterPredicate = () => true;
+
+export { EmitterSubscription } from './_EmitterSubscription';
+
+/**
+ * @class EventEmitter
+ * @description
+ * An EventEmitter is responsible for managing a set of listeners and publishing
+ * events to them when it is told that such events happened. In addition to the
+ * data for the given event it also sends a event control object which allows
+ * the listeners/handlers to prevent the default behavior of the given event.
+ *
+ * The emitter is designed to be generic enough to support all the different
+ * contexts in which one might want to emit events. It is a simple multicast
+ * mechanism on top of which extra functionality can be composed. For example, a
+ * more advanced emitter may use an EventHolder and EventFactory.
+ */
+export class EventEmitter {
+  _subscriber: EventSubscriptionVendor;
+
+  /**
+   * @constructor
+   *
+   * @param {EventSubscriptionVendor} subscriber - Optional subscriber instance
+   *   to use. If omitted, a new subscriber will be created for the emitter.
+   */
+  constructor(subscriber?: EventSubscriptionVendor | null) {
+    this._subscriber = subscriber || new EventSubscriptionVendor();
+  }
+
+  /**
+   * Adds a listener to be invoked when events of the specified type are
+   * emitted. An optional calling context may be provided. The data arguments
+   * emitted will be passed to the listener function.
+   *
+   * TODO: Annotate the listener arg's type. This is tricky because listeners
+   *       can be invoked with varargs.
+   *
+   * @param {string} eventType - Name of the event to listen to
+   * @param {function} listener - Function to invoke when the specified event is
+   *   emitted
+   * @param {*} context - Optional context object to use when invoking the
+   *   listener
+   */
+  addListener(
+    eventType: string,
+    listener: Function,
+    context: Object | null | undefined
+  ): EmitterSubscription {
+    return this._subscriber.addSubscription(
+      eventType,
+      new EmitterSubscription(this, this._subscriber, listener, context)
+    ) as EmitterSubscription;
+  }
+
+  /**
+   * Removes all of the registered listeners, including those registered as
+   * listener maps.
+   *
+   * @param {?string} eventType - Optional name of the event whose registered
+   *   listeners to remove
+   */
+  removeAllListeners(eventType: string | undefined | null) {
+    this._subscriber.removeAllSubscriptions(eventType);
+  }
+
+  /**
+   * Removes a specific subscription. Called by the `remove()` method of the
+   * subscription itself to ensure any necessary cleanup is performed.
+   */
+  removeSubscription(subscription: EmitterSubscription) {
+    if (subscription.emitter !== this) {
+      console.warn('Subscription does not belong to this emitter.'); // TODO: use HMSLogger here
+      return;
+    }
+
+    this._subscriber.removeSubscription(subscription);
+  }
+
+  /**
+   * Returns the number of listeners that are currently registered for the given
+   * event.
+   *
+   * @param {string} eventType - Name of the event to query
+   * @returns {number}
+   */
+  listenerCount(eventType: string): number {
+    const subscriptions = this._subscriber.getSubscriptionsForType(eventType);
+    return subscriptions
+      ? // We filter out missing entries because the array is sparse.
+        // "callbackfn is called only for elements of the array which actually
+        // exist; it is not called for missing elements of the array."
+        // https://www.ecma-international.org/ecma-262/9.0/index.html#sec-array.prototype.filter
+        subscriptions.filter(sparseFilterPredicate).length
+      : 0;
+  }
+
+  /**
+   * Emits an event of the given type with the given data. All handlers of that
+   * particular type will be notified.
+   *
+   * @param {string} eventType - Name of the event to emit
+   * @param {...*} Arbitrary arguments to be passed to each registered listener
+   *
+   * @example
+   *   emitter.addListener('someEvent', function(message) {
+   *     console.log(message);
+   *   });
+   *
+   *   emitter.emit('someEvent', 'abc'); // logs 'abc'
+   */
+  emit(eventType: string, ...args: any[]) {
+    const subscriptions = this._subscriber.getSubscriptionsForType(
+      eventType
+    ) as EmitterSubscription[] | null | undefined;
+    if (subscriptions) {
+      for (let i = 0, l = subscriptions.length; i < l; i++) {
+        const subscription = subscriptions[i];
+
+        // The subscription may have been removed during this event loop.
+        if (subscription && subscription.listener) {
+          subscription.listener.apply(subscription.context, args);
+        }
+      }
+    }
+  }
+
+  /**
+   * Removes the given listener for event of specific type.
+   *
+   * @param {string} eventType - Name of the event to emit
+   * @param {function} listener - Function to invoke when the specified event is
+   *   emitted
+   *
+   * @example
+   *   emitter.removeListener('someEvent', function(message) {
+   *     console.log(message);
+   *   }); // removes the listener if already registered
+   *
+   */
+  removeListener(eventType: string, listener: Function) {
+    const subscriptions = this._subscriber.getSubscriptionsForType(
+      eventType
+    ) as EmitterSubscription[] | null | undefined;
+    if (subscriptions) {
+      for (let i = 0, l = subscriptions.length; i < l; i++) {
+        const subscription = subscriptions[i];
+
+        // The subscription may have been removed during this event loop.
+        // its listener matches the listener in method parameters
+        if (subscription && subscription.listener === listener) {
+          subscription.remove();
+        }
+      }
+    }
+  }
+}

package/src/utils/emitter/_EmitterSubscription.ts

@@ -0,0 +1,44 @@
+import { EventSubscription } from './_EventSubscription';
+import type { EventEmitter } from './EventEmitter';
+import type { EventSubscriptionVendor } from './_EventSubscriptionVendor';
+
+/**
+ * EmitterSubscription represents a subscription with listener and context data.
+ */
+export class EmitterSubscription extends EventSubscription {
+  emitter: EventEmitter;
+  listener: Function;
+  context: Object | null | undefined;
+
+  /**
+   * @param {EventEmitter} emitter - The event emitter that registered this
+   *   subscription
+   * @param {EventSubscriptionVendor} subscriber - The subscriber that controls
+   *   this subscription
+   * @param {function} listener - Function to invoke when the specified event is
+   *   emitted
+   * @param {*} context - Optional context object to use when invoking the
+   *   listener
+   */
+  constructor(
+    emitter: EventEmitter,
+    subscriber: EventSubscriptionVendor,
+    listener: Function,
+    context: Object | undefined | null
+  ) {
+    super(subscriber);
+    this.emitter = emitter;
+    this.listener = listener;
+    this.context = context;
+  }
+
+  /**
+   * Removes this subscription from the emitter that registered it.
+   * Note: we're overriding the `remove()` method of EventSubscription here
+   * but deliberately not calling `super.remove()` as the responsibility
+   * for removing the subscription lies with the EventEmitter.
+   */
+  remove() {
+    this.emitter.removeSubscription(this);
+  }
+}