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

package/src/classes/HMSSDK.tsx

@@ -1,15 +1,11 @@
 import React from 'react';
-import { AppState, NativeModules, Platform, ViewStyle } from 'react-native';
+import { AppState, NativeModules, Platform } from 'react-native';
 import { HMSEncoder } from './HMSEncoder';
 import { HMSHelper } from './HMSHelper';
-import { HMSLocalAudioStats } from './HMSLocalAudioStats';
-import { HMSLocalVideoStats } from './HMSLocalVideoStats';
 import { getLogger, logger, setLogger } from './HMSLogger';
-import { HMSRemoteAudioStats } from './HMSRemoteAudioStats';
-import { HMSRemoteVideoStats } from './HMSRemoteVideoStats';
 import { HMSTrackType } from './HMSTrackType';
 import { HMSUpdateListenerActions } from './HMSUpdateListenerActions';
-import { HmsViewComponent } from './HmsView';
+import { HmsViewComponent, HmsComponentProps } from './HmsView';
 
 import type { HMSConfig } from './HMSConfig';
 import type { HMSLocalPeer } from './HMSLocalPeer';
@@ -29,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,
@@ -46,15 +40,11 @@ import {
   setHmsRoomCache,
 } from './HMSRoomCache';
 import { HMSPeerUpdateOrdinals } from './HMSPeerUpdate';
+import { HMSSessionStore } from './HMSSessionStore';
 
-interface HmsViewProps {
-  trackId: string;
-  style?: ViewStyle;
-  mirror?: boolean;
-  scaleType?: HMSVideoViewMode;
-  setZOrderMediaOverlay?: boolean;
-}
+type HmsViewProps = Omit<HmsComponentProps, 'id'>;
 
+// TODO: Rename to HMSPIPConfig & to be moved to a separate file
 interface PIPConfig {
   aspectRatio?: [number, number];
   endButton?: boolean;
@@ -98,6 +88,7 @@ export class HMSSDK {
   private onRemoteAudioStatsDelegate?: any;
   private onRemoteVideoStatsDelegate?: any;
   private onAudioDeviceChangedDelegate?: any;
+  private onSessionStoreAvailableDelegate?: any;
   private onPIPRoomLeaveDelegate?: any;
 
   private emitterSubscriptions: Partial<
@@ -250,6 +241,7 @@ export class HMSSDK {
    * - The appearance of tile is completely customizable with style prop.
    * - Scale type can determine how the incoming video will fit in the canvas check {@link HMSVideoViewMode} for more information.
    * - Mirror to flip the video vertically.
+   * - Auto Simulcast to automatically select the best Streaming Quality of track if feature is enabled in Room.
    *
    * checkout {@link https://www.100ms.live/docs/react-native/v2/features/render-video} for more info
    *
@@ -257,12 +249,20 @@ export class HMSSDK {
    * @memberof HMSSDK
    */
   HmsView = React.forwardRef<any, HmsViewProps>((props, ref) => {
-    const { trackId, style, mirror, scaleType, setZOrderMediaOverlay } = props;
+    const {
+      trackId,
+      style,
+      mirror,
+      scaleType,
+      setZOrderMediaOverlay,
+      autoSimulcast,
+    } = props;
     return (
       <HmsViewComponent
         ref={ref}
         trackId={trackId}
         style={style}
+        autoSimulcast={autoSimulcast}
         setZOrderMediaOverlay={setZOrderMediaOverlay}
         mirror={mirror}
         scaleType={scaleType}
@@ -845,36 +845,6 @@ export class HMSSDK {
     return await HMSManager.stopScreenshare({ id: this.id });
   };
 
-  /**
-   * - enableRTCStats sets a boolean in native side which in turn allows several events to be passed
-   * through the bridge these events are {@link RTCStatsListener}, {@link onRemoteVideoStatsListener},
-   * {@link onRemoteAudioStatsListener}, {@link onLocalAudioStatsListener} and {@link onLocalVideoStatsListener}
-   *
-   * - These listeners get various dataPoints for current peers and their connectivity to the room
-   * such as jitter, latency etc.
-   *
-   * - currently available for iOS only
-   *
-   * @memberof HMSSDK
-   */
-  enableRTCStats = () => {
-    logger?.verbose('#Function enableRTCStats', { id: this.id });
-    HMSManager.enableRTCStats({ id: this.id });
-  };
-
-  /**
-   * - disable RTCStats sets the same boolean to false that was set true by enableRTCStats.
-   * that activates a check which filters out the events acquired in native listeners and don't
-   * let them pass through bridge
-   *
-   * - currently available for iOS only.
-   * @memberof HMSSDK
-   */
-  disableRTCStats = () => {
-    logger?.verbose('#Function disableRTCStats', { id: this.id });
-    HMSManager.disableRTCStats({ id: this.id });
-  };
-
   enableNetworkQualityUpdates = () => {
     logger?.verbose('#Function enableNetworkQualityUpdates', { id: this.id });
     HMSManager.enableNetworkQualityUpdates({ id: this.id });
@@ -1088,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,
@@ -1099,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,
@@ -1106,6 +1088,34 @@ export class HMSSDK {
     return await HMSManager.getSessionMetaData({ id: this.id });
   };
 
+  getRemoteVideoTrackFromTrackId = async (trackId: string) => {
+    logger?.verbose('#Function getRemoteVideoTrackFromTrackId', {
+      id: this.id,
+      trackId,
+    });
+
+    const remoteVideoTrackData =
+      await HMSManager.getRemoteVideoTrackFromTrackId({
+        id: this.id,
+        trackId,
+      });
+    return HMSEncoder.encodeHmsRemoteVideoTrack(remoteVideoTrackData, this.id);
+  };
+
+  getRemoteAudioTrackFromTrackId = async (trackId: string) => {
+    logger?.verbose('#Function getRemoteAudioTrackFromTrackId', {
+      id: this.id,
+      trackId,
+    });
+
+    const remoteAudioTrackData =
+      await HMSManager.getRemoteAudioTrackFromTrackId({
+        id: this.id,
+        trackId,
+      });
+    return HMSEncoder.encodeHmsRemoteAudioTrack(remoteAudioTrackData, this.id);
+  };
+
   /**
    * - This is a prototype event listener that takes action and listens for updates related to that particular action
    *
@@ -1472,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
@@ -1798,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 =
@@ -2105,7 +2153,9 @@ export class HMSSDK {
       return;
     }
 
-    let localAudioStats = new HMSLocalAudioStats(data.localAudioStats);
+    let localAudioStats = HMSEncoder.encodeHMSLocalAudioStats(
+      data.localAudioStats
+    );
     let peer = HMSEncoder.encodeHmsPeer(data.peer);
     let track = HMSEncoder.encodeHmsLocalAudioTrack(data.track, this.id);
 
@@ -2125,7 +2175,9 @@ export class HMSSDK {
       return;
     }
 
-    let localVideoStats = new HMSLocalVideoStats(data.localVideoStats);
+    let localVideoStats = HMSEncoder.encodeHMSLocalVideoStats(
+      data.localVideoStats
+    );
     let peer = HMSEncoder.encodeHmsPeer(data.peer);
     let track = HMSEncoder.encodeHmsLocalVideoTrack(data.track, this.id);
 
@@ -2145,7 +2197,9 @@ export class HMSSDK {
       return;
     }
 
-    let remoteAudioStats = new HMSRemoteAudioStats(data.remoteAudioStats);
+    let remoteAudioStats = HMSEncoder.encodeHMSRemoteAudioStats(
+      data.remoteAudioStats
+    );
     let peer = HMSEncoder.encodeHmsPeer(data.peer);
     let track = HMSEncoder.encodeHmsRemoteAudioTrack(data.track, this.id);
 
@@ -2170,7 +2224,9 @@ export class HMSSDK {
       return;
     }
 
-    let remoteVideoStats = new HMSRemoteVideoStats(data.remoteVideoStats);
+    let remoteVideoStats = HMSEncoder.encodeHMSRemoteVideoStats(
+      data.remoteVideoStats
+    );
     let peer = HMSEncoder.encodeHmsPeer(data.peer);
     let track = HMSEncoder.encodeHmsRemoteVideoTrack(data.track, this.id);
 
@@ -2206,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/HMSSimulcastLayerDefinition.ts

@@ -0,0 +1,12 @@
+import type { HMSLayer } from './HMSLayer';
+import type { HMSVideoResolution } from './HMSVideoResolution';
+
+export class HMSSimulcastLayerDefinition {
+  layer: HMSLayer;
+  resolution: HMSVideoResolution;
+
+  constructor(params: { layer: HMSLayer; resolution: HMSVideoResolution }) {
+    this.layer = params.layer;
+    this.resolution = params.resolution;
+  }
+}

package/src/classes/HMSSimulcastLayerSettingsPolicy.ts

@@ -0,0 +1,18 @@
+export class HMSSimulcastLayerSettingsPolicy {
+  rid?: string;
+  scaleResolutionDownBy?: number;
+  maxBitrate?: number;
+  maxFramerate?: number;
+
+  constructor(params: {
+    rid?: string;
+    scaleResolutionDownBy?: number;
+    maxBitrate?: number;
+    maxFramerate?: number;
+  }) {
+    this.rid = params.rid;
+    this.scaleResolutionDownBy = params.scaleResolutionDownBy;
+    this.maxBitrate = params.maxBitrate;
+    this.maxFramerate = params.maxFramerate;
+  }
+}

package/src/classes/HMSSimulcastSettings.ts

@@ -1,5 +1,14 @@
+import type { HMSSimulcastSettingsPolicy } from './HMSSimulcastSettingsPolicy';
+
 export class HMSSimulcastSettings {
-  low: any;
-  med: any;
-  high: any;
+  video?: HMSSimulcastSettingsPolicy;
+  screen?: HMSSimulcastSettingsPolicy;
+
+  constructor(params: {
+    video?: HMSSimulcastSettingsPolicy;
+    screen?: HMSSimulcastSettingsPolicy;
+  }) {
+    this.video = params.video;
+    this.screen = params.screen;
+  }
 }

package/src/classes/HMSSimulcastSettingsPolicy.ts

@@ -0,0 +1,9 @@
+import type { HMSSimulcastLayerSettingsPolicy } from './HMSSimulcastLayerSettingsPolicy';
+
+export class HMSSimulcastSettingsPolicy {
+  layers?: HMSSimulcastLayerSettingsPolicy[];
+
+  constructor(params: { layers?: HMSSimulcastLayerSettingsPolicy[] }) {
+    this.layers = params.layers;
+  }
+}

package/src/classes/HMSSubscribeDegradationPolicy.ts

@@ -0,0 +1,15 @@
+export class HMSSubscribeDegradationPolicy {
+  packetLossThreshold?: number;
+  degradeGracePeriodSeconds?: number;
+  recoverGracePeriodSeconds?: number;
+
+  constructor(params: {
+    packetLossThreshold?: number;
+    degradeGracePeriodSeconds?: number;
+    recoverGracePeriodSeconds?: number;
+  }) {
+    this.packetLossThreshold = params.packetLossThreshold;
+    this.degradeGracePeriodSeconds = params.degradeGracePeriodSeconds;
+    this.recoverGracePeriodSeconds = params.recoverGracePeriodSeconds;
+  }
+}

package/src/classes/HMSSubscribeSettings.ts

@@ -1,9 +1,17 @@
+import type { HMSSubscribeDegradationPolicy } from './HMSSubscribeDegradationPolicy';
+
 export class HMSSubscribeSettings {
-  subscribeTo?: [string];
+  subscribeTo?: string[];
   maxSubsBitRate: number;
+  subscribeDegradation?: HMSSubscribeDegradationPolicy;
 
-  constructor(params: { subscribeTo?: [string]; maxSubsBitRate: number }) {
+  constructor(params: {
+    subscribeTo?: string[];
+    maxSubsBitRate: number;
+    subscribeDegradation?: HMSSubscribeDegradationPolicy;
+  }) {
     this.subscribeTo = params.subscribeTo;
     this.maxSubsBitRate = params.maxSubsBitRate;
+    this.subscribeDegradation = params.subscribeDegradation;
   }
 }

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/HMSVideoResolution.ts

@@ -2,7 +2,7 @@ export class HMSVideoResolution {
   height?: number;
   width?: number;
 
-  constructor(params: { height: number; width: number }) {
+  constructor(params: { height?: number; width?: number }) {
     this.height = params.height;
     this.width = params.width;
   }

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

@@ -15,6 +15,7 @@ interface HmsViewProps {
     id: string;
     mirror: boolean;
   };
+  autoSimulcast: boolean;
   setZOrderMediaOverlay: boolean;
   scaleType: HMSVideoViewMode;
   style: ViewStyle;
@@ -26,10 +27,11 @@ const HmsView = requireNativeComponent<HmsViewProps>('HMSView');
 let _nextRequestId = 1;
 let _requestMap = new Map();
 
-interface HmsComponentProps {
+export interface HmsComponentProps {
   trackId: string;
   style?: ViewStyle;
   mirror?: boolean;
+  autoSimulcast?: boolean;
   scaleType?: HMSVideoViewMode;
   setZOrderMediaOverlay?: boolean;
   id: string;
@@ -43,6 +45,7 @@ export const HmsViewComponent = React.forwardRef<any, HmsComponentProps>(
       id = HMSConstants.DEFAULT_SDK_ID,
       mirror = false,
       setZOrderMediaOverlay = false,
+      autoSimulcast = true,
       scaleType = HMSVideoViewMode.ASPECT_FILL,
     } = props;
 
@@ -127,6 +130,7 @@ export const HmsViewComponent = React.forwardRef<any, HmsComponentProps>(
         onChange={onChange}
         data={data}
         style={tempVal === 0 ? style : temporaryStyles.customStyle}
+        autoSimulcast={autoSimulcast}
         scaleType={scaleType}
         setZOrderMediaOverlay={setZOrderMediaOverlay}
         onDataReturned={_onDataReturned}