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

package/src/components/HMSHLSPlayer/HMSHLSPlayer.tsx

@@ -1,30 +1,36 @@
-import React, { useImperativeHandle, useRef, useState } from 'react';
-import { View, StyleSheet, UIManager, findNodeHandle } from 'react-native';
+import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { View, StyleSheet, Platform } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import {
   setHMSHLSPlayerCue,
   setHMSHLSPlayerPlaybackError,
   setHMSHLSPlayerPlaybackState,
+  setHMSHLSPlayerResolution,
   setHMSHLSPlayerStats,
   setHMSHLSPlayerStatsError,
+  setHMSHLSPlayerSubtitles,
 } from './hooks';
-import {
-  RCTHMSHLSPlayer,
-  RCTHMSHLSPlayerViewManagerConfig,
-} from './RCTHMSHLSPlayer';
+import { RCTHMSHLSPlayer, RCTHMSHLSPlayerCommands } from './RCTHMSHLSPlayer';
 import type {
+  HlsSPlayerCuesEventHandler,
   HmsHlsPlaybackEventHandler,
   HmsHlsStatsEventHandler,
   RCTHMSHLSPlayerRef,
+  RequestedDataEventHandler,
 } from './RCTHMSHLSPlayer';
 import {
   HMSHLSPlayerPlaybackEventTypes,
   HMSHLSPlayerStatsEventTypes,
 } from '../../types';
-import type { HMSHLSPlayerPlaybackCueEventData } from '../../types';
+import type {
+  HLSPlayerDurationDetails,
+  HMSHLSPlayerPlaybackCueEventData,
+} from '../../types';
 import { HMSEncoder } from '../../classes/HMSEncoder';
 import type { HMSHLSPlayerPlaybackCue } from '../../stores/types';
+import { useHMSStore } from '../../stores/hms-store';
+import { useHMSHLSPlayerStatsStore } from '../../stores/hls-player-stats-store';
 
 export interface HMSHLSPlayerProps {
   url?: string;
@@ -44,6 +50,11 @@ export interface HMSHLSPlayerRefProperties {
   seekBackward: (seconds: number) => void;
   seekToLivePosition: () => void;
   setVolume: (level: number) => void;
+  isClosedCaptionSupported: () => Promise<boolean>;
+  isClosedCaptionEnabled: () => Promise<boolean>;
+  enableClosedCaption: () => void;
+  disableClosedCaption: () => void;
+  getPlayerDurationDetails: () => Promise<HLSPlayerDurationDetails>;
 }
 
 const _HMSHLSPlayer: React.ForwardRefRenderFunction<
@@ -54,58 +65,43 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
   ref
 ) => {
   const hmsHlsPlayerRef = useRef<RCTHMSHLSPlayerRef | null>(null);
-
-  const [aspectRatio, setAspectRatio] = useState(16 / 9);
+  const promiseAndIdsMap = useMemo(
+    () =>
+      new Map<
+        number,
+        { resolve(value: unknown): void; reject(reason?: any): void }
+      >(),
+    []
+  );
+  const currentRequestId = useRef(1);
 
   useImperativeHandle(
     ref,
     () => ({
+      // `url` is optional at the JS API level: omit it (or pass undefined)
+      // to play the URL currently configured on the player; pass a string
+      // to switch to a new stream. The Codegen `play` command signature is
+      // `(viewRef, url: string)` (non-optional), so we pass `''` to mean
+      // "no override" — the native side treats empty-string as the
+      // "use existing url" sentinel.
       play: (url?: string) => {
-        if (
-          hmsHlsPlayerRef.current &&
-          RCTHMSHLSPlayerViewManagerConfig.Commands.play
-        ) {
-          UIManager.dispatchViewManagerCommand(
-            findNodeHandle(hmsHlsPlayerRef.current),
-            RCTHMSHLSPlayerViewManagerConfig.Commands.play,
-            url ? [url] : ['']
-          );
+        if (hmsHlsPlayerRef.current) {
+          RCTHMSHLSPlayerCommands.play(hmsHlsPlayerRef.current, url ?? '');
         }
       },
       stop: () => {
-        if (
-          hmsHlsPlayerRef.current &&
-          RCTHMSHLSPlayerViewManagerConfig.Commands.stop
-        ) {
-          UIManager.dispatchViewManagerCommand(
-            findNodeHandle(hmsHlsPlayerRef.current),
-            RCTHMSHLSPlayerViewManagerConfig.Commands.stop,
-            undefined
-          );
+        if (hmsHlsPlayerRef.current) {
+          RCTHMSHLSPlayerCommands.stop(hmsHlsPlayerRef.current);
         }
       },
       pause: () => {
-        if (
-          hmsHlsPlayerRef.current &&
-          RCTHMSHLSPlayerViewManagerConfig.Commands.pause
-        ) {
-          UIManager.dispatchViewManagerCommand(
-            findNodeHandle(hmsHlsPlayerRef.current),
-            RCTHMSHLSPlayerViewManagerConfig.Commands.pause,
-            undefined
-          );
+        if (hmsHlsPlayerRef.current) {
+          RCTHMSHLSPlayerCommands.pause(hmsHlsPlayerRef.current);
         }
       },
       resume: () => {
-        if (
-          hmsHlsPlayerRef.current &&
-          RCTHMSHLSPlayerViewManagerConfig.Commands.resume
-        ) {
-          UIManager.dispatchViewManagerCommand(
-            findNodeHandle(hmsHlsPlayerRef.current),
-            RCTHMSHLSPlayerViewManagerConfig.Commands.resume,
-            undefined
-          );
+        if (hmsHlsPlayerRef.current) {
+          RCTHMSHLSPlayerCommands.resume(hmsHlsPlayerRef.current);
         }
       },
       seekForward: (seconds: number) => {
@@ -117,15 +113,8 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
           );
         }
 
-        if (
-          hmsHlsPlayerRef.current &&
-          RCTHMSHLSPlayerViewManagerConfig.Commands.seekForward
-        ) {
-          UIManager.dispatchViewManagerCommand(
-            findNodeHandle(hmsHlsPlayerRef.current),
-            RCTHMSHLSPlayerViewManagerConfig.Commands.seekForward,
-            [seconds]
-          );
+        if (hmsHlsPlayerRef.current) {
+          RCTHMSHLSPlayerCommands.seekForward(hmsHlsPlayerRef.current, seconds);
         }
       },
       seekBackward: (seconds: number) => {
@@ -137,27 +126,16 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
           );
         }
 
-        if (
-          hmsHlsPlayerRef.current &&
-          RCTHMSHLSPlayerViewManagerConfig.Commands.seekBackward
-        ) {
-          UIManager.dispatchViewManagerCommand(
-            findNodeHandle(hmsHlsPlayerRef.current),
-            RCTHMSHLSPlayerViewManagerConfig.Commands.seekBackward,
-            [seconds]
+        if (hmsHlsPlayerRef.current) {
+          RCTHMSHLSPlayerCommands.seekBackward(
+            hmsHlsPlayerRef.current,
+            seconds
           );
         }
       },
       seekToLivePosition: () => {
-        if (
-          hmsHlsPlayerRef.current &&
-          RCTHMSHLSPlayerViewManagerConfig.Commands.seekToLivePosition
-        ) {
-          UIManager.dispatchViewManagerCommand(
-            findNodeHandle(hmsHlsPlayerRef.current),
-            RCTHMSHLSPlayerViewManagerConfig.Commands.seekToLivePosition,
-            undefined
-          );
+        if (hmsHlsPlayerRef.current) {
+          RCTHMSHLSPlayerCommands.seekToLivePosition(hmsHlsPlayerRef.current);
         }
       },
       setVolume: (level: number) => {
@@ -167,19 +145,72 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
           );
         }
 
-        if (
-          hmsHlsPlayerRef.current &&
-          RCTHMSHLSPlayerViewManagerConfig.Commands.setVolume
-        ) {
-          UIManager.dispatchViewManagerCommand(
-            findNodeHandle(hmsHlsPlayerRef.current),
-            RCTHMSHLSPlayerViewManagerConfig.Commands.setVolume,
-            [level]
+        if (hmsHlsPlayerRef.current) {
+          RCTHMSHLSPlayerCommands.setVolume(hmsHlsPlayerRef.current, level);
+        }
+      },
+      isClosedCaptionSupported: () => {
+        if (hmsHlsPlayerRef.current) {
+          const requestId = currentRequestId.current++;
+          const promise = new Promise<boolean>((resolve, reject) => {
+            promiseAndIdsMap.set(requestId, { resolve, reject });
+          });
+
+          RCTHMSHLSPlayerCommands.areClosedCaptionSupported(
+            hmsHlsPlayerRef.current,
+            requestId
+          );
+          return promise;
+        }
+        return Promise.resolve(false);
+      },
+      isClosedCaptionEnabled: () => {
+        if (hmsHlsPlayerRef.current) {
+          const requestId = currentRequestId.current++;
+          const promise = new Promise<boolean>((resolve, reject) => {
+            promiseAndIdsMap.set(requestId, { resolve, reject });
+          });
+
+          RCTHMSHLSPlayerCommands.isClosedCaptionEnabled(
+            hmsHlsPlayerRef.current,
+            requestId
+          );
+          return promise;
+        }
+        return Promise.resolve(false);
+      },
+      enableClosedCaption: () => {
+        if (hmsHlsPlayerRef.current) {
+          RCTHMSHLSPlayerCommands.enableClosedCaption(hmsHlsPlayerRef.current);
+        }
+      },
+      disableClosedCaption: () => {
+        if (hmsHlsPlayerRef.current) {
+          RCTHMSHLSPlayerCommands.disableClosedCaption(hmsHlsPlayerRef.current);
+        }
+      },
+      getPlayerDurationDetails: () => {
+        if (hmsHlsPlayerRef.current) {
+          const requestId = currentRequestId.current++;
+          const promise = new Promise<HLSPlayerDurationDetails>(
+            (resolve, reject) => {
+              promiseAndIdsMap.set(requestId, { resolve, reject });
+            }
+          );
+
+          RCTHMSHLSPlayerCommands.getPlayerDurationDetails(
+            hmsHlsPlayerRef.current,
+            requestId
           );
+          return promise;
         }
+        return Promise.resolve({
+          streamDuration: undefined,
+          rollingWindowTime: undefined,
+        });
       },
     }),
-    []
+    [currentRequestId, promiseAndIdsMap]
   );
 
   // Handle HLS Playback events
@@ -198,13 +229,13 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
       event === HMSHLSPlayerPlaybackEventTypes.ON_PLAYBACK_FAILURE_EVENT
     ) {
       setHMSHLSPlayerPlaybackError(data.error);
+    } else if (
+      event ===
+      HMSHLSPlayerPlaybackEventTypes.ON_PLAYBACK_RESOLUTION_CHANGE_EVENT
+    ) {
+      setHMSHLSPlayerResolution({ ...data });
     } else {
       setHMSHLSPlayerPlaybackState(data.state);
-      if (data.state === 'onVideoSizeChanged') {
-        if (typeof data.aspectRatio === 'number') {
-          setAspectRatio(data.aspectRatio);
-        }
-      }
     }
   };
 
@@ -219,20 +250,73 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
     }
   };
 
+  // Handle HLS Player Cues events (e.g. usage - Closed Captions)
+  const handleHLSPlayerCuesEvent: HlsSPlayerCuesEventHandler = ({
+    nativeEvent,
+  }) => {
+    const { event, data } = nativeEvent;
+
+    if (event === 'ON_CLOSED_CAPTION_UPDATE') {
+      setHMSHLSPlayerSubtitles(data);
+    }
+  };
+
+  // Handle Requested data
+  const handleRequestedDataReturned: RequestedDataEventHandler = ({
+    nativeEvent,
+  }) => {
+    const { requestId, data } = nativeEvent;
+    const promiseMethods = promiseAndIdsMap.get(requestId);
+
+    if (!promiseMethods) {
+      console.warn(
+        '#function handleRequestedDataReturned',
+        "Didn't found promise methods by requestId: ",
+        requestId
+      );
+      return;
+    }
+    promiseMethods.resolve(data);
+    // Remove the entry so the map doesn't grow unboundedly across the
+    // lifetime of the player view.
+    promiseAndIdsMap.delete(requestId);
+  };
+
+  useEffect(() => {
+    return () => {
+      useHMSStore.getState().resetPlaybackSlice();
+      useHMSHLSPlayerStatsStore.getState().reset();
+      // Reject any in-flight command promises that didn't get a response
+      // before unmount. Under bridgeless mode the native side may not be
+      // able to deliver `onDataReturned` events back if the React tag is
+      // gone — left unrejected, those promises would hang forever.
+      promiseAndIdsMap.forEach(({ reject }) => {
+        reject(
+          new Error('HMSHLSPlayer unmounted before command response arrived')
+        );
+      });
+      promiseAndIdsMap.clear();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <View style={[styles.container, containerStyle]}>
       <View style={[styles.playerWrapper, style]}>
         <RCTHMSHLSPlayer
           ref={hmsHlsPlayerRef}
           url={url}
-          style={[
-            styles.player,
-            { aspectRatio: aspectRatio, flex: aspectRatio < 1 ? 1 : undefined },
-          ]}
+          style={styles.player}
           enableStats={enableStats}
           enableControls={enableControls}
-          onHmsHlsPlaybackEvent={handleHLSPlaybackEvent}
-          onHmsHlsStatsEvent={handleHLSStatsEvent}
+          onHmsHlsPlaybackEvent={handleHLSPlaybackEvent as any}
+          onHmsHlsStatsEvent={handleHLSStatsEvent as any}
+          onHlsPlayerCuesEvent={
+            Platform.OS === 'android'
+              ? (handleHLSPlayerCuesEvent as any)
+              : undefined
+          }
+          onDataReturned={handleRequestedDataReturned as any}
         />
       </View>
     </View>
@@ -257,7 +341,7 @@ const styles = StyleSheet.create({
   },
   player: {
     width: '100%',
-    aspectRatio: 16 / 9,
+    height: '100%',
     flex: 1,
   },
 });

package/src/components/HMSHLSPlayer/RCTHMSHLSPlayer.ts

@@ -1,13 +1,13 @@
-import { requireNativeComponent, UIManager } from 'react-native';
-import type {
-  StyleProp,
-  NativeSyntheticEvent,
-  ViewStyle,
-  NativeMethods,
-} from 'react-native';
+import type { ElementRef } from 'react';
+import type { StyleProp, NativeSyntheticEvent, ViewStyle } from 'react-native';
+import HMSHLSPlayerNativeComponent, {
+  Commands,
+} from '../../specs/HMSHLSPlayerNativeComponent';
 import type {
+  HMSHLSPlayerCuesEvent,
   HMSHLSPlayerPlaybackEvent,
   HMSHLSPlayerStatsEvent,
+  RequestedDataEvent,
 } from '../../types';
 
 export type HmsHlsPlaybackEventHandler = (
@@ -18,6 +18,14 @@ export type HmsHlsStatsEventHandler = (
   event: NativeSyntheticEvent<HMSHLSPlayerStatsEvent>
 ) => void;
 
+export type HlsSPlayerCuesEventHandler = (
+  event: NativeSyntheticEvent<HMSHLSPlayerCuesEvent>
+) => void;
+
+export type RequestedDataEventHandler = (
+  event: NativeSyntheticEvent<RequestedDataEvent>
+) => void;
+
 export type RCTHMSHLSPlayerProps = {
   url?: string;
   style?: StyleProp<ViewStyle>;
@@ -25,13 +33,12 @@ export type RCTHMSHLSPlayerProps = {
   enableControls?: boolean;
   onHmsHlsPlaybackEvent?: HmsHlsPlaybackEventHandler;
   onHmsHlsStatsEvent?: HmsHlsStatsEventHandler;
+  onDataReturned?: RequestedDataEventHandler;
+  onHlsPlayerCuesEvent?: HlsSPlayerCuesEventHandler;
 };
 
-export const RCTHMSHLSPlayer =
-  requireNativeComponent<RCTHMSHLSPlayerProps>('HMSHLSPlayer');
+export const RCTHMSHLSPlayer = HMSHLSPlayerNativeComponent;
 
-export type RCTHMSHLSPlayerRef = React.Component<RCTHMSHLSPlayerProps> &
-  Readonly<NativeMethods>;
+export const RCTHMSHLSPlayerCommands = Commands;
 
-export const RCTHMSHLSPlayerViewManagerConfig =
-  UIManager.getViewManagerConfig('HMSHLSPlayer');
+export type RCTHMSHLSPlayerRef = ElementRef<typeof RCTHMSHLSPlayer>;

package/src/components/HMSHLSPlayer/hooks.ts

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { Platform } from 'react-native';
 import type { DependencyList } from 'react';
 import { shallow } from 'zustand/shallow';
 
@@ -17,6 +18,10 @@ export const useHMSHLSPlayerPlaybackState = () => {
   return useHMSStore((state) => state.playbackState);
 };
 
+export const useHMSHLSPlayerResolution = () => {
+  return useHMSStore((state) => state.resolution);
+};
+
 export const useHMSHLSPlayerStats = () => {
   return useHMSHLSPlayerStatsStore(
     (state) => ({
@@ -35,10 +40,18 @@ export const useHMSHLSPlayerStat = <
   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);
-// }
+export const useHMSHLSPlayerSubtitles = () => {
+  return useHMSHLSPlayerStatsStore((state) => state.subtitles);
+};
+
+// The distance of current playback position from the live edge of HLS stream
+export const useIsHLSStreamLive = (
+  liveOffsetMillis: number = Platform.select({ default: 10000, ios: 5000 })
+) => {
+  return useHMSHLSPlayerStatsStore(
+    (state) => state.stats.distanceFromLive < liveOffsetMillis
+  );
+};
 
 // get latest state (without component rerender)
 
@@ -89,6 +102,8 @@ export const useHMSHLSPlayerCue = (
 export const setHMSHLSPlayerPlaybackState =
   useHMSStore.getState().setPlaybackState;
 
+export const setHMSHLSPlayerResolution = useHMSStore.getState().setResolution;
+
 export const setHMSHLSPlayerCue = useHMSStore.getState().setCue;
 
 export const setHMSHLSPlayerPlaybackError =
@@ -99,3 +114,6 @@ export const setHMSHLSPlayerStats =
 
 export const setHMSHLSPlayerStatsError =
   useHMSHLSPlayerStatsStore.getState().setError;
+
+export const setHMSHLSPlayerSubtitles =
+  useHMSHLSPlayerStatsStore.getState().setSubtitles;

package/src/components/HMSHLSPlayer/index.ts

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

package/src/hooks/hmsviews.ts

@@ -0,0 +1,15 @@
+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/hooks/polls.ts

@@ -0,0 +1,14 @@
+import type { HMSPoll } from '../classes/polls/HMSPoll';
+import { useHMSInteractivityStore } from '../stores/hms-interactivity-store';
+
+// use latest state (with component rerender)
+
+export const usePollsState = (pollId?: HMSPoll['pollId']) => {
+  return useHMSInteractivityStore((state) =>
+    pollId ? state.polls[pollId] : state.polls
+  );
+};
+
+// state setters
+
+export const setPollsState = useHMSInteractivityStore.getState().setPolls;

package/src/index.ts

@@ -22,6 +22,7 @@ export * from './classes/HMSRemoteAudioTrack';
 export * from './classes/HMSPublishSettings';
 export * from './classes/HMSPermissions';
 export * from './classes/HMSPeer';
+export * from './classes/HMSPeerType';
 export * from './classes/HMSLocalVideoTrack';
 export * from './classes/HMSLocalPeer';
 export * from './classes/HMSLocalAudioTrack';
@@ -80,25 +81,59 @@ export * from './classes/HMSQualityLimitationReasons';
 export * from './classes/HMSQualityLimitationReason';
 export * from './classes/HMSCameraControl';
 export * from './classes/HMSIOSAudioMode';
+export * from './classes/HMSRecordingState';
+export * from './classes/HMSStreamingState';
+export * from './classes/HMSHLSPlaylistType';
 export type {
   HMSSessionStore,
-  HMSSessionStoreValue,
+  JsonArray,
+  JsonMap,
+  JsonPrimitive,
+  JsonValue,
 } from './classes/HMSSessionStore';
 export type {
   HmsViewComponent as HMSView,
   HmsComponentProps as HMSViewProps,
 } from './classes/HmsView';
+export type { HMSPIPConfig } from './classes/HMSPIPConfig';
+export { HMSRecordingState } from './classes/HMSRecordingState';
+export type { HMSPoll } from './classes/polls/HMSPoll';
+export * from './classes/HMSNoiseCancellationPlugin';
+export * from './classes/whiteboard';
+
+export { HMSPollQuestionType } from './classes/polls/HMSPollQuestionType';
+export { HMSPollType } from './classes/polls/HMSPollType';
+export { HMSPollUserTrackingMode } from './classes/polls/HMSPollUserTrackingMode';
+export { HMSPollUpdateType } from './classes/polls/HMSPollUpdateType';
+export { HMSPollState } from './classes/polls/HMSPollState';
+export { HMSPollQuestion } from './classes/polls/HMSPollQuestion';
+export { HMSPollQuestionOption } from './classes/polls/HMSPollQuestionOption';
+export { HMSPollQuestionAnswer } from './classes/polls/HMSPollQuestionAnswer';
+export { HMSPollQuestionResponse } from './classes/polls/HMSPollQuestionResponse';
+export { PollLeaderboardResponse } from './classes/polls/PollLeaderboardResponse';
+export { HMSPollLeaderboardEntry } from './classes/polls/HMSPollLeaderboardEntry';
+export { HMSPollLeaderboardSummary } from './classes/polls/HMSPollLeaderboardSummary';
+
+export * from './classes/transcriptions';
 
 import { HMSSDK as HmsManager } from './classes/HMSSDK';
 
-// 100ms React Native Native Module
-export { default as HMSManagerModule } from './classes/HMSManagerModule';
+// 100ms React Native Module
+export { default as HMSManagerModule } from './modules/HMSManagerModule';
 
 // 100ms Components
 export * from './components/HMSHLSPlayer';
 
 // 100ms Hooks
 export * from './hooks/useHMSPeerUpdates';
+export { useHmsViewsResolutionsState } from './hooks/hmsviews';
+
+// 100ms Utilities
+export type { NotificationResult } from './utils/notification';
+export { checkNotifications } from './utils/notification';
+
+export * from './utils/windowController';
+export * from './utils/keyboard';
 
 // 100ms types
 export * from './types';

package/src/modules/HMSManagerModule.ts

@@ -0,0 +1,5 @@
+import HMSManager from '../specs/NativeHMSManager';
+
+export type HMSManagerProps = any;
+
+export default HMSManager as HMSManagerProps;