@100mslive/react-native-hms 1.8.0 → 1.9.1-beta.0

package/src/classes/HMSSDK.tsx

@@ -41,19 +41,14 @@ 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';
+import type { HMSPIPConfig } from './HMSPIPConfig';
 
 type HmsViewProps = Omit<HmsComponentProps, 'id'>;
 
-// TODO: Rename to HMSPIPConfig & to be moved to a separate file
-interface PIPConfig {
-  aspectRatio?: [number, number];
-  endButton?: boolean;
-  audioButton?: boolean;
-  videoButton?: boolean;
-}
-
 const ReactNativeVersion = require('react-native/Libraries/Core/ReactNativeVersion');
 
 let HmsSdk: HMSSDK | undefined;
@@ -66,6 +61,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 +79,7 @@ export class HMSSDK {
   private onAudioDeviceChangedDelegate?: any;
   private onSessionStoreAvailableDelegate?: any;
   private onPIPRoomLeaveDelegate?: any;
+  private onPIPModeChangedDelegate?: any;
 
   private emitterSubscriptions: Partial<
     Record<
@@ -1145,6 +1142,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
    *
@@ -1229,6 +1306,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 (
@@ -1554,6 +1653,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:
     }
   };
@@ -1893,6 +2011,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:
     }
   };
@@ -2015,8 +2149,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,
@@ -2024,6 +2165,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) => {
@@ -2324,18 +2491,26 @@ 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?: HMSPIPConfig): Promise<undefined | boolean> {
+    return HMSManager.handlePipActions('enterPipMode', {
       ...data,
       id: this.id,
     });
   }
 
-  async setPipParams(data?: PIPConfig): Promise<undefined | boolean> {
+  async setPipParams(data?: HMSPIPConfig): Promise<undefined | boolean> {
     return HMSManager.handlePipActions('setPictureInPictureParams', {
       ...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/classes/HmsView.tsx

@@ -6,9 +6,10 @@ import {
   UIManager,
   Platform,
 } from 'react-native';
-import type { ViewStyle } from 'react-native';
+import type { NativeSyntheticEvent, ViewStyle } from 'react-native';
 import { HMSConstants } from './HMSConstants';
 import { HMSVideoViewMode } from './HMSVideoViewMode';
+import { setHmsViewsResolutionsState } from '../hooks/hmsviews';
 
 interface HmsViewProps {
   data: {
@@ -64,7 +65,20 @@ export const HmsViewComponent = React.forwardRef<any, HmsComponentProps>(
      * This method is passed to `onChange` prop of `HmsView` Native Component.
      * It is invoked when `HmsView` emits 'topChange' event.
      */
-    const onChange = () => setApplyStyles_ANDROID(true);
+    const onChange = ({
+      nativeEvent,
+    }: NativeSyntheticEvent<{
+      data: { height: number; width: number };
+      event: 'ON_RESOLUTION_CHANGE_EVENT';
+    }>) => {
+      const { event, data } = nativeEvent;
+
+      setApplyStyles_ANDROID(true);
+
+      if (event === 'ON_RESOLUTION_CHANGE_EVENT') {
+        setHmsViewsResolutionsState(trackId, data);
+      }
+    };
 
     /**
      * This method is passed to `onDataReturned` prop of `HmsView` Native Component.

package/src/components/HMSHLSPlayer/HMSHLSPlayer.tsx

@@ -6,6 +6,7 @@ import {
   setHMSHLSPlayerCue,
   setHMSHLSPlayerPlaybackError,
   setHMSHLSPlayerPlaybackState,
+  setHMSHLSPlayerResolution,
   setHMSHLSPlayerStats,
   setHMSHLSPlayerStatsError,
 } from './hooks';
@@ -198,13 +199,18 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
       event === HMSHLSPlayerPlaybackEventTypes.ON_PLAYBACK_FAILURE_EVENT
     ) {
       setHMSHLSPlayerPlaybackError(data.error);
+    } else if (
+      event === HMSHLSPlayerPlaybackEventTypes.ON_PLAYBACK_RESOLUTION_CHANGE_EVENT
+    ) {
+      setHMSHLSPlayerResolution({...data});
+
+      const aspectRatio = data.width / data.height;
+
+      if (typeof aspectRatio === 'number' && !isNaN(aspectRatio)) {
+        setAspectRatio(aspectRatio);
+      }
     } else {
       setHMSHLSPlayerPlaybackState(data.state);
-      if (data.state === 'onVideoSizeChanged') {
-        if (typeof data.aspectRatio === 'number') {
-          setAspectRatio(data.aspectRatio);
-        }
-      }
     }
   };
 

package/src/components/HMSHLSPlayer/hooks.ts

@@ -17,6 +17,10 @@ export const useHMSHLSPlayerPlaybackState = () => {
   return useHMSStore((state) => state.playbackState);
 };
 
+export const useHMSHLSPlayerResolution = () => {
+  return useHMSStore((state) => state.resolution);
+};
+
 export const useHMSHLSPlayerStats = () => {
   return useHMSHLSPlayerStatsStore(
     (state) => ({
@@ -89,6 +93,9 @@ export const useHMSHLSPlayerCue = (
 export const setHMSHLSPlayerPlaybackState =
   useHMSStore.getState().setPlaybackState;
 
+export const setHMSHLSPlayerResolution =
+  useHMSStore.getState().setResolution;
+
 export const setHMSHLSPlayerCue = useHMSStore.getState().setCue;
 
 export const setHMSHLSPlayerPlaybackError =

package/src/components/HMSHLSPlayer/index.ts

@@ -6,4 +6,5 @@ export {
   useHMSHLSPlayerStats,
   useHMSHLSPlayerStat,
   useHMSHLSPlayerStatsError,
+  useHMSHLSPlayerResolution,
 } from './hooks';

package/src/hooks/hmsviews.ts

@@ -0,0 +1,13 @@
+import type { TrackId } from '../stores/types';
+import { useHMSStore } from '../stores/hms-store';
+
+// use latest state (with component rerender)
+
+export const useHmsViewsResolutionsState = (trackId?: TrackId) => {
+  return useHMSStore((state) => trackId ? state.hmsviewsResolutions[trackId] : undefined);
+};
+
+// state setters
+
+export const setHmsViewsResolutionsState =
+  useHMSStore.getState().setHmsviewsResolutions;

package/src/index.ts

@@ -88,6 +88,7 @@ export type {
   HmsViewComponent as HMSView,
   HmsComponentProps as HMSViewProps,
 } from './classes/HmsView';
+export type { HMSPIPConfig } from './classes/HMSPIPConfig';
 
 import { HMSSDK as HmsManager } from './classes/HMSSDK';
 
@@ -99,6 +100,7 @@ export * from './components/HMSHLSPlayer';
 
 // 100ms Hooks
 export * from './hooks/useHMSPeerUpdates';
+export { useHmsViewsResolutionsState } from './hooks/hmsviews';
 
 // 100ms types
 export * from './types';

package/src/stores/hls-player-playback-slice.ts

@@ -22,4 +22,7 @@ export const createHMSHLSPlayerPlaybackSlice: StateCreator<
 
   error: undefined,
   setPlaybackError: (error: HMSHLSPlayerPlaybackError) => set({ error }),
+
+  resolution: undefined,
+  setResolution: (resolution) => set({ resolution }),
 });

package/src/stores/hms-store.ts

@@ -2,10 +2,12 @@ import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 
 import { createHMSHLSPlayerPlaybackSlice } from './hls-player-playback-slice';
+import { createHMSViewsSlice } from './hmsviews-slice';
 import type { HMSStore } from './types';
 
 export const useHMSStore = create<HMSStore>()(
   subscribeWithSelector((...a) => ({
     ...createHMSHLSPlayerPlaybackSlice(...a),
+    ...createHMSViewsSlice(...a)
   }))
 );

package/src/stores/hmsviews-slice.ts

@@ -0,0 +1,20 @@
+import type { StateCreator } from 'zustand';
+
+import type { HMSViewsSlice, HMSStore } from './types';
+
+export const createHMSViewsSlice: StateCreator<
+  HMSStore,
+  [],
+  [],
+  HMSViewsSlice
+> = (set) => ({
+  hmsviewsResolutions: {},
+  setHmsviewsResolutions: (trackId, resolution) => {
+    set((state) => ({
+      hmsviewsResolutions: {
+        ...state.hmsviewsResolutions,
+        [trackId]: resolution,
+      },
+    }));
+  },
+});

package/src/stores/types.ts

@@ -4,13 +4,28 @@ import type {
   HMSHLSPlayerPlaybackState,
   HMSHLSPlayerPlaybackCueEventData,
   HMSHLSPlayerPlaybackFailureEventData,
+  HMSHLSPlayerPlaybackResolutionChangeEventData,
   HMSHLSPlayerStatsErrorEventData,
   HMSHLSPlayerStatsUpdateEventData,
 } from '../types';
 
-export type HMSStore = HMSHLSPlayerPlaybackSlice;
+export type HMSStore = HMSHLSPlayerPlaybackSlice & HMSViewsSlice;
 export type HMSHLSPlayerStatsStore = HMSHLSPlayerStatsSlice;
 
+// HMSViews Slice
+
+export type TrackId = string;
+
+export type Resolution = {
+  width: number;
+  height: number;
+};
+
+export interface HMSViewsSlice {
+  hmsviewsResolutions: Record<TrackId, Resolution | undefined>;
+  setHmsviewsResolutions(trackId: TrackId, resolution: Resolution): void;
+};
+
 // HLS Player Playback Slice
 
 export interface HMSHLSPlayerPlaybackCue
@@ -25,12 +40,16 @@ export type HMSHLSPlayerPlaybackError =
   | HMSHLSPlayerPlaybackFailureEventData['error']
   | undefined;
 
+export type HMSHLSPlayerResolution = HMSHLSPlayerPlaybackResolutionChangeEventData | undefined;
+
 export interface HMSHLSPlayerPlaybackSlice {
   cue: HMSHLSPlayerCue;
   playbackState: HMSHLSPlayerPlaybackState;
+  resolution: HMSHLSPlayerResolution;
   error: HMSHLSPlayerPlaybackError;
   setCue(cue: HMSHLSPlayerPlaybackCue): void;
   setPlaybackState(playbackState: HMSHLSPlayerPlaybackState): void;
+  setResolution(resolution: HMSHLSPlayerResolution): void;
   setPlaybackError(error: HMSHLSPlayerPlaybackError): void;
 }
 

package/src/types.ts

@@ -10,6 +10,7 @@ export enum HMSHLSPlayerPlaybackEventTypes {
   ON_PLAYBACK_CUE_EVENT = 'ON_PLAYBACK_CUE_EVENT',
   ON_PLAYBACK_FAILURE_EVENT = 'ON_PLAYBACK_FAILURE_EVENT',
   ON_PLAYBACK_STATE_CHANGE_EVENT = 'ON_PLAYBACK_STATE_CHANGE_EVENT',
+  ON_PLAYBACK_RESOLUTION_CHANGE_EVENT = 'ON_PLAYBACK_RESOLUTION_CHANGE_EVENT',
 }
 
 export type HMSHLSPlayerPlaybackCueEventData = {
@@ -34,12 +35,15 @@ export enum HMSHLSPlayerPlaybackState {
   PLAYING = 'playing',
   STOPPED = 'stopped',
   UNKNOWN = 'unknown',
-  onVideoSizeChanged = 'onVideoSizeChanged',
 }
 
 export type HMSHLSPlayerPlaybackStateChangeEventData = {
   state: HMSHLSPlayerPlaybackState;
-  aspectRatio: number | undefined;
+};
+
+export type HMSHLSPlayerPlaybackResolutionChangeEventData = {
+  width: number;
+  height: number;
 };
 
 type HMSHLSPlayerPlaybackCueEvent = HMSHLSPlayerEvent<
@@ -57,10 +61,16 @@ type HMSHLSPlayerPlaybackStateChangeEvent = HMSHLSPlayerEvent<
   HMSHLSPlayerPlaybackStateChangeEventData
 >;
 
+type HMSHLSPLayerPlaybackResolutionChangeEvent = HMSHLSPlayerEvent<
+  HMSHLSPlayerPlaybackEventTypes.ON_PLAYBACK_RESOLUTION_CHANGE_EVENT,
+  HMSHLSPlayerPlaybackResolutionChangeEventData
+>;
+
 export type HMSHLSPlayerPlaybackEvent =
   | HMSHLSPlayerPlaybackCueEvent
   | HMSHLSPlayerPlaybackFailureEvent
-  | HMSHLSPlayerPlaybackStateChangeEvent;
+  | HMSHLSPlayerPlaybackStateChangeEvent
+  | HMSHLSPLayerPlaybackResolutionChangeEvent;
 
 // #endregion HMS HLSPlayer Playback Events
 

package/android/.gradle/buildOutputCleanup/cache.properties

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