Merge pull request #5833 from SimonBrandner/feed

Support for multiple streams (not MSC3077)

res/css/views/voip/_CallView.scss

@@ -65,14 +65,17 @@ limitations under the License.
     }
 }
 
-.mx_CallView_voice {
+.mx_CallView_content {
     position: relative;
     display: flex;
-    flex-direction: column;
+    border-radius: 8px;
+}
+
+.mx_CallView_voice {
     align-items: center;
     justify-content: center;
+    flex-direction: column;
     background-color: $inverted-bg-color;
-    border-radius: 8px;
 }
 
 .mx_CallView_voice_avatarsContainer {
@@ -109,9 +112,7 @@ limitations under the License.
 .mx_CallView_video {
     width: 100%;
     height: 100%;
-    position: relative;
     z-index: 30;
-    border-radius: 8px;
     overflow: hidden;
 }
 

res/css/views/voip/_VideoFeed.scss

@@ -14,21 +14,37 @@ 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_remote {
     width: 100%;
     height: 100%;
-    background-color: #000;
-    z-index: 50;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.mx_VideoFeed_video {
+        background-color: #000;
+    }
 }
 
 .mx_VideoFeed_local {
-    width: 25%;
-    height: 25%;
+    max-width: 25%;
+    max-height: 25%;
     position: absolute;
     right: 10px;
     top: 10px;
     z-index: 100;
     border-radius: 4px;
+
+    &.mx_VideoFeed_video {
+        background-color: transparent;
+    }
 }
 
 .mx_VideoFeed_mirror {