@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.
182 lines • 7.35 kB
JavaScript
import React, { useEffect } from 'react';
import { Keyboard, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import LinearGradient from 'react-native-linear-gradient';
import { BackButton } from './BackButton';
import { HMSManageCameraRotation } from './HMSManageCameraRotation';
import { HMSManageLocalAudio } from './HMSManageLocalAudio';
import { HMSManageLocalVideo } from './HMSManageLocalVideo';
import { HMSPreviewEditName } from './HMSPreviewEditName';
import { HMSPreviewJoinButton } from './HMSPreviewJoinButton';
import { HMSPreviewPeersList } from './HMSPreviewPeersList';
import { HMSPreviewSubtitle } from './HMSPreviewSubtitle';
import { HMSPreviewTile } from './HMSPreviewTile';
import { HMSPreviewTitle } from './HMSPreviewTitle';
import { HMSManageAudioOutput } from './HMSManageAudioOutput';
import { HMSPreviewNetworkQuality } from './HMSPreviewNetworkQuality';
import { useCanPublishAudio, useCanPublishVideo, useHMSActions } from '../hooks-sdk';
import { HMSPreviewHLSLiveIndicator } from './HMSPreviewHLSLiveIndicator';
import { CompanyLogo } from './CompanyLogo';
import { useHMSRoomColorPalette, useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
import { hexToRgbA } from '../utils/theme';
import { HMSManageNoiseCancellation } from './HMSManageNoiseCancellation';
import { useSelector } from 'react-redux';
import { HMSManageVirtualBackground } from './HMSManageVirtualBackground';
const backButtonEdges = ['top'];
const headerEdges = ['top', 'left', 'right'];
const gradientColorShadeLocations = [0.45, 0.55, 0.7, 0.9, 0.95, 1];
export const Preview = ({
join,
loadingButtonState
}) => {
const canPublishVideo = useCanPublishVideo();
const isHLSViewer = useIsHLSViewer();
const {
background_dim
} = useHMSRoomColorPalette();
const gradientColorShades = React.useMemo(() => background_dim ? [hexToRgbA(background_dim, 1), hexToRgbA(background_dim, 0.9), hexToRgbA(background_dim, 0.7), hexToRgbA(background_dim, 0.1), hexToRgbA(background_dim, 0.05), hexToRgbA(background_dim, 0)] : [], [background_dim]);
const hmsRoomStyles = useHMSRoomStyleSheet(theme => ({
container: {
backgroundColor: theme.palette.background_dim
},
footer: {
backgroundColor: theme.palette.background_default
}
}), []);
const hmsActions = useHMSActions();
useEffect(() => {
async function setupAudioVideoOnPreview() {
// TODO: rectify the below issue,
// false means audio/video is enabled, true means audio/video is disabled
// it should have been true means audio/video is enabled, false means audio/video is disabled
await hmsActions.setLocalAudioEnabled(false);
await hmsActions.setLocalVideoEnabled(false);
}
setupAudioVideoOnPreview().then(r => console.log(r));
}, []);
const canPublishAudio = useCanPublishAudio();
const isLocalAudioMuted = useSelector(state => state.hmsStates.isLocalAudioMuted);
const [isNCAvailable, setIsNCAvailable] = React.useState(false);
const noiseCancellationPlugin = useSelector(state => state.hmsStates.noiseCancellationPlugin);
useEffect(() => {
if (noiseCancellationPlugin) {
let isMounted = true;
noiseCancellationPlugin.isNoiseCancellationAvailable().then(r => {
if (isMounted) {
setIsNCAvailable(r);
}
});
return () => {
isMounted = false;
};
}
}, [noiseCancellationPlugin]);
const showNoiseCancellationButton = canPublishAudio && !isLocalAudioMuted && isNCAvailable;
return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
onPress: Keyboard.dismiss
}, /*#__PURE__*/React.createElement(View, {
style: [styles.container, hmsRoomStyles.container]
}, canPublishVideo ? /*#__PURE__*/React.createElement(HMSPreviewTile, null) : null, canPublishVideo ? /*#__PURE__*/React.createElement(LinearGradient, {
colors: gradientColorShades,
locations: gradientColorShadeLocations,
style: styles.headerGradient
}) : null, /*#__PURE__*/React.createElement(SafeAreaView, {
style: canPublishVideo ? styles.header : null,
edges: headerEdges,
mode: "margin"
}, /*#__PURE__*/React.createElement(CompanyLogo, {
style: styles.logo
}), /*#__PURE__*/React.createElement(HMSPreviewTitle, null), /*#__PURE__*/React.createElement(HMSPreviewSubtitle, null), /*#__PURE__*/React.createElement(View, {
style: styles.peerListWrapper
}, /*#__PURE__*/React.createElement(HMSPreviewHLSLiveIndicator, null), /*#__PURE__*/React.createElement(HMSPreviewPeersList, null))), /*#__PURE__*/React.createElement(SafeAreaView, {
style: styles.backButtonContainer,
edges: backButtonEdges,
mode: "margin"
}, /*#__PURE__*/React.createElement(BackButton, null)), /*#__PURE__*/React.createElement(SafeAreaView, {
edges: ['left', 'right'],
style: styles.footerWrapper
}, /*#__PURE__*/React.createElement(HMSPreviewNetworkQuality, null), /*#__PURE__*/React.createElement(HMSKeyboardAvoidingView, {
style: [styles.footer, hmsRoomStyles.footer]
}, isHLSViewer ? null : /*#__PURE__*/React.createElement(View, {
style: styles.controlsContainer
}, /*#__PURE__*/React.createElement(View, {
style: styles.micAndCameraControls
}, /*#__PURE__*/React.createElement(HMSManageLocalAudio, null), /*#__PURE__*/React.createElement(HMSManageLocalVideo, {
style: styles.manageLocalButtonWrapper
}), /*#__PURE__*/React.createElement(HMSManageCameraRotation, {
style: styles.manageLocalButtonWrapper
}), /*#__PURE__*/React.createElement(HMSManageVirtualBackground, {
style: styles.manageLocalButtonWrapper
})), showNoiseCancellationButton && /*#__PURE__*/React.createElement(HMSManageNoiseCancellation, null), /*#__PURE__*/React.createElement(HMSManageAudioOutput, null)), /*#__PURE__*/React.createElement(View, {
style: styles.joinButtonRow
}, /*#__PURE__*/React.createElement(HMSPreviewEditName, null), /*#__PURE__*/React.createElement(HMSPreviewJoinButton, {
onJoin: join,
loading: loadingButtonState
}))))));
};
const styles = StyleSheet.create({
container: {
flex: 1,
position: 'relative',
justifyContent: 'center'
},
header: {
position: 'absolute',
top: 0,
width: '100%',
marginTop: 24,
zIndex: 20,
alignItems: 'center'
},
headerGradient: {
position: 'absolute',
top: 0,
width: '100%',
height: 260,
zIndex: 10
},
logo: {
alignSelf: 'center',
marginBottom: 16
},
controlsContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
},
peerListWrapper: {
flexDirection: 'row',
marginTop: 16,
alignSelf: 'center'
},
micAndCameraControls: {
flexDirection: 'row',
alignItems: 'center'
},
manageLocalButtonWrapper: {
marginLeft: 16
},
joinButtonRow: {
marginVertical: 16,
flexDirection: 'row'
},
backButtonContainer: {
position: 'absolute',
top: 0,
zIndex: 40
},
footerWrapper: {
position: 'absolute',
bottom: 0,
width: '100%',
zIndex: 30
},
footer: {
flex: 1,
borderTopLeftRadius: 16,
borderTopRightRadius: 16,
padding: 16
}
});
//# sourceMappingURL=Preview.js.map