@100mslive/react-native-hms 1.7.2 → 1.9.0

package/src/classes/HMSPeerListIteratorOptions.ts

@@ -0,0 +1,26 @@
+/**
+ * options for creating `HMSPeerListIterator` instance
+ *
+ * ```
+ * const peerListIterator =  hmsInstance.getPeerListIterator({
+ *   limit: 10,
+ *   byRoleName: 'viewer-realtime',
+ * });
+ * ```
+ */
+export interface HMSPeerListIteratorOptions {
+  /**
+   * filter by role of the peers
+   */
+  byRoleName?: string;
+
+  /**
+   * `peerID`s of the peers you want to fetch with iterator.
+   */
+  byPeerIds?: string[];
+
+  /**
+   * number of peers fetched by the iterator in `next` method call. Default value is `10`
+   */
+  limit?: number;
+}

package/src/classes/HMSPeerUpdate.ts

@@ -5,6 +5,7 @@ export enum HMSPeerUpdate {
   ROLE_CHANGED = 'ROLE_CHANGED',
   NAME_CHANGED = 'NAME_CHANGED',
   NETWORK_QUALITY_UPDATED = 'NETWORK_QUALITY_UPDATED',
+  HAND_RAISED_CHANGED = 'HAND_RAISED_CHANGED',
 }
 
 export const HMSPeerUpdateOrdinals = new Map([
@@ -14,4 +15,5 @@ export const HMSPeerUpdateOrdinals = new Map([
   ['5', HMSPeerUpdate.NAME_CHANGED],
   ['6', HMSPeerUpdate.METADATA_CHANGED],
   ['7', HMSPeerUpdate.NETWORK_QUALITY_UPDATED],
+  ['8', HMSPeerUpdate.HAND_RAISED_CHANGED],
 ]);

package/src/classes/HMSPeersCache.ts

@@ -39,6 +39,7 @@ export type HMSPeerCacheProps = {
   audioTrack?: HMSAudioTrack | undefined;
   videoTrack?: HMSVideoTrack | undefined;
   auxiliaryTracks?: HMSTrack[] | undefined;
+  isHandRaised?: boolean | undefined;
 };
 
 export class HMSPeersCache {
@@ -206,6 +207,10 @@ export class HMSPeersCache {
         updatedObj.name = data.name;
         break;
       }
+      case HMSPeerUpdate.HAND_RAISED_CHANGED: {
+        updatedObj.isHandRaised = data.isHandRaised;
+        break;
+      }
       default: {
         updatedObj = { ...updatedObj, ...data };
         break;
@@ -256,6 +261,8 @@ export function getPeerPropertyFromNative<T extends keyof HMSPeerCacheProps>(
         : undefined;
   } else if (property === 'name') {
     value = data?.[property];
+  } else if (property === 'isHandRaised') {
+    value = data ? data[property] : false;
   } else {
     value = data ? data[property] : undefined;
   }

package/src/classes/HMSSDK.tsx

@@ -41,13 +41,16 @@ import {
   HMSRoomCache,
   setHmsRoomCache,
 } from './HMSRoomCache';
-import { HMSPeerUpdateOrdinals } from './HMSPeerUpdate';
+import { HMSPeerUpdate, HMSPeerUpdateOrdinals } from './HMSPeerUpdate';
 import { HMSSessionStore } from './HMSSessionStore';
+import type { HMSPeerListIteratorOptions } from './HMSPeerListIteratorOptions';
+import { HMSPeerListIterator } from './HMSPeerListIterator';
 
 type HmsViewProps = Omit<HmsComponentProps, 'id'>;
 
 // TODO: Rename to HMSPIPConfig & to be moved to a separate file
 interface PIPConfig {
+  autoEnterPipMode?: boolean;
   aspectRatio?: [number, number];
   endButton?: boolean;
   audioButton?: boolean;
@@ -66,6 +69,7 @@ export class HMSSDK {
   private onJoinDelegate?: any;
   private onRoomDelegate?: any;
   private onPeerDelegate?: any;
+  private onPeerListUpdatedDelegate?: any;
   private onTrackDelegate?: any;
   private onErrorDelegate?: any;
   private onMessageDelegate?: any;
@@ -83,6 +87,7 @@ export class HMSSDK {
   private onAudioDeviceChangedDelegate?: any;
   private onSessionStoreAvailableDelegate?: any;
   private onPIPRoomLeaveDelegate?: any;
+  private onPIPModeChangedDelegate?: any;
 
   private emitterSubscriptions: Partial<
     Record<
@@ -207,30 +212,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.
@@ -656,6 +637,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
    *
@@ -1121,6 +1150,86 @@ export class HMSSDK {
     return HMSEncoder.encodeHmsPeer({ peerID: peerId });
   };
 
+  /**
+   * - This function is used to raise hand for the local peer
+   * @memberof HMSSDK
+   */
+  raiseLocalPeerHand = async () => {
+    const data = {
+      id: this.id,
+    };
+    logger?.verbose('#Function raiseLocalPeerHand', data);
+    return HMSManager.raiseLocalPeerHand(data);
+  };
+
+  /**
+   * - This function is used to lower hand for the local peer
+   * @memberof HMSSDK
+   */
+  lowerLocalPeerHand = async () => {
+    const data = {
+      id: this.id,
+    };
+    logger?.verbose('#Function lowerLocalPeerHand', data);
+    return HMSManager.lowerLocalPeerHand(data);
+  };
+
+  /**
+   * - This function is used to lower hand for the remote peer
+   * @param peer
+   */
+  lowerRemotePeerHand = async (peer: HMSPeer) => {
+    const data = {
+      peerId: peer.peerID,
+      id: this.id,
+    };
+    logger?.verbose('#Function lowerRemotePeerHand', data);
+    return HMSManager.lowerRemotePeerHand(data);
+  };
+
+  /**
+   * `getPeerListIterator` method returns an instance of `HMSPeerListIterator` class
+   *
+   * @param options options for configuring iterator
+   * @returns instance of HMSPeerListIterator class
+   *
+   * Example usage:
+   * ```
+   * const peerListIterator =  hmsInstance.getPeerListIterator();
+   * ```
+   * OR
+   * ```
+   * const peerListIterator =  hmsInstance.getPeerListIterator({
+   *    limit: 10,
+   *    byRoleName: 'viewer-realtime',
+   * });
+   * ```
+   */
+  getPeerListIterator = (
+    options?: HMSPeerListIteratorOptions
+  ): HMSPeerListIterator => {
+    logger?.verbose('#Function getPeerListIterator', {
+      id: this.id,
+      options,
+    });
+
+    const uniqueId = Math.random().toString(16).slice(2);
+
+    const data: null | { sucess: boolean; uniqueId: string; totalCount: number; } =
+      HMSManager.getPeerListIterator({
+        id: this.id,
+        ...options,
+        limit: options?.limit ?? 10,
+        uniqueId,
+      });
+
+    if (!data) {
+      throw new Error('Unable to create PeerListIterator');
+    }
+
+    return new HMSPeerListIterator(data.uniqueId, data.totalCount);
+  };
+
   /**
    * - This is a prototype event listener that takes action and listens for updates related to that particular action
    *
@@ -1205,6 +1314,28 @@ export class HMSSDK {
         this.onPeerDelegate = callback;
         break;
       }
+      case HMSUpdateListenerActions.ON_PEER_LIST_UPDATED: {
+        // Checking if we already have ON_PEER_LIST_UPDATED subscription
+        if (
+          !this.emitterSubscriptions[
+            HMSUpdateListenerActions.ON_PEER_LIST_UPDATED
+          ]
+        ) {
+          // Adding ON_PEER_LIST_UPDATED native listener
+          const peerListUpdatedSubscription =
+            HMSNativeEventListener.addListener(
+              this.id,
+              HMSUpdateListenerActions.ON_PEER_LIST_UPDATED,
+              this.onPeerListUpdatedListener
+            );
+          this.emitterSubscriptions[
+            HMSUpdateListenerActions.ON_PEER_LIST_UPDATED
+          ] = peerListUpdatedSubscription;
+        }
+        // Adding App Delegate listener
+        this.onPeerListUpdatedDelegate = callback;
+        break;
+      }
       case HMSUpdateListenerActions.ON_TRACK_UPDATE: {
         // Checking if we already have ON_TRACK_UPDATE subscription
         if (
@@ -1530,6 +1661,25 @@ export class HMSSDK {
         }
         break;
       }
+      case HMSPIPListenerActions.ON_PIP_MODE_CHANGED: {
+        if (Platform.OS === 'android') {
+          // Checking if we already have ON_PIP_MODE_CHANGED subscription
+          if (
+            !this.emitterSubscriptions[HMSPIPListenerActions.ON_PIP_MODE_CHANGED]
+          ) {
+            const pipModeChangedSubscription = HMSNativeEventListener.addListener(
+              this.id,
+              HMSPIPListenerActions.ON_PIP_MODE_CHANGED,
+              this.onPIPModeChangedListener
+            );
+            this.emitterSubscriptions[HMSPIPListenerActions.ON_PIP_MODE_CHANGED] =
+              pipModeChangedSubscription;
+          }
+          // Adding PIP mode changed Delegate listener
+          this.onPIPModeChangedDelegate = callback;
+        }
+        break;
+      }
       default:
     }
   };
@@ -1869,6 +2019,22 @@ export class HMSSDK {
         }
         break;
       }
+      case HMSPIPListenerActions.ON_PIP_MODE_CHANGED: {
+        if (Platform.OS === 'android') {
+          const subscription =
+            this.emitterSubscriptions[HMSPIPListenerActions.ON_PIP_MODE_CHANGED];
+          // Removing ON_PIP_MODE_CHANGED native listener
+          if (subscription) {
+            subscription.remove();
+
+            this.emitterSubscriptions[HMSPIPListenerActions.ON_PIP_MODE_CHANGED] =
+              undefined;
+          }
+          // Removing App Delegate listener
+          this.onPIPModeChangedDelegate = null;
+        }
+        break;
+      }
       default:
     }
   };
@@ -1991,8 +2157,15 @@ export class HMSSDK {
     const peer: HMSPeer = HMSEncoder.encodeHmsPeer(data.peer);
     const type = HMSEncoder.encodeHmsPeerUpdate(data.type) || data.type;
 
-    getHmsPeersCache()?.updatePeerCache(data.peer.peerID, data.peer, type);
+    if (type === HMSPeerUpdate.PEER_LEFT) {
+      this.sendPeerUpdateWhenPeerLeaves(data, peer, type);
+    } else {
+      getHmsPeersCache()?.updatePeerCache(data.peer.peerID, data.peer, type);
+      this.sendPeerUpdate(peer, type);
+    }
+  };
 
+  private sendPeerUpdate = (peer: any, type: any) => {
     if (this.onPeerDelegate) {
       logger?.verbose('#Listener ON_PEER_LISTENER_CALL', {
         peer,
@@ -2000,6 +2173,32 @@ export class HMSSDK {
       });
       this.onPeerDelegate({ peer, type });
     }
+  }
+
+  private sendPeerUpdateWhenPeerLeaves = (data: any, peer: any, type: any) => {
+    this.sendPeerUpdate(peer, type);
+
+    getHmsPeersCache()?.updatePeerCache(data.peer.peerID, data.peer, type);
+  }
+
+  onPeerListUpdatedListener = (data: any) => {
+    if (data.id !== this.id) {
+      return;
+    }
+    const addedPeers = HMSEncoder.encodeHmsPeers(data.addedPeers);
+    const removedPeers = HMSEncoder.encodeHmsPeers(data.removedPeers);
+
+    if (this.onPeerListUpdatedDelegate) {
+      logger?.verbose('#Listener ON_PEER_LIST_UPDATED_LISTENER_CALL', {
+        totalAddedPeers: addedPeers.length,
+        totalRemovedPeers: removedPeers.length,
+      });
+
+      this.onPeerListUpdatedDelegate({
+        addedPeers,
+        removedPeers,
+      });
+    }
   };
 
   onTrackListener = (data: any) => {
@@ -2300,12 +2499,20 @@ export class HMSSDK {
     }
   };
 
+  onPIPModeChangedListener = (data: { isInPictureInPictureMode: boolean }) => {
+    if (this.onPIPModeChangedDelegate) {
+      logger?.verbose('#Listener onPIPModeChanged_CALL', data);
+
+      this.onPIPModeChangedDelegate(data);
+    }
+  }
+
   async isPipModeSupported(): Promise<undefined | boolean> {
     return HMSManager.handlePipActions('isPipModeSupported', { id: this.id });
   }
 
-  async enablePipMode(data?: PIPConfig): Promise<undefined | boolean> {
-    return HMSManager.handlePipActions('enablePipMode', {
+  async enterPipMode(data?: PIPConfig): Promise<undefined | boolean> {
+    return HMSManager.handlePipActions('enterPipMode', {
       ...data,
       id: this.id,
     });

package/src/classes/HMSUpdateListenerActions.ts

@@ -26,4 +26,5 @@ export enum HMSUpdateListenerActions {
   ON_AUDIO_DEVICE_CHANGED = 'ON_AUDIO_DEVICE_CHANGED',
   ON_SESSION_STORE_AVAILABLE = 'ON_SESSION_STORE_AVAILABLE',
   ON_SESSION_STORE_CHANGED = 'ON_SESSION_STORE_CHANGED',
+  ON_PEER_LIST_UPDATED = 'ON_PEER_LIST_UPDATED',
 }

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

@@ -84,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/android/.gradle/buildOutputCleanup/cache.properties

@@ -1,2 +0,0 @@
-#Fri Aug 11 20:54:27 IST 2023
-gradle.version=6.7.1