@100mslive/react-native-room-kit/lib/module/components/Participants/ParticipantsItemOptions.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { HMSPeerType } from '@100mslive/react-native-hms';
import { useHMSInstance, useHMSLayoutConfig, useHMSRoomStyleSheet, useModalType } from '../../hooks-util';
import { CameraIcon, HandIcon, MicIcon, PersonIcon } from '../../Icons';
import { ParticipantsItemOption } from './ParticipantsItemOption';
import { selectCanPublishTrackForRole } from '../../hooks-sdk-selectors';
import { parseMetadata } from '../../utils/functions';
import { ModalTypes } from '../../utils/types';
import { setPeerToUpdate } from '../../redux/actions';
const _ParticipantsItemOptions = ({
  peer,
  onItemPress,
  insideHandRaiseGroup = false
}) => {
  var _peer$audioTrack, _peer$audioTrack2, _peer$videoTrack, _peer$videoTrack2, _peer$role, _peer$role2;
  const hmsInstance = useHMSInstance();

  // Local Peer Permissions related states
  const localPeerPermissions = useSelector(state => {
    var _state$hmsStates$loca;
    return (_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;
  });
  const roles = useSelector(state => state.hmsStates.roles);
  const localPeerCanMuteTrack = localPeerPermissions && localPeerPermissions.mute;
  const localPeerCanUnmuteTrack = localPeerPermissions && localPeerPermissions.unmute;
  const localPeerCanRemove = localPeerPermissions && localPeerPermissions.removeOthers;
  const localPeerCanChangeRole = localPeerPermissions && localPeerPermissions.changeRole && roles.length > 1;

  // Selected Peer Permissions related states
  const peerCanPublishAudio = selectCanPublishTrackForRole(peer.role, 'audio');
  const peerCanPublishVideo = selectCanPublishTrackForRole(peer.role, 'video');

  // On Stage related states
  const onStageRoleStr = 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 = _layoutConfig$screens.on_stage_exp) === null || _layoutConfig$screens === void 0 ? void 0 : _layoutConfig$screens.on_stage_role;
  });
  const onStageRole = useSelector(state => {
    const roles = state.hmsStates.roles;
    return roles.find(role => role.name === onStageRoleStr);
  });
  const offStageRoles = useHMSLayoutConfig(layoutConfig => {
    var _layoutConfig$screens2;
    return layoutConfig === null || layoutConfig === void 0 || (_layoutConfig$screens2 = layoutConfig.screens) === null || _layoutConfig$screens2 === void 0 || (_layoutConfig$screens2 = _layoutConfig$screens2.conferencing) === null || _layoutConfig$screens2 === void 0 || (_layoutConfig$screens2 = _layoutConfig$screens2.default) === null || _layoutConfig$screens2 === void 0 || (_layoutConfig$screens2 = _layoutConfig$screens2.elements) === null || _layoutConfig$screens2 === void 0 || (_layoutConfig$screens2 = _layoutConfig$screens2.on_stage_exp) === null || _layoutConfig$screens2 === void 0 ? void 0 : _layoutConfig$screens2.off_stage_roles;
  });
  const firstOffStageRoleStr = offStageRoles && offStageRoles.length > 0 ? offStageRoles[0] : undefined;
  const prevRoleStr = parseMetadata(peer.metadata).prevRole;
  const offStageRole = useSelector(state => {
    const roles = state.hmsStates.roles;
    const offStageRoleStr = prevRoleStr || firstOffStageRoleStr;
    return roles.find(role => role.name === offStageRoleStr);
  });
  const skipPreviewForRoleChange = useHMSLayoutConfig(layoutConfig => {
    var _layoutConfig$screens3;
    return layoutConfig === null || layoutConfig === void 0 || (_layoutConfig$screens3 = layoutConfig.screens) === null || _layoutConfig$screens3 === void 0 || (_layoutConfig$screens3 = _layoutConfig$screens3.conferencing) === null || _layoutConfig$screens3 === void 0 || (_layoutConfig$screens3 = _layoutConfig$screens3.default) === null || _layoutConfig$screens3 === void 0 || (_layoutConfig$screens3 = _layoutConfig$screens3.elements) === null || _layoutConfig$screens3 === void 0 || (_layoutConfig$screens3 = _layoutConfig$screens3.on_stage_exp) === null || _layoutConfig$screens3 === void 0 ? void 0 : _layoutConfig$screens3.skip_preview_for_role_change;
  });
  const hmsRoomStyles = useHMSRoomStyleSheet(theme => ({
    divider: {
      backgroundColor: theme.palette.border_bright
    },
    removeParticipant: {
      color: theme.palette.alert_error_default
    }
  }));
  const handleBringOnStagePress = () => {
    if (onStageRole) {
      hmsInstance.changeRoleOfPeer(peer, onStageRole, skipPreviewForRoleChange || false).then(d => console.log('Bring on Stage Success: ', d)).catch(e => console.log('Bring on Stage Error: ', e));
    } else {
      console.warn(`onStageRole '${onStageRoleStr}' is ${onStageRole}`);
    }
    onItemPress();
  };
  const handleLowerHandPress = () => {
    if (peer.isHandRaised) {
      hmsInstance.lowerRemotePeerHand(peer).then(d => console.log('Lower Remote Peer hand Success: ', d)).catch(e => console.log('Lower Remote Peer hand Error: ', e));
    } else {
      console.warn(`peer.isHandRaised = ${peer.isHandRaised} | peer's hand is not raised`);
    }
    onItemPress();
  };
  const handleAudioTogglePress = () => {
    if (peer.audioTrack) {
      hmsInstance.changeTrackState(peer.audioTrack, !peer.audioTrack.isMute()).then(d => console.log('Toggle Video Success: ', d)).catch(e => console.log('Toggle Video Error: ', e));
    }
    onItemPress();
  };
  const handleVideoTogglePress = () => {
    if (peer.videoTrack) {
      hmsInstance.changeTrackState(peer.videoTrack, !peer.videoTrack.isMute()).then(d => console.log('Toggle Video Success: ', d)).catch(e => console.log('Toggle Video Error: ', e));
    }
    onItemPress();
  };
  const handleRemoveFromStagePress = () => {
    if (offStageRole) {
      hmsInstance.changeRoleOfPeer(peer, offStageRole, true).then(d => console.log('Remove from Stage Success: ', d)).catch(e => console.log('Remove from Stage Error: ', e));
    } else {
      console.warn(`offStageRole '${prevRoleStr || firstOffStageRoleStr}' is ${offStageRole}`);
    }
    onItemPress();
  };
  const handleRemoveParticipantPress = () => {
    hmsInstance.removePeer(peer, 'removed from room').then(d => console.log('Remove Peer Success: ', d)).catch(e => console.log('Remove Peer Error: ', e));
    onItemPress();
  };
  const {
    handleModalVisibleType: setModalVisible
  } = useModalType();
  const dispatch = useDispatch();
  const handleChangeRolePress = () => {
    setModalVisible(ModalTypes.CHANGE_ROLE, true);
    dispatch(setPeerToUpdate(peer));
    onItemPress();
  };
  const showMuteAudioOption = !insideHandRaiseGroup && localPeerCanMuteTrack && peerCanPublishAudio && ((_peer$audioTrack = peer.audioTrack) === null || _peer$audioTrack === void 0 ? void 0 : _peer$audioTrack.isMute()) === false && peer.type === HMSPeerType.REGULAR;
  const showUnmuteAudioOption = !insideHandRaiseGroup && localPeerCanUnmuteTrack && peerCanPublishAudio && ((_peer$audioTrack2 = peer.audioTrack) === null || _peer$audioTrack2 === void 0 ? void 0 : _peer$audioTrack2.isMute()) && peer.type === HMSPeerType.REGULAR;
  const showMuteVideoOption = !insideHandRaiseGroup && localPeerCanMuteTrack && peerCanPublishVideo && ((_peer$videoTrack = peer.videoTrack) === null || _peer$videoTrack === void 0 ? void 0 : _peer$videoTrack.isMute()) === false && peer.type === HMSPeerType.REGULAR;
  const showUnmuteVideoOption = !insideHandRaiseGroup && localPeerCanUnmuteTrack && peerCanPublishVideo && ((_peer$videoTrack2 = peer.videoTrack) === null || _peer$videoTrack2 === void 0 ? void 0 : _peer$videoTrack2.isMute()) && peer.type === HMSPeerType.REGULAR;
  const showBringOnStageOptions = offStageRoles && offStageRoles.includes(((_peer$role = peer.role) === null || _peer$role === void 0 ? void 0 : _peer$role.name) || '');
  const showLowerHandOption = peer.isHandRaised;
  return /*#__PURE__*/React.createElement(React.Fragment, null, [{
    id: 'bring-on-stage',
    icon: /*#__PURE__*/React.createElement(PersonIcon, {
      type: "rectangle",
      style: {
        width: 20,
        height: 20
      }
    }),
    label: 'Bring on Stage',
    pressHandler: handleBringOnStagePress,
    isActive: false,
    hide: !showBringOnStageOptions
  }, {
    id: 'lower-hand',
    icon: /*#__PURE__*/React.createElement(HandIcon, {
      type: "off",
      style: {
        width: 20,
        height: 20
      }
    }),
    label: 'Lower Hand',
    pressHandler: handleLowerHandPress,
    isActive: false,
    hide: !showLowerHandOption
  }, {
    id: 'mute-audio',
    icon: /*#__PURE__*/React.createElement(MicIcon, {
      muted: true,
      style: {
        width: 20,
        height: 20
      }
    }),
    label: 'Mute Audio',
    pressHandler: handleAudioTogglePress,
    isActive: false,
    hide: !showMuteAudioOption
  }, {
    id: 'unmute-audio',
    icon: /*#__PURE__*/React.createElement(MicIcon, {
      muted: false,
      style: {
        width: 20,
        height: 20
      }
    }),
    label: 'Unmute Audio',
    pressHandler: handleAudioTogglePress,
    isActive: false,
    hide: !showUnmuteAudioOption
  }, {
    id: 'mute-video',
    icon: /*#__PURE__*/React.createElement(CameraIcon, {
      muted: true,
      style: {
        width: 20,
        height: 20
      }
    }),
    label: 'Mute Video',
    pressHandler: handleVideoTogglePress,
    isActive: false,
    hide: !showMuteVideoOption
  }, {
    id: 'unmute-video',
    icon: /*#__PURE__*/React.createElement(CameraIcon, {
      muted: false,
      style: {
        width: 20,
        height: 20
      }
    }),
    label: 'Unmute Video',
    pressHandler: handleVideoTogglePress,
    isActive: false,
    hide: !showUnmuteVideoOption
  }, {
    id: 'remove-from-stage',
    icon: /*#__PURE__*/React.createElement(PersonIcon, {
      type: "rectangle",
      style: {
        width: 20,
        height: 20
      }
    }),
    label: 'Remove from Stage',
    pressHandler: handleRemoveFromStagePress,
    isActive: false,
    hide: Boolean(!onStageRoleStr || ((_peer$role2 = peer.role) === null || _peer$role2 === void 0 ? void 0 : _peer$role2.name) !== onStageRoleStr)
  }, {
    id: 'change-role',
    icon: /*#__PURE__*/React.createElement(PersonIcon, {
      type: "rectangle",
      style: {
        width: 20,
        height: 20
      }
    }),
    label: 'Switch Role',
    pressHandler: handleChangeRolePress,
    isActive: false,
    hide: !localPeerCanChangeRole
  }, {
    id: 'remove-participant',
    icon: /*#__PURE__*/React.createElement(PersonIcon, {
      type: "left",
      style: {
        width: 20,
        height: 20
      }
    }),
    label: 'Remove Participant',
    pressHandler: handleRemoveParticipantPress,
    style: null,
    labelStyle: hmsRoomStyles.removeParticipant,
    isActive: false,
    hide: !localPeerCanRemove
  }].filter(item => !item.hide).map((item, idx) => {
    const isFirst = idx === 0;
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: item.id
    }, isFirst ? null : /*#__PURE__*/React.createElement(View, {
      style: [styles.divider, hmsRoomStyles.divider]
    }), /*#__PURE__*/React.createElement(ParticipantsItemOption, {
      label: item.label,
      onPress: item.pressHandler,
      icon: item.icon,
      style: item.style,
      labelStyle: item.labelStyle
    }));
  }));
};
const styles = StyleSheet.create({
  divider: {
    height: 1,
    width: '100%'
  }
});
export const ParticipantsItemOptions = /*#__PURE__*/React.memo(_ParticipantsItemOptions);
//# sourceMappingURL=ParticipantsItemOptions.js.map