From 430808ae2efa6248e49301a8ed7dfe8454073a41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 8 May 2021 16:49:47 +0200
Subject: [PATCH] Simplifie CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/voip/_VideoFeed.scss      | 28 ++++++-------------------
 src/components/views/voip/VideoFeed.tsx |  1 +
 2 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss
index 170bd89652..3d39735519 100644
--- a/res/css/views/voip/_VideoFeed.scss
+++ b/res/css/views/voip/_VideoFeed.scss
@@ -20,7 +20,6 @@ limitations under the License.
     background-color: $inverted-bg-color;
 }
 
-
 .mx_VideoFeed_primary {
     width: 100%;
     height: 100%;
@@ -33,12 +32,10 @@ limitations under the License.
     }
 }
 
-.mx_VideoFeed_secondary {
+.mx_VideoFeed_nonPrimary {
     max-width: 25%;
     max-height: 25%;
     position: absolute;
-    right: 10px;
-    top: 10px;
     z-index: 100;
     border-radius: 4px;
 
@@ -47,32 +44,19 @@ limitations under the License.
     }
 }
 
+.mx_VideoFeed_secondary {
+    right: 10px;
+    top: 10px;
+}
+
 .mx_VideoFeed_tertiary {
-    max-width: 25%;
-    max-height: 25%;
-    position: absolute;
     right: 10px;
     bottom: 10px;
-    z-index: 100;
-    border-radius: 4px;
-
-    &.mx_VideoFeed_video {
-        background-color: transparent;
-    }
 }
 
 .mx_VideoFeed_quaternary {
-    max-width: 25%;
-    max-height: 25%;
-    position: absolute;
     left: 10px;
     top: 10px;
-    z-index: 100;
-    border-radius: 4px;
-
-    &.mx_VideoFeed_video {
-        background-color: transparent;
-    }
 }
 
 .mx_VideoFeed_mirror {
diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx
index 3a7d49cfd4..a545f100c8 100644
--- a/src/components/views/voip/VideoFeed.tsx
+++ b/src/components/views/voip/VideoFeed.tsx
@@ -123,6 +123,7 @@ export default class VideoFeed extends React.Component<IProps, IState> {
     render() {
         const videoClasses = {
             mx_VideoFeed: true,
+            mx_VideoFeed_nonPrimary: this.props.className !== "mx_VideoFeed_primary",
             [this.props.className]: true,
             mx_VideoFeed_voice: this.state.videoMuted,
             mx_VideoFeed_video: !this.state.videoMuted,