@100mslive/react-native-room-kit
Version:
100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.
243 lines (238 loc) • 12 kB
JavaScript
import React from 'react';
import { StyleSheet, Text, Platform, ScrollView, TouchableOpacity, Alert, Linking } from 'react-native';
import { HMSUpdateListenerActions, checkNotifications } from '@100mslive/react-native-hms';
import { useDispatch, useSelector } from 'react-redux';
import Toast from 'react-native-simple-toast';
import { COLORS } from '../utils/theme';
import { changePipModeStatus, changeEnableHLSPlayerControls, changeShowHLSStats, changeShowCustomHLSPlayerControls } from '../redux/actions';
import { ModalTypes, PipModes } from '../utils/types';
import { useIsHLSViewer } from '../hooks-util';
import { useIsHLSStreamingOn } from '../hooks-sdk';
export const RoomSettingsModalDebugModeContent = ({
newAudioMixingMode,
isAudioShared,
//
audioDeviceListenerAdded,
muteAllTracksAudio,
closeRoomSettingsModal,
setModalVisible,
setIsAudioShared,
setAudioDeviceListenerAdded,
setMuteAllTracksAudio
}) => {
var _localPeerRole$permis, _localPeerRole$permis2, _localPeerRole$permis3, _localPeerRole$permis4, _localPeerRole$permis5, _localPeerRole$publis, _localPeerRole$publis2;
// REDUX STATES & DISPATCH
const dispatch = useDispatch();
const hmsInstance = useSelector(state => state.user.hmsInstance);
const debugMode = useSelector(state => state.user.debugMode);
const localPeerRole = useSelector(state => {
var _state$hmsStates$loca;
return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.role;
});
const isHLSStreaming = useIsHLSStreamingOn();
const pipModeStatus = useSelector(state => state.app.pipModeStatus);
const showHLSStats = useSelector(state => state.app.joinConfig.showHLSStats);
const enableHLSPlayerControls = useSelector(state => state.app.joinConfig.enableHLSPlayerControls);
const showCustomHLSPlayerControls = useSelector(state => state.app.joinConfig.showCustomHLSPlayerControls);
const isHLSViewer = useIsHLSViewer();
// 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 === null || hmsInstance === void 0 ? void 0 : hmsInstance.enterPipMode({
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 === null || hmsInstance === void 0 || hmsInstance.setPlaybackForAllAudio(!muteAllTracksAudio);
setMuteAllTracksAudio(!muteAllTracksAudio);
};
const handleRemoteAudiosMute = async () => {
closeRoomSettingsModal();
await (hmsInstance === null || hmsInstance === void 0 ? void 0 : 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 === null || hmsInstance === void 0 || 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 => {
Toast.showWithGravity(`Audio Device Output changed to ${data === null || data === void 0 ? void 0 : 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 === null || hmsInstance === void 0 || 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 === null || hmsInstance === void 0 || 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 checkNotifications();
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: () => Linking.openSettings()
}], {
cancelable: true
});
return;
}
}
hmsInstance === null || hmsInstance === void 0 || hmsInstance.startAudioshare(newAudioMixingMode).then(d => {
setIsAudioShared(true);
console.log('Start Audioshare Success: ', d);
}).catch(e => console.log('Start Audioshare Error: ', e));
}
};
//#endregion
return /*#__PURE__*/React.createElement(ScrollView, {
style: styles.container
}, isHLSViewer ? /*#__PURE__*/React.createElement(SettingItem, {
onPress: handleHLSPlayerAspectRatio,
text: 'Change Aspect Ratio'
}) : null, !isHLSViewer ? /*#__PURE__*/React.createElement(SettingItem, {
onPress: handleLocalRemoteAudiosMute,
text: `${muteAllTracksAudio ? 'Unmute' : 'Mute'} Room`
}) : null, debugMode && localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$permis = localPeerRole.permissions) !== null && _localPeerRole$permis !== void 0 && _localPeerRole$permis.hlsStreaming ? /*#__PURE__*/React.createElement(SettingItem, {
onPress: handleHLSStreaming,
text: `${isHLSStreaming === true ? 'Stop' : 'Start'} HLS Streaming`
}) : null, debugMode && localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$permis2 = localPeerRole.permissions) !== null && _localPeerRole$permis2 !== void 0 && _localPeerRole$permis2.changeRole ? /*#__PURE__*/React.createElement(SettingItem, {
onPress: changeBulkRole,
text: "Bulk Role Change"
}) : null, debugMode && localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$permis3 = localPeerRole.permissions) !== null && _localPeerRole$permis3 !== void 0 && _localPeerRole$permis3.mute ? /*#__PURE__*/React.createElement(SettingItem, {
onPress: handleRemoteAudiosMute,
text: "Remote Mute All Audio Tracks"
}) : null, debugMode && (localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$permis4 = localPeerRole.permissions) !== null && _localPeerRole$permis4 !== void 0 && _localPeerRole$permis4.mute || localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$permis5 = localPeerRole.permissions) !== null && _localPeerRole$permis5 !== void 0 && _localPeerRole$permis5.unmute) ? /*#__PURE__*/React.createElement(SettingItem, {
onPress: changeTrackState,
text: "Change Track State For Role"
}) : null, localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$publis = localPeerRole.publishSettings) !== null && _localPeerRole$publis !== void 0 && (_localPeerRole$publis = _localPeerRole$publis.allowed) !== null && _localPeerRole$publis !== void 0 && _localPeerRole$publis.includes('audio') ? /*#__PURE__*/React.createElement(SettingItem, {
onPress: switchAudioOutput,
text: "Switch Audio Output"
}) : null, !isPipModeUnavailable ? /*#__PURE__*/React.createElement(SettingItem, {
onPress: enterPipMode,
text: "Picture in Picture (PIP) Mode"
}) : null, debugMode ? /*#__PURE__*/React.createElement(React.Fragment, null, isHLSViewer ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SettingItem, {
onPress: toggleShowHLSStats,
text: showHLSStats ? 'Hide HLS Stats' : 'Show HLS Stats'
}), /*#__PURE__*/React.createElement(SettingItem, {
onPress: toggleEnableHLSPlayerControls,
text: enableHLSPlayerControls ? 'Disable HLS Player Controls' : 'Enable HLS Player Controls'
}), /*#__PURE__*/React.createElement(SettingItem, {
onPress: toggleShowCustomHLSPlayerControls,
text: showCustomHLSPlayerControls ? 'Hide Custom HLS Player Controls' : 'Show Custom HLS Player Controls'
})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SettingItem, {
onPress: showRTCStats,
text: "Show RTC Stats"
})), Platform.OS === 'android' && localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$publis2 = localPeerRole.publishSettings) !== null && _localPeerRole$publis2 !== void 0 && (_localPeerRole$publis2 = _localPeerRole$publis2.allowed) !== null && _localPeerRole$publis2 !== void 0 && _localPeerRole$publis2.includes('audio') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SettingItem, {
onPress: addRemoveAudioDeviceChangeListener,
text: `${audioDeviceListenerAdded ? 'Remove' : 'Set'} Audio Output Change Listener`
}), /*#__PURE__*/React.createElement(SettingItem, {
onPress: handleAudioShare,
text: `${isAudioShared ? 'Stop' : 'Start'} Audioshare`
}), /*#__PURE__*/React.createElement(SettingItem, {
onPress: changeAudioMode,
text: "Set Audio Mode"
}), /*#__PURE__*/React.createElement(SettingItem, {
onPress: setAudioMixingMode,
text: "Set Audio Mixing Mode"
})) : null) : null);
};
const SettingItem = ({
onPress,
text
}) => {
return /*#__PURE__*/React.createElement(TouchableOpacity, {
style: styles.button,
onPress: onPress
}, /*#__PURE__*/React.createElement(Text, {
style: styles.text
}, text));
};
const styles = StyleSheet.create({
container: {
marginTop: 32,
height: 400
},
button: {
flexDirection: 'row',
alignItems: 'center',
marginVertical: 12,
marginHorizontal: 16
},
text: {
fontFamily: 'Inter-Medium',
fontSize: 14,
lineHeight: 24,
color: COLORS.TEXT.HIGH_EMPHASIS
},
icon: {
color: COLORS.WHITE,
marginRight: 12
}
});
//# sourceMappingURL=RoomSettingsModalDebugModeContent.js.map