Merge pull request #658 from nextcloud/stable13-618-fix-video-heights

[stable13] Set maximum video height when more than 2 people in call. 

1 files changed, 39 insertions, 38 deletions

diff --git a/css/style.scss b/css/style.scss
index 4a899c82b..91b116328 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -4,7 +4,7 @@
 
 .app-spreed #app-content,
 #body-public #app-content {
-    overflow: hidden;
+	overflow: hidden;
 }
 
 .app-spreed #app-navigation {
@@ -40,7 +40,7 @@
 }
 #oca-spreedme-add-room .select2-container .select2-choice,
 .oca-spreedme-add-person .select2-container .select2-choice {
-    border: none;
+	border: none;
 }
 #oca-spreedme-add-room .select2-arrow,
 .oca-spreedme-add-person .select2-arrow {
@@ -98,19 +98,19 @@
 }
 
 .icon-clippy.public-room {
-    background-size: 16px;
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    padding: 16px;
+	background-size: 16px;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	padding: 16px;
 }
 
 .icon-delete.public-room {
-    background-size: 16px;
-    position: absolute;
-    right: 0;
-    top: 4px;
-    padding: 16px;
+	background-size: 16px;
+	position: absolute;
+	right: 0;
+	top: 4px;
+	padding: 16px;
 	opacity: .5;
 }
 
@@ -137,7 +137,7 @@
 }
 
 .icon-clippy.public-room {
-    background-position-y: 8px !important;
+	background-position-y: 8px !important;
 }
 
 /**
@@ -210,13 +210,16 @@
 #app-content.screensharing .videoContainer {
 	position: relative;
 	width: 100%;
-    padding: 0 2%;
+	padding: 0 2%;
 	-webkit-box-flex: auto;
 	-moz-box-flex: auto;
 	-webkit-flex: auto;
 	-ms-flex: auto;
 	flex: auto;
 	z-index: 2;
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
 }
 
 #app-content.screensharing .videoContainer {
@@ -224,7 +227,6 @@
 }
 
 video {
-	width: 100%;
 	z-index: 0;
 	max-height: 100%;
 	/* default filter for slightly better look */
@@ -244,18 +246,16 @@ video {
 	filter: none;
 }
 
-#videos .videoContainer video {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-	background-color: #000;
-}
-#videos .videoContainer.promoted video {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+#videos .videoContainer:not(.promoted) video {
+	max-height: 200px;
+	max-width: 100%;
+	background-color: transparent;
+	border-radius: $border-radius $border-radius 0 0;
+	box-shadow: 0 0 15px $color-box-shadow;
 }
-#videos .videoContainer video,
+
 #videos .videoContainer .avatar {
-	box-shadow: 0 0 15px rgba(0, 0, 0, .5);
+	box-shadow: 0 0 15px $color-box-shadow;
 }
 
 .participants-1 #videos .videoContainer video,
@@ -328,19 +328,19 @@ video {
 }
 
 #screensharing-menu {
-    bottom: 44px;
-    left: calc(50% - 40px);
-    right: initial;
-    color: initial;
-    text-shadow: initial;
-    font-size: 13px;
+	bottom: 44px;
+	left: calc(50% - 40px);
+	right: initial;
+	color: initial;
+	text-shadow: initial;
+	font-size: 13px;
 }
 
 #screensharing-menu.app-navigation-entry-menu:after {
-    top: 100%;
-    left: calc(50% - 5px);
-    border-top-color: #fff;
-    border-bottom-color: transparent;
+	top: 100%;
+	left: calc(50% - 5px);
+	border-top-color: #fff;
+	border-bottom-color: transparent;
 }
 
 /* big speaker video */
@@ -386,6 +386,7 @@ video {
 .participants-1 .videoView video,
 .participants-2 .videoView video {
 	position: absolute;
+	max-height: 100% !important;
 	bottom: 0;
 	border-top-right-radius: 3px;
 }
@@ -667,7 +668,7 @@ video {
 
 .participantWithList li > a,
 #app-navigation li > a {
-    padding-right: 44px !important;
+	padding-right: 44px !important;
 }
 #app-navigation .utils {
 	padding: 0;
@@ -681,7 +682,7 @@ video {
 
 .bubble,
 #app-navigation .app-navigation-entry-menu {
-    right: 4px;
+	right: 4px;
 }
 
 #app-navigation .app-navigation-entry-menu li {
@@ -924,7 +925,7 @@ video {
 }
 
 .detailCallInfoContainer .guest-name p {
-    padding: 9px 0;
+	padding: 9px 0;
 }
 
 .detailCallInfoContainer .editable-text-label .edit-button {