import PeerView from '../../components/video/PeerView';
import { RequestToJoinType } from '../../store/participantSlice';
import { PeersServiceContext } from '../../services/PeersService';
import React, { useContext } from 'react';
import { Box, Flex } from '../../themes/components';
import { useSelector } from 'react-redux';
const PIPModeContainer = (props) => {
    const { isMobile } = props;
    const { joinedProcessedPeers, selfPeer } = useContext(PeersServiceContext);
    const gridView = useSelector((state) => state.room.gridView);
    const pipPeers = joinedProcessedPeers.concat([selfPeer]).filter((el) => !el?.webinarHiddenParticipant && el?.requestToJoinType === RequestToJoinType.ask);
    return (<Flex direction="row" width="100%" position="absolute" zIndex="1" alignItems="flex-end" justifyContent="flex-end" bottom="70" right="20">
			{pipPeers.map((peer) => (<Box key={peer.id}>
					<PeerView peer={peer} height={80} width={130} hideBadge zIndex={1}/>
				</Box>))}
			{pipPeers.length === 0 && gridView === 'multi_alternate'
        && joinedProcessedPeers.length !== 0
        && (<Box key={selfPeer.id}>
						<PeerView peer={selfPeer} height={156} width={96} hideBadge/>
					</Box>)}
		</Flex>);
};
PIPModeContainer.defaultProps = {
    isMobile: false,
};
export default PIPModeContainer;
//# sourceMappingURL=PIPModeContainer.js.map