From 0e55ac35bcfdb3dfcc85f430c90c8b8e2f03b4b0 Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Fri, 28 Oct 2022 14:20:28 +0200 Subject: [PATCH] openvidu-components: Updated panel settings Added text description in captions section and other minors styles improvements --- .../settings-panel.component.css | 7 ++- .../settings-panel.component.html | 2 +- .../settings/captions/captions.component.css | 17 ++++++- .../settings/captions/captions.component.html | 49 ++++++++++++------- .../openvidu-angular/src/lib/lang/cn.json | 3 +- .../openvidu-angular/src/lib/lang/de.json | 3 +- .../openvidu-angular/src/lib/lang/en.json | 3 +- .../openvidu-angular/src/lib/lang/es.json | 3 +- .../openvidu-angular/src/lib/lang/fr.json | 3 +- .../openvidu-angular/src/lib/lang/hi.json | 3 +- .../openvidu-angular/src/lib/lang/it.json | 3 +- .../openvidu-angular/src/lib/lang/ja.json | 3 +- .../openvidu-angular/src/lib/lang/nl.json | 3 +- .../openvidu-angular/src/lib/lang/pt.json | 3 +- 14 files changed, 73 insertions(+), 32 deletions(-) diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.css index a19bd9fd..a4931746 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.css +++ b/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; diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.html index 93bf0b7a..22464ee2 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/settings-panel/settings-panel.component.html @@ -40,7 +40,7 @@ language -
{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}:
+
{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}
 diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.css index 8ce13ec5..6bc53a41 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.css +++ b/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); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.html index 81db2a7b..2e46970e 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.html @@ -1,18 +1,31 @@ - - -
{{ 'PANEL.SETTINGS.CAPTIONS' | translate }}
- - - -
{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}:
- - - - - - +
+ +
+ +
{{ 'PANEL.SETTINGS.CAPTIONS' | translate }}
+ + +
+ +
+ +
{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}
+ + + + + + {{ 'PANEL.SETTINGS.CAPTIONS_LANG_TEXT' | translate }} +
+ +
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/cn.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/cn.json index 3a50b8b0..6e72fffd 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/cn.json +++ b/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": "背景效果", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/de.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/de.json index 745c07d3..08194a9f 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/de.json +++ b/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", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/en.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/en.json index 48374732..395367a8 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/en.json +++ b/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", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/es.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/es.json index 122b52aa..63e90aae 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/es.json +++ b/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", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/fr.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/fr.json index d25bbfeb..5cda9946 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/fr.json +++ b/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", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/hi.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/hi.json index 8771d4e9..18d2be57 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/hi.json +++ b/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": "पृष्ठभूमि प्रभाव", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/it.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/it.json index e7cd8dd6..bfeebc56 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/it.json +++ b/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", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/ja.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/ja.json index d4c35d86..4f76017d 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/ja.json +++ b/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": "背景効果", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/nl.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/nl.json index 8a39c69a..e7fcdea2 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/nl.json +++ b/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", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/pt.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/pt.json index e34fc69d..c5557aad 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/pt.json +++ b/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",