diff --git a/src/widgets/WebexMeeting/WebexMeeting.css b/src/widgets/WebexMeeting/WebexMeeting.css index dbd32cdf..1c75cd12 100644 --- a/src/widgets/WebexMeeting/WebexMeeting.css +++ b/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; +} + diff --git a/src/widgets/WebexMeeting/WebexMeeting.jsx b/src/widgets/WebexMeeting/WebexMeeting.jsx index 27aee997..4cbb8fb1 100644 --- a/src/widgets/WebexMeeting/WebexMeeting.jsx +++ b/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 ? - - : + return props.meeting.ID ? ( +
+
+ +
+ {props.meeting.showRoster && props.meeting.state === MeetingState.JOINED && ( +
+ +
+ )} +
+ ) : }); @@ -53,7 +69,7 @@ class WebexMeetingWidget extends Component { render() { return ( -
+
{this.state.adapterConnected ? (