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

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

import React, { useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import { InteractionManager, Platform, View } from 'react-native';
import { HMSCameraControl } from '@100mslive/react-native-hms';
import { DefaultModal } from './DefaultModal';
import { ModalTypes, PipModes } from '../utils/types';
import { requestExternalStoragePermission } from '../utils/functions';
import { ChangeRoleModal, ChangeTrackStateModal, SaveScreenshot } from './Modals';
import { PeerSettingsModalContent } from '../components/PeerSettingsModalContent';
import { StreamingQualityModalContent } from '../components/StreamingQualityModalContent';
import { useHMSChangeTrackStateRequest, useHMSInstance, useHMSRoleChangeRequest, useHMSSessionStoreListeners, useModalType } from '../hooks-util';
import { WebrtcView } from './WebrtcView';
import { BottomSheet } from './BottomSheet';
import { FullScreenVideoView } from './FullScreenVideoView';
import { PreviewForRoleChangeModal } from './PreviewForRoleChangeModal';
import { ChatAndParticipantsBottomSheet } from './ChatAndParticipants';
import { LeaveRoomBottomSheet } from './LeaveRoomBottomSheet';
import { EndRoomModal } from './EndRoomModal';
import { FullScreenWhiteboard } from './FullScreenWhiteboard';
export const DisplayView = ({
  offset,
  peerTrackNodes
}) => {
  // --- 100ms SDK Instance ---
  const hmsInstance = useHMSInstance();
  const {
    modalVisibleType: modalVisible,
    handleModalVisibleType: setModalVisible
  } = useModalType();

  // --- Refs ---
  const gridViewRef = useRef(null);
  const trackToChangeRef = useRef(null);

  //  --- Redux stores ---
  const isPipModeActive = useSelector(state => state.app.pipModeStatus === PipModes.ACTIVE);

  // --- Component Local States ---
  const [selectedPeerTrackNode, setSelectedPeerTrackNode] = useState(null);
  const [capturedImagePath, setCapturedImagePath] = useState(null);

  // --- Listeners ---
  useHMSSessionStoreListeners(gridViewRef);
  const trackStateChangeRequest = useHMSChangeTrackStateRequest(() => {
    setModalVisible(ModalTypes.CHANGE_TRACK, true);
  });
  useHMSRoleChangeRequest();

  // functions

  const handlePeerTileMorePress = React.useCallback(peerTrackNode => {
    setSelectedPeerTrackNode(peerTrackNode);
    setModalVisible(ModalTypes.PEER_SETTINGS);
  }, [setModalVisible]);
  const handleCaptureScreenShotPress = node => {
    setModalVisible(ModalTypes.DEFAULT);
    InteractionManager.runAfterInteractions(() => {
      var _gridViewRef$current;
      (_gridViewRef$current = gridViewRef.current) === null || _gridViewRef$current === void 0 || _gridViewRef$current.captureViewScreenshot(node);
    });
  };
  const handleCaptureImageAtMaxSupportedResolutionPress = _node => {
    setModalVisible(ModalTypes.DEFAULT);
    InteractionManager.runAfterInteractions(async () => {
      const permission = await requestExternalStoragePermission();
      if (hmsInstance && permission) {
        HMSCameraControl.captureImageAtMaxSupportedResolution(true).then(imagePath => {
          console.log('captureImageAtMaxSupportedResolution result -> ', imagePath);
          setModalVisible(ModalTypes.DEFAULT);
          setCapturedImagePath({
            uri: `file://${imagePath}`
          });
        }).catch(error => {
          console.warn('captureImageAtMaxSupportedResolution error -> ', error);
        });
      }
    });
  };
  const handleStreamingQualityPress = track => {
    trackToChangeRef.current = track;
    setModalVisible(ModalTypes.STREAMING_QUALITY_SETTING, true);
  };
  return /*#__PURE__*/React.createElement(View, {
    style: {
      flex: 1
    }
  }, /*#__PURE__*/React.createElement(WebrtcView, {
    ref: gridViewRef,
    offset: offset,
    peerTrackNodes: peerTrackNodes,
    handlePeerTileMorePress: handlePeerTileMorePress
  }), isPipModeActive && Platform.OS === 'android' ? null : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LeaveRoomBottomSheet, null), /*#__PURE__*/React.createElement(EndRoomModal, null), /*#__PURE__*/React.createElement(PreviewForRoleChangeModal, null), /*#__PURE__*/React.createElement(FullScreenVideoView, null), /*#__PURE__*/React.createElement(FullScreenWhiteboard, null), /*#__PURE__*/React.createElement(ChatAndParticipantsBottomSheet, null), /*#__PURE__*/React.createElement(BottomSheet, {
    isVisible: modalVisible === ModalTypes.PEER_SETTINGS,
    dismissModal: () => setModalVisible(ModalTypes.DEFAULT)
  }, selectedPeerTrackNode ? /*#__PURE__*/React.createElement(PeerSettingsModalContent, {
    peerTrackNode: selectedPeerTrackNode,
    peerTrackNodesListEmpty: peerTrackNodes.length === 0,
    cancelModal: () => setModalVisible(ModalTypes.DEFAULT),
    onCaptureScreenShotPress: handleCaptureScreenShotPress,
    onCaptureImageAtMaxSupportedResolutionPress: handleCaptureImageAtMaxSupportedResolutionPress,
    onStreamingQualityPress: handleStreamingQualityPress
  }) : null), /*#__PURE__*/React.createElement(DefaultModal, {
    modalPosiion: "center",
    modalVisible: !!capturedImagePath,
    setModalVisible: () => setCapturedImagePath(null)
  }, capturedImagePath ? /*#__PURE__*/React.createElement(SaveScreenshot, {
    imageSource: capturedImagePath,
    cancelModal: () => setCapturedImagePath(null)
  }) : null), /*#__PURE__*/React.createElement(DefaultModal, {
    modalPosiion: "center",
    modalVisible: modalVisible === ModalTypes.STREAMING_QUALITY_SETTING,
    setModalVisible: () => setModalVisible(ModalTypes.DEFAULT)
  }, trackToChangeRef.current ? /*#__PURE__*/React.createElement(StreamingQualityModalContent, {
    track: trackToChangeRef.current,
    cancelModal: () => {
      setModalVisible(ModalTypes.DEFAULT);
    }
  }) : null), /*#__PURE__*/React.createElement(DefaultModal, {
    modalPosiion: "center",
    modalVisible: modalVisible === ModalTypes.CHANGE_TRACK,
    setModalVisible: () => setModalVisible(ModalTypes.DEFAULT)
  }, trackStateChangeRequest ? /*#__PURE__*/React.createElement(ChangeTrackStateModal, {
    roleChangeRequest: trackStateChangeRequest,
    cancelModal: () => setModalVisible(ModalTypes.DEFAULT)
  }) : null), /*#__PURE__*/React.createElement(DefaultModal, {
    modalPosiion: "center",
    modalVisible: modalVisible === ModalTypes.CHANGE_ROLE,
    setModalVisible: () => setModalVisible(ModalTypes.DEFAULT)
  }, /*#__PURE__*/React.createElement(ChangeRoleModal, {
    cancelModal: () => setModalVisible(ModalTypes.DEFAULT)
  }))));
};
//# sourceMappingURL=DisplayView.js.map