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

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

import React, { useEffect, useState } from 'react';
import { View, TouchableOpacity, Text, ScrollView, TextInput, StyleSheet, Image, useWindowDimensions } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { HMSTrackType, HMSTrackSource, HMSAudioDevice, HMSAudioMixingMode, HMSHLSConfig } from '@100mslive/react-native-hms';
import { styles } from './styles';
import { CustomButton } from './CustomButton';
import { Menu, MenuItem } from './MenuModal';
import { addNotification, changeHLSAspectRatio, changeShowStats } from '../redux/actions';
import { getTime } from '../utils/functions';
import { ModalTypes, SUPPORTED_ASPECT_RATIOS } from '../utils/types';
import { COLORS } from '../utils/theme';
import { SwitchRow } from './SwitchRow';
import { useHMSInstance } from '../hooks-util';
import { ChevronIcon } from '../Icons';
import { NotificationTypes } from '../types';
export const ChangeRoleModal = ({
  cancelModal
}) => {
  var _peer$role2;
  const instance = useHMSInstance();
  const dispatch = useDispatch();
  const allRoles = useSelector(state => state.hmsStates.roles);
  let peer = useSelector(state => state.app.peerToUpdate);
  useEffect(() => {
    let validRoles = allRoles.filter(role => {
      var _peer$role;
      return role.name !== (peer === null || peer === void 0 || (_peer$role = peer.role) === null || _peer$role === void 0 ? void 0 : _peer$role.name) && role.name !== '__internal_recorder';
    });
    setValidRoles(validRoles);
    if (validRoles.length > 0) {
      setNewRole(validRoles[0]);
    }
  }, [allRoles, peer]);
  const [validRoles, setValidRoles] = useState(undefined);
  const [newRole, setNewRole] = useState(undefined);
  const [visible, setVisible] = useState(false);
  const hideMenu = () => setVisible(false);
  const showMenu = () => setVisible(true);
  const switchRole = () => {
    if (newRole) {
      instance === null || instance === void 0 || instance.changeRoleOfPeer(peer, newRole, true).catch(e => {
        console.log('Switch Role of Peer Error: ', e);
        dispatch(addNotification({
          id: Math.random().toString(16).slice(2),
          type: NotificationTypes.ERROR,
          title: e.message
        }));
      });
    } else {
      dispatch(addNotification({
        id: Math.random().toString(16).slice(2),
        type: NotificationTypes.ERROR,
        title: 'Please select a role'
      }));
    }
    cancelModal();
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModal
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeModalHeading
  }, "Switch Role"), /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeModalDescription
  }, "Switch the role of '", peer === null || peer === void 0 ? void 0 : peer.name, "' from '", peer === null || peer === void 0 || (_peer$role2 = peer.role) === null || _peer$role2 === void 0 ? void 0 : _peer$role2.name, "' to"), /*#__PURE__*/React.createElement(Menu, {
    visible: visible,
    anchor: /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: styles.participantChangeRoleContainer,
      onPress: showMenu,
      disabled: validRoles && (validRoles === null || validRoles === void 0 ? void 0 : validRoles.length) <= 1
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.participantFilterText,
      numberOfLines: 1
    }, newRole === null || newRole === void 0 ? void 0 : newRole.name), validRoles && (validRoles === null || validRoles === void 0 ? void 0 : validRoles.length) > 1 && /*#__PURE__*/React.createElement(ChevronIcon, {
      direction: 'down'
    })),
    onRequestClose: hideMenu,
    style: styles.participantsMenuContainer
  }, validRoles === null || validRoles === void 0 ? void 0 : validRoles.map(knownRole => {
    return /*#__PURE__*/React.createElement(MenuItem, {
      onPress: () => {
        hideMenu();
        setNewRole(knownRole);
      },
      key: knownRole.name
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.participantMenuItem
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.participantMenuItemName
    }, knownRole === null || knownRole === void 0 ? void 0 : knownRole.name)));
  })), /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModalPermissionContainer
  }, /*#__PURE__*/React.createElement(CustomButton, {
    title: "Cancel",
    onPress: cancelModal,
    viewStyle: styles.roleChangeModalCancelButton,
    textStyle: styles.roleChangeModalButtonText
  }), /*#__PURE__*/React.createElement(CustomButton, {
    title: "Switch Role",
    onPress: switchRole,
    viewStyle: styles.roleChangeModalSuccessButton,
    textStyle: styles.roleChangeModalButtonText
  })));
};
export const SaveScreenshot = ({
  imageSource,
  cancelModal
}) => {
  const peer = useSelector(state => state.hmsStates.localPeer || undefined);
  return /*#__PURE__*/React.createElement(View, {
    style: [{
      flexGrow: 1
    }, styles.volumeModalContainer]
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeModalHeading
  }, peer ? `${peer.name}'s Snapshot` : 'Snapshot'), imageSource ? /*#__PURE__*/React.createElement(Image, {
    source: imageSource,
    style: styles.screenshotImage,
    resizeMode: "contain"
  }) : null, /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModalPermissionContainer
  }, /*#__PURE__*/React.createElement(CustomButton, {
    title: "Done",
    onPress: cancelModal,
    viewStyle: [styles.roleChangeModalCancelButton, {
      width: '100%'
    }],
    textStyle: styles.roleChangeModalButtonText
  })));
};
export const RtcStatsModal = () => {
  var _currentTrack$track;
  const dispatch = useDispatch();
  const instance = useSelector(state => state.user.hmsInstance);
  const showStatsOnTiles = useSelector(state => state.app.joinConfig.showStats);
  const [localPeer, setLocalPeer] = useState(null);
  const [remotePeers, setRemotePeers] = useState([]);
  const [tracksListModalVisible, setTracksListModalVisible] = useState(false);
  const [currentTrack, setCurrentTrack] = useState(null);
  const hideMenu = () => setTracksListModalVisible(false);
  const showMenu = () => setTracksListModalVisible(true);
  const getStatsList = () => {
    var _localPeer$audioTrack, _localPeer$videoTrack;
    const list = [];
    if (localPeer !== null && localPeer !== void 0 && (_localPeer$audioTrack = localPeer.audioTrack) !== null && _localPeer$audioTrack !== void 0 && _localPeer$audioTrack.trackId) {
      list.push({
        name: (localPeer === null || localPeer === void 0 ? void 0 : localPeer.name) + "'s audio",
        peerId: localPeer === null || localPeer === void 0 ? void 0 : localPeer.peerID,
        track: localPeer === null || localPeer === void 0 ? void 0 : localPeer.audioTrack
      });
    }
    if (localPeer !== null && localPeer !== void 0 && (_localPeer$videoTrack = localPeer.videoTrack) !== null && _localPeer$videoTrack !== void 0 && _localPeer$videoTrack.trackId) {
      list.push({
        name: (localPeer === null || localPeer === void 0 ? void 0 : localPeer.name) + "'s video",
        track: localPeer === null || localPeer === void 0 ? void 0 : localPeer.videoTrack
      });
    }
    remotePeers.forEach(remotePeer => {
      var _remotePeer$audioTrac, _remotePeer$videoTrac;
      if (remotePeer !== null && remotePeer !== void 0 && (_remotePeer$audioTrac = remotePeer.audioTrack) !== null && _remotePeer$audioTrac !== void 0 && _remotePeer$audioTrac.trackId) {
        list.push({
          name: (remotePeer === null || remotePeer === void 0 ? void 0 : remotePeer.name) + "'s audio",
          peerId: remotePeer === null || remotePeer === void 0 ? void 0 : remotePeer.peerID,
          track: remotePeer === null || remotePeer === void 0 ? void 0 : remotePeer.audioTrack
        });
      }
      if (remotePeer !== null && remotePeer !== void 0 && (_remotePeer$videoTrac = remotePeer.videoTrack) !== null && _remotePeer$videoTrac !== void 0 && _remotePeer$videoTrac.trackId) {
        list.push({
          name: (remotePeer === null || remotePeer === void 0 ? void 0 : remotePeer.name) + "'s video",
          track: remotePeer === null || remotePeer === void 0 ? void 0 : remotePeer.videoTrack
        });
      }
    });
    return list;
  };

  // Getting Local Peer from hms instance
  useEffect(() => {
    if (instance) {
      const updateLocalPeer = async () => {
        setLocalPeer(await instance.getLocalPeer());
      };
      updateLocalPeer();
    }
  }, [instance]);

  // Getting Remote Peers from hms instance
  useEffect(() => {
    if (instance) {
      const updateRemotePeers = async () => {
        setRemotePeers(await instance.getRemotePeers());
      };
      updateRemotePeers();
    }
  }, [instance]);
  const isCurrentTrackSelected = currentTrack !== null;
  const statsList = getStatsList();
  const firstTrackInStatsList = statsList.length > 0 ? statsList[0] : null;

  // If currentTrack is null and we have valid item in StatsList
  // then showing stats for the first valid item in StatsList
  useEffect(() => {
    if (!isCurrentTrackSelected && firstTrackInStatsList) {
      setCurrentTrack(firstTrackInStatsList);
    }
  }, [isCurrentTrackSelected, firstTrackInStatsList]);
  const selectedTrackId = currentTrack ? currentTrack.peerId || ((_currentTrack$track = currentTrack.track) === null || _currentTrack$track === void 0 ? void 0 : _currentTrack$track.trackId) : null;
  const rtcStatsData = useSelector(state => selectedTrackId ? state.app.rtcStats[selectedTrackId] : null);
  return /*#__PURE__*/React.createElement(View, {
    style: styles.participantContainer
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.participantsHeaderContainer
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.participantsHeading
  }, "Stats for Nerds")), /*#__PURE__*/React.createElement(SwitchRow, {
    text: "Show Stats on Tiles",
    value: showStatsOnTiles,
    onChange: value => dispatch(changeShowStats(value))
  }), /*#__PURE__*/React.createElement(Menu, {
    visible: tracksListModalVisible,
    anchor: /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: styles.statsModalMenu,
      onPress: showMenu
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.participantFilterText,
      numberOfLines: 1
    }, (currentTrack === null || currentTrack === void 0 ? void 0 : currentTrack.name) ?? 'Choose')),
    onRequestClose: hideMenu,
    style: styles.participantsMenuContainer
  }, statsList.map(trackObj => {
    var _trackObj$track;
    return /*#__PURE__*/React.createElement(MenuItem, {
      onPress: () => {
        hideMenu();
        setCurrentTrack(trackObj);
      },
      key: trackObj === null || trackObj === void 0 || (_trackObj$track = trackObj.track) === null || _trackObj$track === void 0 ? void 0 : _trackObj$track.trackId
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.participantMenuItem
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.participantMenuItemName
    }, trackObj === null || trackObj === void 0 ? void 0 : trackObj.name)));
  })), /*#__PURE__*/React.createElement(ScrollView, {
    contentContainerStyle: Array.isArray(rtcStatsData) ? null : styles.statsModalCardContainer
  }, rtcStatsData ? Array.isArray(rtcStatsData) ? /*#__PURE__*/React.createElement(View, null, rtcStatsData.map(rtcStatsItem => {
    return /*#__PURE__*/React.createElement(View, {
      style: {
        marginBottom: 12
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.statsModalCardDescription
    }, rtcStatsItem.layer), /*#__PURE__*/React.createElement(View, {
      style: styles.statsModalCardContainer
    }, Object.entries(rtcStatsItem).filter(item => item[0] !== 'layer').map(item => {
      const [key, value] = item;
      return /*#__PURE__*/React.createElement(View, {
        style: styles.statsModalCard,
        key: key
      }, /*#__PURE__*/React.createElement(Text, {
        style: styles.statsModalCardHeading
      }, key), /*#__PURE__*/React.createElement(Text, {
        style: styles.statsModalCardDescription
      }, key === 'resolution' ? `Height: ${(value === null || value === void 0 ? void 0 : value.height) ?? 0}, Width: ${(value === null || value === void 0 ? void 0 : value.width) ?? 0}` : key === 'qualityLimitationReasons' ? value.reason : value));
    })));
  })) : Object.entries(rtcStatsData).map(item => {
    const [key, value] = item;
    return /*#__PURE__*/React.createElement(View, {
      style: styles.statsModalCard,
      key: key
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.statsModalCardHeading
    }, key), /*#__PURE__*/React.createElement(Text, {
      style: styles.statsModalCardDescription
    }, key === 'resolution' ? `Height: ${(value === null || value === void 0 ? void 0 : value.height) ?? 0}, Width: ${(value === null || value === void 0 ? void 0 : value.width) ?? 0}` : value));
  }) : null));
};
export const ChangeAudioOutputModal = ({
  cancelModal
}) => {
  const instance = useHMSInstance();
  const [currentOutputDevice, setCurrentOutputDevice] = useState(HMSAudioDevice.SPEAKER_PHONE);
  const [audioOutputDevicesList, setAudioOutputDevicesList] = useState([]);
  const switchAudioOutput = () => {
    instance === null || instance === void 0 || instance.switchAudioOutput(currentOutputDevice);
    cancelModal();
  };
  useEffect(() => {
    const getList = async () => {
      setAudioOutputDevicesList(await (instance === null || instance === void 0 ? void 0 : instance.getAudioDevicesList()));
      setCurrentOutputDevice(await (instance === null || instance === void 0 ? void 0 : instance.getAudioOutputRouteType()));
    };
    getList();
  }, [instance]);
  return /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModal
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeModalHeading
  }, "Switch Audio Output"), audioOutputDevicesList.map(device => {
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      key: device,
      style: styles.roleChangeModalPermissionContainer,
      onPress: () => {
        setCurrentOutputDevice(device);
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: [styles.roleChangeModalPermission, currentOutputDevice === device ? {
        color: COLORS.PRIMARY.DEFAULT
      } : null]
    }, device));
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModalPermissionContainer
  }, /*#__PURE__*/React.createElement(CustomButton, {
    title: "Cancel",
    onPress: cancelModal,
    viewStyle: styles.roleChangeModalCancelButton,
    textStyle: styles.roleChangeModalButtonText
  }), /*#__PURE__*/React.createElement(CustomButton, {
    title: "Change",
    onPress: switchAudioOutput,
    viewStyle: styles.roleChangeModalSuccessButton,
    textStyle: styles.roleChangeModalButtonText
  })));
};
export const ChangeAspectRatio = ({
  cancelModal
}) => {
  const {
    height
  } = useWindowDimensions();
  const dispatch = useDispatch();
  const hlsPlayerAspectRatio = useSelector(state => state.app.hlsAspectRatio);
  const [selectedRatio, setSelectedRatio] = useState(hlsPlayerAspectRatio);
  const handleChangePress = () => {
    cancelModal();
    if (hlsPlayerAspectRatio.id !== selectedRatio.id) {
      dispatch(changeHLSAspectRatio(selectedRatio));
    }
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModal
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeModalHeading
  }, "Change Aspect Ratio"), /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeModalDescription
  }, "Current: ", hlsPlayerAspectRatio.id), /*#__PURE__*/React.createElement(ScrollView, {
    style: {
      maxHeight: height * 0.4
    }
  }, SUPPORTED_ASPECT_RATIOS.map(ratio => {
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      key: ratio.id,
      style: styles.roleChangeModalPermissionContainer,
      onPress: () => setSelectedRatio(ratio)
    }, /*#__PURE__*/React.createElement(Text, {
      style: [styles.roleChangeModalPermission, selectedRatio.id === ratio.id ? {
        color: COLORS.PRIMARY.DEFAULT
      } : null]
    }, ratio.id));
  })), /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModalPermissionContainer
  }, /*#__PURE__*/React.createElement(CustomButton, {
    title: "Cancel",
    onPress: cancelModal,
    viewStyle: styles.roleChangeModalCancelButton,
    textStyle: styles.roleChangeModalButtonText
  }), /*#__PURE__*/React.createElement(CustomButton, {
    title: "Change",
    onPress: handleChangePress,
    viewStyle: styles.roleChangeModalSuccessButton,
    textStyle: styles.roleChangeModalButtonText
  })));
};
export const ChangeAudioModeModal = ({
  cancelModal,
  audioMode,
  setAudioMode
}) => {
  const instance = useHMSInstance();
  const [currentAudioMode, setCurrentAudioMode] = useState(audioMode);
  const AudioModeList = ['MODE_NORMAL', 'MODE_RINGTONE', 'MODE_IN_CALL', 'MODE_IN_COMMUNICATION', 'MODE_CALL_SCREENING'];
  const switchAudioMode = () => {
    instance === null || instance === void 0 || instance.setAudioMode(currentAudioMode);
    setAudioMode(currentAudioMode);
    cancelModal();
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModal
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeModalHeading
  }, "Switch Audio Output"), AudioModeList.map(mode => {
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      key: mode,
      style: styles.roleChangeModalPermissionContainer,
      onPress: () => {
        setCurrentAudioMode(AudioModeList.indexOf(mode));
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: [styles.roleChangeModalPermission, currentAudioMode === AudioModeList.indexOf(mode) ? {
        color: COLORS.PRIMARY.DEFAULT
      } : null]
    }, mode));
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModalPermissionContainer
  }, /*#__PURE__*/React.createElement(CustomButton, {
    title: "Cancel",
    onPress: cancelModal,
    viewStyle: styles.roleChangeModalCancelButton,
    textStyle: styles.roleChangeModalButtonText
  }), /*#__PURE__*/React.createElement(CustomButton, {
    title: "Change",
    onPress: switchAudioMode,
    viewStyle: styles.roleChangeModalSuccessButton,
    textStyle: styles.roleChangeModalButtonText
  })));
};
export const ChangeAudioMixingModeModal = ({
  newAudioMixingMode,
  cancelModal,
  setNewAudioMixingMode
}) => {
  const instance = useHMSInstance();
  const changeAudioMixingMode = async () => {
    await (instance === null || instance === void 0 ? void 0 : instance.setAudioMixingMode(newAudioMixingMode));
    cancelModal();
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModal
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeModalHeading
  }, "Change Audio Mixing Mode"), /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeModalDescription
  }, "TALK_ONLY : only data captured by mic will be streamed in the room, TALK_AND_MUSIC : data captured by mic as well as playback audio being captured from device will be streamed in the room, MUSIC_ONLY : only the playback audio being captured from device will be streamed in the room"), Object.keys(HMSAudioMixingMode).map(audioMixingMode => {
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      key: audioMixingMode,
      style: styles.roleChangeModalPermissionContainer,
      onPress: () => {
        setNewAudioMixingMode(audioMixingMode);
      }
    }, /*#__PURE__*/React.createElement(Text, {
      style: [styles.roleChangeModalPermission, newAudioMixingMode === audioMixingMode ? {
        color: COLORS.PRIMARY.DEFAULT
      } : null]
    }, audioMixingMode));
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModalPermissionContainer
  }, /*#__PURE__*/React.createElement(CustomButton, {
    title: "Cancel",
    onPress: cancelModal,
    viewStyle: styles.roleChangeModalCancelButton,
    textStyle: styles.roleChangeModalButtonText
  }), /*#__PURE__*/React.createElement(CustomButton, {
    title: "Change",
    onPress: changeAudioMixingMode,
    viewStyle: styles.roleChangeModalSuccessButton,
    textStyle: styles.roleChangeModalButtonText
  })));
};
export const ChangeTrackStateForRoleModal = ({
  cancelModal
}) => {
  var _localPeerRole$permis, _localPeerRole$permis2;
  const instance = useHMSInstance();
  const roles = useSelector(state => state.hmsStates.roles);
  const localPeerRole = useSelector(state => {
    var _state$hmsStates$loca;
    return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.role;
  });
  const [role, setRole] = useState(localPeerRole);
  const [visible, setVisible] = useState(false);
  const [trackType, setTrackType] = useState(HMSTrackType.VIDEO);
  const [trackState, setTrackState] = useState(false);
  const hideMenu = () => setVisible(false);
  const showMenu = () => setVisible(true);
  const changeTrackState = async () => {
    const source = HMSTrackSource.REGULAR;
    await (instance === null || instance === void 0 ? void 0 : instance.changeTrackStateForRoles(trackState, trackType, source, [role]).then(d => console.log('Change Track State For Role Success: ', d)).catch(e => console.log('Change Track State For Role Error: ', e)));
    cancelModal();
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModal
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeModalHeading
  }, "Change Track State For Role"), /*#__PURE__*/React.createElement(Menu, {
    visible: visible,
    anchor: /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: styles.participantChangeRoleContainer,
      onPress: showMenu
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.participantFilterText,
      numberOfLines: 1
    }, role === null || role === void 0 ? void 0 : role.name)),
    onRequestClose: hideMenu,
    style: styles.participantsMenuContainer
  }, roles === null || roles === void 0 ? void 0 : roles.map(knownRole => {
    return /*#__PURE__*/React.createElement(MenuItem, {
      onPress: () => {
        hideMenu();
        setRole(knownRole);
      },
      key: knownRole.name
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.participantMenuItem
    }, /*#__PURE__*/React.createElement(Text, {
      style: styles.participantMenuItemName
    }, knownRole === null || knownRole === void 0 ? void 0 : knownRole.name)));
  })), /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModalPermissionContainer
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.changeTrackStateRoleOptionHeading
  }, 'Track State: '), (localPeerRole === null || localPeerRole === void 0 || (_localPeerRole$permis = localPeerRole.permissions) === null || _localPeerRole$permis === void 0 ? void 0 : _localPeerRole$permis.mute) && /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.changeTrackStateRoleOption,
    onPress: () => setTrackState(true)
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.roleChangeModalPermission, trackState ? {
      color: COLORS.PRIMARY.DEFAULT
    } : null]
  }, "MUTE")), (localPeerRole === null || localPeerRole === void 0 || (_localPeerRole$permis2 = localPeerRole.permissions) === null || _localPeerRole$permis2 === void 0 ? void 0 : _localPeerRole$permis2.unmute) && /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.changeTrackStateRoleOption,
    onPress: () => setTrackState(false)
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.roleChangeModalPermission, !trackState ? {
      color: COLORS.PRIMARY.DEFAULT
    } : null]
  }, "UNMUTE"))), /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModalPermissionContainer
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.changeTrackStateRoleOptionHeading
  }, 'Track Type: '), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.changeTrackStateRoleOption,
    onPress: () => setTrackType(HMSTrackType.AUDIO)
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.roleChangeModalPermission, trackType === HMSTrackType.AUDIO ? {
      color: COLORS.PRIMARY.DEFAULT
    } : null]
  }, HMSTrackType.AUDIO)), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.changeTrackStateRoleOption,
    onPress: () => setTrackType(HMSTrackType.VIDEO)
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.roleChangeModalPermission, trackType === HMSTrackType.VIDEO ? {
      color: COLORS.PRIMARY.DEFAULT
    } : null]
  }, HMSTrackType.VIDEO))), /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModalPermissionContainer
  }, /*#__PURE__*/React.createElement(CustomButton, {
    title: "Cancel",
    onPress: cancelModal,
    viewStyle: styles.roleChangeModalCancelButton,
    textStyle: styles.roleChangeModalButtonText
  }), /*#__PURE__*/React.createElement(CustomButton, {
    title: "Change",
    onPress: changeTrackState,
    viewStyle: styles.roleChangeModalSuccessButton,
    textStyle: styles.roleChangeModalButtonText
  })));
};
export const ChangeTrackStateModal = ({
  roleChangeRequest,
  cancelModal
}) => {
  var _roleChangeRequest$re, _roleChangeRequest$su2;
  const localPeer = useSelector(state => state.hmsStates.localPeer);
  const changeLayout = () => {
    var _roleChangeRequest$su;
    if ((roleChangeRequest === null || roleChangeRequest === void 0 || (_roleChangeRequest$su = roleChangeRequest.suggestedRole) === null || _roleChangeRequest$su === void 0 ? void 0 : _roleChangeRequest$su.toLocaleLowerCase()) === 'video') {
      var _localPeer$localVideo;
      localPeer === null || localPeer === void 0 || (_localPeer$localVideo = localPeer.localVideoTrack()) === null || _localPeer$localVideo === void 0 || _localPeer$localVideo.setMute(false);
    } else {
      var _localPeer$localAudio;
      localPeer === null || localPeer === void 0 || (_localPeer$localAudio = localPeer.localAudioTrack()) === null || _localPeer$localAudio === void 0 || _localPeer$localAudio.setMute(false);
    }
    cancelModal();
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModal
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeModalHeading
  }, "Change Track State Request"), /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeText
  }, `${roleChangeRequest === null || roleChangeRequest === void 0 || (_roleChangeRequest$re = roleChangeRequest.requestedBy) === null || _roleChangeRequest$re === void 0 ? void 0 : _roleChangeRequest$re.toLocaleUpperCase()} requested to unmute your regular ${roleChangeRequest === null || roleChangeRequest === void 0 || (_roleChangeRequest$su2 = roleChangeRequest.suggestedRole) === null || _roleChangeRequest$su2 === void 0 ? void 0 : _roleChangeRequest$su2.toLocaleUpperCase()}`), /*#__PURE__*/React.createElement(View, {
    style: styles.sortingButtonContainer
  }, /*#__PURE__*/React.createElement(CustomButton, {
    title: "Reject",
    onPress: cancelModal,
    viewStyle: styles.roleChangeModalCancelButton,
    textStyle: styles.roleChangeModalButtonText
  }), /*#__PURE__*/React.createElement(CustomButton, {
    title: "Accept",
    onPress: changeLayout,
    viewStyle: styles.roleChangeModalSuccessButton,
    textStyle: styles.roleChangeModalButtonText
  })));
};
export const HlsStreamingModal = ({
  cancelModal
}) => {
  const instance = useHMSInstance();
  const roomID = useSelector(state => state.user.roomID);
  const [hlsStreamingDetails, setHLSStreamingDetails] = useState({
    meetingUrl: roomID ? roomID + '?skip_preview=true' : '',
    metadata: ''
  });
  const [startHlsRetry, setStartHlsRetry] = useState(true);
  const [hlsRecordingDetails, setHLSRecordingDetails] = useState({
    singleFilePerLayer: false,
    videoOnDemand: false
  });
  const changeLayout = () => {
    instance === null || instance === void 0 || instance.startHLSStreaming().then(d => console.log('Start HLS Streaming Success: ', d)).catch(err => {
      if (startHlsRetry) {
        setStartHlsRetry(false);
        const hmsHLSConfig = new HMSHLSConfig({
          hlsRecordingConfig: hlsRecordingDetails,
          meetingURLVariants: [hlsStreamingDetails]
        });
        instance === null || instance === void 0 || instance.startHLSStreaming(hmsHLSConfig).then(d => console.log('Start HLS Streaming Success: ', d)).catch(e => console.log('Start HLS Streaming Error: ', e));
      } else {
        console.log('Start HLS Streaming Error: ', err);
      }
    });
    cancelModal();
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModal
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeModalHeading
  }, "HLS Streaming Details"), /*#__PURE__*/React.createElement(TextInput, {
    onChangeText: value => {
      setHLSStreamingDetails({
        ...hlsStreamingDetails,
        meetingUrl: value
      });
    },
    placeholderTextColor: COLORS.SECONDARY.DEFAULT,
    placeholder: "Enter meeting url",
    style: styles.input,
    defaultValue: hlsStreamingDetails.meetingUrl,
    returnKeyType: "done",
    multiline: true,
    blurOnSubmit: true
  }), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.checkboxButtonContainer,
    onPress: () => {
      setHLSRecordingDetails({
        ...hlsRecordingDetails,
        singleFilePerLayer: !hlsRecordingDetails.singleFilePerLayer
      });
    }
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.roleChangeModalPermission, hlsRecordingDetails.singleFilePerLayer ? {
      color: COLORS.PRIMARY.DEFAULT
    } : null]
  }, "SingleFilePerLayer")), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.checkboxButtonContainer,
    onPress: () => {
      setHLSRecordingDetails({
        ...hlsRecordingDetails,
        videoOnDemand: !hlsRecordingDetails.videoOnDemand
      });
    }
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.roleChangeModalPermission, hlsRecordingDetails.videoOnDemand ? {
      color: COLORS.PRIMARY.DEFAULT
    } : null]
  }, "VideoOnDemand")), /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModalPermissionContainer
  }, /*#__PURE__*/React.createElement(CustomButton, {
    title: "Cancel",
    onPress: cancelModal,
    viewStyle: styles.roleChangeModalCancelButton,
    textStyle: styles.roleChangeModalButtonText
  }), /*#__PURE__*/React.createElement(CustomButton, {
    title: "Start",
    onPress: changeLayout,
    viewStyle: styles.roleChangeModalSuccessButton,
    textStyle: styles.roleChangeModalButtonText
  })));
};
export const RecordingModal = ({
  setModalVisible
}) => {
  const instance = useHMSInstance();
  const roomID = useSelector(state => state.user.roomID);
  const [recordingDetails, setRecordingDetails] = useState({
    record: false,
    meetingURL: roomID ? roomID + '?token=beam_recording' : undefined
  });
  const changeLayout = () => {
    instance === null || instance === void 0 || instance.startRTMPOrRecording(recordingDetails).then(d => console.log('Start RTMP Or Recording Success: ', d)).catch(e => console.log('Start RTMP Or Recording Error: ', e));
    setModalVisible(ModalTypes.DEFAULT);
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModal
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeModalHeading
  }, "Recording Details"), /*#__PURE__*/React.createElement(TextInput, {
    onChangeText: value => {
      setRecordingDetails({
        ...recordingDetails,
        meetingURL: value
      });
    },
    placeholderTextColor: COLORS.SECONDARY.DEFAULT,
    placeholder: "Enter meeting url",
    style: styles.input,
    defaultValue: recordingDetails.meetingURL || '',
    returnKeyType: "done",
    multiline: true,
    blurOnSubmit: true
  }), /*#__PURE__*/React.createElement(TextInput, {
    onChangeText: value => {
      if (value === '') {
        setRecordingDetails({
          ...recordingDetails,
          rtmpURLs: undefined
        });
      } else {
        setRecordingDetails({
          ...recordingDetails,
          rtmpURLs: [value]
        });
      }
    },
    placeholderTextColor: COLORS.SECONDARY.DEFAULT,
    placeholder: "Enter rtmp url",
    style: styles.input,
    defaultValue: recordingDetails.rtmpURLs ? recordingDetails.rtmpURLs[0] : '',
    returnKeyType: "done",
    multiline: true,
    blurOnSubmit: true
  }), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.checkboxButtonContainer,
    onPress: () => {
      setRecordingDetails({
        ...recordingDetails,
        record: !recordingDetails.record
      });
    }
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.roleChangeModalPermission, recordingDetails.record ? {
      color: COLORS.PRIMARY.DEFAULT
    } : null]
  }, "Record")), /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModalPermissionContainer
  }, /*#__PURE__*/React.createElement(CustomButton, {
    title: "Cancel",
    onPress: () => setModalVisible(ModalTypes.DEFAULT),
    viewStyle: styles.roleChangeModalCancelButton,
    textStyle: styles.roleChangeModalButtonText
  }), /*#__PURE__*/React.createElement(CustomButton, {
    title: "Start",
    onPress: changeLayout,
    viewStyle: styles.roleChangeModalSuccessButton,
    textStyle: styles.roleChangeModalButtonText
  })));
};
export const ChangeRoleAccepteModal = ({
  instance,
  roleChangeRequest,
  cancelModal
}) => {
  var _roleChangeRequest$re2, _roleChangeRequest$su3;
  const changeLayout = () => {
    instance === null || instance === void 0 || instance.acceptRoleChange();
    cancelModal();
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModal
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeModalHeading
  }, "Role Change Details"), /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeText
  }, `Role change requested by ${roleChangeRequest === null || roleChangeRequest === void 0 || (_roleChangeRequest$re2 = roleChangeRequest.requestedBy) === null || _roleChangeRequest$re2 === void 0 ? void 0 : _roleChangeRequest$re2.toLocaleUpperCase()}. Changing role to ${roleChangeRequest === null || roleChangeRequest === void 0 || (_roleChangeRequest$su3 = roleChangeRequest.suggestedRole) === null || _roleChangeRequest$su3 === void 0 ? void 0 : _roleChangeRequest$su3.toLocaleUpperCase()}`), /*#__PURE__*/React.createElement(View, {
    style: styles.sortingButtonContainer
  }, /*#__PURE__*/React.createElement(CustomButton, {
    title: "Reject",
    onPress: cancelModal,
    viewStyle: styles.roleChangeModalCancelButton,
    textStyle: styles.roleChangeModalButtonText
  }), /*#__PURE__*/React.createElement(CustomButton, {
    title: "Accept",
    onPress: changeLayout,
    viewStyle: styles.roleChangeModalSuccessButton,
    textStyle: styles.roleChangeModalButtonText
  })));
};
export const RealTime = ({
  startedAt
}) => {
  const [hour, setHour] = useState(0);
  const [minute, setMinute] = useState(0);
  const [second, setSecond] = useState(0);
  useEffect(() => {
    if (startedAt) {
      const millisecs = Date.now() - startedAt.getTime();
      const [h, min, sec] = getTime(Math.abs(millisecs));
      if (h > 0) {
        setHour(h);
      }
      if (min > 0) {
        setMinute(min);
      }
      if (sec > 0) {
        setSecond(sec);
      }
    }
  }, [startedAt]);
  useEffect(() => {
    const updatePostInfo = setInterval(() => {
      setSecond(sec => sec + 1);
    }, 1000);
    return () => {
      clearInterval(updatePostInfo);
    };
  }, []);
  useEffect(() => {
    if (second === 60) {
      setSecond(0);
      setMinute(min => min + 1);
    }
  }, [second]);
  useEffect(() => {
    if (minute === 60) {
      setMinute(0);
      setHour(hr => hr + 1);
    }
  }, [minute]);
  return /*#__PURE__*/React.createElement(View, {
    style: styles.liveTextContainer
  }, hour > 0 && /*#__PURE__*/React.createElement(Text, {
    style: styles.liveTimeText
  }, hour < 10 ? '0' + hour : hour, ":"), /*#__PURE__*/React.createElement(Text, {
    style: styles.liveTimeText
  }, minute < 10 ? '0' + minute : minute, ":"), /*#__PURE__*/React.createElement(Text, {
    style: styles.liveTimeText
  }, second < 10 ? '0' + second : second));
};
var RoleSelection = /*#__PURE__*/function (RoleSelection) {
  RoleSelection["TARGET"] = "TARGET";
  RoleSelection["TO_CHANGE"] = "TO_CHANGE";
  return RoleSelection;
}(RoleSelection || {});
export const ChangeBulkRoleModal = ({
  cancelModal
}) => {
  const hmsInstance = useSelector(state => state.user.hmsInstance);
  const roles = useSelector(state => state.hmsStates.roles);
  const [showRolesSelectionView, setShowRolesSelectionView] = useState(null);
  const [targetRole, setTargetRole] = useState(null);
  const [rolesToChange, setRolesToChange] = useState([]);
  const changeRole = async () => {
    if (!hmsInstance || !targetRole) {
      return;
    }
    hmsInstance.changeRoleOfPeersWithRoles(rolesToChange.filter(roleToChange => roleToChange.name !== targetRole.name), targetRole);
    cancelModal();
  };
  const handleRoleSelection = roleSelected => {
    if (showRolesSelectionView === RoleSelection.TARGET) {
      setTargetRole(roleSelected);
    } else {
      setRolesToChange(prevRolesToChange => {
        if (prevRolesToChange.findIndex(role => role.name === roleSelected.name) >= 0) {
          return prevRolesToChange.filter(role => role.name !== roleSelected.name);
        }
        return [...prevRolesToChange, roleSelected];
      });
    }
  };

  // if targetRole is not available, OR
  // role or rolesToChange is not available. then "Change" button should be disabled
  const changeSubmitDisabled = !targetRole || rolesToChange.length === 0;
  return /*#__PURE__*/React.createElement(View, {
    style: bulkRoleStyles.container
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.roleChangeModalHeading
  }, "Bulk Role Change"), /*#__PURE__*/React.createElement(View, {
    style: bulkRoleStyles.contentContainer
  }, /*#__PURE__*/React.createElement(View, {
    style: bulkRoleStyles.row
  }, /*#__PURE__*/React.createElement(Text, {
    style: bulkRoleStyles.label
  }, "Select Roles to Change"), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: bulkRoleStyles.btn,
    onPress: () => setShowRolesSelectionView(RoleSelection.TO_CHANGE)
  }, /*#__PURE__*/React.createElement(Text, {
    style: bulkRoleStyles.value,
    numberOfLines: 1
  }, rolesToChange.map(role => role.name).join(', ') || 'Select Roles'))), /*#__PURE__*/React.createElement(View, {
    style: bulkRoleStyles.row
  }, /*#__PURE__*/React.createElement(Text, {
    style: bulkRoleStyles.label
  }, "Target Role"), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: bulkRoleStyles.btn,
    onPress: () => setShowRolesSelectionView(RoleSelection.TARGET)
  }, /*#__PURE__*/React.createElement(Text, {
    style: bulkRoleStyles.value
  }, targetRole ? targetRole.name : 'Select Role')))), /*#__PURE__*/React.createElement(View, {
    style: styles.roleChangeModalPermissionContainer
  }, /*#__PURE__*/React.createElement(CustomButton, {
    title: "Cancel",
    onPress: cancelModal,
    viewStyle: styles.roleChangeModalCancelButton,
    textStyle: styles.roleChangeModalButtonText
  }), /*#__PURE__*/React.createElement(CustomButton, {
    disabled: changeSubmitDisabled,
    title: "Change",
    onPress: changeRole,
    viewStyle: styles.roleChangeModalSuccessButton,
    textStyle: styles.roleChangeModalButtonText
  })), showRolesSelectionView ? /*#__PURE__*/React.createElement(View, {
    style: bulkRoleStyles.roleSelectionBackdrop
  }, /*#__PURE__*/React.createElement(View, {
    style: bulkRoleStyles.roleSelectionContainer
  }, /*#__PURE__*/React.createElement(Text, {
    style: bulkRoleStyles.heading
  }, showRolesSelectionView === RoleSelection.TARGET ? 'Select Target Role' : 'Select Role to Change'), /*#__PURE__*/React.createElement(ScrollView, {
    centerContent: true,
    contentContainerStyle: bulkRoleStyles.scrollContainer
  }, roles.map(role => {
    const selected = showRolesSelectionView === RoleSelection.TARGET ? role.name === (targetRole === null || targetRole === void 0 ? void 0 : targetRole.name) : rolesToChange.findIndex(roleToChange => roleToChange.name === role.name) >= 0;
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      key: role.name,
      style: bulkRoleStyles.roleBtn,
      onPress: () => handleRoleSelection(role)
    }, /*#__PURE__*/React.createElement(Text, {
      style: {
        color: selected ? COLORS.PRIMARY.DEFAULT : COLORS.TEXT.MEDIUM_EMPHASIS
      }
    }, role.name));
  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: bulkRoleStyles.roleSelectionDone,
    onPress: () => setShowRolesSelectionView(null)
  }, /*#__PURE__*/React.createElement(Text, {
    style: bulkRoleStyles.roleSelectionDoneText
  }, "Done")))) : null);
};
const bulkRoleStyles = StyleSheet.create({
  container: {
    padding: 24,
    position: 'relative',
    height: 320
  },
  contentContainer: {
    flex: 1,
    justifyContent: 'center',
    marginTop: 24
  },
  row: {
    // flexGrow: 1,
    marginVertical: 20,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  label: {
    color: COLORS.TEXT.HIGH_EMPHASIS
  },
  value: {
    flex: 1,
    color: COLORS.TEXT.MEDIUM_EMPHASIS,
    textAlign: 'right'
  },
  toggleContainer: {
    width: 160,
    borderRadius: 6,
    backgroundColor: COLORS.SECONDARY.DARK,
    flexDirection: 'row',
    paddingVertical: 2,
    paddingHorizontal: 2
  },
  toggleItem: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 6
  },
  toggleActiveItem: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 6,
    borderRadius: 4,
    backgroundColor: COLORS.SECONDARY.DEFAULT
  },
  btn: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
    marginLeft: 4
  },
  chevronIcon: {
    color: COLORS.TEXT.MEDIUM_EMPHASIS
  },
  roleSelectionBackdrop: {
    position: 'absolute',
    top: 24,
    left: 24,
    width: '100%',
    height: '100%',
    shadowColor: COLORS.SURFACE.LIGHT,
    shadowOpacity: 0.5,
    shadowRadius: 24,
    padding: 8
  },
  roleSelectionContainer: {
    flex: 1,
    padding: 12,
    backgroundColor: COLORS.SURFACE.LIGHT,
    borderRadius: 8,
    borderWidth: 0.5,
    borderColor: COLORS.BORDER.LIGHT
  },
  heading: {
    fontSize: 16,
    lineHeight: 24,
    color: COLORS.TEXT.HIGH_EMPHASIS,
    marginVertical: 4,
    marginLeft: 4
  },
  scrollContainer: {
    paddingHorizontal: 12
  },
  checkboxContainer: {
    marginRight: 12,
    justifyContent: 'center',
    alignItems: 'center'
  },
  checkboxLabel: {
    color: COLORS.TEXT.MEDIUM_EMPHASIS
  },
  roleBtn: {
    paddingVertical: 12,
    flexDirection: 'row',
    alignItems: 'center'
  },
  roleSelectionDone: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 4,
    paddingVertical: 6
  },
  roleSelectionDoneText: {
    fontSize: 14,
    lineHeight: 22,
    fontFamily: 'Inter-Medium',
    color: COLORS.TEXT.HIGH_EMPHASIS
  }
});
//# sourceMappingURL=Modals.js.map