From 3e21207f8cf9aad8bcfd6f51bf091a9e9e26f7ab Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Mon, 28 Feb 2022 12:12:16 +0100
Subject: [PATCH] openvidu-components: Parametrized styles properties

---
 .../audio-wave/audio-wave.component.css          |  2 +-
 .../panel/chat-panel/chat-panel.component.css    | 10 +++++++---
 .../panel/chat-panel/chat-panel.component.ts     |  6 ++++--
 .../participants-panel.component.css             |  3 ++-
 .../lib/components/stream/stream.component.css   |  9 +++++----
 .../lib/components/stream/stream.component.html  |  2 --
 .../lib/components/stream/stream.component.ts    |  1 -
 .../lib/components/toolbar/toolbar.component.css | 16 ++++++++++------
 .../components/toolbar/toolbar.component.html    |  2 +-
 .../lib/components/toolbar/toolbar.component.ts  |  1 -
 .../user-settings/user-settings.component.css    |  5 +++--
 .../src/lib/components/video/video.component.css |  4 ++--
 openvidu-components-angular/src/styles.scss      |  5 +++++
 13 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css
index cf377d64..3c9a16f0 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/audio-wave/audio-wave.component.css
@@ -29,7 +29,7 @@
 	max-height: 15px;
 	height: 15px;
 	width: 15px;
-	border-radius: 50%;
+	border-radius: var(--ov-buttons-radius);
 	display: flex;
 	justify-content: space-between;
 }
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css
index b2b64bd1..06ffa974 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.css
@@ -1,7 +1,7 @@
 #chat-container {
 	margin: 20px;
 	background-color: var(--ov-light-color);
-	border-radius: 5px;
+	border-radius: var(--ov-panel-radius);
 	height: -webkit-fill-available;
 	height: -moz-available;
 }
@@ -19,6 +19,7 @@
 
 .header-container button {
 	margin-left: auto;
+	border-radius: var(--ov-buttons-radius);
 }
 
 .text-container{
@@ -43,7 +44,7 @@
 	background-color: var(--ov-light-dark-color);
 	padding: 10px;
 	margin: 10px;
-	border-radius: 5px;
+	border-radius: var(--ov-panel-radius);
 }
 
 .input-container textarea {
@@ -89,14 +90,17 @@
 
   .msg-content {
 	position: relative;
-	border-radius: 5px;
+	border-radius: var(--ov-panel-radius);
 	padding: 8px;
 	color: #000000;
 	width: auto;
 	max-width: 95%;
 	font-size: 13px;
 	word-break: break-all;
+  }
 
+  #send-btn {
+	border-radius: var(--ov-buttons-radius);
   }
 
 
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts
index 77e8fd17..0495fbbf 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts
@@ -53,8 +53,10 @@ export class ChatPanelComponent implements OnInit, AfterViewInit {
 	}
 
 	sendMessage(): void {
-		this.chatService.sendMessage(this.message);
-		this.message = '';
+		if(!!this.message) {
+			this.chatService.sendMessage(this.message);
+			this.message = '';
+		}
 	}
 
 	scrollToBottom(): void {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css
index a4109f88..e0ec0517 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.css
@@ -1,7 +1,7 @@
 .participants-container {
 	margin: 20px;
 	background-color: var(--ov-light-color);
-	border-radius: 5px;
+	border-radius: var(--ov-panel-radius);
 	height: -webkit-fill-available;
 	height: -moz-available;
 }
@@ -19,6 +19,7 @@
 
 .header-container button {
 	margin-left: auto;
+	border-radius: var(--ov-buttons-radius);
 }
 
 .local-participant-container, .remote-participants-container {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css
index dd1b3647..c46200ef 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.css
@@ -9,7 +9,7 @@
 	padding: 0px;
 	position: absolute;
 	z-index: 999;
-	border-radius: 5px;
+	border-radius: var(--ov-panel-radius);
 	color: #ffffff;
 	font-family: 'Roboto','RobotoDraft',Helvetica,Arial,sans-serif;
   }
@@ -18,12 +18,12 @@
 	padding: 5px;
 	color: #ffffff;
 	font-weight: bold;
-	border-radius: 2px;
+	border-radius: var(--ov-panel-radius);
   }
 
   #dialogNickname {
 	background-color:  #0000005e;
-	border-radius: 3px;
+	border-radius: var(--ov-panel-radius);
   }
 
   #closeButton {
@@ -81,6 +81,7 @@
 	width: 26px;
 	height: 26px;
 	margin: 5px;
+	border-radius: var(--ov-buttons-radius);
   }
 
   .status-icons button {
@@ -110,7 +111,7 @@
 	position: absolute;
 	overflow: hidden;
 	background-color: #000000;
-	border-radius: 5px;
+	border-radius: var(--ov-video-radius);
   }
 
   mat-error,
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
index c0773def..7e1bab4f 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
@@ -27,8 +27,6 @@
 				</mat-form-field>
 			</form>
 		</div>
-		<!-- Custom network quality element -->
-		<ng-content select="[network-quality]"></ng-content>
 	</div>
 
 	<div id="audio-wave-container" *ngIf="showAudioDetection && _stream.type === 'CAMERA'">
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
index 62106e3c..c9c7f1c3 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
@@ -10,7 +10,6 @@ import { OpenViduService } from '../../services/openvidu/openvidu.service';
 import { LayoutService } from '../../services/layout/layout.service';
 import { StorageService } from '../../services/storage/storage.service';
 import { Signal } from '../../models/signal.model';
-import { LayoutClass } from '../../models/layout.model';
 import { PublisherProperties } from 'openvidu-browser';
 import { StreamModel } from '../../models/participant.model';
 import { ParticipantService } from '../../services/participant/participant.service';
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
index d60f1930..f63c818a 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
@@ -34,13 +34,17 @@
 	font-size: 24px;
 }
 
-  #company-logo {
+#media-buttons-container button, #menu-buttons-container button {
+	border-radius: var(--ov-buttons-radius);
+}
+
+#branding-logo {
 	background-color: var(--ov-dark-color);
-	border-radius: 5px;
+	border-radius: var(--ov-panel-radius);
 	max-width: 35px;
 	max-height: 35px;
 	padding: 10px;
-  }
+}
 
   #session-title {
 	font-family: 'Ubuntu', sans-serif;
@@ -56,7 +60,7 @@
 	position: absolute;
 	top: 12px;
 	right: 33px;
-	border-radius: 50%;
+	border-radius: var(--ov-buttons-radius);
 	background-color: #ffa600;
 	border: 1px solid #000;
 	z-index: 99999;
@@ -64,7 +68,7 @@
 
   #leave-btn {
 	  background-color: var(--ov-warn-color) !important;
-	  border-radius: 10px !important;
+	  border-radius: var(--ov-leave-button-radius) !important;
 	  width: 60px !important;
   }
 
@@ -92,7 +96,7 @@
   }
 
   @media (max-width: 850px) {
-	#company-logo {
+	#branding-logo {
 	  display: none;
 	}
   }
\ No newline at end of file
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html
index 43ac495a..f2d09adc 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html
@@ -1,7 +1,7 @@
 <mat-toolbar id="toolbar" role="heading" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
 	<div fxFlex="20%" fxLayoutAlign="start center">
 		<div id="img-container">
-			<img id="company-logo" alt="OpenVidu Logo" [src]="logoUrl" />
+			<img id="branding-logo" src='assets/images/openvidu_globe.png'/>
 			<span id="session-title" *ngIf="session && session.sessionId">{{ session.sessionId }}</span>
 		</div>
 	</div>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
index 817ccbe2..af352700 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
@@ -54,7 +54,6 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 	isFullscreenActive: boolean = false;
 	isChatOpened: boolean = false;
 	isParticipantsOpened: boolean = false;
-	logoUrl = 'assets/images/openvidu_globe.png';
 
 	protected log: ILogger;
 	protected menuTogglingSubscription: Subscription;
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css
index 6c2c167b..8400a4a5 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/user-settings/user-settings.component.css
@@ -1,6 +1,6 @@
 .card-header {
 	background-color: var(--ov-primary-color);
-	border-radius: 10px 10px 0px 0px;
+	border-radius: var(--ov-panel-radius) var(--ov-panel-radius) 0px 0px;
 	text-align: center;
 	height: 50px;
   }
@@ -67,6 +67,7 @@
   }
   .deviceButton {
 	box-shadow: none;
+	border-radius: var(--ov-buttons-radius);
 	background-color: var(--ov-secondary-color) !important;
 	color: var(--ov-light-color) !important;
   }
@@ -965,7 +966,7 @@
 	background-clip: padding-box;
 	border: 1px solid #999999;
 	border: 1px solid rgba(0, 0, 0, 0.2);
-	border-radius: 10px;
+	border-radius: var(--ov-panel-radius);
 	-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
 	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
 	outline: 0;
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.css
index 180a5cc6..b4900a5f 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/video/video.component.css
@@ -8,11 +8,11 @@ video {
 	padding: 0;
 	border: 0;
 	font-size: 100%;
-	border-radius: 5px;
+	border-radius: var(--ov-video-radius);
 	background-color: #000000;
 }
 
-.poster_img {
+.poster {
 	position: absolute;
 	z-index: 888;
 	max-width: 60%;
diff --git a/openvidu-components-angular/src/styles.scss b/openvidu-components-angular/src/styles.scss
index cc42a25d..e6b267b6 100644
--- a/openvidu-components-angular/src/styles.scss
+++ b/openvidu-components-angular/src/styles.scss
@@ -50,6 +50,11 @@ $openvidu-components-theme: mat.define-light-theme((
 
   --ov-light-color: #ffffff;
   --ov-light-dark-color: #f1f1f1;
+
+  --ov-buttons-radius: 50%; // border-radius property
+  --ov-leave-button-radius: 10px;
+  --ov-video-radius: 5px;
+  --ov-panel-radius: 5px;
 }