@100mslive/react-native-room-kit/lib/module/components/PIPView.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 { shallowEqual, useSelector } from 'react-redux';
import { View } from 'react-native';
import { PeerVideoTileView } from './PeerVideoTile/PeerVideoTileView';
import { COLORS } from '../utils/theme';
const PIPView = ({
  peerTrackNodes,
  customView
}) => {
  const firstSSNode = useSelector(state => state.app.screensharePeerTrackNodes[0]);
  if (customView) {
    return customView;
  }
  if (firstSSNode) {
    return /*#__PURE__*/React.createElement(PeerVideoTileView, {
      key: firstSSNode.id,
      peerTrackNode: firstSSNode
    });
  }
  return /*#__PURE__*/React.createElement(PIPPeerTiles, {
    peerTrackNodes: peerTrackNodes
  });
};
export default PIPView;
const PIPPeerTiles = ({
  peerTrackNodes
}) => {
  const memoDominantSpeakerIdsRef = React.useRef([]);
  const dominantSpeakerIds = useSelector(state => {
    return state.hmsStates.activeSpeakers.slice(0, 3).map(speaker => speaker.peer.peerID);
  }, shallowEqual);
  if (dominantSpeakerIds.length > 0 && anyNewDominantSpeaker(memoDominantSpeakerIdsRef.current, dominantSpeakerIds)) {
    memoDominantSpeakerIdsRef.current = dominantSpeakerIds;
  }
  const preferredPeerTrackNodes = React.useMemo(() => {
    return getDominantSpeakers(memoDominantSpeakerIdsRef.current, peerTrackNodes);
  }, [memoDominantSpeakerIdsRef.current, peerTrackNodes]);
  if (preferredPeerTrackNodes.length === 0) {
    return null;
  }
  return /*#__PURE__*/React.createElement(View, {
    style: {
      flex: 1,
      flexDirection: 'row',
      backgroundColor: COLORS.BLACK
    }
  }, preferredPeerTrackNodes.map((node, index, arr) => {
    const isFirst = index === 0;
    const dividerWidth = arr.length > 2 ? 4 : 5;
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: node.id
    }, isFirst ? null : /*#__PURE__*/React.createElement(View, {
      style: {
        height: '100%',
        width: dividerWidth
      }
    }), /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 1
      }
    }, /*#__PURE__*/React.createElement(PeerVideoTileView, {
      peerTrackNode: node
    })));
  }));
};
function anyNewDominantSpeaker(oldSpeakers, newSpeakers) {
  if (newSpeakers.length !== oldSpeakers.length) {
    return true;
  }
  const uniques = new Set([...oldSpeakers, ...newSpeakers]);
  return uniques.size > oldSpeakers.length;
}
function getDominantSpeakers(dominantSpeakerIds, peerTrackNodes) {
  if (peerTrackNodes.length <= 3) {
    return peerTrackNodes;
  }
  const list = peerTrackNodes.slice(0, 3);
  let dominantSpeakerIdsCopy = dominantSpeakerIds.slice();
  for (let i = 3; i < peerTrackNodes.length; i++) {
    const peerTrackNode = peerTrackNodes[i];
    if (dominantSpeakerIdsCopy.length <= 0 || !peerTrackNode) {
      break;
    }
    if (dominantSpeakerIdsCopy.includes(peerTrackNode.peer.peerID)) {
      dominantSpeakerIdsCopy = dominantSpeakerIdsCopy.filter(speakerId => speakerId !== peerTrackNode.peer.peerID);
      list.unshift(peerTrackNode);
    }
  }
  if (list.length > 3) {
    list.length = 3;
  }
  return list;
}
//# sourceMappingURL=PIPView.js.map