@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.
85 lines • 4.43 kB
JavaScript
import React, { memo, useMemo } from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { useCanShowRoomOptionsButton, useHMSConferencingScreenConfig, useHMSLayoutConfig, useHMSRoomStyle, useShowChatAndParticipants } from '../hooks-util';
import { HMSManageLeave } from './HMSManageLeave';
import { HMSManageRaiseHand } from './HMSManageRaiseHand';
import { HMSManageLocalAudio } from './HMSManageLocalAudio';
import { HMSManageLocalVideo } from './HMSManageLocalVideo';
import { HMSChat } from './HMSChat';
import { HMSRoomOptions } from './HMSRoomOptions';
import { useCanPublishAudio, useCanPublishScreen, useCanPublishVideo } from '../hooks-sdk';
export const _Footer = () => {
const canPublishAudio = useCanPublishAudio();
const canPublishVideo = useCanPublishVideo();
const canPublishScreen = useCanPublishScreen();
const canShowOptions = useCanShowRoomOptionsButton();
const {
canShowChat
} = useShowChatAndParticipants();
const isViewer = !(canPublishAudio || canPublishVideo || canPublishScreen);
const isOnStage = useHMSLayoutConfig(layoutConfig => {
var _layoutConfig$screens;
return !!(layoutConfig !== null && layoutConfig !== void 0 && (_layoutConfig$screens = layoutConfig.screens) !== null && _layoutConfig$screens !== void 0 && (_layoutConfig$screens = _layoutConfig$screens.conferencing) !== null && _layoutConfig$screens !== void 0 && (_layoutConfig$screens = _layoutConfig$screens.default) !== null && _layoutConfig$screens !== void 0 && (_layoutConfig$screens = _layoutConfig$screens.elements) !== null && _layoutConfig$screens !== void 0 && _layoutConfig$screens.on_stage_exp);
});
const canRaiseHand = useHMSConferencingScreenConfig(confScreenConfig => {
var _confScreenConfig$ele;
return !!(confScreenConfig !== null && confScreenConfig !== void 0 && (_confScreenConfig$ele = confScreenConfig.elements) !== null && _confScreenConfig$ele !== void 0 && _confScreenConfig$ele.hand_raise);
});
const canShowHandRaiseInFooter = canRaiseHand && !isOnStage && isViewer;
const footerActionButtons = useMemo(() => {
const actions = [];
if (canShowChat) {
actions.push('chat');
}
if (canShowHandRaiseInFooter) {
actions.unshift('hand-raise');
}
if (canPublishVideo) {
actions.unshift('video');
}
if (canPublishAudio) {
actions.unshift('audio');
}
actions.unshift('leave');
if (canShowOptions) {
actions.push('options');
}
return actions;
}, [canShowHandRaiseInFooter, canShowOptions, canShowChat, canPublishAudio, canPublishVideo]);
const containerStyles = useHMSRoomStyle(theme => ({
backgroundColor: theme.palette.background_dim
}));
return /*#__PURE__*/React.createElement(SafeAreaView, {
style: containerStyles,
edges: ['bottom', 'left', 'right']
}, /*#__PURE__*/React.createElement(View, {
style: [styles.container, containerStyles]
}, footerActionButtons.map((actionType, index) => {
return /*#__PURE__*/React.createElement(View, {
key: actionType,
style: index === 0 ? null : styles.iconWrapper
}, actionType === 'leave' ? /*#__PURE__*/React.createElement(HMSManageLeave, null) : actionType === 'audio' ? /*#__PURE__*/React.createElement(HMSManageLocalAudio, null) : actionType === 'video' ? /*#__PURE__*/React.createElement(HMSManageLocalVideo, null) : actionType === 'chat' ? /*#__PURE__*/React.createElement(HMSChat, null) : actionType === 'options' ? /*#__PURE__*/React.createElement(HMSRoomOptions, null) : actionType === 'hand-raise' ? /*#__PURE__*/React.createElement(HMSManageRaiseHand, null) : null);
})));
};
export const useFooterHeight = (excludeSafeArea = false) => {
const {
bottom
} = useSafeAreaInsets();
return (excludeSafeArea ? 0 : bottom) + (Platform.OS === 'android' ? 16 : 0) + 42 + 16; // bottomSafeArea + marginBottom + content + contentTopPadding
};
const styles = StyleSheet.create({
container: {
paddingTop: 16,
paddingHorizontal: 16,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginBottom: Platform.OS === 'android' ? 16 : 0 // TODO: need to correct hide animation offsets because of this change
},
iconWrapper: {
marginLeft: 24
}
});
export const Footer = /*#__PURE__*/memo(_Footer);
//# sourceMappingURL=Footer.js.map