feat(LocalMedia): add ability to size avatar based on container width

src/components/WebexLocalMedia/WebexLocalMedia.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import {Spinner} from '@momentum-ui/react';
 
 import {WebexAvatar} from '../';
-import {useMe, useMeeting, useStream} from '../hooks';
+import {useElementDimensions, useMe, useMeeting, useStream} from '../hooks';
 
 import './WebexLocalMedia.scss';
 
@@ -15,18 +15,24 @@ import './WebexLocalMedia.scss';
  * @returns {Object} JSX of the component
  */
 export default function WebexLocalMedia({meetingID}) {
+  const [mediaRef, {width}] = useElementDimensions();
   const {localVideo} = useMeeting(meetingID);
   const {ID} = useMe();
   const videoRef = useStream(localVideo);
 
   const cssClasses = classNames({
     'local-media': true,
+    'local-media-desktop': width >= 425, // Standard large phone width
     'no-media': localVideo === null,
   });
 
   const disabledVideo = ID ? <WebexAvatar personID={ID} displayStatus={false} /> : <Spinner />;
 
-  return <div className={cssClasses}>{localVideo ? <video ref={videoRef} playsInline autoPlay /> : disabledVideo}</div>;
+  return (
+    <div ref={mediaRef} className={cssClasses}>
+      {localVideo ? <video ref={videoRef} playsInline autoPlay /> : disabledVideo}
+    </div>
+  );
 }
 
 WebexLocalMedia.propTypes = {

src/components/WebexLocalMedia/WebexLocalMedia.scss

@@ -5,6 +5,8 @@
 
   height: 100%;
   width: 100%;
+  min-height: 7.5rem; // Smallest height for local media is the tallest an avatar can get through transforms
+  min-width: 7.5rem; // Smallest width for local media is the widest an avatar can get through transforms
 
   background: black;
 
@@ -14,11 +16,17 @@
   }
 
   .md-avatar {
-    width: 6.25rem !important;
-    height: 6.25rem !important;
+    transform: scale(2); // Avatar is 40x40px, this makes it 80x80px
+    transform-origin: center center;
+  }
+
+  &-desktop {
+    .md-avatar {
+      transform: scale(3); // Avatar is 40x40px, this makes it 120x120px
+    }
   }
 }
 
 .no-media {
   background: white;
-}
+}