diff --git a/src/components/WebexLocalMedia/WebexLocalMedia.js b/src/components/WebexLocalMedia/WebexLocalMedia.js index 4a194f77b..c0f2310a7 100644 --- a/src/components/WebexLocalMedia/WebexLocalMedia.js +++ b/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 ? : ; - return
{localVideo ?
; + return ( +
+ {localVideo ?
+ ); } WebexLocalMedia.propTypes = { diff --git a/src/components/WebexLocalMedia/WebexLocalMedia.scss b/src/components/WebexLocalMedia/WebexLocalMedia.scss index 4035c7117..43d56cafa 100644 --- a/src/components/WebexLocalMedia/WebexLocalMedia.scss +++ b/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; -} \ No newline at end of file +}