openvidu-components: Updated panel settings

Added text description in captions section and other minors styles improvements

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.css

@@ -6,12 +6,13 @@
 .item-menu {
 	padding-right: 5px;
 	border-right: 1px solid var(--ov-secondary-color);
-	width: 200px;
+	width: 170px;
 }
 
 .item-content {
 	padding: 16px;
 	flex-grow: 1;
+	width: min-content;
 }
 
 .option {
@@ -22,7 +23,9 @@
 }
 
 mat-list-option[aria-selected='true'] {
-	background: var(--ov-light-color);
+	background: var(--ov-tertiary-color);
+	font-weight: bold !important;
+	color: var(--ov-panel-background);
 }
 ::ng-deep .mat-list-item-content {
 	padding: 5px !important;

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.html

@@ -40,7 +40,7 @@
 				<mat-list>
 					<mat-list-item>
 						<mat-icon mat-list-icon>language</mat-icon>
-						<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}:</div>
+						<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
 						<ov-lang-selector></ov-lang-selector>
 					</mat-list-item>
 				</mat-list>

openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.css

@@ -1,8 +1,23 @@
+#lang-section {
+	margin-top: 10px;
+}
+
+.section-description {
+	color: var(--ov-panel-text-color);
+	font-size: 12px;
+	padding: 0px 5px;
+	display: block;
+}
+
+.lang-button {
+	background-color: var(--ov-logo-background-color);
+	color: var(--ov-text-color);
+}
 
 ::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
 	background-color: var(--ov-tertiary-color);
 }
 
-::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{
+::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
 	background-color: var(--ov-light-color);
 }

openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.html

@@ -1,18 +1,31 @@
-<mat-list>
+<div>
-	<mat-list-item>
+	<mat-list>
-		<div mat-line>{{ 'PANEL.SETTINGS.CAPTIONS' | translate }}</div>
+		<div>
-		<mat-slide-toggle id="captions-toggle-slide" (change)="toggleCaptions()" [checked]="captionsEnabled" [disableRipple]="true"></mat-slide-toggle>
+			<mat-list-item>
-	</mat-list-item>
+				<div mat-line>{{ 'PANEL.SETTINGS.CAPTIONS' | translate }}</div>
-	<mat-list-item>
+				<mat-slide-toggle
-		<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}:</div>
+					id="captions-toggle-slide"
-		<button mat-flat-button [matMenuTriggerFor]="menu" class="lang-button">
+					(change)="toggleCaptions()"
-			<span>{{ langSelected }}</span>
+					[checked]="captionsEnabled"
-			<mat-icon>expand_more</mat-icon>
+					[disableRipple]="true"
-		</button>
+				></mat-slide-toggle>
-		<mat-menu #menu="matMenu">
+			</mat-list-item>
-			<button *ngFor="let lang of languagesAvailable" mat-menu-item  [id]="lang.ISO" (click)="onLangSelected(lang)">
+		</div>
-				<span>{{ lang.name }}</span>
+
-			</button>
+		<div id="lang-section">
-		</mat-menu>
+			<mat-list-item>
-	</mat-list-item>
+				<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
-</mat-list>
+				<button mat-flat-button [matMenuTriggerFor]="menu" class="lang-button">
+					<span>{{ langSelected }}</span>
+					<mat-icon>expand_more</mat-icon>
+				</button>
+				<mat-menu #menu="matMenu">
+					<button *ngFor="let lang of languagesAvailable" mat-menu-item [id]="lang.ISO" (click)="onLangSelected(lang)">
+						<span>{{ lang.name }}</span>
+					</button>
+				</mat-menu>
+			</mat-list-item>
+			<span class="section-description">{{ 'PANEL.SETTINGS.CAPTIONS_LANG_TEXT' | translate }}</span>
+		</div>
+	</mat-list>
+</div>

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/cn.json

@@ -75,7 +75,8 @@
 			"VIDEO": "视频",
 			"AUDIO": "声音的",
 			"LANGUAGE": "语",
-			"CAPTIONS": "字幕"
+			"CAPTIONS": "字幕",
+			"CAPTIONS_LANG_TEXT": "选择会话参与者将使用的语言。字幕将以该语言显示。"
 		},
 		"BACKGROUND": {
 			"TITLE": "背景效果",

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/de.json

@@ -75,7 +75,8 @@
 			"VIDEO": "Video",
 			"AUDIO": "Audio",
 			"LANGUAGE": "Sprache",
-			"CAPTIONS": "Untertitel"
+			"CAPTIONS": "Untertitel",
+			"CAPTIONS_LANG_TEXT": "Wählen Sie die Sprache, die die Teilnehmer der Sitzung verwenden. Die Untertitel werden in dieser Sprache angezeigt."
 		},
 		"BACKGROUND": {
 			"TITLE": "Hintergrund-Effekte",

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/en.json

@@ -75,7 +75,8 @@
 			"VIDEO": "Video",
 			"AUDIO": "Audio",
 			"LANGUAGE": "Language",
-			"CAPTIONS": "Captions"
+			"CAPTIONS": "Captions",
+			"CAPTIONS_LANG_TEXT": "Select the language that the participants of the session will use. The captions will appear in that language."
 		},
 		"BACKGROUND": {
 			"TITLE": "Background effects",

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/es.json

@@ -75,7 +75,8 @@
 			"VIDEO": "Video",
 			"AUDIO": "Audio",
 			"LANGUAGE": "Idioma",
-			"CAPTIONS": "Subtítulos"
+			"CAPTIONS": "Subtítulos",
+			"CAPTIONS_LANG_TEXT": "Selecciona el idioma que usarán los participantes de la sesión. Los subtítulos aparecerán en ese idioma."
 		},
 		"BACKGROUND": {
 			"TITLE": "Efectos de fondo",

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/fr.json

@@ -75,7 +75,8 @@
 			"VIDEO": "Vidéo",
 			"AUDIO": "l'audio",
 			"LANGUAGE": "Langue",
-			"CAPTIONS": "Les sous-titres"
+			"CAPTIONS": "Les sous-titres",
+			"CAPTIONS_LANG_TEXT": "Sélectionnez la langue que les participants de la session utiliseront. Les sous-titres apparaîtront dans cette langue."
 		},
 		"BACKGROUND": {
 			"TITLE": "Effets de fond",

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/hi.json

@@ -75,7 +75,8 @@
 			"VIDEO": "वीडियो",
 			"AUDIO": "ऑडियो",
 			"LANGUAGE": "भाषा",
-			"CAPTIONS": "उपशीर्षक"
+			"CAPTIONS": "उपशीर्षक",
+			"CAPTIONS_LANG_TEXT": "उस भाषा का चयन करें जिसका उपयोग सत्र के प्रतिभागी करेंगे। उपशीर्षक उस भाषा में दिखाई देंगे।"
 		},
 		"BACKGROUND": {
 			"TITLE": "पृष्ठभूमि प्रभाव",

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/it.json

@@ -75,7 +75,8 @@
 			"VIDEO": "video",
 			"AUDIO": "Audio",
 			"LANGUAGE": "Lingua",
-			"CAPTIONS": "Sottotitoli"
+			"CAPTIONS": "Sottotitoli",
+			"CAPTIONS_LANG_TEXT": "Seleziona la lingua che i partecipanti della sessione useranno. I sottotitoli appariranno in quella lingua."
 		},
 		"BACKGROUND": {
 			"TITLE": "Effetti di sfondo",

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/ja.json

@@ -75,7 +75,8 @@
 			"VIDEO": "ビデオ",
 			"AUDIO": "オーディオ",
 			"LANGUAGE": "言語",
-			"CAPTIONS": "字幕"
+			"CAPTIONS": "字幕",
+			"CAPTIONS_LANG_TEXT": "セッションの参加者が使用する言語を選択します。キャプションはその言語で表示されます。"
 		},
 		"BACKGROUND": {
 			"TITLE": "背景効果",

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/nl.json

@@ -75,7 +75,8 @@
 			"VIDEO": "Video",
 			"AUDIO": "Audio",
 			"LANGUAGE": "Taal",
-			"CAPTIONS": "Ondertitels"
+			"CAPTIONS": "Ondertitels",
+			"CAPTIONS_LANG_TEXT": "Selecteer de taal die de deelnemers van de sessie zullen gebruiken. De ondertiteling zal in die taal verschijnen."
 		},
 		"BACKGROUND": {
 			"TITLE": "Achtergrondeffecten",

openvidu-components-angular/projects/openvidu-angular/src/lib/lang/pt.json

@@ -75,7 +75,8 @@
 			"VIDEO": "Vídeo",
 			"AUDIO": "Áudio",
 			"LANGUAGE": "Linguagem",
-			"CAPTIONS": "Legendas"
+			"CAPTIONS": "Legendas",
+			"CAPTIONS_LANG_TEXT": "Selecione o idioma que os participantes da sessão utilizarão. Os legendas aparecerão nesse idioma."
 		},
 		"BACKGROUND": {
 			"TITLE": "Efeitos de fundo",