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 ?
: null}
{remoteAudio ?
: null}
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`] = `
+
+`;