@100mslive/react-native-hms 1.6.1 → 1.7.0

package/src/classes/HMSPeersCache.ts

@@ -1,11 +1,14 @@
 import { NativeModules } from 'react-native';
-import type { HMSPeer } from './HMSPeer';
 import { HMSEncoder } from './HMSEncoder';
 import { HMSPeerUpdate } from './HMSPeerUpdate';
 import { HMSTrackUpdate } from './HMSTrackUpdate';
 import type { HMSTrack } from './HMSTrack';
 import { HMSTrackType } from './HMSTrackType';
 import { HMSTrackSource } from './HMSTrackSource';
+import type { HMSNetworkQuality } from './HMSNetworkQuality';
+import type { HMSRole } from './HMSRole';
+import type { HMSAudioTrack } from './HMSAudioTrack';
+import type { HMSVideoTrack } from './HMSVideoTrack';
 
 const { HMSManager } = NativeModules;
 
@@ -26,9 +29,18 @@ export const clearHmsPeersCache = () => {
   hmsPeersCache = undefined;
 };
 
-export type HMSPeerCacheProps = Partial<
-  Omit<HMSPeer, 'peerID' | 'customerDescription'>
->;
+export type HMSPeerCacheProps = {
+  peerID?: string | undefined;
+  name?: string | undefined;
+  isLocal?: boolean | undefined;
+  networkQuality?: HMSNetworkQuality | undefined;
+  customerUserID?: string | undefined;
+  metadata?: string | undefined;
+  role?: HMSRole | undefined;
+  audioTrack?: HMSAudioTrack | undefined;
+  videoTrack?: HMSVideoTrack | undefined;
+  auxiliaryTracks?: HMSTrack[] | undefined;
+};
 
 export class HMSPeersCache {
   private _data = new Map<string, HMSPeerCacheProps>();
@@ -66,12 +78,19 @@ export class HMSPeersCache {
   ) {
     const peerObj = this._data.get(peerId);
 
+    if (updateType === HMSPeerUpdate.PEER_JOINED) {
+      if (!peerObj) {
+        this._data.set(peerId, data);
+      }
+      return;
+    }
+
     if (updateType === HMSPeerUpdate.PEER_LEFT) {
       this._data.delete(peerId);
       return;
     }
 
-    let updatedObj = { ...peerObj };
+    let updatedObj = peerObj || {};
 
     switch (updateType) {
       case HMSTrackUpdate.TRACK_ADDED: {
@@ -79,7 +98,8 @@ export class HMSPeersCache {
 
         if (track.source === HMSTrackSource.REGULAR) {
           if (track.type === HMSTrackType.VIDEO) {
-            updatedObj.videoTrack = { ...track, isDegraded: false };
+            updatedObj.videoTrack = track;
+            updatedObj.videoTrack.isDegraded = false;
           } else if (track.type === HMSTrackType.AUDIO) {
             updatedObj.audioTrack = track;
           }
@@ -102,12 +122,9 @@ export class HMSPeersCache {
             updatedObj.audioTrack = undefined;
           }
         } else if (Array.isArray(updatedObj.auxiliaryTracks)) {
-          updatedObj = {
-            ...updatedObj,
-            auxiliaryTracks: updatedObj.auxiliaryTracks.filter(
-              (auxiliaryTrack) => auxiliaryTrack.trackId !== track.trackId
-            ),
-          };
+          updatedObj.auxiliaryTracks = updatedObj.auxiliaryTracks.filter(
+            (auxiliaryTrack) => auxiliaryTrack.trackId !== track.trackId
+          );
         }
         break;
       }
@@ -117,10 +134,9 @@ export class HMSPeersCache {
 
         if (track.source === HMSTrackSource.REGULAR) {
           if (track.type === HMSTrackType.VIDEO) {
-            updatedObj.videoTrack = {
-              ...track,
-              isDegraded: updatedObj.videoTrack?.isDegraded || false,
-            };
+            const oldIsDegraded = updatedObj.videoTrack?.isDegraded || false;
+            updatedObj.videoTrack = track;
+            updatedObj.videoTrack.isDegraded = oldIsDegraded;
           } else if (track.type === HMSTrackType.AUDIO) {
             updatedObj.audioTrack = track;
           }
@@ -147,30 +163,26 @@ export class HMSPeersCache {
 
         if (track.source === HMSTrackSource.REGULAR) {
           if (track.type === HMSTrackType.VIDEO) {
-            updatedObj.videoTrack = {
-              ...track,
-              isDegraded: updateType === HMSTrackUpdate.TRACK_DEGRADED,
-            };
+            updatedObj.videoTrack = track;
+            updatedObj.videoTrack.isDegraded =
+              updateType === HMSTrackUpdate.TRACK_DEGRADED;
           } else if (track.type === HMSTrackType.AUDIO) {
             updatedObj.audioTrack = track;
           }
         } else {
           if (Array.isArray(updatedObj.auxiliaryTracks)) {
-            updatedObj = {
-              ...updatedObj,
-              auxiliaryTracks: updatedObj.auxiliaryTracks.map(
-                (auxiliaryTrack) => {
-                  if (auxiliaryTrack.trackId === track.trackId) {
-                    return {
-                      ...auxiliaryTrack,
-                      isDegraded: updateType === HMSTrackUpdate.TRACK_DEGRADED,
-                    };
-                  }
-
-                  return auxiliaryTrack;
+            updatedObj.auxiliaryTracks = updatedObj.auxiliaryTracks.map(
+              (auxiliaryTrack) => {
+                if (auxiliaryTrack.trackId === track.trackId) {
+                  return {
+                    ...auxiliaryTrack,
+                    isDegraded: updateType === HMSTrackUpdate.TRACK_DEGRADED,
+                  };
                 }
-              ),
-            };
+
+                return auxiliaryTrack;
+              }
+            );
           } else {
             updatedObj.auxiliaryTracks = [track];
           }
@@ -187,11 +199,12 @@ export class HMSPeersCache {
         );
         break;
       }
-      case HMSPeerUpdate.METADATA_CHANGED:
-      case HMSPeerUpdate.NAME_CHANGED:
-      case HMSPeerUpdate.PEER_JOINED:
-      case HMSPeerUpdate.ROLE_CHANGED: {
-        updatedObj = { ...updatedObj, ...data };
+      case HMSPeerUpdate.METADATA_CHANGED: {
+        updatedObj.metadata = data.metadata;
+        break;
+      }
+      case HMSPeerUpdate.NAME_CHANGED: {
+        updatedObj.name = data.name;
         break;
       }
       default: {
@@ -243,7 +256,7 @@ export function getPeerPropertyFromNative<T extends keyof HMSPeerCacheProps>(
         ? HMSEncoder.encodeHmsAuxiliaryTracks(data.auxiliaryTracks, id)
         : undefined;
   } else if (property === 'name') {
-    value = data?.[property] || '';
+    value = data?.[property];
   } else {
     value = data ? data[property] : undefined;
   }

package/src/classes/HMSRTMPConfig.ts

@@ -1,13 +1,13 @@
 import type { HMSRtmpVideoResolution } from './HMSRtmpVideoResolution';
 
 export class HMSRTMPConfig {
-  meetingURL: string;
+  meetingURL?: string;
   rtmpURLs?: Array<string>;
   record: boolean;
   resolution?: HMSRtmpVideoResolution;
 
   constructor(params: {
-    meetingURL: string;
+    meetingURL?: string;
     rtmpURLs?: Array<string>;
     record: boolean;
     resolution?: HMSRtmpVideoResolution;

package/src/classes/HMSRemotePeer.ts

@@ -16,7 +16,6 @@ export class HMSRemotePeer extends HMSPeer {
 
   constructor(params: {
     peerID: string;
-    customerDescription?: string;
     remoteAudioTrackData?: {
       trackId: string;
       source?: number | string;

package/src/classes/HMSSDK.tsx

@@ -314,11 +314,14 @@ export class HMSSDK {
       type: type || null,
       id: this.id,
     });
-    return await HMSManager.sendBroadcastMessage({
-      message,
-      type: type || null,
-      id: this.id,
-    });
+    const data: { messageId: string | undefined } =
+      await HMSManager.sendBroadcastMessage({
+        message,
+        type: type || null,
+        id: this.id,
+      });
+
+    return data;
   };
 
   /**
@@ -340,12 +343,15 @@ export class HMSSDK {
       id: this.id,
       type: type || null,
     });
-    return await HMSManager.sendGroupMessage({
-      message,
-      roles: HMSHelper.getRoleNames(roles),
-      id: this.id,
-      type: type || null,
-    });
+    const data: { messageId: string | undefined } =
+      await HMSManager.sendGroupMessage({
+        message,
+        roles: HMSHelper.getRoleNames(roles),
+        id: this.id,
+        type: type || null,
+      });
+
+    return data;
   };
 
   /**
@@ -367,12 +373,15 @@ export class HMSSDK {
       id: this.id,
       type: type || null,
     });
-    return await HMSManager.sendDirectMessage({
-      message,
-      peerId: peer.peerID,
-      id: this.id,
-      type: type || null,
-    });
+    const data: { messageId: string | undefined } =
+      await HMSManager.sendDirectMessage({
+        message,
+        peerId: peer.peerID,
+        id: this.id,
+        type: type || null,
+      });
+
+    return data;
   };
 
   /**
@@ -993,6 +1002,7 @@ export class HMSSDK {
   };
 
   /**
+   * Android Only
    * - This wrapper function used to switch output to device other than the default, currently available only for android.
    *
    * checkout {@link https://www.100ms.live/docs/react-native/v2/features/audio-output-routing#switch-audio-focus-to-another-device} for more info
@@ -1013,6 +1023,19 @@ export class HMSSDK {
     }
   };
 
+  switchAudioOutputUsingIOSUI = () => {
+    logger?.verbose('#Function switchAudioOutputUsingIOSUI', {
+      id: this.id,
+    });
+    if (Platform.OS !== 'ios') {
+      throw new Error(
+        '#Function `switchAudioOutputUsingIOSUI` is only available on iOS, use `switchAudioOutput` method instead!'
+      );
+    }
+
+    return HMSManager.switchAudioOutputUsingIOSUI({ id: this.id });
+  };
+
   /**
    * - This wrapper function used to change Audio Mode manually, currently available only for android.
    *
@@ -1058,36 +1081,6 @@ 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,
-      sessionMetaData,
-    });
-    return await HMSManager.setSessionMetaData({
-      id: this.id,
-      sessionMetaData,
-    });
-  };
-
-  /**
-   * @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,
-    });
-    return await HMSManager.getSessionMetaData({ id: this.id });
-  };
-
   getRemoteVideoTrackFromTrackId = async (trackId: string) => {
     logger?.verbose('#Function getRemoteVideoTrackFromTrackId', {
       id: this.id,
@@ -1116,6 +1109,25 @@ export class HMSSDK {
     return HMSEncoder.encodeHmsRemoteAudioTrack(remoteAudioTrackData, this.id);
   };
 
+  getPeerFromPeerId = (peerId: string) => {
+    logger?.verbose('#Function getPeerFromPeerId', {
+      id: this.id,
+      peerId,
+    });
+    // Getting Peer Cache
+    const peersCache = getHmsPeersCache();
+
+    // If Peer Cache doesn't exist, return `undefined` as we don't have Peer
+    if (!peersCache) return;
+
+    const peerRole = peersCache.getProperty(peerId, 'role');
+
+    // If Peer doesn't have valid Role, return `undefined` as we don't have Peer
+    if (!peerRole) return;
+
+    return HMSEncoder.encodeHmsPeer({ peerID: peerId });
+  };
+
   /**
    * - This is a prototype event listener that takes action and listens for updates related to that particular action
    *

package/src/components/HMSHLSPlayer/HMSHLSPlayer.tsx

@@ -0,0 +1,235 @@
+import React, { useImperativeHandle, useRef } from 'react';
+import { View, StyleSheet, UIManager, findNodeHandle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import {
+  setHMSHLSPlayerCue,
+  setHMSHLSPlayerPlaybackError,
+  setHMSHLSPlayerPlaybackState,
+  setHMSHLSPlayerStats,
+  setHMSHLSPlayerStatsError,
+} from './hooks';
+import {
+  HmsHlsPlaybackEventHandler,
+  HmsHlsStatsEventHandler,
+  RCTHMSHLSPlayer,
+  RCTHMSHLSPlayerRef,
+  RCTHMSHLSPlayerViewManagerConfig,
+} from './RCTHMSHLSPlayer';
+import {
+  HMSHLSPlayerPlaybackEventTypes,
+  HMSHLSPlayerStatsEventTypes,
+} from '../../types';
+import type { HMSHLSPlayerPlaybackCueEventData } from '../../types';
+import { HMSEncoder } from '../../classes/HMSEncoder';
+import type { HMSHLSPlayerPlaybackCue } from '../../stores/types';
+
+export interface HMSHLSPlayerProps {
+  url?: string;
+  style?: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  aspectRatio?: number;
+  enableStats?: boolean;
+  enableControls?: boolean;
+}
+
+export interface HMSHLSPlayerRefProperties {
+  play: (url?: string) => void;
+  stop: () => void;
+  pause: () => void;
+  resume: () => void;
+  seekForward: (seconds: number) => void;
+  seekBackward: (seconds: number) => void;
+  seekToLivePosition: () => void;
+  setVolume: (level: number) => void;
+}
+
+const _HMSHLSPlayer: React.ForwardRefRenderFunction<
+  HMSHLSPlayerRefProperties,
+  HMSHLSPlayerProps
+> = (
+  {
+    url = '',
+    style,
+    containerStyle,
+    aspectRatio = 9 / 16,
+    enableStats,
+    enableControls = false,
+  },
+  ref
+) => {
+  const hmsHlsPlayerRef = useRef<RCTHMSHLSPlayerRef | null>(null);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      play: (url?: string) => {
+        if (hmsHlsPlayerRef.current) {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(hmsHlsPlayerRef.current),
+            RCTHMSHLSPlayerViewManagerConfig.Commands.play,
+            url ? [url] : ['']
+          );
+        }
+      },
+      stop: () => {
+        if (hmsHlsPlayerRef.current) {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(hmsHlsPlayerRef.current),
+            RCTHMSHLSPlayerViewManagerConfig.Commands.stop,
+            undefined
+          );
+        }
+      },
+      pause: () => {
+        if (hmsHlsPlayerRef.current) {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(hmsHlsPlayerRef.current),
+            RCTHMSHLSPlayerViewManagerConfig.Commands.pause,
+            undefined
+          );
+        }
+      },
+      resume: () => {
+        if (hmsHlsPlayerRef.current) {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(hmsHlsPlayerRef.current),
+            RCTHMSHLSPlayerViewManagerConfig.Commands.resume,
+            undefined
+          );
+        }
+      },
+      seekForward: (seconds: number) => {
+        if (typeof seconds !== 'number') {
+          throw new Error(
+            seconds
+              ? 'seconds must be a `number` type'
+              : 'seconds was not provided'
+          );
+        }
+
+        if (hmsHlsPlayerRef.current) {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(hmsHlsPlayerRef.current),
+            RCTHMSHLSPlayerViewManagerConfig.Commands.seekForward,
+            [seconds]
+          );
+        }
+      },
+      seekBackward: (seconds: number) => {
+        if (typeof seconds !== 'number') {
+          throw new Error(
+            seconds
+              ? 'seconds must be a `number` type'
+              : 'seconds was not provided'
+          );
+        }
+
+        if (hmsHlsPlayerRef.current) {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(hmsHlsPlayerRef.current),
+            RCTHMSHLSPlayerViewManagerConfig.Commands.seekBackward,
+            [seconds]
+          );
+        }
+      },
+      seekToLivePosition: () => {
+        if (hmsHlsPlayerRef.current) {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(hmsHlsPlayerRef.current),
+            RCTHMSHLSPlayerViewManagerConfig.Commands.seekToLivePosition,
+            undefined
+          );
+        }
+      },
+      setVolume: (level: number) => {
+        if (typeof level !== 'number') {
+          throw new Error(
+            level ? 'level must be a `number` type' : 'level was not provided'
+          );
+        }
+
+        if (hmsHlsPlayerRef.current) {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(hmsHlsPlayerRef.current),
+            RCTHMSHLSPlayerViewManagerConfig.Commands.setVolume,
+            [level]
+          );
+        }
+      },
+    }),
+    []
+  );
+
+  // Handle HLS Playback events
+  const handleHLSPlaybackEvent: HmsHlsPlaybackEventHandler = ({
+    nativeEvent,
+  }) => {
+    const { event, data } = nativeEvent;
+
+    if (event === HMSHLSPlayerPlaybackEventTypes.ON_PLAYBACK_CUE_EVENT) {
+      const transformedData = HMSEncoder.transformHMSHLSCueEventData<
+        HMSHLSPlayerPlaybackCueEventData,
+        HMSHLSPlayerPlaybackCue
+      >(data);
+      setHMSHLSPlayerCue(transformedData);
+    } else if (
+      event === HMSHLSPlayerPlaybackEventTypes.ON_PLAYBACK_FAILURE_EVENT
+    ) {
+      setHMSHLSPlayerPlaybackError(data.error);
+    } else {
+      setHMSHLSPlayerPlaybackState(data.state);
+    }
+  };
+
+  // Handle HLS Stats events
+  const handleHLSStatsEvent: HmsHlsStatsEventHandler = ({ nativeEvent }) => {
+    const { event, data } = nativeEvent;
+
+    if (event === HMSHLSPlayerStatsEventTypes.ON_STATS_EVENT_ERROR) {
+      setHMSHLSPlayerStatsError(data);
+    } else {
+      setHMSHLSPlayerStats(data);
+    }
+  };
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={[styles.playerWrapper, style]}>
+        <RCTHMSHLSPlayer
+          ref={hmsHlsPlayerRef}
+          url={url}
+          style={[styles.player, { aspectRatio }]}
+          enableStats={enableStats}
+          enableControls={enableControls}
+          onHmsHlsPlaybackEvent={handleHLSPlaybackEvent}
+          onHmsHlsStatsEvent={handleHLSStatsEvent}
+        />
+      </View>
+    </View>
+  );
+};
+
+export const HMSHLSPlayer = React.forwardRef<
+  HMSHLSPlayerRefProperties,
+  HMSHLSPlayerProps
+>(_HMSHLSPlayer);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  playerWrapper: {
+    backgroundColor: '#000000',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  player: {
+    width: '100%',
+    maxHeight: '100%',
+    maxWidth: '100%',
+    aspectRatio: 9 / 16,
+  },
+});

package/src/components/HMSHLSPlayer/RCTHMSHLSPlayer.ts

@@ -0,0 +1,38 @@
+import {
+  requireNativeComponent,
+  StyleProp,
+  NativeSyntheticEvent,
+  ViewStyle,
+  UIManager,
+  NativeMethods,
+} from 'react-native';
+import type {
+  HMSHLSPlayerPlaybackEvent,
+  HMSHLSPlayerStatsEvent,
+} from '../../types';
+
+export type HmsHlsPlaybackEventHandler = (
+  event: NativeSyntheticEvent<HMSHLSPlayerPlaybackEvent>
+) => void;
+
+export type HmsHlsStatsEventHandler = (
+  event: NativeSyntheticEvent<HMSHLSPlayerStatsEvent>
+) => void;
+
+export type RCTHMSHLSPlayerProps = {
+  url?: string;
+  style?: StyleProp<ViewStyle>;
+  enableStats?: boolean;
+  enableControls?: boolean;
+  onHmsHlsPlaybackEvent?: HmsHlsPlaybackEventHandler;
+  onHmsHlsStatsEvent?: HmsHlsStatsEventHandler;
+};
+
+export const RCTHMSHLSPlayer =
+  requireNativeComponent<RCTHMSHLSPlayerProps>('HMSHLSPlayer');
+
+export type RCTHMSHLSPlayerRef = React.Component<RCTHMSHLSPlayerProps> &
+  Readonly<NativeMethods>;
+
+export const RCTHMSHLSPlayerViewManagerConfig =
+  UIManager.getViewManagerConfig('HMSHLSPlayer');