@100mslive/react-native-hms 1.10.3 → 1.10.4

package/src/components/HMSHLSPlayer/HMSHLSPlayer.tsx

@@ -1,5 +1,11 @@
-import React, { useImperativeHandle, useRef } from 'react';
-import { View, StyleSheet, UIManager, findNodeHandle } from 'react-native';
+import React, { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+  View,
+  StyleSheet,
+  UIManager,
+  findNodeHandle,
+  Platform,
+} from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import {
@@ -9,23 +15,31 @@ import {
   setHMSHLSPlayerResolution,
   setHMSHLSPlayerStats,
   setHMSHLSPlayerStatsError,
+  setHMSHLSPlayerSubtitles,
 } from './hooks';
 import {
   RCTHMSHLSPlayer,
   RCTHMSHLSPlayerViewManagerConfig,
 } 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;
@@ -45,6 +59,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<
@@ -55,6 +74,15 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
   ref
 ) => {
   const hmsHlsPlayerRef = useRef<RCTHMSHLSPlayerRef | null>(null);
+  const promiseAndIdsMap = useMemo(
+    () =>
+      new Map<
+        number,
+        { resolve(value: unknown): void; reject(reason?: any): void }
+      >(),
+    []
+  );
+  const currentRequestId = useRef(1);
 
   useImperativeHandle(
     ref,
@@ -177,8 +205,94 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
           );
         }
       },
+      isClosedCaptionSupported: () => {
+        if (
+          hmsHlsPlayerRef.current &&
+          RCTHMSHLSPlayerViewManagerConfig.Commands.areClosedCaptionSupported
+        ) {
+          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]
+          );
+          return promise;
+        }
+        return Promise.resolve(false);
+      },
+      isClosedCaptionEnabled: () => {
+        if (
+          hmsHlsPlayerRef.current &&
+          RCTHMSHLSPlayerViewManagerConfig.Commands.isClosedCaptionEnabled
+        ) {
+          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]
+          );
+          return promise;
+        }
+        return Promise.resolve(false);
+      },
+      enableClosedCaption: () => {
+        if (
+          hmsHlsPlayerRef.current &&
+          RCTHMSHLSPlayerViewManagerConfig.Commands.enableClosedCaption
+        ) {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(hmsHlsPlayerRef.current),
+            RCTHMSHLSPlayerViewManagerConfig.Commands.enableClosedCaption,
+            undefined
+          );
+        }
+      },
+      disableClosedCaption: () => {
+        if (
+          hmsHlsPlayerRef.current &&
+          RCTHMSHLSPlayerViewManagerConfig.Commands.disableClosedCaption
+        ) {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(hmsHlsPlayerRef.current),
+            RCTHMSHLSPlayerViewManagerConfig.Commands.disableClosedCaption,
+            undefined
+          );
+        }
+      },
+      getPlayerDurationDetails: () => {
+        if (
+          hmsHlsPlayerRef.current &&
+          RCTHMSHLSPlayerViewManagerConfig.Commands.getPlayerDurationDetails
+        ) {
+          const requestId = currentRequestId.current++;
+          const promise = new Promise<HLSPlayerDurationDetails>(
+            (resolve, reject) => {
+              promiseAndIdsMap.set(requestId, { resolve, reject });
+            }
+          );
+
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(hmsHlsPlayerRef.current),
+            RCTHMSHLSPlayerViewManagerConfig.Commands.getPlayerDurationDetails,
+            [requestId]
+          );
+          return promise;
+        }
+        return Promise.resolve({
+          streamDuration: undefined,
+          rollingWindowTime: undefined,
+        });
+      },
     }),
-    []
+    [currentRequestId, promiseAndIdsMap]
   );
 
   // Handle HLS Playback events
@@ -218,6 +332,42 @@ 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);
+  };
+
+  useEffect(() => {
+    return () => {
+      useHMSStore.getState().resetPlaybackSlice();
+      useHMSHLSPlayerStatsStore.getState().reset();
+    };
+  }, []);
+
   return (
     <View style={[styles.container, containerStyle]}>
       <View style={[styles.playerWrapper, style]}>
@@ -229,6 +379,10 @@ const _HMSHLSPlayer: React.ForwardRefRenderFunction<
           enableControls={enableControls}
           onHmsHlsPlaybackEvent={handleHLSPlaybackEvent}
           onHmsHlsStatsEvent={handleHLSStatsEvent}
+          onHlsPlayerCuesEvent={
+            Platform.OS === 'android' ? handleHLSPlayerCuesEvent : undefined
+          }
+          onDataReturned={handleRequestedDataReturned}
         />
       </View>
     </View>

package/src/components/HMSHLSPlayer/RCTHMSHLSPlayer.ts

@@ -6,8 +6,10 @@ import type {
   NativeMethods,
 } from 'react-native';
 import type {
+  HMSHLSPlayerCuesEvent,
   HMSHLSPlayerPlaybackEvent,
   HMSHLSPlayerStatsEvent,
+  RequestedDataEvent,
 } from '../../types';
 
 export type HmsHlsPlaybackEventHandler = (
@@ -18,6 +20,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,6 +35,8 @@ export type RCTHMSHLSPlayerProps = {
   enableControls?: boolean;
   onHmsHlsPlaybackEvent?: HmsHlsPlaybackEventHandler;
   onHmsHlsStatsEvent?: HmsHlsStatsEventHandler;
+  onDataReturned?: RequestedDataEventHandler;
+  onHlsPlayerCuesEvent?: HlsSPlayerCuesEventHandler;
 };
 
 export const 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';
 
@@ -39,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)
 
@@ -105,3 +114,6 @@ export const setHMSHLSPlayerStats =
 
 export const setHMSHLSPlayerStatsError =
   useHMSHLSPlayerStatsStore.getState().setError;
+
+export const setHMSHLSPlayerSubtitles =
+  useHMSHLSPlayerStatsStore.getState().setSubtitles;

package/src/components/HMSHLSPlayer/index.ts

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

package/src/index.ts

@@ -83,6 +83,7 @@ export * from './classes/HMSCameraControl';
 export * from './classes/HMSIOSAudioMode';
 export * from './classes/HMSRecordingState';
 export * from './classes/HMSStreamingState';
+export * from './classes/HMSHLSPlaylistType';
 export type {
   HMSSessionStore,
   JsonArray,

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

@@ -25,4 +25,12 @@ export const createHMSHLSPlayerPlaybackSlice: StateCreator<
 
   resolution: undefined,
   setResolution: (resolution) => set({ resolution }),
+
+  resetPlaybackSlice: () =>
+    set({
+      cue: undefined,
+      playbackState: HMSHLSPlayerPlaybackState.UNKNOWN,
+      error: undefined,
+      resolution: undefined,
+    }),
 });

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

@@ -6,32 +6,42 @@ import type {
   HMSHLSPlayerStatsStore,
 } from './types';
 
-export const useHMSHLSPlayerStatsStore = create<HMSHLSPlayerStatsStore>()(
-  subscribeWithSelector((set) => ({
-    // Handle Stats
-    stats: {
-      // bandwidth
-      bandWidthEstimate: 0,
-      totalBytesLoaded: 0,
+const INITIAL_STATS = {
+  // bandwidth
+  bandWidthEstimate: 0,
+  totalBytesLoaded: 0,
 
-      // bufferedDuration
-      bufferedDuration: 0,
+  // bufferedDuration
+  bufferedDuration: 0,
 
-      // distanceFromLive
-      distanceFromLive: 0,
+  // distanceFromLive
+  distanceFromLive: 0,
 
-      // frameInfo
-      droppedFrameCount: 0,
+  // frameInfo
+  droppedFrameCount: 0,
 
-      // videoInfo
-      averageBitrate: 0,
-      videoHeight: 0,
-      videoWidth: 0,
-    },
+  // videoInfo
+  averageBitrate: 0,
+  videoHeight: 0,
+  videoWidth: 0,
+};
+
+export const useHMSHLSPlayerStatsStore = create<HMSHLSPlayerStatsStore>()(
+  subscribeWithSelector((set) => ({
+    // Handle Stats
+    stats: INITIAL_STATS,
     changeStats: (stats: HMSHLSPlayerStats) => set({ stats }),
 
     // Handle Stats Error
     error: undefined,
     setError: (error: HMSHLSPlayerStatsError) => set({ error }),
+
+    // Handle Closed Caption
+    subtitles: null,
+    setSubtitles: (subtitles: string | null) => set({ subtitles }),
+
+    // Reset State
+    reset: () =>
+      set({ stats: INITIAL_STATS, error: undefined, subtitles: null }),
   }))
 );

package/src/stores/types.ts

@@ -11,7 +11,8 @@ import type {
 } from '../types';
 
 export type HMSStore = HMSHLSPlayerPlaybackSlice & HMSViewsSlice;
-export type HMSHLSPlayerStatsStore = HMSHLSPlayerStatsSlice;
+export type HMSHLSPlayerStatsStore = HMSHLSPlayerStatsSlice &
+  HLSPlayerClosedCaptionsSlice;
 export type HMSInteractivityStore = HMSPollsSlice;
 
 //#region HMSViews Slice
@@ -57,6 +58,7 @@ export interface HMSHLSPlayerPlaybackSlice {
   setPlaybackState(playbackState: HMSHLSPlayerPlaybackState): void;
   setResolution(resolution: HMSHLSPlayerResolution): void;
   setPlaybackError(error: HMSHLSPlayerPlaybackError): void;
+  resetPlaybackSlice(): void;
 }
 
 //#endregion HLS Player Playback Slice
@@ -73,6 +75,12 @@ export interface HMSHLSPlayerStatsSlice {
   error: HMSHLSPlayerStatsError | undefined;
   changeStats(stats: HMSHLSPlayerStats): void;
   setError(error: HMSHLSPlayerStatsError): void;
+  reset(): void;
+}
+
+export interface HLSPlayerClosedCaptionsSlice {
+  subtitles: string | null;
+  setSubtitles(subtitles: string | null): void;
 }
 
 //#endregion HLS Player Stats Slice

package/src/types.ts

@@ -125,6 +125,21 @@ export type HMSHLSPlayerStatsEvent =
   | HMSHLSPlayerStatsErrorEvent
   | HMSHLSPlayerStatsUpdateEvent;
 
+export type HMSHLSPlayerCuesEvent = HMSHLSPlayerEvent<
+  'ON_CLOSED_CAPTION_UPDATE',
+  string | null
+>;
+
+export type RequestedDataEvent = {
+  requestId: number;
+  data: any;
+};
+
+export type HLSPlayerDurationDetails = {
+  streamDuration?: number;
+  rollingWindowTime?: number;
+};
+
 // #endregion HMS HLSPlayer Stats Events
 
 // #region Utility types