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

package/src/components/HMSHLSPlayer/HMSHLSPlayer.tsx

@@ -0,0 +1,261 @@
+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 {
+  RCTHMSHLSPlayer,
+  RCTHMSHLSPlayerViewManagerConfig,
+} from './RCTHMSHLSPlayer';
+import type {
+  HmsHlsPlaybackEventHandler,
+  HmsHlsStatsEventHandler,
+  RCTHMSHLSPlayerRef,
+} 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 &&
+          RCTHMSHLSPlayerViewManagerConfig.Commands.play
+        ) {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(hmsHlsPlayerRef.current),
+            RCTHMSHLSPlayerViewManagerConfig.Commands.play,
+            url ? [url] : ['']
+          );
+        }
+      },
+      stop: () => {
+        if (
+          hmsHlsPlayerRef.current &&
+          RCTHMSHLSPlayerViewManagerConfig.Commands.stop
+        ) {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(hmsHlsPlayerRef.current),
+            RCTHMSHLSPlayerViewManagerConfig.Commands.stop,
+            undefined
+          );
+        }
+      },
+      pause: () => {
+        if (
+          hmsHlsPlayerRef.current &&
+          RCTHMSHLSPlayerViewManagerConfig.Commands.pause
+        ) {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(hmsHlsPlayerRef.current),
+            RCTHMSHLSPlayerViewManagerConfig.Commands.pause,
+            undefined
+          );
+        }
+      },
+      resume: () => {
+        if (
+          hmsHlsPlayerRef.current &&
+          RCTHMSHLSPlayerViewManagerConfig.Commands.resume
+        ) {
+          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 &&
+          RCTHMSHLSPlayerViewManagerConfig.Commands.seekForward
+        ) {
+          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 &&
+          RCTHMSHLSPlayerViewManagerConfig.Commands.seekBackward
+        ) {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(hmsHlsPlayerRef.current),
+            RCTHMSHLSPlayerViewManagerConfig.Commands.seekBackward,
+            [seconds]
+          );
+        }
+      },
+      seekToLivePosition: () => {
+        if (
+          hmsHlsPlayerRef.current &&
+          RCTHMSHLSPlayerViewManagerConfig.Commands.seekToLivePosition
+        ) {
+          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 &&
+          RCTHMSHLSPlayerViewManagerConfig.Commands.setVolume
+        ) {
+          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,37 @@
+import { requireNativeComponent, UIManager } from 'react-native';
+import type {
+  StyleProp,
+  NativeSyntheticEvent,
+  ViewStyle,
+  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,101 @@
+import { useEffect } from 'react';
+import type { DependencyList } 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/hooks/useHMSPeerUpdates.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+
+import { HMSConstants } from '../classes/HMSConstants';
+import { HMSEncoder } from '../classes/HMSEncoder';
+import { HMSEventEmitter } from '../classes/HMSEventEmitter';
+import { getLogger } from '../classes/HMSLogger';
+import HMSNativeEventListener from '../classes/HMSNativeEventListener';
+import type { HMSNativeEventSubscription } from '../classes/HMSNativeEventListener';
+import type { HMSPeer } from '../classes/HMSPeer';
+import { HMSPeerUpdate, HMSPeerUpdateOrdinals } from '../classes/HMSPeerUpdate';
+import { getHmsPeersCache } from '../classes/HMSPeersCache';
+import { HMSUpdateListenerActions } from '../classes/HMSUpdateListenerActions';
+
+const eventType = HMSUpdateListenerActions.ON_PEER_UPDATE;
+
+// TODO: How to handle events which have already been received?
+// TODO(DOUBT): add HMSInstance as dependency because of actions enabling/disabling events on HMSInstance?
+export const useHMSPeerUpdates = (
+  effect: (data: { peer: HMSPeer; type: HMSPeerUpdate }) => void,
+  deps: React.DependencyList | undefined = []
+) => {
+  React.useEffect(() => {
+    if (HMSEventEmitter.listenerCount(eventType) <= 0) {
+      addPeerUpdateSubscription();
+    }
+
+    const subscription = HMSEventEmitter.addListener(eventType, effect, null);
+
+    return () => {
+      subscription.remove();
+
+      if (HMSEventEmitter.listenerCount(eventType) <= 0) {
+        removePeerUpdateSubscription();
+      }
+    };
+  }, deps);
+};
+
+let peerUpdateSubscription: HMSNativeEventSubscription | null = null;
+
+function addPeerUpdateSubscription() {
+  if (peerUpdateSubscription !== null) {
+    return;
+  }
+
+  peerUpdateSubscription = HMSNativeEventListener.addListener(
+    HMSConstants.DEFAULT_SDK_ID,
+    HMSUpdateListenerActions.ON_PEER_UPDATE,
+    (peerData: any) => {
+      const data: { peer: any; type: any } = {
+        peer: peerData,
+        type: null,
+      };
+
+      for (const ordinal of HMSPeerUpdateOrdinals.keys()) {
+        if (ordinal in peerData) {
+          data.peer.peerID = peerData[ordinal];
+          data.type = ordinal;
+          break;
+        }
+      }
+
+      const peer: HMSPeer = HMSEncoder.encodeHmsPeer(data.peer);
+      const type = HMSEncoder.encodeHmsPeerUpdate(data.type) || data.type;
+
+      getHmsPeersCache()?.updatePeerCache(data.peer.peerID, data.peer, type);
+
+      getLogger()?.verbose('#Listener ON_PEER_LISTENER_CALL', {
+        peer,
+        type,
+      });
+
+      HMSEventEmitter.emit(eventType, { peer, type });
+    }
+  );
+}
+
+function removePeerUpdateSubscription() {
+  if (peerUpdateSubscription === null) {
+    return;
+  }
+
+  peerUpdateSubscription.remove();
+  peerUpdateSubscription = null;
+}

package/src/index.ts

@@ -88,4 +88,18 @@ export type {
 export type { HmsViewComponent as HMSView } from './classes/HmsView';
 
 import { HMSSDK as HmsManager } from './classes/HMSSDK';
+
+// 100ms React Native Native Module
+export { default as HMSManagerModule } from './classes/HMSManagerModule';
+
+// 100ms Components
+export * from './components/HMSHLSPlayer';
+
+// 100ms Hooks
+export * from './hooks/useHMSPeerUpdates';
+
+// 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;
+}