feat(WebexMeeting): add roster component in meeting widget

src/widgets/WebexMeeting/WebexMeeting.css

@@ -1,7 +1,23 @@
-.meeting-widget {
+.webex-meeting-widget {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
 }
+
+.webex-meeting-widget__body {
+  display: flex;
+  flex: 1;
+}
+
+.webex-meeting-widget__meeting {
+  flex: 1;
+  min-width: 0;
+}
+
+.webex-meeting-widget__roster {
+  width: 20rem;
+  padding: 0.625rem;
+}
+

src/widgets/WebexMeeting/WebexMeeting.jsx

@@ -2,9 +2,13 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Spinner} from '@momentum-ui/react';
 import Webex from 'webex';
-import {WebexMeeting, WebexDataProvider, withMeeting} from '@webex/components';
+import {WebexMeeting, WebexMemberRoster, WebexDataProvider, withMeeting} from '@webex/components';
 import WebexSDKAdapter from '@webex/sdk-component-adapter';
 
+// Dependency from here is not explicity declared in package.json
+import {DestinationType, MeetingState} from '@webex/component-adapter-interfaces';
+
+
 import '@momentum-ui/core/css/momentum-ui.min.css';
 import '@webex/components/dist/css/webex-components.css';
 import './WebexMeeting.css';
@@ -15,9 +19,21 @@ const controls = (isActive) => isActive
   : ['mute-audio', 'mute-video', 'join-meeting'];
 
   const Content = withMeeting(function(props) {
-    return props.meeting.ID ?
-      <WebexMeeting meetingID={props.meeting.ID} controls={controls} />
-      : <Spinner />
+    return props.meeting.ID ? (
+      <div className="webex-meeting-widget__body">
+        <div className="webex-meeting-widget__meeting">
+          <WebexMeeting meetingID={props.meeting.ID} controls={controls} />
+        </div>
+        {props.meeting.showRoster && props.meeting.state === MeetingState.JOINED && ( 
+          <div className="webex-meeting-widget__roster">
+            <WebexMemberRoster 
+              destinationID={props.meeting.ID} 
+              destinationType={DestinationType.MEETING}
+            />
+          </div>
+        )}
+      </div>
+      ) : <Spinner />
   });
 
 
@@ -53,7 +69,7 @@ class WebexMeetingWidget extends Component {
 
   render() {
     return (
-      <div className="meeting-widget">
+      <div className="webex-meeting-widget">
         {this.state.adapterConnected ? (
           <WebexDataProvider adapter={this.adapter}>
             <Content {...this.props} />