feat(WebexRemoteMedia): add className prop

webex · Mar 20, 2020 · e7e8081 · e7e8081
1 parent 26bf668
commit e7e8081
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 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 classNames from 'classnames';
 import {Badge, Spinner, AlertBanner} from '@momentum-ui/react';
 
 import {WEBEX_COMPONENTS_CLASS_PREFIX} from '../../constants';
@@ -15,14 +16,18 @@ import './WebexRemoteMedia.scss';
  *
  * NOTE: waiting for the UX for a design on what to display if there is no remote video
  */
-export default function WebexRemoteMedia({meetingID}) {
+export default function WebexRemoteMedia({className, meetingID}) {
   const {remoteAudio, remoteVideo, error} = useMeeting(meetingID);
   const audioRef = useStream(remoteAudio);
   const videoRef = useStream(remoteVideo);
   const hasMedia = !!(remoteAudio || remoteVideo);
+  const mainClasses = {
+    [`${WEBEX_COMPONENTS_CLASS_PREFIX}-remote-media`]: true,
+    [className]: !!className,
+  };
 
   return (
-    <div className={`${WEBEX_COMPONENTS_CLASS_PREFIX}-remote-media`}>
+    <div className={classNames(mainClasses)}>
       {error ? (
         <AlertBanner show type="warning">
           Having trouble joining the meeting? Please check your connection.
@@ -44,5 +49,10 @@ export default function WebexRemoteMedia({meetingID}) {
 }
 
 WebexRemoteMedia.propTypes = {
+  className: PropTypes.string,
   meetingID: PropTypes.string.isRequired,
 };
+
+WebexRemoteMedia.defaultProps = {
+  className: '',
+};
diff --git a/src/components/WebexRemoteMedia/WebexRemoteMedia.test.js b/src/components/WebexRemoteMedia/WebexRemoteMedia.test.js
@@ -10,6 +10,7 @@ describe('Webex Remote Media component', () => {
     test('matches snapshot while loading', () => {
       expect(shallow(<WebexRemoteMedia meetingID="noMedia" />)).toMatchSnapshot();
     });
+
     test('matches snapshot of disabled remote audio', () => {
       expect(shallow(<WebexRemoteMedia meetingID="remoteVideo" />)).toMatchSnapshot();
     });
@@ -25,5 +26,9 @@ describe('Webex Remote Media component', () => {
     test('matches snapshot on error', () => {
       expect(shallow(<WebexRemoteMedia meetingID="failMeetingID" />)).toMatchSnapshot();
     });
+
+    test('matches snapshot of enabled remote audio & video with custom CSS class', () => {
+      expect(shallow(<WebexRemoteMedia className="my-custom-class" meetingID="remoteAudio&Video" />)).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/WebexRemoteMedia/__snapshots__/WebexRemoteMedia.test.js.snap b/src/components/WebexRemoteMedia/__snapshots__/WebexRemoteMedia.test.js.snap
@@ -35,6 +35,20 @@ exports[`Webex Remote Media component snapshot matches snapshot of enabled remot
 </div>
 `;
 
+exports[`Webex Remote Media component snapshot matches snapshot of enabled remote audio & video with custom CSS class 1`] = `
+<div
+  className="wxc-remote-media my-custom-class"
+>
+  <video
+    autoPlay={true}
+    playsInline={true}
+  />
+  <audio
+    autoPlay={true}
+  />
+</div>
+`;
+
 exports[`Webex Remote Media component snapshot matches snapshot on error 1`] = `
 <div
   className="wxc-remote-media"