@100mslive/react-native-room-kit 0.0.4 → 0.2.0

package/src/components/RoomSettingsModalDebugModeContent.tsx

@@ -0,0 +1,446 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  Platform,
+  ScrollView,
+  TouchableOpacity,
+  Alert,
+} from 'react-native';
+import {
+  HMSAudioMixingMode,
+  HMSUpdateListenerActions,
+} from '@100mslive/react-native-hms';
+import { useDispatch, useSelector } from 'react-redux';
+import Toast from 'react-native-simple-toast';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import EntypoIcons from 'react-native-vector-icons/Entypo';
+import { openSettings, requestNotifications } from 'react-native-permissions';
+
+import { COLORS } from '../utils/theme';
+import type { RootState } from '../redux';
+import {
+  changePipModeStatus,
+  changeEnableHLSPlayerControls,
+  changeShowHLSStats,
+  changeShowCustomHLSPlayerControls,
+} from '../redux/actions';
+import { ModalTypes, PipModes } from '../utils/types';
+
+interface RoomSettingsModalDebugModeContentProps {
+  newAudioMixingMode: HMSAudioMixingMode;
+  isAudioShared: boolean;
+  audioDeviceListenerAdded: boolean;
+  muteAllTracksAudio: boolean;
+  closeRoomSettingsModal(): void;
+  setModalVisible(modalType: ModalTypes, delay?: boolean): void;
+  setIsAudioShared(state: boolean): void;
+  setAudioDeviceListenerAdded(state: boolean): void;
+  setMuteAllTracksAudio(state: boolean): void;
+}
+
+export const RoomSettingsModalDebugModeContent: React.FC<
+  RoomSettingsModalDebugModeContentProps
+> = ({
+  newAudioMixingMode,
+  isAudioShared, //
+  audioDeviceListenerAdded,
+  muteAllTracksAudio,
+  closeRoomSettingsModal,
+  setModalVisible,
+  setIsAudioShared,
+  setAudioDeviceListenerAdded,
+  setMuteAllTracksAudio,
+}) => {
+  // REDUX STATES & DISPATCH
+  const dispatch = useDispatch();
+  const hmsInstance = useSelector((state: RootState) => state.user.hmsInstance);
+  const debugMode = useSelector((state: RootState) => state.user.debugMode);
+  const localPeerRole = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.role
+  );
+  const isHLSStreaming = useSelector(
+    (state: RootState) =>
+      state.hmsStates.room?.hlsStreamingState?.running ?? false
+  );
+
+  const pipModeStatus = useSelector(
+    (state: RootState) => state.app.pipModeStatus
+  );
+  const showHLSStats = useSelector(
+    (state: RootState) => state.app.joinConfig.showHLSStats
+  );
+  const enableHLSPlayerControls = useSelector(
+    (state: RootState) => state.app.joinConfig.enableHLSPlayerControls
+  );
+  const showCustomHLSPlayerControls = useSelector(
+    (state: RootState) => state.app.joinConfig.showCustomHLSPlayerControls
+  );
+
+  // CONSTANTS
+  const isPipModeUnavailable = pipModeStatus === PipModes.NOT_AVAILABLE;
+
+  //#region FUNCTIONS
+
+  const enterPipMode = async () => {
+    if (isPipModeUnavailable) {
+      return console.log('PIP mode unavailable on Deice!');
+    }
+
+    closeRoomSettingsModal();
+
+    try {
+      const isEnabled = await hmsInstance?.enablePipMode({
+        aspectRatio: [16, 9], // for 16:9 aspect ratio
+        endButton: true,
+        videoButton: true,
+        audioButton: true,
+      });
+      if (isEnabled === true) {
+        dispatch(changePipModeStatus(PipModes.ACTIVE));
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleLocalRemoteAudiosMute = () => {
+    closeRoomSettingsModal();
+    hmsInstance?.setPlaybackForAllAudio(!muteAllTracksAudio);
+    setMuteAllTracksAudio(!muteAllTracksAudio);
+  };
+
+  const handleRemoteAudiosMute = async () => {
+    closeRoomSettingsModal();
+    await hmsInstance
+      ?.remoteMuteAllAudio()
+      .then((d) => console.log('Remote Mute All Audio Success: ', d))
+      .catch((e) => console.log('Remote Mute All Audio Error: ', e));
+  };
+
+  const handleHLSStreaming = () => {
+    if (isHLSStreaming) {
+      closeRoomSettingsModal();
+      hmsInstance
+        ?.stopHLSStreaming()
+        .then((d) => console.log('Stop HLS Streaming Success: ', d))
+        .catch((e) => console.log('Stop HLS Streaming Error: ', e));
+    } else {
+      setModalVisible(ModalTypes.HLS_STREAMING, true);
+    }
+  };
+
+  const addRemoveAudioDeviceChangeListener = () => {
+    closeRoomSettingsModal();
+    if (hmsInstance) {
+      if (audioDeviceListenerAdded) {
+        setAudioDeviceListenerAdded(false);
+
+        hmsInstance.removeEventListener(
+          HMSUpdateListenerActions.ON_AUDIO_DEVICE_CHANGED
+        );
+      } else {
+        setAudioDeviceListenerAdded(true);
+
+        hmsInstance.setAudioDeviceChangeListener((data: any) => {
+          Toast.showWithGravity(
+            `Audio Device Output changed to ${data?.device}`,
+            Toast.LONG,
+            Toast.TOP
+          );
+        });
+      }
+    }
+  };
+
+  const changeBulkRole = () =>
+    setModalVisible(ModalTypes.BULK_ROLE_CHANGE, true);
+
+  const changeTrackState = () =>
+    setModalVisible(ModalTypes.CHANGE_TRACK_ROLE, true);
+
+  const switchAudioOutput = () => {
+    if (Platform.OS === 'android') {
+      setModalVisible(ModalTypes.SWITCH_AUDIO_OUTPUT, true);
+    } else {
+      closeRoomSettingsModal();
+      hmsInstance?.switchAudioOutputUsingIOSUI();
+    }
+  };
+
+  const changeAudioMode = () =>
+    setModalVisible(ModalTypes.CHANGE_AUDIO_MODE, true);
+
+  const setAudioMixingMode = () =>
+    setModalVisible(ModalTypes.AUDIO_MIXING_MODE, true);
+
+  const handleHLSPlayerAspectRatio = () => {
+    setModalVisible(ModalTypes.HLS_PLAYER_ASPECT_RATIO, true);
+  };
+
+  const showRTCStats = () => setModalVisible(ModalTypes.RTC_STATS, true);
+
+  const toggleShowHLSStats = () => {
+    dispatch(changeShowHLSStats(!showHLSStats));
+    setModalVisible(ModalTypes.DEFAULT);
+  };
+
+  const toggleEnableHLSPlayerControls = () => {
+    dispatch(changeEnableHLSPlayerControls(!enableHLSPlayerControls));
+    setModalVisible(ModalTypes.DEFAULT);
+  };
+
+  const toggleShowCustomHLSPlayerControls = () => {
+    dispatch(changeShowCustomHLSPlayerControls(!showCustomHLSPlayerControls));
+    setModalVisible(ModalTypes.DEFAULT);
+  };
+
+  // Android Audioshare
+  const handleAudioShare = async () => {
+    closeRoomSettingsModal();
+    if (isAudioShared) {
+      hmsInstance
+        ?.stopAudioshare()
+        .then((d) => {
+          setIsAudioShared(false);
+          console.log('Stop Audioshare Success: ', d);
+        })
+        .catch((e) => console.log('Stop Audioshare Error: ', e));
+    } else {
+      // check notification permission on android platform
+      // Audio share feature needs foreground service running. for Foreground service to keep running, we need active notification.
+      if (Platform.OS === 'android') {
+        const result = await requestNotifications(['alert', 'sound']);
+
+        console.log('Notification Permission Result: ', result);
+
+        if (result.status === 'blocked') {
+          Alert.alert(
+            'Notification Permission is Blocked!',
+            '100ms SDK needs notification permission to start audio share. Please allow notification from settings and try again!',
+            [
+              { text: 'cancel' },
+              { text: 'Go to Settings', onPress: () => openSettings() },
+            ],
+            { cancelable: true }
+          );
+          return;
+        }
+      }
+
+      hmsInstance
+        ?.startAudioshare(newAudioMixingMode)
+        .then((d) => {
+          setIsAudioShared(true);
+          console.log('Start Audioshare Success: ', d);
+        })
+        .catch((e) => console.log('Start Audioshare Error: ', e));
+    }
+  };
+  //#endregion
+
+  return (
+    <ScrollView style={styles.container}>
+      {localPeerRole?.name?.includes('hls-') ? (
+        <SettingItem
+          onPress={handleHLSPlayerAspectRatio}
+          text={'Change Aspect Ratio'}
+          IconType={MaterialCommunityIcons}
+          iconName={'aspect-ratio'}
+        />
+      ) : null}
+
+      {!localPeerRole?.name?.includes('hls-') ? (
+        <SettingItem
+          onPress={handleLocalRemoteAudiosMute}
+          text={`${muteAllTracksAudio ? 'Unmute' : 'Mute'} Room`}
+          IconType={Ionicons}
+          iconName={muteAllTracksAudio ? 'mic-off-outline' : 'mic-outline'}
+        />
+      ) : null}
+
+      {debugMode && localPeerRole?.permissions?.hlsStreaming ? (
+        <SettingItem
+          onPress={handleHLSStreaming}
+          text={`${isHLSStreaming === true ? 'Stop' : 'Start'} HLS Streaming`}
+          IconType={Ionicons}
+          iconName="radio-outline"
+        />
+      ) : null}
+
+      {debugMode && localPeerRole?.permissions?.changeRole ? (
+        <SettingItem
+          onPress={changeBulkRole}
+          text="Bulk Role Change"
+          IconType={Ionicons}
+          iconName="people-outline"
+        />
+      ) : null}
+
+      {debugMode && localPeerRole?.permissions?.mute ? (
+        <SettingItem
+          onPress={handleRemoteAudiosMute}
+          text="Remote Mute All Audio Tracks"
+          IconType={Ionicons}
+          iconName="mic-off-outline"
+        />
+      ) : null}
+
+      {debugMode &&
+      (localPeerRole?.permissions?.mute ||
+        localPeerRole?.permissions?.unmute) ? (
+        <SettingItem
+          onPress={changeTrackState}
+          text="Change Track State For Role"
+          IconType={MaterialIcons}
+          iconName="track-changes"
+        />
+      ) : null}
+
+      {localPeerRole?.publishSettings?.allowed?.includes('audio') ? (
+        <SettingItem
+          onPress={switchAudioOutput}
+          text="Switch Audio Output"
+          IconType={MaterialCommunityIcons}
+          iconName="cast-audio"
+        />
+      ) : null}
+
+      {!isPipModeUnavailable ? (
+        <SettingItem
+          onPress={enterPipMode}
+          text="Picture in Picture (PIP) Mode"
+          IconType={MaterialCommunityIcons}
+          iconName="picture-in-picture-bottom-right"
+        />
+      ) : null}
+
+      {debugMode ? (
+        <>
+          {localPeerRole?.name?.includes('hls-') ? (
+            <>
+              <SettingItem
+                onPress={toggleShowHLSStats}
+                text={showHLSStats ? 'Hide HLS Stats' : 'Show HLS Stats'}
+                IconType={MaterialCommunityIcons}
+                iconName={'clipboard-pulse-outline'}
+              />
+
+              <SettingItem
+                onPress={toggleEnableHLSPlayerControls}
+                text={
+                  enableHLSPlayerControls
+                    ? 'Disable HLS Player Controls'
+                    : 'Enable HLS Player Controls'
+                }
+                IconType={Ionicons}
+                iconName={'ios-settings-outline'}
+              />
+
+              <SettingItem
+                onPress={toggleShowCustomHLSPlayerControls}
+                text={
+                  showCustomHLSPlayerControls
+                    ? 'Hide Custom HLS Player Controls'
+                    : 'Show Custom HLS Player Controls'
+                }
+                IconType={Ionicons}
+                iconName={'ios-settings-outline'}
+              />
+            </>
+          ) : (
+            <>
+              <SettingItem
+                onPress={showRTCStats}
+                text="Show RTC Stats"
+                IconType={MaterialCommunityIcons}
+                iconName={'clipboard-pulse-outline'}
+              />
+            </>
+          )}
+
+          {Platform.OS === 'android' &&
+          localPeerRole?.publishSettings?.allowed?.includes('audio') ? (
+            <>
+              <SettingItem
+                onPress={addRemoveAudioDeviceChangeListener}
+                text={`${
+                  audioDeviceListenerAdded ? 'Remove' : 'Set'
+                } Audio Output Change Listener`}
+                IconType={MaterialCommunityIcons}
+                iconName="video-input-component"
+              />
+
+              <SettingItem
+                onPress={handleAudioShare}
+                text={`${isAudioShared ? 'Stop' : 'Start'} Audioshare`}
+                IconType={Ionicons}
+                iconName="share-social-outline"
+              />
+
+              <SettingItem
+                onPress={changeAudioMode}
+                text="Set Audio Mode"
+                IconType={MaterialCommunityIcons}
+                iconName="call-split"
+              />
+
+              <SettingItem
+                onPress={setAudioMixingMode}
+                text="Set Audio Mixing Mode"
+                IconType={EntypoIcons}
+                iconName="sound-mix"
+              />
+            </>
+          ) : null}
+        </>
+      ) : null}
+    </ScrollView>
+  );
+};
+
+interface SettingItemProps {
+  onPress(): void;
+  text: string;
+  iconName: string;
+  IconType: any;
+}
+
+const SettingItem: React.FC<SettingItemProps> = ({
+  onPress,
+  text,
+  iconName,
+  IconType,
+}) => {
+  return (
+    <TouchableOpacity style={styles.button} onPress={onPress}>
+      <IconType name={iconName} size={24} style={styles.icon} />
+
+      <Text style={styles.text}>{text}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 32,
+    height: 400,
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 12,
+  },
+  text: {
+    fontFamily: 'Inter-Medium',
+    fontSize: 14,
+    lineHeight: 24,
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+  },
+  icon: {
+    color: COLORS.WHITE,
+    marginRight: 12,
+  },
+});

package/src/components/StatusBar.tsx

@@ -1,22 +1,24 @@
 import * as React from 'react';
 import { StatusBar, Platform } from 'react-native';
+import type { StatusBarProps } from 'react-native';
 
 import { useShowLandscapeLayout } from '../hooks-util';
 
-type HMSStatusBarProps = {
+type HMSStatusBarProps = StatusBarProps & {
   hidden?: boolean;
 };
 
-export const HMSStatusBar: React.FC<HMSStatusBarProps> = ({ hidden }) => {
+export const HMSStatusBar: React.FC<HMSStatusBarProps> = ({ hidden, ...resetProps }) => {
   const showLandscapeLayout = useShowLandscapeLayout();
 
   return (
     <StatusBar
+      {...resetProps}
       hidden={(Platform.OS === 'ios' && hidden) || showLandscapeLayout} // use `hidden` prop to hide Status bar on iOS
       barStyle={
-        Platform.OS === 'android' && hidden ? 'dark-content' : 'default'
+        Platform.OS === 'android' && hidden ? 'dark-content' : resetProps.barStyle
       } // hack: use `dark-content` value to make StatusBar look like it's hidden
-      animated={true}
+      animated={resetProps.animated ?? true}
     />
   );
 };

package/src/components/StopRecordingModalContent.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+
+import type { RootState } from '../redux';
+import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
+import { AlertTriangleIcon, CloseIcon } from '../Icons';
+import { HMSDangerButton } from './HMSDangerButton';
+import { setStartingOrStoppingRecording } from '../redux/actions';
+
+export interface StopRecordingModalContentProps {
+  dismissModal(): void;
+}
+
+export const StopRecordingModalContent: React.FC<
+  StopRecordingModalContentProps
+> = ({ dismissModal }) => {
+  const dispatch = useDispatch();
+  const hmsInstance = useHMSInstance();
+  const startingOrStoppingRecording = useSelector(
+    (state: RootState) => state.app.startingOrStoppingRecording
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    headerText: {
+      color: theme.palette.alert_error_default,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    text: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  const stopRecording = async () => {
+    dispatch(setStartingOrStoppingRecording(true));
+    try {
+      await hmsInstance.stopRtmpAndRecording();
+      dismissModal();
+    } catch (error) {
+      dispatch(setStartingOrStoppingRecording(false));
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <View style={styles.headerControls}>
+          <AlertTriangleIcon />
+
+          <Text style={[styles.headerText, hmsRoomStyles.headerText]}>
+            Stop Recording
+          </Text>
+        </View>
+
+        <TouchableOpacity
+          onPress={dismissModal}
+          hitSlop={styles.closeIconHitSlop}
+        >
+          <CloseIcon />
+        </TouchableOpacity>
+      </View>
+
+      <Text style={[styles.text, hmsRoomStyles.text]}>
+        Are you sure you want to stop recording? You can't undo this action.
+      </Text>
+
+      <HMSDangerButton
+        loading={startingOrStoppingRecording}
+        onPress={stopRecording}
+        title="Stop Recording"
+        disabled={startingOrStoppingRecording}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 24,
+    marginHorizontal: 24,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  headerControls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerText: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    marginLeft: 8,
+  },
+  closeIconHitSlop: {
+    bottom: 16,
+    left: 16,
+    right: 16,
+    top: 16,
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    marginBottom: 16,
+  },
+});