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

package/src/classes/HMSSDK.tsx

@@ -1002,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
@@ -1022,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.
    *
@@ -1067,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,
@@ -1125,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');

package/src/components/HMSHLSPlayer/hooks.ts

@@ -0,0 +1,100 @@
+import { DependencyList, useEffect } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { useHMSHLSPlayerStatsStore } from '../../stores/hls-player-stats-store';
+import { useHMSStore } from '../../stores/hms-store';
+import type { HMSHLSPlayerStatsUpdateEventData } from '../../types';
+import type {
+  HMSHLSPlayerCue,
+  HMSHLSPlayerPlaybackError,
+  HMSHLSPlayerStatsError,
+} from '../../stores/types';
+
+// use latest state (with component rerender)
+
+export const useHMSHLSPlayerPlaybackState = () => {
+  return useHMSStore((state) => state.playbackState);
+};
+
+export const useHMSHLSPlayerStats = () => {
+  return useHMSHLSPlayerStatsStore(
+    (state) => ({
+      stats: state.stats,
+      error: state.error,
+    }),
+    shallow
+  );
+};
+
+export const useHMSHLSPlayerStat = <
+  T extends keyof HMSHLSPlayerStatsUpdateEventData
+>(
+  stat: T
+) => {
+  return useHMSHLSPlayerStatsStore((state) => state.stats[stat]);
+};
+
+// // The distance of current playback position from the live edge of HLS stream
+// export const useIsHLSStreamLive = (liveOffsetMillis: number = 1000) => {
+//   return useHMSHLSPlayerStatsStore((state) => state.stats.distanceFromLive < liveOffsetMillis);
+// }
+
+// get latest state (without component rerender)
+
+export const useHMSHLSPlayerStatsError = (
+  callback: (error: NonNullable<HMSHLSPlayerStatsError>) => void,
+  deps: DependencyList
+) => {
+  useEffect(() => {
+    return useHMSHLSPlayerStatsStore.subscribe(
+      (state) => state.error,
+      (data) => {
+        if (data) callback(data);
+      }
+    );
+  }, deps);
+};
+
+export const useHMSHLSPlayerPlaybackError = (
+  callback: (error: NonNullable<HMSHLSPlayerPlaybackError>) => void,
+  deps: DependencyList
+) => {
+  useEffect(() => {
+    return useHMSStore.subscribe(
+      (state) => state.error,
+      (data) => {
+        if (data) callback(data);
+      }
+    );
+  }, deps);
+};
+
+export const useHMSHLSPlayerCue = (
+  callback: (error: NonNullable<HMSHLSPlayerCue>) => void,
+  deps: DependencyList
+) => {
+  useEffect(() => {
+    return useHMSStore.subscribe(
+      (state) => state.cue,
+      (data) => {
+        if (data) callback(data);
+      }
+    );
+  }, deps);
+};
+
+// state setters
+
+export const setHMSHLSPlayerPlaybackState =
+  useHMSStore.getState().setPlaybackState;
+
+export const setHMSHLSPlayerCue = useHMSStore.getState().setCue;
+
+export const setHMSHLSPlayerPlaybackError =
+  useHMSStore.getState().setPlaybackError;
+
+export const setHMSHLSPlayerStats =
+  useHMSHLSPlayerStatsStore.getState().changeStats;
+
+export const setHMSHLSPlayerStatsError =
+  useHMSHLSPlayerStatsStore.getState().setError;

package/src/components/HMSHLSPlayer/index.ts

@@ -0,0 +1,9 @@
+export * from './HMSHLSPlayer';
+export {
+  useHMSHLSPlayerPlaybackState,
+  useHMSHLSPlayerCue,
+  useHMSHLSPlayerPlaybackError,
+  useHMSHLSPlayerStats,
+  useHMSHLSPlayerStat,
+  useHMSHLSPlayerStatsError,
+} from './hooks';

package/src/index.ts

@@ -88,4 +88,12 @@ export type {
 export type { HmsViewComponent as HMSView } from './classes/HmsView';
 
 import { HMSSDK as HmsManager } from './classes/HMSSDK';
+
+// 100ms Components
+export * from './components/HMSHLSPlayer';
+
+// 100ms types
+export * from './types';
+export * from './stores/types';
+
 export default HmsManager;

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

@@ -0,0 +1,25 @@
+import type { StateCreator } from 'zustand';
+import { HMSHLSPlayerPlaybackState } from '../types';
+import type {
+  HMSHLSPlayerPlaybackCue,
+  HMSHLSPlayerPlaybackError,
+  HMSHLSPlayerPlaybackSlice,
+  HMSStore,
+} from './types';
+
+export const createHMSHLSPlayerPlaybackSlice: StateCreator<
+  HMSStore,
+  [],
+  [],
+  HMSHLSPlayerPlaybackSlice
+> = (set) => ({
+  cue: undefined,
+  setCue: (cue: HMSHLSPlayerPlaybackCue) => set({ cue }),
+
+  playbackState: HMSHLSPlayerPlaybackState.UNKNOWN,
+  setPlaybackState: (playbackState: HMSHLSPlayerPlaybackState) =>
+    set({ playbackState }),
+
+  error: undefined,
+  setPlaybackError: (error: HMSHLSPlayerPlaybackError) => set({ error }),
+});

package/src/stores/hls-player-stats-store.ts

@@ -0,0 +1,37 @@
+import { create } from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
+import type {
+  HMSHLSPlayerStats,
+  HMSHLSPlayerStatsError,
+  HMSHLSPlayerStatsStore,
+} from './types';
+
+export const useHMSHLSPlayerStatsStore = create<HMSHLSPlayerStatsStore>()(
+  subscribeWithSelector((set) => ({
+    // Handle Stats
+    stats: {
+      // bandwidth
+      bandWidthEstimate: 0,
+      totalBytesLoaded: 0,
+
+      // bufferedDuration
+      bufferedDuration: 0,
+
+      // distanceFromLive
+      distanceFromLive: 0,
+
+      // frameInfo
+      droppedFrameCount: 0,
+
+      // videoInfo
+      averageBitrate: 0,
+      videoHeight: 0,
+      videoWidth: 0,
+    },
+    changeStats: (stats: HMSHLSPlayerStats) => set({ stats }),
+
+    // Handle Stats Error
+    error: undefined,
+    setError: (error: HMSHLSPlayerStatsError) => set({ error }),
+  }))
+);

package/src/stores/hms-store.ts

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

package/src/stores/types.ts

@@ -0,0 +1,49 @@
+// Stores
+
+import type {
+  HMSHLSPlayerPlaybackState,
+  HMSHLSPlayerPlaybackCueEventData,
+  HMSHLSPlayerPlaybackFailureEventData,
+  HMSHLSPlayerStatsErrorEventData,
+  HMSHLSPlayerStatsUpdateEventData,
+} from '../types';
+
+export type HMSStore = HMSHLSPlayerPlaybackSlice;
+export type HMSHLSPlayerStatsStore = HMSHLSPlayerStatsSlice;
+
+// HLS Player Playback Slice
+
+export interface HMSHLSPlayerPlaybackCue
+  extends Omit<HMSHLSPlayerPlaybackCueEventData, 'endDate' | 'startDate'> {
+  endDate?: Date;
+  startDate: Date;
+}
+
+export type HMSHLSPlayerCue = HMSHLSPlayerPlaybackCue | undefined;
+
+export type HMSHLSPlayerPlaybackError =
+  | HMSHLSPlayerPlaybackFailureEventData['error']
+  | undefined;
+
+export interface HMSHLSPlayerPlaybackSlice {
+  cue: HMSHLSPlayerCue;
+  playbackState: HMSHLSPlayerPlaybackState;
+  error: HMSHLSPlayerPlaybackError;
+  setCue(cue: HMSHLSPlayerPlaybackCue): void;
+  setPlaybackState(playbackState: HMSHLSPlayerPlaybackState): void;
+  setPlaybackError(error: HMSHLSPlayerPlaybackError): void;
+}
+
+// HLS Player Stats Slice
+
+export type HMSHLSPlayerStats = HMSHLSPlayerStatsUpdateEventData;
+export type HMSHLSPlayerStatsError =
+  | HMSHLSPlayerStatsErrorEventData
+  | undefined;
+
+export interface HMSHLSPlayerStatsSlice {
+  stats: HMSHLSPlayerStats;
+  error: HMSHLSPlayerStatsError | undefined;
+  changeStats(stats: HMSHLSPlayerStats): void;
+  setError(error: HMSHLSPlayerStatsError): void;
+}