Fix feed sizing issues

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

res/css/views/voip/_CallView.scss

@@ -69,6 +69,24 @@ limitations under the License.
     display: flex;
     justify-content: center;
     border-radius: 8px;
+
+    > .mx_VideoFeed {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        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;
+        }
+    }
 }
 
 .mx_CallView_voice {

res/css/views/voip/_CallViewSidebar.scss

@@ -19,13 +19,40 @@ limitations under the License.
     right: 16px;
     bottom: 16px;
     z-index: 100; // To be above the primary feed
-    max-width: 20%;
+    width: 20%;
-    min-width: 160px; // To match .mx_VideoFeed_voice
+    min-width: 160px;
     display: flex;
     flex-direction: column-reverse;
 
+    .mx_VideoFeed {
+        border-radius: 4px;
+        width: 100%;
+        margin-bottom: 12px;
+
+        &.mx_VideoFeed_voice {
+            background-color: $inverted-bg-color;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            min-width: 160px;
+            min-height: 90px;
+        }
+
+        &.mx_VideoFeed_video {
+            background-color: transparent;
+        }
+    }
+
     &.mx_CallViewSidebar_pipMode {
         top: 16px;
         bottom: unset;
+        min-width: unset;
+
+        .mx_VideoFeed_voice {
+            min-width: 64px;
+            min-height: 36px;
+        }
     }
 }

res/css/views/voip/_VideoFeed.scss

@@ -14,45 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_VideoFeed_primary {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    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;
-    }
-}
-
-.mx_VideoFeed_secondary {
-    border-radius: 4px;
-    width: 100%;
-    margin-bottom: 12px;
-
-    &.mx_VideoFeed_voice {
-        background-color: $inverted-bg-color;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        min-width: 160px;
-        min-height: 90px;
-    }
-
-    &.mx_VideoFeed_video {
-        background-color: transparent;
-    }
-}
-
 .mx_VideoFeed_mirror {
     transform: scale(-1, 1);
 }

src/components/views/voip/CallView.tsx

@@ -590,6 +590,9 @@ export default class CallView extends React.Component<IProps, IState> {
         const isOnHold = this.state.isLocalOnHold || this.state.isRemoteOnHold;
         const isScreensharing = this.props.call.isScreensharing();
         const sidebarShown = this.state.sidebarShown;
+        const someoneIsScreensharing = this.props.call.getFeeds().some((feed) => {
+            return feed.purpose === SDPStreamMetadataPurpose.Screenshare;
+        });
 
         let contentView: React.ReactNode;
         let holdTransferContent;
@@ -642,7 +645,7 @@ export default class CallView extends React.Component<IProps, IState> {
         let sidebar;
         if (
             (!isOnHold && !transfereeCall) &&
-            ((sidebarShown && this.props.call.type === CallType.Video) || isScreensharing)
+            ((sidebarShown && this.props.call.type === CallType.Video) || someoneIsScreensharing)
         ) {
             sidebar = (
                 <CallViewSidebar
@@ -745,7 +748,7 @@ export default class CallView extends React.Component<IProps, IState> {
             });
 
             let presenting;
-            if (this.props.call.getFeeds().some((feed) => feed.purpose === SDPStreamMetadataPurpose.Screenshare)) {
+            if (someoneIsScreensharing) {
                 const presentingClasses = classNames({
                     mx_CallView_presenting: true,
                     mx_CallView_presenting_hidden: !this.state.controlsVisible,

src/components/views/voip/VideoFeed.tsx

@@ -146,8 +146,6 @@ export default class VideoFeed extends React.Component<IProps, IState> {
     render() {
         const videoClasses = {
             mx_VideoFeed: true,
-            mx_VideoFeed_primary: this.props.primary,
-            mx_VideoFeed_secondary: !this.props.primary,
             mx_VideoFeed_voice: this.state.videoMuted,
             mx_VideoFeed_video: !this.state.videoMuted,
             mx_VideoFeed_mirror: (
@@ -160,7 +158,7 @@ export default class VideoFeed extends React.Component<IProps, IState> {
             const member = this.props.feed.getMember();
             let avatarSize;
             if (this.props.pipMode) avatarSize = 76;
-            else if (!this.props.primary) avatarSize = 34;
+            else if (!this.props.primary) avatarSize = 16;
             else avatarSize = 160;
 
             return (