@100mslive/react-native-room-kit/lib/module/components/FullScreenVideoView.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 Modal from 'react-native-modal';
import { StyleSheet, View } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { SafeAreaView } from 'react-native-safe-area-context';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { useHMSRoomColorPalette, useHMSRoomStyle } from '../hooks-util';
import { setFullScreenPeerTrackNode } from '../redux/actions';
import { HMSFullScreenButton } from './PeerVideoTile/HMSFullScreenButton';
import { PeerVideoTileView } from './PeerVideoTile/PeerVideoTileView';
export const FullScreenVideoView = () => {
  var _fullScreenPeerTrackN;
  const dispatch = useDispatch();
  const fullScreenPeerTrackNode = useSelector(state => state.app.fullScreenPeerTrackNode);
  const {
    background_dim: backgroundDimColor
  } = useHMSRoomColorPalette();
  const contentContainerStyles = useHMSRoomStyle(theme => ({
    backgroundColor: theme.palette.background_dim
  }));
  const handleClosingFullScreenView = () => {
    dispatch(setFullScreenPeerTrackNode(null));
  };
  return /*#__PURE__*/React.createElement(Modal, {
    isVisible: fullScreenPeerTrackNode !== null,
    animationIn: 'fadeInUp',
    animationInTiming: 100,
    animationOutTiming: 100,
    animationOut: 'fadeOutDown',
    backdropColor: backgroundDimColor,
    backdropOpacity: 0.3,
    onBackButtonPress: handleClosingFullScreenView,
    onBackdropPress: handleClosingFullScreenView,
    useNativeDriver: true,
    useNativeDriverForBackdrop: true,
    hideModalContentWhileAnimating: true,
    style: styles.modal,
    supportedOrientations: ['portrait', 'landscape']
  }, /*#__PURE__*/React.createElement(GestureHandlerRootView, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(SafeAreaView, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.contentContainer, contentContainerStyles]
  }, fullScreenPeerTrackNode && (_fullScreenPeerTrackN = fullScreenPeerTrackNode.track) !== null && _fullScreenPeerTrackN !== void 0 && _fullScreenPeerTrackN.trackId ? /*#__PURE__*/React.createElement(PeerVideoTileView, {
    peerTrackNode: fullScreenPeerTrackNode,
    zoomIn: true
  }) : null, /*#__PURE__*/React.createElement(HMSFullScreenButton, {
    peerTrackNode: fullScreenPeerTrackNode
  })))));
};
const styles = StyleSheet.create({
  modal: {
    margin: 0
  },
  container: {
    flexGrow: 1
  },
  contentContainer: {
    flex: 1,
    position: 'relative'
  }
});
//# sourceMappingURL=FullScreenVideoView.js.map