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

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

import React, { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
import Animated, { interpolate, useAnimatedStyle } from 'react-native-reanimated';
import { MaxTilesInOnePage, PipModes } from '../utils/types';
import { pairData } from '../utils/functions';
import { GridView } from './GridView';
import PIPView from './PIPView';
import { useIsPortraitOrientation } from '../utils/dimension';
import { LocalPeerRegularVideoView } from './LocalPeerRegularVideoView';
import { WelcomeInMeeting } from './WelcomeInMeeting';
import { OverlayContainer } from './OverlayContainer';
import { OverlayedViews } from './OverlayedViews';
import { useFooterHeight } from './Footer';
import { useHeaderHeight } from './Header';
import { Platform, View } from 'react-native';
import { WebrtcTranscriptOverlayView } from './WebrtcTranscriptOverlayView';
export const WebrtcView = /*#__PURE__*/React.forwardRef(({
  offset,
  peerTrackNodes,
  handlePeerTileMorePress
}, gridViewRef) => {
  const isPortrait = useIsPortraitOrientation();
  const {
    height
  } = useSafeAreaFrame(); // This height does not include top & bottom safe area as this component isn't wrapped in SafeAreaView
  const footerHeight = useFooterHeight(); // This height includes top safearea by default
  const headerHeight = useHeaderHeight(); // This height includes top safearea by default
  const {
    top,
    bottom
  } = useSafeAreaInsets();
  const isPipModeActive = useSelector(state => state.app.pipModeStatus === PipModes.ACTIVE);

  // State to track active spotlight trackId
  const spotlightTrackId = useSelector(state => state.user.spotlightTrackId);
  const screenshareTilesOrWhiteboardAcive = useSelector(state => state.app.screensharePeerTrackNodes.length > 0 || !!state.hmsStates.whiteboard);
  const pairedPeers = useMemo(() => pairData(peerTrackNodes, isPortrait ? screenshareTilesOrWhiteboardAcive ? MaxTilesInOnePage.IN_PORTRAIT_WITH_SCREENSHARES : MaxTilesInOnePage.IN_PORTRAIT : MaxTilesInOnePage.IN_LANDSCAPE, spotlightTrackId), [peerTrackNodes, screenshareTilesOrWhiteboardAcive, spotlightTrackId, isPortrait]);
  const showWelcomeBanner = useSelector(state => !state.app.localPeerTrackNode && pairedPeers.length === 0);
  const fullHeight = height - top - (isPortrait ? bottom : 0);
  const smallHeight = isPortrait ? height - headerHeight - footerHeight : height;
  const animatedStyles = useAnimatedStyle(() => {
    return {
      height: interpolate(offset.value, [0, 1], [fullHeight, smallHeight])
    };
  }, [fullHeight, smallHeight]);
  const headerPlaceholderAnimatedStyles = useAnimatedStyle(() => {
    return {
      height: interpolate(offset.value, [0, 1], [top, isPortrait ? headerHeight : top])
    };
  }, [headerHeight, top, isPortrait]);
  const overlayedAnimatedStyles = useAnimatedStyle(() => {
    return {
      bottom: interpolate(offset.value, [0, 1], [!isPortrait ? bottom : 0, 0])
    };
  }, [isPortrait, bottom]);
  if (isPipModeActive && Platform.OS === 'android') {
    return /*#__PURE__*/React.createElement(PIPView, {
      peerTrackNodes: peerTrackNodes,
      customView: showWelcomeBanner ? /*#__PURE__*/React.createElement(WelcomeInMeeting, null) : pairedPeers.length <= 0 ? /*#__PURE__*/React.createElement(LocalPeerRegularVideoView, null) : null
    });
  }
  return /*#__PURE__*/React.createElement(View, {
    style: {
      flex: 1
    }
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: headerPlaceholderAnimatedStyles
  }), /*#__PURE__*/React.createElement(Animated.View, {
    style: animatedStyles
  }, /*#__PURE__*/React.createElement(OverlayContainer, null, showWelcomeBanner ? /*#__PURE__*/React.createElement(WelcomeInMeeting, null) : pairedPeers.length > 0 ? /*#__PURE__*/React.createElement(GridView, {
    ref: gridViewRef,
    onPeerTileMorePress: handlePeerTileMorePress,
    pairedPeers: pairedPeers
  }) : /*#__PURE__*/React.createElement(LocalPeerRegularVideoView, {
    onMoreOptionsPress: handlePeerTileMorePress
  }), /*#__PURE__*/React.createElement(WebrtcTranscriptOverlayView, {
    offset: offset
  }), /*#__PURE__*/React.createElement(OverlayedViews, {
    animatedStyle: overlayedAnimatedStyles,
    offset: offset
  }))));
});
//# sourceMappingURL=WebrtcView.js.map