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

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

import React from 'react';
import { View } from 'react-native';
import { useSelector } from 'react-redux';
import { useSafeAreaFrame } from 'react-native-safe-area-context';
import { Tile } from './Tile';
import { useIsLandscapeOrientation } from '../utils/dimension';
import { groupIntoPairs } from '../utils/functions';
const _TilesContainer = ({
  peerTrackNodes,
  setHmsViewRefs,
  onPeerTileMorePress
}) => {
  const {
    width: safeWidth
  } = useSafeAreaFrame();
  const isLandscapeOrientation = useIsLandscapeOrientation();
  const screenshareTilesOrWhiteboardAcive = useSelector(state => state.app.screensharePeerTrackNodes.length > 0 || !!state.hmsStates.whiteboard);
  const stylesConfig = computeTileWidthAndHeight(peerTrackNodes.length, {
    isLandscapeOrientation,
    type: screenshareTilesOrWhiteboardAcive ? 'row' : 'default'
  });

  // In this layout, Tile will take as much height and width as possible
  // Width and Height of Tile are independent of each other
  const growableTileLayout = peerTrackNodes.length <= 4;
  return /*#__PURE__*/React.createElement(View, {
    style: [
    // If tile are growable, then we want whatever remaining space to be between them
    {
      justifyContent: screenshareTilesOrWhiteboardAcive && peerTrackNodes.length === 1 ? 'center' : growableTileLayout ? 'space-between' : 'center',
      flexDirection: screenshareTilesOrWhiteboardAcive ? 'row' : isLandscapeOrientation ? 'row' : 'column'
    }, {
      width: safeWidth
    }]
  }, peerTrackNodes.length <= 3 ?
  /*#__PURE__*/
  // Use 1 Column Layout
  React.createElement(React.Fragment, null, peerTrackNodes.map(peerTrackNode => {
    return /*#__PURE__*/React.createElement(Tile, {
      key: peerTrackNode.id,
      setHmsViewRefs: setHmsViewRefs,
      onPeerTileMorePress: onPeerTileMorePress,
      peerTrackNode: peerTrackNode,
      height: stylesConfig.height,
      width: stylesConfig.width,
      aspectRatio: stylesConfig.aspectRatio
    });
  })) :
  /*#__PURE__*/
  // Use Grid Layout
  React.createElement(React.Fragment, null, groupIntoPairs(peerTrackNodes.length).map((pair, idx) => {
    const peerTrackNodesPair = pair.map(nodeIndex => peerTrackNodes[nodeIndex]);
    const isFirstPairGroup = idx === 0;
    return /*#__PURE__*/React.createElement(View, {
      key: peerTrackNodesPair.map(peerTrackNode => peerTrackNode.id).join(','),
      style: {
        justifyContent: peerTrackNodesPair.length === 1 ? 'center' : 'space-between',
        flexDirection: 'row',
        flex: growableTileLayout ? 1 : 0,
        marginTop: isFirstPairGroup ? 0 : 4
      }
    }, peerTrackNodesPair.map(peerTrackNode => {
      return /*#__PURE__*/React.createElement(Tile, {
        key: peerTrackNode.id,
        setHmsViewRefs: setHmsViewRefs,
        onPeerTileMorePress: onPeerTileMorePress,
        peerTrackNode: peerTrackNode,
        height: stylesConfig.height,
        width: stylesConfig.width,
        aspectRatio: stylesConfig.aspectRatio
      });
    }));
  })));
};
const TilesContainer = /*#__PURE__*/React.memo(_TilesContainer);
TilesContainer.displayName = 'TilesContainer';
export { TilesContainer };

// Utility Functions

const oneTileStyle = {
  width: '100%',
  height: '100%'
}; // 1 Column Layout
const twoTileStyle = {
  width: '100%',
  height: '49.7222%'
}; // 1 Column Layout
const threeTileStyle = {
  width: '100%',
  height: '33%'
}; // 1 Column Layout

const fourTileStyle = {
  width: '49.5%',
  height: '100%'
}; // Grid Layout when Width and Height has no-correlatiom
const fiveAndSixTileStyle = {
  width: '49.5%',
  aspectRatio: 1
}; // Grid Layout when width and Height as fixed aspectRatio

const oneTileStyleLandscape = {
  width: '100%',
  height: '100%'
};
const twoTileStyleLandscape = {
  width: '49.7222%',
  height: '100%'
};
const threeTileStyleLandscape = {
  width: '33%',
  height: '100%'
};
const fourTileStyleLandscape = {
  width: '50%',
  height: '50%'
};
function computeTileWidthAndHeight(totalTiles, config) {
  const {
    type,
    isLandscapeOrientation
  } = config || {
    type: 'default',
    isLandscapeOrientation: false
  };
  if (isLandscapeOrientation) {
    return [oneTileStyleLandscape, twoTileStyleLandscape, threeTileStyleLandscape, fourTileStyleLandscape][Math.min(totalTiles - 1, 3)] || {
      width: '100%',
      height: '100%'
    };
  }
  if (type === 'row') {
    return fiveAndSixTileStyle;
  }
  return [oneTileStyle, twoTileStyle, threeTileStyle, fourTileStyle, fiveAndSixTileStyle][Math.min(totalTiles - 1, 4)] || {
    width: '100%',
    height: '100%'
  };
}
//# sourceMappingURL=TilesContainer.js.map