feat(WebexLocalMedia): add className prop

webex · Mar 20, 2020 · 08ca8ec · 08ca8ec
1 parent a26c7ea
commit 08ca8ec
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 15 deletions.
diff --git a/src/components/WebexLocalMedia/WebexLocalMedia.js b/src/components/WebexLocalMedia/WebexLocalMedia.js
@@ -16,30 +16,33 @@ import './WebexLocalMedia.scss';
  * @param {string} props.meetingID  ID of the meeting from which to obtain local media
  * @returns {Object} JSX of the component
  */
-export default function WebexLocalMedia({meetingID}) {
+export default function WebexLocalMedia({className, meetingID}) {
   const [mediaRef, {width}] = useElementDimensions();
   const {localVideo} = useMeeting(meetingID);
   const {ID} = useMe();
   const videoRef = useStream(localVideo);
 
-  const classBaseName = 'local-media';
-  const classObjects = {};
-
-  classObjects[`${WEBEX_COMPONENTS_CLASS_PREFIX}-${classBaseName}`] = true;
-  classObjects[`${WEBEX_COMPONENTS_CLASS_PREFIX}-${classBaseName}-desktop`] = width >= PHONE_LARGE;
-  classObjects[`${WEBEX_COMPONENTS_CLASS_PREFIX}-no-media`] = localVideo === null;
-
-  const cssClasses = classNames(classObjects);
-
+  const classBaseName = `${WEBEX_COMPONENTS_CLASS_PREFIX}-local-media`;
+  const mainClasses = {
+    [classBaseName]: true,
+    [`${classBaseName}-desktop`]: width >= PHONE_LARGE,
+    [`${classBaseName}-no-media`]: localVideo === null,
+    [className]: !!className,
+  };
   const disabledVideo = ID ? <WebexAvatar personID={ID} displayStatus={false} /> : <Spinner />;
 
   return (
-    <div ref={mediaRef} className={cssClasses}>
+    <div ref={mediaRef} className={classNames(mainClasses)}>
       {localVideo ? <video ref={videoRef} playsInline autoPlay /> : disabledVideo}
     </div>
   );
 }
 
 WebexLocalMedia.propTypes = {
+  className: PropTypes.string,
   meetingID: PropTypes.string.isRequired,
 };
+
+WebexLocalMedia.defaultProps = {
+  className: '',
+};
diff --git a/src/components/WebexLocalMedia/WebexLocalMedia.scss b/src/components/WebexLocalMedia/WebexLocalMedia.scss
@@ -27,8 +27,8 @@
       transform: scale(3); // Avatar is 40x40px, this makes it 120x120px
     }
   }
-}
 
-.#{$WEBEX_COMPONENTS_CLASS_PREFIX}-no-media {
-  background: white;
+  &-no-media {
+    background: white;
+  }
 }
diff --git a/src/components/WebexLocalMedia/WebexLocalMedia.test.js b/src/components/WebexLocalMedia/WebexLocalMedia.test.js
@@ -15,5 +15,9 @@ describe('Webex Local Media component', () => {
     test('matches snapshot of disabled local video', () => {
       expect(shallow(<WebexLocalMedia meetingID="noMedia" />)).toMatchSnapshot();
     });
+
+    test('matches snapshot of local video with custom CSS class', () => {
+      expect(shallow(<WebexLocalMedia className="my-custom-class" meetingID="noMedia" />)).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/WebexLocalMedia/__snapshots__/WebexLocalMedia.test.js.snap b/src/components/WebexLocalMedia/__snapshots__/WebexLocalMedia.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Webex Local Media component snapshot matches snapshot of disabled local video 1`] = `
 <div
-  className="wxc-local-media wxc-no-media"
+  className="wxc-local-media wxc-local-media-no-media"
 >
   <WebexAvatar
     displayStatus={false}
@@ -21,3 +21,14 @@ exports[`Webex Local Media component snapshot matches snapshot of local video 1`
   />
 </div>
 `;
+
+exports[`Webex Local Media component snapshot matches snapshot of local video with custom CSS class 1`] = `
+<div
+  className="wxc-local-media wxc-local-media-no-media my-custom-class"
+>
+  <WebexAvatar
+    displayStatus={false}
+    personID="default"
+  />
+</div>
+`;