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

package/src/classes/HmsView.tsx

@@ -1,57 +1,21 @@
-import React, { useState, useImperativeHandle, useRef } from 'react';
-import {
-  findNodeHandle,
-  requireNativeComponent,
-  StyleSheet,
-  UIManager,
-  Platform,
-} from 'react-native';
+import React, {
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { StyleSheet, Platform } from 'react-native';
 import type { NativeSyntheticEvent, ViewStyle } from 'react-native';
+import HmsView, { Commands } from '../specs/HMSViewNativeComponent';
 import { HMSConstants } from './HMSConstants';
 import { HMSVideoViewMode } from './HMSVideoViewMode';
 import { setHmsViewsResolutionsState } from '../hooks/hmsviews';
 
-/**
- * Interface defining the properties for the `HmsView` component.
- *
- * This interface specifies the structure of the props that the `HmsView` component expects. It includes
- * properties for configuring the video track display, such as the track ID, mirroring options,
- * and scale type. It also includes properties for handling events and customizing the component's style.
- *
- * @interface HmsViewProps
- * @property {Object} data - An object containing the track ID, instance ID, mirroring option, and scale type for the video or audio track.
- * @property {string} data.trackId - The unique identifier for the track to be displayed.
- * @property {string} data.id - The identifier for the `HmsViewComponent` instance.
- * @property {boolean} data.mirror - Indicates whether the video should be mirrored. This is commonly used for local video tracks.
- * @property {HMSVideoViewMode} data.scaleType - Determines how the video fits within the bounds of the view (e.g., aspect fill, aspect fit).
- * @property {boolean} autoSimulcast - Enables automatic simulcast layer switching based on network conditions, if supported.
- * @property {boolean} setZOrderMediaOverlay - When true, the video view will be rendered above the regular view hierarchy.
- * @property {ViewStyle} style - Custom styles to apply to the view.
- * @property {Function} onChange - A callback function that is invoked when the `HmsView` component emits a change event.
- * @property {Function} onDataReturned - A callback function that is invoked when the `HmsView` component returns data in response to a capture frame event.
- *
- * @see {https://www.100ms.live/docs/react-native/v2/how-to-guides/set-up-video-conferencing/render-video/overview}
- */
-interface HmsViewProps {
-  data: {
-    trackId: string;
-    id: string;
-    mirror: boolean;
-    scaleType: HMSVideoViewMode;
-  };
-  autoSimulcast: boolean;
-  setZOrderMediaOverlay: boolean;
-  scaleType: HMSVideoViewMode;
-  style: ViewStyle;
-  onChange: Function;
-  onDataReturned: Function;
-}
-
-// Imports the `HmsView` component from the native side using the `requireNativeComponent` function.
-// This component is used to render video tracks in the application.
-const HmsView = requireNativeComponent<HmsViewProps>('HMSView');
-let _nextRequestId = 1;
-let _requestMap = new Map();
+type CapturePromiseMethods = {
+  resolve: (value: unknown) => void;
+  reject: (reason?: unknown) => void;
+};
 
 /**
  * Defines the properties for the `HmsViewComponent`.
@@ -93,12 +57,25 @@ export const HmsViewComponent = React.forwardRef<any, HmsComponentProps>(
 
     const hmsViewRef: any = useRef();
     const [applyStyles_ANDROID, setApplyStyles_ANDROID] = useState(false);
-    const data = {
-      trackId,
-      id,
-      mirror,
-      scaleType,
-    };
+    // Memoized so the object reference is stable across renders unless one
+    // of the inputs actually changes. Fabric diffs view props by reference
+    // before doing a deep compare — a fresh `{...}` on every render would
+    // trigger redundant native prop updates.
+    const data = useMemo(
+      () => ({ trackId, id, mirror, scaleType }),
+      [trackId, id, mirror, scaleType]
+    );
+
+    // Per-instance request/response state for the `capture` imperative.
+    // Each `<HmsView />` gets its own counter + pending-promise map so:
+    //   - requestIds can't collide across multiple HmsView instances
+    //   - pending promises are scoped to this view and cleaned up when
+    //     it unmounts (see the useEffect below)
+    const nextRequestId = useRef(1);
+    const requestMap = useMemo(
+      () => new Map<number, CapturePromiseMethods>(),
+      []
+    );
 
     /**
      * This method is passed to `onChange` prop of `HmsView` Native Component.
@@ -126,38 +103,30 @@ export const HmsViewComponent = React.forwardRef<any, HmsComponentProps>(
     const _onDataReturned = (event: {
       nativeEvent: { requestId: any; result: any; error: any };
     }) => {
-      // We grab the relevant data out of our event.
-      let { requestId, result, error } = event.nativeEvent;
-      // Then we get the promise we saved earlier for the given request ID.
-      let promise = _requestMap.get(requestId);
+      const { requestId, result, error } = event.nativeEvent;
+      const promise = requestMap.get(requestId);
+      if (!promise) {
+        // No pending request — typically a late event after unmount/cleanup
+        // rejected it, or a stale requestId from a previous mount.
+        return;
+      }
       if (result) {
-        // If it was successful, we resolve the promise.
         promise.resolve(result);
       } else {
-        // Otherwise, we reject it.
         promise.reject(error);
       }
-      // Finally, we clean up our request map.
-      _requestMap.delete(requestId);
+      requestMap.delete(requestId);
     };
 
     const capture = async () => {
-      const viewManagerConfig = UIManager.getViewManagerConfig('HMSView');
-
-      let requestId = _nextRequestId++;
-      let requestMap = _requestMap;
-
-      // We create a promise here that will be resolved once `_onRequestDone` is
-      // called.
-      let promise = new Promise(function (resolve, reject) {
+      const requestId = nextRequestId.current++;
+      const promise = new Promise((resolve, reject) => {
         requestMap.set(requestId, { resolve, reject });
       });
 
-      UIManager.dispatchViewManagerCommand(
-        findNodeHandle(hmsViewRef.current),
-        viewManagerConfig.Commands.capture,
-        [requestId]
-      );
+      if (hmsViewRef.current) {
+        Commands.capture(hmsViewRef.current, requestId);
+      }
       return promise;
     };
 
@@ -167,10 +136,23 @@ export const HmsViewComponent = React.forwardRef<any, HmsComponentProps>(
       };
     });
 
+    // Reject any in-flight capture promises on unmount. Under bridgeless
+    // mode the native side may not be able to deliver the captureFrame
+    // event back (event dispatcher returns null when the React tag is
+    // gone), which would leave promises hanging in the map forever.
+    useEffect(() => {
+      return () => {
+        requestMap.forEach(({ reject }) => {
+          reject(new Error('HmsView unmounted before capture completed'));
+        });
+        requestMap.clear();
+      };
+    }, [requestMap]);
+
     return (
       <HmsView
         ref={hmsViewRef}
-        onChange={onChange}
+        onResolutionChange={onChange as any}
         data={data}
         style={
           Platform.OS === 'android' ? (applyStyles_ANDROID ? style : {}) : style
@@ -178,7 +160,7 @@ export const HmsViewComponent = React.forwardRef<any, HmsComponentProps>(
         autoSimulcast={autoSimulcast}
         scaleType={scaleType}
         setZOrderMediaOverlay={setZOrderMediaOverlay}
-        onDataReturned={_onDataReturned}
+        onDataReturned={_onDataReturned as any}
       />
     );
   }

package/src/components/HMSHLSPlayer/HMSHLSPlayer.tsx

@@ -1,11 +1,5 @@
 import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import {
-  View,
-  StyleSheet,
-  UIManager,
-  findNodeHandle,
-  Platform,
-} from 'react-native';
+import { View, StyleSheet, Platform } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import {
@@ -17,10 +11,7 @@ import {
   setHMSHLSPlayerStatsError,
   setHMSHLSPlayerSubtitles,
 } from './hooks';
-import {
-  RCTHMSHLSPlayer,
-  RCTHMSHLSPlayerViewManagerConfig,
-} from './RCTHMSHLSPlayer';
+import { RCTHMSHLSPlayer, RCTHMSHLSPlayerCommands } from './RCTHMSHLSPlayer';
 import type {
   HlsSPlayerCuesEventHandler,
   HmsHlsPlaybackEventHandler,
@@ -87,52 +78,30 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
   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) => {
@@ -144,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) => {
@@ -164,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) => {
@@ -194,84 +145,52 @@ 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 &&
-          RCTHMSHLSPlayerViewManagerConfig.Commands.areClosedCaptionSupported
-        ) {
+        if (hmsHlsPlayerRef.current) {
           const requestId = currentRequestId.current++;
           const promise = new Promise<boolean>((resolve, reject) => {
             promiseAndIdsMap.set(requestId, { resolve, reject });
           });
 
-          UIManager.dispatchViewManagerCommand(
-            findNodeHandle(hmsHlsPlayerRef.current),
-            RCTHMSHLSPlayerViewManagerConfig.Commands.areClosedCaptionSupported,
-            [requestId]
+          RCTHMSHLSPlayerCommands.areClosedCaptionSupported(
+            hmsHlsPlayerRef.current,
+            requestId
           );
           return promise;
         }
         return Promise.resolve(false);
       },
       isClosedCaptionEnabled: () => {
-        if (
-          hmsHlsPlayerRef.current &&
-          RCTHMSHLSPlayerViewManagerConfig.Commands.isClosedCaptionEnabled
-        ) {
+        if (hmsHlsPlayerRef.current) {
           const requestId = currentRequestId.current++;
           const promise = new Promise<boolean>((resolve, reject) => {
             promiseAndIdsMap.set(requestId, { resolve, reject });
           });
 
-          UIManager.dispatchViewManagerCommand(
-            findNodeHandle(hmsHlsPlayerRef.current),
-            RCTHMSHLSPlayerViewManagerConfig.Commands.isClosedCaptionEnabled,
-            [requestId]
+          RCTHMSHLSPlayerCommands.isClosedCaptionEnabled(
+            hmsHlsPlayerRef.current,
+            requestId
           );
           return promise;
         }
         return Promise.resolve(false);
       },
       enableClosedCaption: () => {
-        if (
-          hmsHlsPlayerRef.current &&
-          RCTHMSHLSPlayerViewManagerConfig.Commands.enableClosedCaption
-        ) {
-          UIManager.dispatchViewManagerCommand(
-            findNodeHandle(hmsHlsPlayerRef.current),
-            RCTHMSHLSPlayerViewManagerConfig.Commands.enableClosedCaption,
-            undefined
-          );
+        if (hmsHlsPlayerRef.current) {
+          RCTHMSHLSPlayerCommands.enableClosedCaption(hmsHlsPlayerRef.current);
         }
       },
       disableClosedCaption: () => {
-        if (
-          hmsHlsPlayerRef.current &&
-          RCTHMSHLSPlayerViewManagerConfig.Commands.disableClosedCaption
-        ) {
-          UIManager.dispatchViewManagerCommand(
-            findNodeHandle(hmsHlsPlayerRef.current),
-            RCTHMSHLSPlayerViewManagerConfig.Commands.disableClosedCaption,
-            undefined
-          );
+        if (hmsHlsPlayerRef.current) {
+          RCTHMSHLSPlayerCommands.disableClosedCaption(hmsHlsPlayerRef.current);
         }
       },
       getPlayerDurationDetails: () => {
-        if (
-          hmsHlsPlayerRef.current &&
-          RCTHMSHLSPlayerViewManagerConfig.Commands.getPlayerDurationDetails
-        ) {
+        if (hmsHlsPlayerRef.current) {
           const requestId = currentRequestId.current++;
           const promise = new Promise<HLSPlayerDurationDetails>(
             (resolve, reject) => {
@@ -279,10 +198,9 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
             }
           );
 
-          UIManager.dispatchViewManagerCommand(
-            findNodeHandle(hmsHlsPlayerRef.current),
-            RCTHMSHLSPlayerViewManagerConfig.Commands.getPlayerDurationDetails,
-            [requestId]
+          RCTHMSHLSPlayerCommands.getPlayerDurationDetails(
+            hmsHlsPlayerRef.current,
+            requestId
           );
           return promise;
         }
@@ -359,13 +277,27 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
       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 (
@@ -377,12 +309,14 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
           style={styles.player}
           enableStats={enableStats}
           enableControls={enableControls}
-          onHmsHlsPlaybackEvent={handleHLSPlaybackEvent}
-          onHmsHlsStatsEvent={handleHLSStatsEvent}
+          onHmsHlsPlaybackEvent={handleHLSPlaybackEvent as any}
+          onHmsHlsStatsEvent={handleHLSStatsEvent as any}
           onHlsPlayerCuesEvent={
-            Platform.OS === 'android' ? handleHLSPlayerCuesEvent : undefined
+            Platform.OS === 'android'
+              ? (handleHLSPlayerCuesEvent as any)
+              : undefined
           }
-          onDataReturned={handleRequestedDataReturned}
+          onDataReturned={handleRequestedDataReturned as any}
         />
       </View>
     </View>

package/src/components/HMSHLSPlayer/RCTHMSHLSPlayer.ts

@@ -1,10 +1,8 @@
-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,
@@ -39,11 +37,8 @@ export type RCTHMSHLSPlayerProps = {
   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/modules/HMSManagerModule.ts

@@ -1,17 +1,4 @@
-import { NativeModules } from 'react-native';
-
-const { HMSManager } = NativeModules;
-
-if (HMSManager == null) {
-  console.error(
-    `[@100mslive/react-native-hms] react-native-hms module was not found. Make sure you're running your app on the native platform and your code is linked properly (cd ios && pod install && cd ..).
-
-    For installation instructions, please refer to https://www.100ms.live/docs/react-native/v2/how-to-guides/install-the-sdk/integration`
-      .split('\n')
-      .map((line) => line.trim())
-      .join('\n')
-  );
-}
+import HMSManager from '../specs/NativeHMSManager';
 
 export type HMSManagerProps = any;