@100mslive/react-native-hms 1.7.2 → 2.0.0-alpha.0

package/src/classes/HMSSDK.tsx

@@ -43,11 +43,14 @@ import {
 } from './HMSRoomCache';
 import { 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,68 @@ 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 = (
+  //   options?: HMSPeerListIteratorOptions
+  // ): HMSPeerListIterator => {
+  //   logger?.verbose('#Function getPeerListIterator', {
+  //     id: this.id,
+  //     options,
+  //   });
+
+  //   const uniqueId = Date.now();
+
+  //   const data: null | { sucess: boolean; uniqueId: number } =
+  //     HMSManager.getPeerListIterator({
+  //       id: this.id,
+  //       ...options,
+  //       limit: options?.limit ?? 10,
+  //       uniqueId: uniqueId,
+  //     });
+
+  //   if (!data) {
+  //     throw new Error('Unable to create PeerListIterator');
+  //   }
+
+  //   return new HMSPeerListIterator(data.uniqueId);
+  // };
+
   /**
    * - This is a prototype event listener that takes action and listens for updates related to that particular action
    *
@@ -1205,6 +1296,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 +1643,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 +2001,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:
     }
   };
@@ -2002,6 +2150,26 @@ export class HMSSDK {
     }
   };
 
+  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) => {
     if (data.id !== this.id) {
       return;
@@ -2300,12 +2468,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<