123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- import { Peer, PeerControls, PeerList } from '@andyet/simplewebrtc';
- import VolumeOffIcon from 'material-icons-svg/components/baseline/VolumeOff';
- import VolumeUpIcon from 'material-icons-svg/components/baseline/VolumeUp';
- import React from 'react';
- import styled from 'styled-components';
- import { TalkyButton } from '../styles/button';
- const Button = styled(TalkyButton)({
- marginRight: '5px'
- });
- const Container = styled.ul({
- listStyle: 'none',
- '& li': {
- marginBottom: '10px'
- }
- });
- interface PeerListItemProps {
- peer: Peer;
- }
- // PeerListItem renders the displayName and mute controls for a peer.
- const PeerListItem: React.SFC<PeerListItemProps> = ({ peer }) => (
- <li>
- <PeerControls
- peer={peer}
- render={({ isMuted, mute, unmute }) => (
- <Button onClick={() => (isMuted ? unmute() : mute())}>
- {isMuted ? (
- <VolumeOffIcon fill="#505658" />
- ) : (
- <VolumeUpIcon fill="#505658" />
- )}
- </Button>
- )}
- />
- {peer.displayName || 'Anonymous'}
- </li>
- );
- interface Props {
- roomAddress: string;
- }
- const Roster: React.SFC<Props> = ({ roomAddress }) => (
- <PeerList
- room={roomAddress}
- render={({ peers }) => {
- return peers.length > 0 ? (
- <Container>
- {peers.map(peer => (
- <PeerListItem key={peer.id} peer={peer} />
- ))}
- </Container>
- ) : <span />;
- }}
- />
- );
- export default Roster;
|