@100mslive/react-native-hms 1.7.1 → 1.8.0

package/src/classes/HMSEncoder.ts

@@ -39,6 +39,7 @@ import { HMSRemoteVideoStats } from './HMSRemoteVideoStats';
 import { HMSLayer } from './HMSLayer';
 import { HMSSimulcastLayerDefinition } from './HMSSimulcastLayerDefinition';
 import { HMSQualityLimitationReasons } from './HMSQualityLimitationReasons';
+import { HMSTrackType } from './HMSTrackType';
 
 interface InitialData {
   roles: Record<string, HMSRole>;
@@ -93,6 +94,7 @@ export class HMSEncoder {
   static encodeHmsPeer(peer: any) {
     const encodedObj = {
       peerID: peer?.peerID,
+      name: peer?.name,
     };
 
     return new HMSPeer(encodedObj);
@@ -153,6 +155,7 @@ export class HMSEncoder {
   static encodeHmsLocalPeer(peer: any, id: string) {
     const encodedObj = {
       peerID: peer?.peerID,
+      name: peer?.name,
       localAudioTrackData: peer?.localAudioTrackData?.trackId
         ? {
             id: id,
@@ -266,6 +269,7 @@ export class HMSEncoder {
   static encodeHmsRemotePeer(peer: any, id: string) {
     const encodedObj = {
       peerID: peer?.peerID,
+      name: peer?.name,
       remoteAudioTrackData: peer?.remoteAudioTrackData?.trackId
         ? {
             id: id,
@@ -323,6 +327,14 @@ export class HMSEncoder {
     });
   }
 
+  static encodeHmsPreviewForRoleTracks(previewTracks: any[], id: string) {
+    return previewTracks?.map((track) => {
+      return track.type === HMSTrackType.VIDEO
+        ? this.encodeHmsLocalVideoTrack(track, id)
+        : this.encodeHmsLocalAudioTrack(track, id);
+    });
+  }
+
   static encodeHmsRoles(roles: any[]) {
     const encodedRoles: HMSRole[] = [];
 

package/src/classes/HMSLocalPeer.ts

@@ -19,6 +19,7 @@ export class HMSLocalPeer extends HMSPeer {
 
   constructor(params: {
     peerID: string;
+    name: string;
     localAudioTrackData?: {
       id: string;
       trackId: string;

package/src/classes/HMSMessage.ts

@@ -1,11 +1,10 @@
 import type { HMSMessageRecipient } from './HMSMessageRecipient';
-import type { HMSMessageType } from './HMSMessageType';
 import type { HMSPeer } from './HMSPeer';
 
 export class HMSMessage {
   public message: string;
   public messageId: string;
-  public type: HMSMessageType;
+  public type: string;
   public time: Date;
   public sender?: HMSPeer;
   public recipient: HMSMessageRecipient;
@@ -13,7 +12,7 @@ export class HMSMessage {
   constructor(params: {
     message: string;
     messageId: string;
-    type: HMSMessageType;
+    type: string;
     time: Date;
     sender?: HMSPeer;
     recipient: HMSMessageRecipient;

package/src/classes/HMSPeer.ts

@@ -8,19 +8,12 @@ import { HMSConstants } from './HMSConstants';
 
 export class HMSPeer {
   peerID: string;
-  private _name: string = '';
+  name: string;
   private _isLocal: boolean | undefined;
   private _customerUserID: string | undefined;
   private _metadata: string | undefined;
   private _role: HMSRole | undefined;
 
-  private _updateName(value: string) {
-    // If `_name` is outdated, update it
-    if (this._name !== value) {
-      this._name = value;
-    }
-  }
-
   private _updateIsLocal(value: boolean) {
     // If `_isLocal` is outdated, update it
     if (this._isLocal !== value) {
@@ -49,25 +42,9 @@ export class HMSPeer {
     }
   }
 
-  constructor(params: { peerID: string }) {
+  constructor(params: { peerID: string; name: string }) {
     this.peerID = params.peerID;
-  }
-
-  get name(): string {
-    const hmsPeersCache = getHmsPeersCache();
-
-    const nameValue = hmsPeersCache
-      ? hmsPeersCache.getProperty(this.peerID, 'name')
-      : getPeerPropertyFromNative(
-          HMSConstants.DEFAULT_SDK_ID,
-          this.peerID,
-          'name'
-        );
-
-    if (nameValue) {
-      this._updateName(nameValue);
-    }
-    return nameValue ?? this._name;
+    this.name = params.name;
   }
 
   get isLocal(): boolean | undefined {

package/src/classes/HMSRemotePeer.ts

@@ -17,6 +17,7 @@ export class HMSRemotePeer extends HMSPeer {
 
   constructor(params: {
     peerID: string;
+    name: string;
     remoteAudioTrackData?: {
       trackId: string;
       source?: HMSTrackSource;

package/src/classes/HMSSDK.tsx

@@ -26,7 +26,6 @@ import type { HMSAudioDevice } from './HMSAudioDevice';
 import type { HMSAudioMode } from './HMSAudioMode';
 import type { HMSAudioMixingMode } from './HMSAudioMixingMode';
 import type { HMSLogSettings } from './HMSLogSettings';
-import { HMSMessageType } from './HMSMessageType';
 import { HMSPIPListenerActions } from './HMSPIPListenerActions';
 import HMSNativeEventListener from './HMSNativeEventListener';
 import type { HMSNativeEventSubscription } from './HMSNativeEventListener';
@@ -208,30 +207,6 @@ export class HMSSDK {
     HMSManager.preview({ ...config, id: this.id });
   };
 
-  /**
-   * - previewForRole can be used when there is role change request for current localPeer and we want
-   * to show the localPeer how the tracks look before publishing them to room.
-   *
-   * - It requires a role of type [HMSRole]{@link HMSRole} for which we want to preview the tracks.
-   *
-   * checkout {@link https://www.100ms.live/docs/react-native} for more info
-   *
-   * @param {HMSRole}
-   * @memberof HMSSDK
-   */
-  previewForRole = async (role: HMSRole) => {
-    logger?.verbose('#Function previewForRole', {
-      role,
-      id: this.id,
-    });
-    if (Platform.OS === 'ios') {
-      return await HMSManager.previewForRole({ role: role?.name, id: this.id });
-    } else {
-      console.log('API currently not available for android');
-      return 'API currently not available for android';
-    }
-  };
-
   /**
    * - HmsView is react component that takes trackId and starts showing that track on a tile.
    * - The appearance of tile is completely customizable with style prop.
@@ -298,13 +273,11 @@ export class HMSSDK {
    *
    * checkout {@link https://www.100ms.live/docs/react-native/v2/features/chat} for more info
    *
-   * @param {message: string} and @param {type: string}
    * @memberof HMSSDK
+   * @param message the message that is to be sent
+   * @param type the default type is set to CHAT. You can pass a custom type here for sending events like Emoji Reactions, Notifications, etc
    */
-  sendBroadcastMessage = async (
-    message: string,
-    type: HMSMessageType = HMSMessageType.CHAT
-  ) => {
+  sendBroadcastMessage = async (message: string, type: string = 'chat') => {
     logger?.verbose('#Function sendBroadcastMessage', {
       message,
       type: type || null,
@@ -331,7 +304,7 @@ export class HMSSDK {
   sendGroupMessage = async (
     message: string,
     roles: HMSRole[],
-    type: HMSMessageType = HMSMessageType.CHAT
+    type: string = 'chat'
   ) => {
     logger?.verbose('#Function sendGroupMessage', {
       message,
@@ -361,7 +334,7 @@ export class HMSSDK {
   sendDirectMessage = async (
     message: string,
     peer: HMSPeer,
-    type: HMSMessageType = HMSMessageType.CHAT
+    type: string = 'chat'
   ) => {
     logger?.verbose('#Function sendDirectMessage', {
       message,
@@ -659,6 +632,54 @@ export class HMSSDK {
     return await HMSManager.changeName(data);
   };
 
+  /**
+   * -Preview for a specific Role before changing it.
+   *
+   * By previewing before doing a Role Change, users can see their expected Audio & Video tracks which will be visible to other Peers in Room post changing the Role.
+   *
+   * checkout {@link https://www.100ms.live/docs/react-native/v2/how-to-guides/interact-with-room/peer/change-role} for more info
+   *
+   * @param {role: string}
+   * @memberof HMSSDK
+   */
+  previewForRole = async (role: string) => {
+    logger?.verbose('#Function previewForRole', {
+      role,
+      id: this.id,
+    });
+    const data = await HMSManager.previewForRole({
+      role,
+      id: this.id,
+    });
+
+    const previewTracks = HMSEncoder.encodeHmsPreviewForRoleTracks(
+      data.tracks,
+      this.id
+    );
+
+    return previewTracks;
+  };
+
+  /**
+   * Cancel the Previewing for Role invocation.
+   *
+   * If a [previewForRole] call was performed previously then calling this method clears the tracks created anticipating a Change of Role
+   *
+   * checkout {@link https://www.100ms.live/docs/react-native/v2/how-to-guides/interact-with-room/peer/change-role} for more info
+   *
+   * @memberof HMSSDK
+   */
+  cancelPreview = async () => {
+    logger?.verbose('#Function cancelPreview', {
+      id: this.id,
+    });
+    const data: { data: string } = await HMSManager.cancelPreview({
+      id: this.id,
+    });
+
+    return data;
+  };
+
   /**
    * - Calling this function will accept the most recent roleChange request made by anyone in the room
    *
@@ -1003,8 +1024,8 @@ export class HMSSDK {
    *
    * checkout {@link https://www.100ms.live/docs/react-native/v2/features/audio-output-routing#switch-audio-focus-to-another-device} for more info
    *
-   * @param {HMSAudioDevice}
    * @memberof HMSSDK
+   * @param audioDevice
    */
   switchAudioOutput = (audioDevice: HMSAudioDevice) => {
     logger?.verbose('#Function switchAudioOutput', {

package/src/classes/HmsView.tsx

@@ -91,10 +91,6 @@ export const HmsViewComponent = React.forwardRef<any, HmsComponentProps>(
     const capture = async () => {
       const viewManagerConfig = UIManager.getViewManagerConfig('HMSView');
 
-      if (!viewManagerConfig.Commands.capture) {
-        return Promise.reject('Capture command not available on HMSView');
-      }
-
       let requestId = _nextRequestId++;
       let requestMap = _requestMap;
 

package/src/components/HMSHLSPlayer/HMSHLSPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { useImperativeHandle, useRef } from 'react';
+import React, { useImperativeHandle, useRef, useState } from 'react';
 import { View, StyleSheet, UIManager, findNodeHandle } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
@@ -50,18 +50,13 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
   HMSHLSPlayerRefProperties,
   HMSHLSPlayerProps
 > = (
-  {
-    url = '',
-    style,
-    containerStyle,
-    aspectRatio = 9 / 16,
-    enableStats,
-    enableControls = false,
-  },
+  { url = '', style, containerStyle, enableStats, enableControls = false },
   ref
 ) => {
   const hmsHlsPlayerRef = useRef<RCTHMSHLSPlayerRef | null>(null);
 
+  const [aspectRatio, setAspectRatio] = useState(16 / 9);
+
   useImperativeHandle(
     ref,
     () => ({
@@ -205,6 +200,11 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
       setHMSHLSPlayerPlaybackError(data.error);
     } else {
       setHMSHLSPlayerPlaybackState(data.state);
+      if (data.state === 'onVideoSizeChanged') {
+        if (typeof data.aspectRatio === 'number') {
+          setAspectRatio(data.aspectRatio);
+        }
+      }
     }
   };
 
@@ -225,7 +225,10 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
         <RCTHMSHLSPlayer
           ref={hmsHlsPlayerRef}
           url={url}
-          style={[styles.player, { aspectRatio }]}
+          style={[
+            styles.player,
+            { aspectRatio: aspectRatio, flex: aspectRatio < 1 ? 1 : undefined },
+          ]}
           enableStats={enableStats}
           enableControls={enableControls}
           onHmsHlsPlaybackEvent={handleHLSPlaybackEvent}
@@ -254,8 +257,7 @@ const styles = StyleSheet.create({
   },
   player: {
     width: '100%',
-    maxHeight: '100%',
-    maxWidth: '100%',
-    aspectRatio: 9 / 16,
+    aspectRatio: 16 / 9,
+    flex: 1,
   },
 });

package/src/index.ts

@@ -73,7 +73,6 @@ export * from './classes/HMSAudioMixerSource';
 export * from './classes/HMSTrackSettingsInitState';
 export * from './classes/HMSLogSettings';
 export * from './classes/HMSLogAlarmManager';
-export * from './classes/HMSMessageType';
 export * from './classes/HMSPIPListenerActions';
 export * from './classes/HMSLayer';
 export * from './classes/HMSSimulcastLayerDefinition';
@@ -85,7 +84,10 @@ export type {
   HMSSessionStore,
   HMSSessionStoreValue,
 } from './classes/HMSSessionStore';
-export type { HmsViewComponent as HMSView } from './classes/HmsView';
+export type {
+  HmsViewComponent as HMSView,
+  HmsComponentProps as HMSViewProps,
+} from './classes/HmsView';
 
 import { HMSSDK as HmsManager } from './classes/HMSSDK';
 

package/src/types.ts

@@ -34,10 +34,12 @@ export enum HMSHLSPlayerPlaybackState {
   PLAYING = 'playing',
   STOPPED = 'stopped',
   UNKNOWN = 'unknown',
+  onVideoSizeChanged = 'onVideoSizeChanged',
 }
 
 export type HMSHLSPlayerPlaybackStateChangeEventData = {
   state: HMSHLSPlayerPlaybackState;
+  aspectRatio: number | undefined;
 };
 
 type HMSHLSPlayerPlaybackCueEvent = HMSHLSPlayerEvent<

package/lib/commonjs/classes/HMSMessageType.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.HMSMessageType = void 0;
-let HMSMessageType = /*#__PURE__*/function (HMSMessageType) {
-  HMSMessageType["CHAT"] = "chat";
-  HMSMessageType["METADATA"] = "metadata";
-  return HMSMessageType;
-}({});
-exports.HMSMessageType = HMSMessageType;
-//# sourceMappingURL=HMSMessageType.js.map

package/lib/commonjs/classes/HMSMessageType.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["HMSMessageType","exports"],"sources":["HMSMessageType.ts"],"sourcesContent":["export enum HMSMessageType {\n  CHAT = 'chat',\n  METADATA = 'metadata',\n}\n"],"mappings":";;;;;;IAAYA,cAAc,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA;AAAAC,OAAA,CAAAD,cAAA,GAAAA,cAAA"}

package/lib/module/classes/HMSMessageType.js

@@ -1,6 +0,0 @@
-export let HMSMessageType = /*#__PURE__*/function (HMSMessageType) {
-  HMSMessageType["CHAT"] = "chat";
-  HMSMessageType["METADATA"] = "metadata";
-  return HMSMessageType;
-}({});
-//# sourceMappingURL=HMSMessageType.js.map

package/lib/module/classes/HMSMessageType.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["HMSMessageType"],"sources":["HMSMessageType.ts"],"sourcesContent":["export enum HMSMessageType {\n  CHAT = 'chat',\n  METADATA = 'metadata',\n}\n"],"mappings":"AAAA,WAAYA,cAAc,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA"}

package/lib/typescript/classes/HMSMessageType.d.ts

@@ -1,4 +0,0 @@
-export declare enum HMSMessageType {
-    CHAT = "chat",
-    METADATA = "metadata"
-}

package/src/classes/HMSMessageType.ts

@@ -1,4 +0,0 @@
-export enum HMSMessageType {
-  CHAT = 'chat',
-  METADATA = 'metadata',
-}