@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.
151 lines (149 loc) • 6.33 kB
JavaScript
import * as React from 'react';
import { shallowEqual, useSelector } from 'react-redux';
import { StyleSheet, View } from 'react-native';
import { HMSLocalScreenshareNotification } from './HMSLocalScreenshareNotification';
import { HMSHandRaiseNotification } from './HMSHandRaiseNotification';
import { HMSRoleChangeDeclinedNotification } from './HMSRoleChangeDeclinedNotification';
import { NotificationTypes } from '../types';
import { HMSTerminalErrorNotification } from './HMSTerminalErrorNotification';
import { HMSNotification } from './HMSNotification';
import { AlertTriangleIcon } from '../Icons';
import { HMSReconnectingNotification } from './HMSReconnectingNotification';
import { useIsLandscapeOrientation } from '../utils/dimension';
import { HMSPollsQuizzesNotification } from './HMSPollsQuizzesNotification';
import { useIsHLSViewer } from '../hooks-util';
const LOCAL_SCREENSHARE_PAYLOAD = {
id: NotificationTypes.LOCAL_SCREENSHARE,
type: NotificationTypes.LOCAL_SCREENSHARE
};
export const HMSNotifications = () => {
const isLocalScreenShared = useSelector(state => state.hmsStates.isLocalScreenShared);
const isHLSViewer = useIsHLSViewer();
const isLandscapeOrientation = useIsLandscapeOrientation();
// notifications is a stack, first will appear last
const notifications = useSelector(state => {
// Latest notification will be at 0th index.
const allNotifications = state.app.notifications;
let list = [];
if (isLocalScreenShared) {
list.push(LOCAL_SCREENSHARE_PAYLOAD);
// We are picking the latest notification always
if (allNotifications.length > 0) {
const firstNotification = allNotifications[0];
const secondNotification = allNotifications.length > 1 ? allNotifications[1] : null;
if (secondNotification) {
list.push(secondNotification);
}
if (firstNotification) {
list.push(firstNotification);
}
}
} else if (allNotifications.length > 0) {
const firstNotification = allNotifications[0];
const secondNotification = allNotifications.length > 1 ? allNotifications[1] : null;
const thirdNotification = allNotifications.length > 2 ? allNotifications[2] : null;
if (thirdNotification) {
list.push(thirdNotification);
}
if (secondNotification) {
list.push(secondNotification);
}
if (firstNotification) {
list.push(firstNotification);
}
}
return list;
}, shallowEqual);
if (notifications.length === 0) {
return null;
}
return /*#__PURE__*/React.createElement(View, {
style: [isLandscapeOrientation && !isHLSViewer ? styles.absoluteLandscapeContainer : styles.absoluteContainer, {
paddingTop: (notifications.length - 1) * 16
}]
}, notifications.map((notification, index, arr) => {
const atTop = index === arr.length - 1;
const atBottom = index === 0;
return /*#__PURE__*/React.createElement(View, {
key: notification.id,
style: [{
transform: [{
scale: getScale(arr.length, index)
}]
}, atBottom ? null : styles.notificationWrapper, atBottom ? null : {
bottom: index * 16
}]
}, notification.type === NotificationTypes.LOCAL_SCREENSHARE ? /*#__PURE__*/React.createElement(HMSLocalScreenshareNotification, null) : notification.type === NotificationTypes.RECONNECTING ? /*#__PURE__*/React.createElement(HMSReconnectingNotification, null) : notification.type === NotificationTypes.HAND_RAISE && 'peer' in notification ? /*#__PURE__*/React.createElement(HMSHandRaiseNotification, {
id: notification.id,
peer: notification.peer,
autoDismiss: atTop,
dismissDelay: 20000
}) : notification.type === NotificationTypes.ROLE_CHANGE_DECLINED && 'peer' in notification ? /*#__PURE__*/React.createElement(HMSRoleChangeDeclinedNotification, {
id: notification.id,
peerName: notification.peer.name || '',
autoDismiss: atTop,
dismissDelay: 10000
}) : notification.type === NotificationTypes.TERMINAL_ERROR && 'exception' in notification ? /*#__PURE__*/React.createElement(HMSTerminalErrorNotification, {
id: notification.id,
exception: notification.exception,
autoDismiss: false
}) : notification.type === NotificationTypes.ERROR && ('message' in notification || 'title' in notification) ? /*#__PURE__*/React.createElement(HMSNotification, {
icon: /*#__PURE__*/React.createElement(AlertTriangleIcon, {
type: "line"
}),
id: notification.id,
text: notification.title,
autoDismiss: false,
dismissable: true
}) : notification.type === NotificationTypes.INFO && ('message' in notification || 'title' in notification) ? /*#__PURE__*/React.createElement(HMSNotification, {
id: notification.id,
icon: notification.icon,
description: notification.message,
text: notification.title,
autoDismiss: true,
dismissable: true
}) : notification.type === NotificationTypes.POLLS_AND_QUIZZES && 'payload' in notification ? /*#__PURE__*/React.createElement(HMSPollsQuizzesNotification, {
id: notification.id,
payload: notification.payload
}) : null);
}));
};
export const useHMSNotificationsHeight = () => {
const numberOfNotifications = useSelector(state => {
const allNotifications = state.app.notifications;
const isLocalScreenShared = state.hmsStates.isLocalScreenShared;
return Math.min(allNotifications.length, isLocalScreenShared ? 2 : 3) + (isLocalScreenShared ? 1 : 0);
});
if (numberOfNotifications === 0) return 0;
return 8 + (numberOfNotifications - 1) * 16 + 56; // marginBottom + calculated paddingTop + content
};
const styles = StyleSheet.create({
absoluteContainer: {
position: 'relative',
marginBottom: 8,
width: '100%'
},
absoluteLandscapeContainer: {
position: 'relative',
marginBottom: 8,
width: '60%',
alignSelf: 'center'
},
notificationWrapper: {
position: 'absolute',
width: '100%'
}
});
const getScale = (totalItem, current) => {
if (totalItem === 1) {
return 1;
}
if (totalItem === 2) {
return [0.96, 1][current];
}
if (totalItem === 3) {
return [0.94, 0.97, 1][current];
}
return 1;
};
//# sourceMappingURL=HMSNotifications.js.map