Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Participant list is now animated on events, fixes #302

auto_join_3.3
Håvar Aambø Fosstveit 2020-05-06 13:30:05 +02:00
parent 136037d83f
commit feac3f069d
2 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/package.json
View File

@ -27,6 +27,7 @@
"react": "^16.10.2", "react": "^16.10.2",
"react-cookie-consent": "^2.5.0", "react-cookie-consent": "^2.5.0",
"react-dom": "^16.10.2", "react-dom": "^16.10.2",
"react-flip-toolkit": "^7.0.9",
"react-intl": "^3.4.0", "react-intl": "^3.4.0",
"react-redux": "^7.1.1", "react-redux": "^7.1.1",
"react-router-dom": "^5.1.2", "react-router-dom": "^5.1.2",

57
app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js
View File

@ -7,6 +7,7 @@ import classnames from 'classnames';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import { withRoomContext } from '../../../RoomContext'; import { withRoomContext } from '../../../RoomContext';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Flipper, Flipped } from 'react-flip-toolkit';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import ListPeer from './ListPeer'; import ListPeer from './ListPeer';
import ListMe from './ListMe'; import ListMe from './ListMe';
@ -110,32 +111,38 @@ class ParticipantList extends React.PureComponent
defaultMessage='Participants' defaultMessage='Participants'
/> />
</li> </li>
{ participants.map((peer) => ( <Flipper
<li flipKey={participants}
key={peer.id} >
className={classnames(classes.listItem, { { participants.map((peer) => (
selected : peer.id === selectedPeerId <Flipped key={peer.id} flipId={peer.id}>
})} <li
onClick={() => roomClient.setSelectedPeer(peer.id)} key={peer.id}
> className={classnames(classes.listItem, {
{ spotlights.includes(peer.id) ? selected : peer.id === selectedPeerId
<ListPeer })}
id={peer.id} onClick={() => roomClient.setSelectedPeer(peer.id)}
advancedMode={advancedMode}
isModerator={isModerator}
spotlight
> >
<Volume small id={peer.id} /> { spotlights.includes(peer.id) ?
</ListPeer> <ListPeer
: id={peer.id}
<ListPeer advancedMode={advancedMode}
id={peer.id} isModerator={isModerator}
advancedMode={advancedMode} spotlight
isModerator={isModerator} >
/> <Volume small id={peer.id} />
} </ListPeer>
</li> :
))} <ListPeer
id={peer.id}
advancedMode={advancedMode}
isModerator={isModerator}
/>
}
</li>
</Flipped>
))}
</Flipper>
</ul> </ul>
</div> </div>
); );