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

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/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);
+  }
+}

package/src/utils/emitter/_EventSubscription.ts

@@ -0,0 +1,28 @@
+import type { EventSubscriptionVendor } from './_EventSubscriptionVendor';
+
+/**
+ * EventSubscription represents a subscription to a particular event. It can
+ * remove its own subscription.
+ */
+export class EventSubscription {
+  // @ts-ignore this value is assigned after creating instance of class
+  eventType: string;
+  // @ts-ignore this value is assigned after creating instance of class
+  key: number;
+  subscriber: EventSubscriptionVendor;
+
+  /**
+   * @param {EventSubscriptionVendor} subscriber the subscriber that controls
+   *   this subscription.
+   */
+  constructor(subscriber: EventSubscriptionVendor) {
+    this.subscriber = subscriber;
+  }
+
+  /**
+   * Removes this subscription from the subscriber that controls it.
+   */
+  remove() {
+    this.subscriber.removeSubscription(this);
+  }
+}

package/src/utils/emitter/_EventSubscriptionVendor.ts

@@ -0,0 +1,89 @@
+import type { EventSubscription } from './_EventSubscription';
+
+/**
+ * EventSubscriptionVendor stores a set of EventSubscriptions that are
+ * subscribed to a particular event type.
+ */
+export class EventSubscriptionVendor {
+  _subscriptionsForType: Record<string, EventSubscription[] | null | undefined>;
+  _currentSubscription: EventSubscription | null | undefined;
+
+  constructor() {
+    this._subscriptionsForType = {};
+    this._currentSubscription = null;
+  }
+
+  /**
+   * Adds a subscription keyed by an event type.
+   *
+   * @param {string} eventType
+   * @param {EventSubscription} subscription
+   */
+  addSubscription(
+    eventType: string,
+    subscription: EventSubscription
+  ): EventSubscription {
+    if (subscription.subscriber !== this) {
+      console.warn('The subscriber of the subscription is incorrectly set.'); // TODO: throw error or use logger?
+    }
+    if (!this._subscriptionsForType[eventType]) {
+      this._subscriptionsForType[eventType] = [];
+    }
+    const eventSubscriptions = this._subscriptionsForType[
+      eventType
+    ] as EventSubscription[];
+    const key = eventSubscriptions.length;
+    eventSubscriptions.push(subscription);
+    subscription.eventType = eventType;
+    subscription.key = key;
+    return subscription;
+  }
+
+  /**
+   * Removes a bulk set of the subscriptions.
+   *
+   * @param {?string} eventType - Optional name of the event type whose
+   *   registered supscriptions to remove, if null or undefined remove all subscriptions.
+   */
+  removeAllSubscriptions(eventType: string | undefined | null) {
+    if (eventType === undefined || eventType === null) {
+      this._subscriptionsForType = {};
+    } else {
+      delete this._subscriptionsForType[eventType];
+    }
+  }
+
+  /**
+   * Removes a specific subscription. Instead of calling this function, call
+   * `subscription.remove()` directly.
+   *
+   * @param {object} subscription
+   */
+  removeSubscription(subscription: EventSubscription) {
+    const eventType = subscription.eventType;
+    const key = subscription.key;
+
+    const subscriptionsForType = this._subscriptionsForType[eventType];
+    if (subscriptionsForType) {
+      delete subscriptionsForType[key];
+    }
+  }
+
+  /**
+   * Returns the array of subscriptions that are currently registered for the
+   * given event type.
+   *
+   * Note: This array can be potentially sparse as subscriptions are deleted
+   * from it when they are removed.
+   *
+   * TODO: This returns a nullable array. wat?
+   *
+   * @param {string} eventType
+   * @returns {?array}
+   */
+  getSubscriptionsForType(
+    eventType: string
+  ): EventSubscription[] | null | undefined {
+    return this._subscriptionsForType[eventType];
+  }
+}

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './emitter/EventEmitter';