feat(RemoteMedia): add loading media state

webex · Mar 16, 2020 · a907915 · a907915
1 parent 1abeaf4
commit a907915
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 4 deletions.
diff --git 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 (
     <div className="remote-media">
+      {!hasMedia ? (
+        <Badge rounded>
+          <Spinner size={16} />
+          <div>Connecting</div>
+        </Badge>
+      ) : null}
       {remoteVideo ? <video ref={videoRef} playsInline autoPlay /> : null}
       {remoteAudio ? <audio ref={audioRef} autoPlay /> : null}
     </div>

diff --git 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
@@ -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', () => (
+  <div style={wrapperStyle}>
+    <WebexDataProvider adapter={webexAdapter}>
+      <WebexRemoteMedia meetingID="noMedia" />
+    </WebexDataProvider>
+  </div>
+));
+
 stories.add('video only', () => (
   <div style={wrapperStyle}>
     <WebexDataProvider adapter={webexAdapter}>

diff --git 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(<WebexRemoteMedia meetingID="noMedia" />)).toMatchSnapshot();
+    });
     test('matches snapshot of disabled remote audio', () => {
       expect(shallow(<WebexRemoteMedia meetingID="remoteVideo" />)).toMatchSnapshot();
     });

diff --git 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
   />
 </div>
 `;
+
+exports[`Webex Remote Media component snapshot matches snapshot while loading 1`] = `
+<div
+  className="remote-media"
+>
+  <Badge
+    className=""
+    rounded={true}
+  >
+    <Spinner
+      className=""
+      color="black"
+      percentage={null}
+      showCheck={false}
+      showPercentage={false}
+      size={16}
+    />
+    <div>
+      Connecting
+    </div>
+  </Badge>
+</div>
+`;