@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.
70 lines (69 loc) • 3.33 kB
JavaScript
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { HMSVideoViewMode, HMSTrackSource } from '@100mslive/react-native-hms';
import { useSelector } from 'react-redux';
import { styles } from './styles';
import { isTileOnSpotlight } from '../utils/functions';
import { AvatarView } from './AvatarView';
const PeerDisplayViewUnmemoized = /*#__PURE__*/React.forwardRef(({
isDegraded,
isLocal,
peer,
videoTrack
}, hmsViewRef) => {
const HmsView = useSelector(state => {
var _state$user$hmsInstan;
return ((_state$user$hmsInstan = state.user.hmsInstance) === null || _state$user$hmsInstan === void 0 ? void 0 : _state$user$hmsInstan.HmsView) || null;
});
const mirrorCamera = useSelector(state => state.app.joinConfig.mirrorCamera);
const autoSimulcast = useSelector(state => state.app.joinConfig.autoSimulcast);
const spotlightTrackId = useSelector(state => state.user.spotlightTrackId);
if (!HmsView) {
return null;
}
// Check if selected tile is "On Spotlight"
const {
onSpotlight
} = isTileOnSpotlight(spotlightTrackId, {
tileVideoTrack: videoTrack,
peerRegularAudioTrack: peer.audioTrack,
peerAuxTracks: peer.auxiliaryTracks
});
return /*#__PURE__*/React.createElement(View, {
style: peerDisplayViewStyles.container
}, videoTrack !== null && videoTrack !== void 0 && videoTrack.isMute() || (videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.trackId) === undefined ? /*#__PURE__*/React.createElement(View, {
style: styles.avatarContainer
}, /*#__PURE__*/React.createElement(AvatarView, {
userName: peer.name || ''
})) : /*#__PURE__*/React.createElement(View, {
style: styles.flex
}, /*#__PURE__*/React.createElement(HmsView, {
ref: hmsViewRef
// setZOrderMediaOverlay={miniView}
,
trackId: videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.trackId,
key: videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.trackId,
autoSimulcast: autoSimulcast,
mirror: isLocal && mirrorCamera !== undefined ? mirrorCamera : false,
scaleType: onSpotlight || (videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.source) !== undefined && (videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.source) !== HMSTrackSource.REGULAR ? HMSVideoViewMode.ASPECT_FIT : HMSVideoViewMode.ASPECT_FILL,
style: (videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.source) !== undefined && (videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.source) !== HMSTrackSource.REGULAR ? styles.hmsViewScreen : styles.hmsView
}), isDegraded && /*#__PURE__*/React.createElement(View, {
style: styles.degradedContainer
}, /*#__PURE__*/React.createElement(View, {
style: styles.avatarContainer
}, /*#__PURE__*/React.createElement(Text, {
style: styles.degradedText
}, "Degraded")))));
});
PeerDisplayViewUnmemoized.displayName = 'PeerDisplayViewUnmemoized';
const PeerDisplayView = /*#__PURE__*/React.memo(PeerDisplayViewUnmemoized);
PeerDisplayView.displayName = 'PeerDisplayView';
const peerDisplayViewStyles = StyleSheet.create({
container: {
height: '100%',
width: '100%',
overflow: 'hidden'
}
});
export default PeerDisplayView;
//# sourceMappingURL=PeerDisplayView.js.map