@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.
191 lines (188 loc) • 7.68 kB
JavaScript
import * as React from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import { HMSPeerType, HMSTrackSource, HMSTrackType, HMSVideoViewMode } from '@100mslive/react-native-hms';
import { useSelector } from 'react-redux';
import { VideoView } from './VideoView';
import { AvatarView } from './AvatarView';
import { PeerMetadata } from './PeerMetadata';
import { PeerAudioIndicator } from './PeerAudioIndicator';
import { PressableIcon } from '../PressableIcon';
import { ThreeDotsIcon } from '../../Icons';
import { hexToRgbA } from '../../utils/theme';
import { PeerNameAndNetwork } from './PeerNameAndNetwork';
import { UnmountAfterDelay } from '../UnmountAfterDelay';
import { PipModes } from '../../utils/types';
import { isTileOnSpotlight } from '../../utils/functions';
import { selectAllowedTracksToPublish
// selectCanPublishTrackForRole,
} from '../../hooks-sdk-selectors';
import { useHMSRoomStyleSheet } from '../../hooks-util';
import { HMSFullScreenButton } from './HMSFullScreenButton';
import { TestIds } from '../../utils/constants';
import { useIsLandscapeOrientation } from '../../utils/dimension';
export const _PeerVideoTileView = /*#__PURE__*/React.forwardRef(({
peerTrackNode,
onMoreOptionsPress,
zoomIn,
insetMode = false
}, hmsViewRef) => {
var _peer$networkQuality;
const unmountAfterDelayRef = React.useRef(null);
const [mounted, setMounted] = React.useState(true);
const isPipModeActive = useSelector(state => state.app.pipModeStatus === PipModes.ACTIVE);
const editUsernameDisabled = useSelector(state => state.app.editUsernameDisabled);
const onSpotlight = useSelector(state => {
const {
onSpotlight
} = isTileOnSpotlight(state.user.spotlightTrackId, {
tileVideoTrack: peerTrackNode.track,
peerRegularAudioTrack: peerTrackNode.peer.audioTrack,
peerAuxTracks: peerTrackNode.peer.auxiliaryTracks
});
return onSpotlight;
});
const show = () => {
var _unmountAfterDelayRef;
setMounted(true);
(_unmountAfterDelayRef = unmountAfterDelayRef.current) === null || _unmountAfterDelayRef === void 0 || _unmountAfterDelayRef.resetTimer();
};
const hide = () => {
setMounted(false);
};
const handleTilePress = () => {
show();
};
const handleOptionsPress = React.useCallback(() => {
if (insetMode) {
show();
}
onMoreOptionsPress === null || onMoreOptionsPress === void 0 || onMoreOptionsPress(peerTrackNode);
}, [peerTrackNode, onMoreOptionsPress, insetMode]);
const {
peer,
track,
isDegraded
} = peerTrackNode;
// const peerCanPublishAudio = selectCanPublishTrackForRole(
// peer.role,
// 'audio'
// );
// const peerCanPublishVideo = selectCanPublishTrackForRole(
// peer.role,
// 'video'
// );
const allowedToPublish = useSelector(state => {
const allowed = selectAllowedTracksToPublish(state);
return (allowed && allowed.length > 0) ?? false;
});
const canTakeActionOnPeer = useSelector(state => {
var _state$hmsStates$loca;
if (peer.isLocal) {
return !editUsernameDisabled || insetMode;
}
const permissions = (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 || (_state$hmsStates$loca = _state$hmsStates$loca.role) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.permissions;
return permissions && (permissions.changeRole || permissions.mute || permissions.unmute || permissions.removeOthers);
});
const hmsRoomStyles = useHMSRoomStyleSheet(theme => ({
iconWrapperStyles: {
backgroundColor: theme.palette.background_dim && hexToRgbA(theme.palette.background_dim, 0.64)
},
avatarContainer: {
backgroundColor: theme.palette.surface_default
}
}));
const trackSource = track === null || track === void 0 ? void 0 : track.source;
const screenShareTile = !!trackSource && trackSource === HMSTrackSource.SCREEN;
const showingVideoTrack =
// peerCanPublishVideo && // Refer #RN-254@Jira, when user skips preview, it receives stub role object which has `publishPermissions` as `undefined`
track && track.trackId && track.type === HMSTrackType.VIDEO && track.isMute() === false;
const hide3DotsButton = !onMoreOptionsPress ||
// If button press handler is not available, Or
isPipModeActive ||
// If Pip Window is active, Or
track && (track === null || track === void 0 ? void 0 : track.source) !== HMSTrackSource.REGULAR ||
// If track is non-regular, like screen share, Or
!canTakeActionOnPeer ||
// If local peer can't take action on peer, Or
!allowedToPublish; // If local peer can't publish tracks
const isLandscapeOrientation = useIsLandscapeOrientation();
return /*#__PURE__*/React.createElement(View, {
style: styles.container
}, /*#__PURE__*/React.createElement(AvatarView, {
name: peer.name || '',
avatarContainerStyles: insetMode ? hmsRoomStyles.avatarContainer : null,
isInset: insetMode || isPipModeActive,
videoView: showingVideoTrack ? /*#__PURE__*/React.createElement(VideoView, {
ref: hmsViewRef,
peer: peer,
zoomIn: zoomIn,
trackId: track.trackId,
isDegraded: isDegraded,
overlay: insetMode,
scaleType: onSpotlight || track.source !== HMSTrackSource.REGULAR ? HMSVideoViewMode.ASPECT_FIT : HMSVideoViewMode.ASPECT_FILL
}) : null
}), /*#__PURE__*/React.createElement(PeerMetadata, {
metadata: peer.metadata,
isHandRaised: peer.isHandRaised
}), screenShareTile && showingVideoTrack ? isPipModeActive || isLandscapeOrientation ? null : /*#__PURE__*/React.createElement(HMSFullScreenButton, {
peerTrackNode: peerTrackNode
}) : peer.audioTrack && peer.audioTrack.id ? /*#__PURE__*/React.createElement(PeerAudioIndicator, {
isMuted: peer.audioTrack.isMute(),
peer: peer
}) : null, insetMode || isPipModeActive ? null : /*#__PURE__*/React.createElement(PeerNameAndNetwork, {
isSIPPeerType: peer.type === HMSPeerType.SIP,
name: peer.name || '',
isLocal: peer.isLocal,
trackSource: trackSource,
networkQuality: (_peer$networkQuality = peer.networkQuality) === null || _peer$networkQuality === void 0 ? void 0 : _peer$networkQuality.downlinkQuality
}), insetMode ? /*#__PURE__*/React.createElement(Pressable, {
style: styles.pressable,
onPress: handleTilePress
}) : null, hide3DotsButton ? null : insetMode ? /*#__PURE__*/React.createElement(UnmountAfterDelay, {
ref: unmountAfterDelayRef,
visible: mounted,
onUnmount: hide
}, /*#__PURE__*/React.createElement(PressableIcon, {
testID: TestIds.tile_options,
activeOpacity: 0.7,
style: [styles.iconWrapper, hmsRoomStyles.iconWrapperStyles],
border: false,
onPress: handleOptionsPress
}, /*#__PURE__*/React.createElement(ThreeDotsIcon, {
stack: "vertical",
style: styles.icon
}))) : /*#__PURE__*/React.createElement(PressableIcon, {
testID: TestIds.tile_options,
activeOpacity: 0.7,
style: [styles.iconWrapper, hmsRoomStyles.iconWrapperStyles],
border: false,
onPress: handleOptionsPress
}, /*#__PURE__*/React.createElement(ThreeDotsIcon, {
stack: "vertical",
style: styles.icon
})));
});
const styles = StyleSheet.create({
container: {
flex: 1,
position: 'relative'
},
iconWrapper: {
position: 'absolute',
bottom: 8,
right: 8,
padding: 4,
borderRadius: 8
},
icon: {
width: 20,
height: 20
},
pressable: {
position: 'absolute',
width: '100%',
height: '100%'
}
});
export const PeerVideoTileView = /*#__PURE__*/React.memo(_PeerVideoTileView);
//# sourceMappingURL=PeerVideoTileView.js.map