diff --git a/src/components/WebexRemoteMedia/WebexRemoteMedia.js b/src/components/WebexRemoteMedia/WebexRemoteMedia.js index 877689b33..5ba4f3534 100644 --- a/src/components/WebexRemoteMedia/WebexRemoteMedia.js +++ b/src/components/WebexRemoteMedia/WebexRemoteMedia.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import {Badge, Spinner} from '@momentum-ui/react'; import {useMeeting, useStream} from '../hooks'; @@ -17,9 +18,16 @@ export default function WebexRemoteMedia({meetingID}) { const {remoteAudio, remoteVideo} = useMeeting(meetingID); const audioRef = useStream(remoteAudio); const videoRef = useStream(remoteVideo); + const hasMedia = !!(remoteAudio || remoteVideo); return (
+ {!hasMedia ? ( + + +
Connecting
+
+ ) : null} {remoteVideo ?
diff --git a/src/components/WebexRemoteMedia/WebexRemoteMedia.scss b/src/components/WebexRemoteMedia/WebexRemoteMedia.scss index 0367a5b70..ed6df60db 100644 --- a/src/components/WebexRemoteMedia/WebexRemoteMedia.scss +++ b/src/components/WebexRemoteMedia/WebexRemoteMedia.scss @@ -4,9 +4,18 @@ align-items: center; height: 100%; width: 100%; -} -.remote-media video { - width: 100%; - height: 100%; + .md-badge { + margin: auto; + padding: 0.4rem; + + div { + margin-left: 0.4rem; + } + } + + video { + height: 100%; + width: 100%; + } } diff --git a/src/components/WebexRemoteMedia/WebexRemoteMedia.stories.js b/src/components/WebexRemoteMedia/WebexRemoteMedia.stories.js index 8cd296b5d..377f861b9 100644 --- a/src/components/WebexRemoteMedia/WebexRemoteMedia.stories.js +++ b/src/components/WebexRemoteMedia/WebexRemoteMedia.stories.js @@ -10,6 +10,14 @@ const stories = storiesOf('Webex Remote Media', module); const webexAdapter = new WebexJSONAdapter(jsonData); const wrapperStyle = {height: '500px', width: '800px', border: '1px solid black'}; +stories.add('loading', () => ( +
+ + + +
+)); + stories.add('video only', () => (
diff --git a/src/components/WebexRemoteMedia/WebexRemoteMedia.test.js b/src/components/WebexRemoteMedia/WebexRemoteMedia.test.js index 7677da468..6471c0b25 100644 --- a/src/components/WebexRemoteMedia/WebexRemoteMedia.test.js +++ b/src/components/WebexRemoteMedia/WebexRemoteMedia.test.js @@ -7,6 +7,9 @@ jest.mock('../hooks/useStream'); describe('Webex Remote Media component', () => { describe('snapshot', () => { + test('matches snapshot while loading', () => { + expect(shallow()).toMatchSnapshot(); + }); test('matches snapshot of disabled remote audio', () => { expect(shallow()).toMatchSnapshot(); }); diff --git a/src/components/WebexRemoteMedia/__snapshots__/WebexRemoteMedia.test.js.snap b/src/components/WebexRemoteMedia/__snapshots__/WebexRemoteMedia.test.js.snap index 5ecf934bd..5a414aa27 100644 --- a/src/components/WebexRemoteMedia/__snapshots__/WebexRemoteMedia.test.js.snap +++ b/src/components/WebexRemoteMedia/__snapshots__/WebexRemoteMedia.test.js.snap @@ -34,3 +34,26 @@ exports[`Webex Remote Media component snapshot matches snapshot of enabled remot />
`; + +exports[`Webex Remote Media component snapshot matches snapshot while loading 1`] = ` +
+ + +
+ Connecting +
+
+
+`;