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

package/src/hooks/useHmsInstance.ts

@@ -0,0 +1,173 @@
+// import {
+//   HMSAudioTrackSettings,
+//   HMSCameraFacing,
+//   HMSIOSAudioMode,
+//   HMSLogAlarmManager,
+//   HMSLogger,
+//   HMSLogLevel,
+//   HMSLogSettings,
+//   HMSSDK,
+//   HMSTrackSettings,
+//   HMSTrackSettingsInitState,
+//   HMSVideoTrackSettings,
+// } from '@100mslive/react-native-hms';
+// import { useEffect, useState } from 'react';
+// import { getModel } from 'react-native-device-info';
+
+// export const useHmsInstance = () => {
+//   const [hmsInstance, setHmsInstance] = useState(null);
+
+//   useEffect(() => {
+//     const setupInstance = async () => {
+//       /**
+//        * 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({
+//         mutedAudio,
+//         mutedVideo,
+//         audioMixer,
+//         autoResize,
+//         musicMode,
+//         softwareDecoder,
+//       });
+
+//       const logSettings = getLogSettings();
+
+//       /**
+//        * Regular Usage Example :-
+//        * ```
+//        * 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 hmsInstance = await HMSSDK.build({
+//         logSettings,
+//         trackSettings,
+//         appGroup: 'group.reactnativehms',
+//         preferredExtension:
+//           'live.100ms.reactnative.RNHMSExampleBroadcastUpload',
+//       });
+
+//       // create logger for hmssdk
+//       const logger = new HMSLogger();
+//       logger.updateLogLevel(HMSLogLevel.VERBOSE, true);
+
+//       // set logger on hmssdk
+//       hmsInstance.setLogger(logger);
+//     };
+
+//     setupInstance();
+//   }, []);
+
+//   return hmsInstance;
+// };
+
+// type TrackConfigs = {
+//   mutedAudio: boolean;
+//   audioMixer: boolean; // IOS only
+//   musicMode: boolean; // IOS only
+//   mutedVideo: boolean;
+//   autoResize: boolean; // Android only
+//   softwareDecoder: boolean; // Android only
+// };
+
+// const getTrackSettings = (config: TrackConfigs) => {
+//   const {
+//     mutedAudio,
+//     audioMixer,
+//     musicMode,
+//     mutedVideo,
+//     autoResize,
+//     softwareDecoder,
+//   } = config;
+
+//   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: mutedAudio
+//       ? HMSTrackSettingsInitState.MUTED
+//       : HMSTrackSettingsInitState.UNMUTED,
+//     useHardwareEchoCancellation: listOfFaultyDevices.includes(deviceModal)
+//       ? true
+//       : false,
+//     audioSource: 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: 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: mutedVideo
+//       ? HMSTrackSettingsInitState.MUTED
+//       : HMSTrackSettingsInitState.UNMUTED,
+//     cameraFacing: HMSCameraFacing.FRONT,
+//     disableAutoResize: !autoResize,
+//     forceSoftwareDecoder: softwareDecoder,
+//   });
+
+//   return new HMSTrackSettings({
+//     video: videoSettings,
+//     audio: audioSettings,
+//   });
+// };
+
+// const getLogSettings = () => {
+//   return new HMSLogSettings({
+//     level: HMSLogLevel.VERBOSE,
+//     isLogStorageEnabled: true,
+//     maxDirSizeInBytes: HMSLogAlarmManager.DEFAULT_DIR_SIZE,
+//   });
+// };

package/src/hooks-sdk-selectors.tsx

@@ -0,0 +1,9 @@
+import type { RootState } from './redux';
+
+export const selectAllowedTracksToPublish = (state: RootState) =>
+  state.hmsStates.localPeer?.role?.publishSettings?.allowed;
+
+export const selectCanPublishTrack = (
+  state: RootState,
+  track: 'audio' | 'video' | 'screen'
+) => selectAllowedTracksToPublish(state)?.includes(track) ?? false;

package/src/hooks-sdk.ts

@@ -0,0 +1,156 @@
+import { useDispatch, useSelector, useStore } from 'react-redux';
+import type { RootState } from './redux';
+
+import {
+  setIsLocalAudioMutedState,
+  setIsLocalScreenSharedState,
+  setIsLocalVideoMutedState,
+} from './redux/actions';
+import {
+  selectAllowedTracksToPublish,
+  selectCanPublishTrack,
+} from './hooks-sdk-selectors';
+import { useCallback } from 'react';
+
+export const useAllowedTracksToPublish = () => {
+  return useSelector(selectAllowedTracksToPublish);
+};
+
+export const useCanPublishAudio = () => {
+  return useSelector((state: RootState) =>
+    selectCanPublishTrack(state, 'audio')
+  );
+};
+
+export const useCanPublishVideo = () => {
+  return useSelector((state: RootState) =>
+    selectCanPublishTrack(state, 'video')
+  );
+};
+
+export const useCanPublishScreen = () => {
+  return useSelector((state: RootState) =>
+    selectCanPublishTrack(state, 'screen')
+  );
+};
+
+export const useHMSActions = () => {
+  const dispatch = useDispatch();
+  const store = useStore();
+
+  const setLocalAudioEnabled = useCallback(async (enable: boolean) => {
+    const state: RootState = store.getState();
+    const localPeer = state.hmsStates.localPeer;
+
+    if (!localPeer) {
+      return Promise.reject('Local Peer Instance is not available!');
+    }
+    const localAudioTrack = localPeer.localAudioTrack();
+    if (!localAudioTrack) {
+      return Promise.reject(
+        'Local Peer Audio Track Instance is not available!'
+      );
+    }
+    try {
+      dispatch(setIsLocalAudioMutedState(enable));
+      localAudioTrack.setMute(enable);
+    } catch (error) {
+      dispatch(setIsLocalAudioMutedState(!enable));
+      return Promise.reject(error);
+    }
+  }, []);
+
+  const setLocalVideoEnabled = useCallback(async (enable: boolean) => {
+    const state: RootState = store.getState();
+    const localPeer = state.hmsStates.localPeer;
+
+    if (!localPeer) {
+      return Promise.reject('Local Peer Instance is not available!');
+    }
+    const localVideoTrack = localPeer.localVideoTrack();
+    if (!localVideoTrack) {
+      return Promise.reject(
+        'Local Peer Video Track Instance is not available!'
+      );
+    }
+    try {
+      dispatch(setIsLocalVideoMutedState(enable));
+      localVideoTrack.setMute(enable);
+    } catch (error) {
+      dispatch(setIsLocalVideoMutedState(!enable));
+      return Promise.reject(error);
+    }
+  }, []);
+
+  const switchCamera = useCallback(async () => {
+    const state: RootState = store.getState();
+    const localPeer = state.hmsStates.localPeer;
+
+    if (!localPeer) {
+      return Promise.reject('Local Peer Instance is not available!');
+    }
+    const localVideoTrack = localPeer.localVideoTrack();
+    if (!localVideoTrack) {
+      return Promise.reject(
+        'Local Peer Video Track Instance is not available!'
+      );
+    }
+
+    localVideoTrack.switchCamera();
+  }, []);
+
+  const setScreenShareEnabled = useCallback(async (enable: boolean) => {
+    const state: RootState = store.getState();
+    const hmsInstance = state.user.hmsInstance;
+
+    if (!hmsInstance) {
+      return Promise.reject('HMSSDK Instance is not available!');
+    }
+
+    try {
+      if (enable) {
+        const result = await hmsInstance.startScreenshare();
+        console.log('Start Screenshare Success: ', result);
+      } else {
+        const result = await hmsInstance.stopScreenshare();
+        console.log('Stop Screenshare Success: ', result);
+      }
+
+      dispatch(setIsLocalScreenSharedState(enable));
+    } catch (error) {
+      if (enable) {
+        console.log('Start Screenshare Error: ', error);
+      } else {
+        console.log('Stop Screenshare Error: ', error);
+      }
+      return Promise.reject(error);
+    }
+  }, []);
+
+  const changeMetadata = useCallback(async (metadata: string | object) => {
+    const state: RootState = store.getState();
+    const hmsInstance = state.user.hmsInstance;
+
+    if (!hmsInstance) {
+      return Promise.reject('HMSSDK Instance is not available!');
+    }
+
+    try {
+      const parsedMetadata =
+        typeof metadata === 'string' ? metadata : JSON.stringify(metadata);
+      const result = await hmsInstance.changeMetadata(parsedMetadata);
+      console.log('Change Metadata Success: ', result);
+    } catch (error) {
+      console.log('Change Metadata Error: ', error);
+      return Promise.reject(error);
+    }
+  }, []);
+
+  return {
+    setLocalAudioEnabled,
+    setLocalVideoEnabled,
+    switchCamera,
+    setScreenShareEnabled,
+    changeMetadata,
+  };
+};

package/src/hooks-util-selectors.tsx

@@ -0,0 +1,4 @@
+import type { HMSPeer } from '@100mslive/react-native-hms';
+
+export const selectIsHLSViewer = (peer: HMSPeer | null | undefined) =>
+  peer?.role?.name?.includes('hls') ?? false;