123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- import {
- GridLayout,
- Peer,
- PeerList,
- RemoteMediaList
- } from '@andyet/simplewebrtc';
- import React from 'react';
- import styled from 'styled-components';
- import mq from '../styles/media-queries';
- import isMobile from '../utils/isMobile';
- import PeerGridItem from './PeerGridItem';
- const StyledGridLayout = styled(GridLayout)({
- flex: 1,
- [mq.SMALL_DESKTOP]: {
- height: '100vh'
- },
- backgroundColor: '#eaecec',
- '& video': {
- width: '100%'
- },
- '& > div': {
- position: 'relative'
- }
- }) as any; // TODO: Fix this!
- interface Props {
- roomAddress: string;
- activeSpeakerView: boolean;
- }
- // const speakingPeers = peers.filter(p => p.speaking);
- // let peersToRender = [];
- // if (speakingPeers) {
- // peersToRender = [...speakingPeers, peers.filter(p => p.hasSpokenInLast(5))];
- // } else {
- // peersToRender = peers.filter(p => p.hasSpokenInLast(15));
- // }
- // if (peersToRender.length === 0) {
- // peersToRender = peers;
- // }
- // PeerGrid is the main video display for Talky. It matches remoteMedia to
- // peers and then renders a PeerGridItem for each peer in the room.
- const PeerGrid: React.SFC<Props> = ({ roomAddress, activeSpeakerView }) => (
- <PeerList
- speaking={activeSpeakerView ? activeSpeakerView : undefined}
- room={roomAddress}
- render={({ peers }) => {
- return peers.length > 0 || activeSpeakerView ? (
- <StyledGridLayout
- items={peers}
- renderCell={(peer: Peer) => (
- <RemoteMediaList
- peer={peer.address}
- render={({ media }) => <PeerGridItem media={media} peer={peer} />}
- />
- )}
- />
- ) : (
- <div style={{ flex: 1 }}>Waiting for peers to join.</div>
- );
- }}
- />
- );
- export default PeerGrid;
|