Fix feeds misbehaving

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

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;
     }

src/components/views/voip/VideoFeed.tsx

@@ -151,7 +151,10 @@ export default class VideoFeed extends React.Component<IProps, IState> {
 
         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 (
                 <div className={classnames(videoClasses)} >