diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss index fdc0ca2e7d..dd939d8ea1 100644 --- a/res/css/views/voip/_VideoFeed.scss +++ b/res/css/views/voip/_VideoFeed.scss @@ -14,12 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_VideoFeed_voice { - // We don't want to collide with the call controls that have 52px of height - padding-bottom: 52px; - background-color: $inverted-bg-color; -} - .mx_VideoFeed_primary { width: 100%; height: 100%; @@ -27,6 +21,12 @@ limitations under the License. justify-content: center; align-items: center; + &.mx_VideoFeed_voice { + // We don't want to collide with the call controls that have 52px of height + padding-bottom: 52px; + background-color: $inverted-bg-color; + } + &.mx_VideoFeed_video { background-color: #000; } @@ -37,6 +37,17 @@ limitations under the License. width: 100%; margin-bottom: 12px; + &.mx_VideoFeed_voice { + background-color: #17191c; // Same on both themes + + display: flex; + align-items: center; + justify-content: center; + + min-width: 160px; + min-height: 90px; + } + &.mx_VideoFeed_video { background-color: transparent; } diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx index effefa1681..8ed4a4a44c 100644 --- a/src/components/views/voip/VideoFeed.tsx +++ b/src/components/views/voip/VideoFeed.tsx @@ -151,7 +151,10 @@ export default class VideoFeed extends React.Component { if (this.state.videoMuted) { const member = this.props.feed.getMember(); - const avatarSize = this.props.pipMode ? 76 : 160; + let avatarSize; + if (this.props.pipMode) avatarSize = 76; + else if (!this.props.primary) avatarSize = 34; + else avatarSize = 160; return (