@100mslive/react-native-room-kit 0.0.1

package/src/HMSInstanceSetup.tsx

@@ -0,0 +1,196 @@
+import {
+  HMSAudioTrackSettings,
+  HMSCameraFacing,
+  HMSIOSAudioMode,
+  HMSLogAlarmManager,
+  HMSLogger,
+  HMSLogLevel,
+  HMSLogSettings,
+  HMSSDK,
+  HMSTrackSettings,
+  HMSTrackSettingsInitState,
+  HMSVideoTrackSettings,
+} from '@100mslive/react-native-hms';
+import React, { useEffect } from 'react';
+import { getModel } from 'react-native-device-info';
+import { batch, useDispatch } from 'react-redux';
+
+import { getJoinConfig } from './utils';
+import { saveUserData, setHMSInstance } from './redux/actions';
+import { FullScreenIndicator } from './components/FullScreenIndicator';
+import { clearConfig } from './hooks-util';
+import { store } from './redux';
+
+const getTrackSettings = () => {
+  const joinConfig = getJoinConfig();
+
+  const listOfFaultyDevices = [
+    'Pixel',
+    'Pixel XL',
+    'Moto G5',
+    'Moto G (5S) Plus',
+    'Moto G4',
+    'TA-1053',
+    'Mi A1',
+    'Mi A2',
+    'E5823', // Sony z5 compact
+    'Redmi Note 5',
+    'FP2', // Fairphone FP2
+    'MI 5',
+  ];
+  const deviceModal = getModel();
+
+  /**
+   * Customize local peer's Audio track settings before Joining the Room.
+   *
+   * Checkout Track Settings docs for more details {@link https://www.100ms.live/docs/react-native/v2/how-to-guides/interact-with-room/track/track-settings}
+   */
+  let audioSettings = new HMSAudioTrackSettings({
+    initialState: joinConfig.mutedAudio
+      ? HMSTrackSettingsInitState.MUTED
+      : HMSTrackSettingsInitState.UNMUTED,
+    useHardwareEchoCancellation: listOfFaultyDevices.includes(deviceModal)
+      ? true
+      : false,
+    audioSource: joinConfig.audioMixer
+      ? [
+          'mic_node',
+          'screen_broadcast_audio_receiver_node',
+          'audio_file_player_node',
+        ]
+      : undefined,
+    /**
+     * `audioMode` param allows you to capture audio in its highest quality
+     * by disabling voice processing and increasing the maximum bandwidth limit
+     *
+     * Checkout Music Mode docs for more details {@link https://www.100ms.live/docs/react-native/v2/how-to-guides/configure-your-device/microphone/music-mode}
+     */
+    audioMode: joinConfig.musicMode ? HMSIOSAudioMode.MUSIC : undefined,
+  });
+
+  /**
+   * Customize local peer's Video track settings before Joining the Room.
+   *
+   * Checkout Track Settings docs for more details {@link https://www.100ms.live/docs/react-native/v2/how-to-guides/interact-with-room/track/track-settings}
+   */
+  let videoSettings = new HMSVideoTrackSettings({
+    initialState: joinConfig.mutedVideo
+      ? HMSTrackSettingsInitState.MUTED
+      : HMSTrackSettingsInitState.UNMUTED,
+    cameraFacing: HMSCameraFacing.FRONT,
+    disableAutoResize: !joinConfig.autoResize,
+    forceSoftwareDecoder: joinConfig.softwareDecoder,
+  });
+
+  return new HMSTrackSettings({
+    video: videoSettings,
+    audio: audioSettings,
+  });
+};
+
+const getLogSettings = (): HMSLogSettings => {
+  return new HMSLogSettings({
+    level: HMSLogLevel.VERBOSE,
+    isLogStorageEnabled: true,
+    maxDirSizeInBytes: HMSLogAlarmManager.DEFAULT_DIR_SIZE,
+  });
+};
+
+const getIOSBuildConfig = () => store.getState().user.iosBuildConfig || {};
+
+/**
+ * Regular Usage:
+ * const hmsInstance = await HMSSDK.build();
+ * @returns
+ */
+const getHmsInstance = async (): Promise<HMSSDK> => {
+  /**
+   * Only required for advanced use-case features like iOS Screen/Audio Share, Android Software Echo Cancellation, etc
+   * NOT required for any other features.
+   * @link https://www.100ms.live/docs/react-native/v2/advanced-features/track-settings
+   */
+  const trackSettings = getTrackSettings();
+
+  /**
+   * Regular Usage:
+   * const hmsInstance = await HMSSDK.build();
+   *
+   *
+   * Advanced Usage Example:
+   * @param {trackSettings} trackSettings is an optional value only required to enable features like iOS Screen/Audio Share, Android Software Echo Cancellation, etc
+   *
+   * @param {appGroup} appGroup is an optional value only required for implementing Screen & Audio Share on iOS. They are not required for Android. DO NOT USE if your app does not implements Screen or Audio Share on iOS.
+   *
+   * @param {preferredExtension} preferredExtension is an optional value only required for implementing Screen & Audio Share on iOS. They are not required for Android. DO NOT USE if your app does not implements Screen or Audio Share on iOS.
+   *
+   *
+   * const trackSettings = getTrackSettings();
+   * const hmsInstance = await HMSSDK.build({
+   *  trackSettings,
+   *  appGroup: 'group.reactnativehms', // required for iOS Screenshare, not required for Android
+   *  preferredExtension: 'RNHMSExampleBroadcastUpload', // required for iOS Screenshare, not required for Android
+   * });
+   */
+
+  const logSettings = getLogSettings();
+
+  const { appGroup, preferredExtension } = getIOSBuildConfig();
+
+  const hmsInstance = await HMSSDK.build({
+    logSettings,
+    trackSettings,
+    appGroup,
+    preferredExtension,
+  });
+
+  const logger = new HMSLogger();
+  logger.updateLogLevel(HMSLogLevel.VERBOSE, true);
+  hmsInstance.setLogger(logger);
+
+  return hmsInstance;
+};
+
+export const HMSInstanceSetup = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    let ignore = false;
+
+    const setupHMSInstance = async () => {
+      clearConfig();
+      getHmsInstance()
+        .then((hmssdkInstance) => {
+          console.log('$$$ hmssdkInstance id = ', hmssdkInstance.id);
+          if (!ignore) {
+            // If this component is mounted
+            // save instance in store
+            console.log('$$$ before batch');
+            batch(() => {
+              console.log('$$$ setHMSInstance call');
+              dispatch(setHMSInstance(hmssdkInstance));
+              // TODO: remove this from user reducer
+              console.log('$$$ saveUserData call');
+              dispatch(saveUserData({ hmsInstance: hmssdkInstance }));
+            });
+            console.log('$$$ after batch');
+          } else {
+            // If this component is not mounted when this response is received
+            // that means Root componnet is unmounted, we can destroy instance safely
+            hmssdkInstance.leave().finally(() => hmssdkInstance.destroy());
+          }
+        })
+        .catch((error) => {
+          // TODO: Handle this gracefully, inform library user about this
+          console.warn('Get HMS Instance Error: ', error);
+        });
+    };
+
+    setupHMSInstance();
+
+    return () => {
+      ignore = true;
+    };
+  }, []);
+
+  return <FullScreenIndicator />;
+};

package/src/HMSPrebuilt.tsx

@@ -0,0 +1,36 @@
+import React, { memo } from 'react';
+import { Provider } from 'react-redux';
+
+import { store } from './redux/index';
+import { HMSContainer } from './HMSContainer';
+import { setPrebuiltData } from './redux/actions';
+import type { IOSBuildConfig } from './utils/types';
+
+export interface HMSPrebuiltProps {
+  roomCode: string;
+  options?: {
+    userName?: string;
+    userId?: string;
+    endPoints?: {
+      init: string;
+      token: string;
+    };
+    debugMode?: boolean;
+    ios?: IOSBuildConfig;
+  };
+}
+
+export const _HMSPrebuilt: React.FC<HMSPrebuiltProps> = (props) => {
+  const { roomCode, options } = props;
+
+  store.dispatch(setPrebuiltData({ roomCode, options }));
+
+  return (
+    <Provider store={store}>
+      <HMSContainer />
+    </Provider>
+  );
+};
+
+// TODO: handle props change
+export const HMSPrebuilt = memo(_HMSPrebuilt);

package/src/HMSRoomSetup.tsx

@@ -0,0 +1,281 @@
+import {
+  HMSException,
+  HMSRoom,
+  HMSTrack,
+  HMSUpdateListenerActions,
+} from '@100mslive/react-native-hms';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Alert, Platform, StatusBar, StyleSheet, View } from 'react-native';
+import Toast from 'react-native-simple-toast';
+import { batch, useDispatch } from 'react-redux';
+
+import { Preview } from './components';
+import {
+  clearStore,
+  setHMSLocalPeerState,
+  setHMSRoomState,
+} from './redux/actions';
+import { createPeerTrackNode } from './utils/functions';
+import type { PeerTrackNode } from './utils/types';
+import { Meeting } from './components/Meeting';
+import {
+  useHMSConfig,
+  useHMSInstance,
+  useHMSListeners,
+  useHMSSessionStore,
+} from './hooks-util';
+import {
+  peerTrackNodeExistForPeerAndTrack,
+  replacePeerTrackNodesWithTrack,
+  replacePeerTrackNodes,
+  peerTrackNodeExistForPeer,
+} from './peerTrackNodeUtils';
+import { MeetingState } from './types';
+import { getJoinConfig } from './utils';
+import { COLORS } from './utils/theme';
+import { FullScreenIndicator } from './components/FullScreenIndicator';
+import { selectIsHLSViewer } from './hooks-util-selectors';
+
+type PreviewData = {
+  room: HMSRoom;
+  previewTracks: HMSTrack[];
+};
+
+export const HMSRoomSetup = () => {
+  console.log('### Inside HMSRoomSetup');
+  const didInitMeetingAction = useRef(false);
+  const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
+  console.log('### after dispatch');
+
+  const { getConfig, clearConfig } = useHMSConfig();
+  const [meetingState, setMeetingState] = useState(MeetingState.NOT_JOINED);
+  const [peerTrackNodes, setPeerTrackNodes] = useState<PeerTrackNode[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const joinMeeting = useCallback(async () => {
+    setLoading(true);
+    const hmsConfig = await getConfig();
+    // TODO: handle case when promise returned from `getConfig()` is resolved when Root component has been unmounted
+    hmsInstance.join(hmsConfig);
+  }, [getConfig, hmsInstance]);
+
+  const previewMeeting = useCallback(async () => {
+    setLoading(true);
+    const hmsConfig = await getConfig();
+    // TODO: handle case when promise returned from `getConfig()` is resolved when Root component has been unmounted
+    hmsInstance.preview(hmsConfig);
+  }, [getConfig, hmsInstance]);
+
+  // HMS Room, Peers, Track Listeners
+  useHMSListeners(setPeerTrackNodes, setMeetingState);
+
+  /**
+   * Session store is a shared realtime key-value store that is accessible by everyone in the room.
+   * It can be utilized to implement features such as pinned text, spotlight (which brings a particular
+   * peer to the center stage for everyone in the room) and more.
+   *
+   * On adding this event listener, Inside `onSessionStoreAvailableListener` function you will get an
+   * instance of `HMSSessionStore` class, then you can use this instance to "set" or "get" the value
+   * for a specific key on session store and listen for value change updates.
+   *
+   * Checkout Session Store docs fore more details ${@link https://www.100ms.live/docs/react-native/v2/how-to-guides/interact-with-room/room/session-store}
+   */
+  useHMSSessionStore();
+
+  // HMS Error Listener
+  useEffect(() => {
+    const hmsErrorHandler = (error: HMSException) => {
+      setLoading(false);
+
+      // TODO: 424 error is not recoverable
+      // (Leave Meeting and Destroy Instance) ???
+      // Inform user with Alert or Error screen and send user back
+      if (error.code === 424) {
+        Alert.alert('Error', error.description || 'Something went wrong', [
+          { text: 'OK', style: 'cancel', onPress: () => {} },
+        ]);
+      } else if (
+        Platform.OS === 'android'
+          ? error.code === 4005 || error.code === 1003
+          : error.code === 2000
+      ) {
+        // TODO: come up with Error Handle mechanism
+        // (Leave Meeting and Destroy Instance) ???
+        // Clear Redux Store?
+        // Inform user with Alert or Error screen and send user back (Navigation)
+      }
+
+      Toast.showWithGravity(
+        `${error?.code} ${error?.description}` || 'Something went wrong',
+        Toast.LONG,
+        Toast.TOP
+      );
+    };
+
+    hmsInstance.addEventListener(
+      HMSUpdateListenerActions.ON_ERROR,
+      hmsErrorHandler
+    );
+
+    return () => {
+      hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_ERROR);
+    };
+  }, [hmsInstance]);
+
+  // HMS Preview Listener
+  useEffect(() => {
+    const onPreviewHandler = (data: PreviewData) => {
+      console.log('ON_PREVIEW called');
+      batch(() => {
+        dispatch(setHMSRoomState(data.room));
+        dispatch(setHMSLocalPeerState(data.room.localPeer));
+      });
+
+      setLoading(false);
+      setMeetingState(MeetingState.IN_PREVIEW);
+    };
+
+    console.log('HMSUpdateListenerActions.ON_PREVIEW registered');
+    hmsInstance.addEventListener(
+      HMSUpdateListenerActions.ON_PREVIEW,
+      onPreviewHandler
+    );
+
+    return () => {
+      console.log('HMSUpdateListenerActions.ON_PREVIEW removed');
+      hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_PREVIEW);
+    };
+  }, [hmsInstance]);
+
+  // HMS Join Listener
+  useEffect(() => {
+    const onJoinHandler = (data: { room: HMSRoom }) => {
+      clearConfig();
+
+      setLoading(false);
+
+      const localPeer = data.room.localPeer;
+
+      const peer = localPeer;
+      const track = localPeer.videoTrack as HMSTrack | undefined;
+
+      batch(() => {
+        if (selectIsHLSViewer(localPeer)) {
+          dispatch({ type: 'SET_SHOW_CHAT_VIEW', showChatView: true });
+        }
+        dispatch(setHMSRoomState(data.room));
+        dispatch(setHMSLocalPeerState(data.room.localPeer));
+      });
+
+      setPeerTrackNodes((prevPeerTrackNodes) => {
+        if (
+          track &&
+          peerTrackNodeExistForPeerAndTrack(prevPeerTrackNodes, peer, track)
+        ) {
+          return replacePeerTrackNodesWithTrack(
+            prevPeerTrackNodes,
+            peer,
+            track
+          );
+        }
+        if (peerTrackNodeExistForPeer(prevPeerTrackNodes, peer)) {
+          return replacePeerTrackNodes(prevPeerTrackNodes, peer);
+        }
+        const hmsLocalPeer = createPeerTrackNode(peer, track);
+        return [hmsLocalPeer, ...prevPeerTrackNodes];
+      });
+
+      setMeetingState(MeetingState.IN_MEETING);
+    };
+
+    hmsInstance.addEventListener(
+      HMSUpdateListenerActions.ON_JOIN,
+      onJoinHandler
+    );
+
+    return () => {
+      hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_JOIN);
+    };
+  }, [hmsInstance]);
+
+  useEffect(() => {
+    if (!didInitMeetingAction.current) {
+      didInitMeetingAction.current = true;
+
+      // let ignore = false;
+
+      const handleMeetingPreviewOrJoin = async () => {
+        try {
+          if (getJoinConfig().skipPreview) {
+            joinMeeting();
+          } else {
+            previewMeeting();
+          }
+        } catch (error) {
+          // TODO: handle token error gracefully
+          console.warn(
+            '🚀 ~ file: HMSRoomSetup.tsx:119 ~ handleMeetingPreviewOrJoin ~ error:',
+            error
+          );
+        }
+      };
+
+      handleMeetingPreviewOrJoin();
+
+      return () => {
+        // ignore = true;
+      };
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      // TODOS:
+      // - Check If we have already left meeting, or destroyed native HMSSDK
+      //    - No need to reset redux state?
+      //    - HMSInstance will be available till this point
+      //    - If we have callback fn, call it
+      //    - When we are navigated away from screen, HMSInstance will be not available
+      // - Otherwise
+      //    - call leave method, if not called
+      //    - call destroy method, if not called
+      //    - Reset Redux States or No need?
+      //    - If we have callback fn, call it
+      //    - When we are navigated away from screen, HMSInstance will be not available
+      hmsInstance.leave().finally(() => {
+        hmsInstance.destroy();
+        dispatch(clearStore());
+      });
+      //dispatch(clearHmsReference());
+      // dispatch(clearMessageData());
+      // dispatch(clearPeerData());
+    };
+  }, [hmsInstance]);
+
+  return (
+    <>
+      <StatusBar
+        backgroundColor={COLORS.BACKGROUND.DIM}
+        barStyle={'light-content'}
+      />
+
+      {meetingState === MeetingState.IN_PREVIEW ? (
+        <Preview join={joinMeeting} loadingButtonState={loading} />
+      ) : meetingState === MeetingState.IN_MEETING ? (
+        <Meeting peerTrackNodes={peerTrackNodes} />
+      ) : loading ? (
+        <FullScreenIndicator />
+      ) : (
+        <View style={styles.container} />
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.BACKGROUND.DIM,
+  },
+});

package/src/Icons/100ms/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface HmsLogoIconProps extends Omit<ImageProps, 'source'> {}
+
+export const HmsLogoIcon: React.FC<HmsLogoIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/hms-logo.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    maxWidth: 100,
+    resizeMode: 'contain',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Alert/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface AlertIconProps extends Omit<ImageProps, 'source'> {}
+
+export const AlertIcon: React.FC<AlertIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/alert.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Camera/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface CameraIconProps extends Omit<ImageProps, 'source'> {
+  muted: boolean;
+}
+
+export const CameraIcon: React.FC<CameraIconProps> = ({
+  muted,
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={
+        muted
+          ? require('./assets/camera-muted.png')
+          : require('./assets/camera-unmuted.png')
+      }
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/Chat/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface ChatIconProps extends Omit<ImageProps, 'source'> {}
+
+export const ChatIcon: React.FC<ChatIconProps> = ({ style, ...restProps }) => {
+  return (
+    <Image
+      source={require('./assets/chat.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});