Participant list is now animated on events, fixes #302

app/package.json

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

app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js

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