From 5349177f1499315449e429c69a291f22a91227fa Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Tue, 20 Dec 2022 11:09:43 +0100 Subject: [PATCH] openvidu-components: Updated captionsLangOptions api Replaced ISO attribute by lang with the aim of matching the openvidu-browser api --- .../e2e/webcomponent-app/app.js | 2 +- .../e2e/webcomponent.pro.test.ts | 2 +- openvidu-components-angular/package.json | 2 +- .../components/captions/captions.component.ts | 10 ++-- .../components/session/session.component.ts | 10 ++-- .../settings/captions/captions.component.html | 4 +- .../settings/captions/captions.component.ts | 9 ++-- .../api/videoconference.directive.ts | 20 ++++---- .../src/lib/models/caption.model.ts | 2 +- .../lib/services/caption/caption.service.ts | 50 +++++++++---------- 10 files changed, 56 insertions(+), 55 deletions(-) diff --git a/openvidu-components-angular/e2e/webcomponent-app/app.js b/openvidu-components-angular/e2e/webcomponent-app/app.js index f3a2586a66..b18f3f19f6 100644 --- a/openvidu-components-angular/e2e/webcomponent-app/app.js +++ b/openvidu-components-angular/e2e/webcomponent-app/app.js @@ -180,7 +180,7 @@ async function joinSession(sessionName, participantName) { webComponent.lang = LANG; webComponent.captionsLang = CAPTIONS_LANG; if (CUSTOM_CAPTIONS_LANG_OPTIONS) { - webComponent.captionsLangOptions = [{ name: 'Esp', ISO: 'es-ES' }, { name: 'Eng', ISO: 'en-US' }]; + webComponent.captionsLangOptions = [{ name: 'Esp', lang: 'es-ES' }, { name: 'Eng', lang: 'en-US' }]; } webComponent.prejoin = PREJOIN; webComponent.videoMuted = VIDEO_MUTED; diff --git a/openvidu-components-angular/e2e/webcomponent.pro.test.ts b/openvidu-components-angular/e2e/webcomponent.pro.test.ts index 82414494de..238fb938ea 100644 --- a/openvidu-components-angular/e2e/webcomponent.pro.test.ts +++ b/openvidu-components-angular/e2e/webcomponent.pro.test.ts @@ -296,7 +296,7 @@ describe('Testing captions features', () => { expect(await utils.isPresent('.captions-container')).to.be.true; }); - it('should change the CAPTIONS language', async () => { + it('should change the CAPTIONS language from settings panel', async () => { await browser.get(`${url}&prejoin=false`); await utils.checkSessionIsPresent(); diff --git a/openvidu-components-angular/package.json b/openvidu-components-angular/package.json index 230d8b6967..f64ab5779e 100644 --- a/openvidu-components-angular/package.json +++ b/openvidu-components-angular/package.json @@ -75,7 +75,7 @@ "webcomponent:e2e-ci": "cross-env LAUNCH_MODE=CI npm run webcomponent:e2e", "webcomponent:e2e-pro": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/webcomponent.pro.test.js", "webcomponent:e2e-pro-ci": "cross-env LAUNCH_MODE=CI npm run webcomponent:e2e-pro", - "webcomponent:serve-testapp": "npx http-server ./e2e/webcomponent-app/" + "webcomponent:serve-testapp": "npx http-server ./e2e/webcomponent-app/ && echo http://localhost:8080/?OV_URL=https://localhost:4443&OV_SECRET=MY_SECRET&prejoin=false" }, "version": "2.24.0" } \ No newline at end of file diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/captions/captions.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/captions/captions.component.ts index 816f21aa84..282246a6a0 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/captions/captions.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/captions/captions.component.ts @@ -4,7 +4,7 @@ import { PanelEvent, PanelService } from '../../services/panel/panel.service'; import { animate, style, transition, trigger } from '@angular/animations'; import { Session, SpeechToTextEvent } from 'openvidu-browser'; -import { CaptionModel } from '../../models/caption.model'; +import { CaptionModel, CaptionsLangOption } from '../../models/caption.model'; import { PanelSettingsOptions, PanelType } from '../../models/panel.model'; import { CaptionService } from '../../services/caption/caption.service'; import { OpenViduService } from '../../services/openvidu/openvidu.service'; @@ -50,7 +50,7 @@ export class CaptionsComponent implements OnInit { private DELETE_TIMEOUT = 10 * 1000; private MAX_EVENTS_LIMIT = 3; private captionLanguageSubscription: Subscription; - private captionLangSelected: { name: string; ISO: string }; + private captionLangSelected: CaptionsLangOption; private screenSizeSub: Subscription; private panelTogglingSubscription: Subscription; private sttStatusSubscription: Subscription; @@ -70,7 +70,7 @@ export class CaptionsComponent implements OnInit { this.captionLangSelected = this.captionService.getLangSelected(); this.session = this.openviduService.getWebcamSession(); - await this.openviduService.subscribeRemotesToSTT(this.captionLangSelected.ISO); + await this.openviduService.subscribeRemotesToSTT(this.captionLangSelected.lang); this.subscribeToCaptionLanguage(); this.subscribeToPanelToggling(); @@ -196,8 +196,8 @@ export class CaptionsComponent implements OnInit { } private subscribeToCaptionLanguage() { - this.captionLanguageSubscription = this.captionService.captionLangObs.subscribe((lang) => { - this.captionLangSelected = lang; + this.captionLanguageSubscription = this.captionService.captionLangObs.subscribe((langOpt) => { + this.captionLangSelected = langOpt; this.cd.markForCheck(); }); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts index 9b3876c5cf..e972bbbb83 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts @@ -282,7 +282,7 @@ export class SessionComponent implements OnInit, OnDestroy { this.log.w(event.name, event.message); this.openviduService.setSTTReady(false); // Try to re-subscribe to STT - await this.openviduService.subscribeRemotesToSTT(this.captionService.getLangSelected().ISO); + await this.openviduService.subscribeRemotesToSTT(this.captionService.getLangSelected().lang); } else { this.log.e(event.name, event.message); } @@ -326,7 +326,7 @@ export class SessionComponent implements OnInit, OnDestroy { const data = event.stream?.connection?.data; const isCameraType: boolean = this.participantService.getTypeConnectionData(data) === VideoType.CAMERA; const isRemoteConnection: boolean = !this.openviduService.isMyOwnConnection(connectionId); - const lang = this.captionService.getLangSelected().ISO; + const lang = this.captionService.getLangSelected().lang; if (isRemoteConnection) { const subscriber: Subscriber = this.session.subscribe(event.stream, undefined); @@ -368,12 +368,12 @@ export class SessionComponent implements OnInit, OnDestroy { } private subscribeToCaptionLanguage() { - this.captionLanguageSubscription = this.captionService.captionLangObs.subscribe(async (lang) => { + this.captionLanguageSubscription = this.captionService.captionLangObs.subscribe(async (langOpt) => { if (this.captionService.areCaptionsEnabled()) { // Unsubscribe all streams from speech to text and re-subscribe with new language - this.log.d('Re-subscribe from STT because of language changed to ', lang.ISO); + this.log.d('Re-subscribe from STT because of language changed to ', langOpt.lang); await this.openviduService.unsubscribeRemotesFromSTT(); - await this.openviduService.subscribeRemotesToSTT(lang.ISO); + await this.openviduService.subscribeRemotesToSTT(langOpt.lang); } }); } 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 3f4f33b31a..6a01c75496 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 @@ -20,8 +20,8 @@ expand_more - diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.ts index 5e19b12fcb..8c4cf30f00 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.ts @@ -1,5 +1,6 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { Subscription } from 'rxjs'; +import { CaptionsLangOption } from '../../../models/caption.model'; import { CaptionService } from '../../../services/caption/caption.service'; import { LayoutService } from '../../../services/layout/layout.service'; import { OpenViduService } from '../../../services/openvidu/openvidu.service'; @@ -15,7 +16,7 @@ import { OpenViduService } from '../../../services/openvidu/openvidu.service'; export class CaptionsSettingComponent implements OnInit, OnDestroy { isSttReady: boolean = true; captionsEnabled: boolean; - languagesAvailable: { name: string; ISO: string }[] = []; + languagesAvailable: CaptionsLangOption[] = []; langSelected: string; isOpenViduPro: boolean = false; private captionsStatusSubs: Subscription; @@ -39,9 +40,9 @@ export class CaptionsSettingComponent implements OnInit, OnDestroy { if (this.sttStatusSubs) this.sttStatusSubs.unsubscribe(); } - onLangSelected(lang: { name: string; ISO: string }) { - this.langSelected = lang.name; - this.captionService.setLanguage(lang.ISO); + onLangSelected(langOpt: CaptionsLangOption) { + this.langSelected = langOpt.name; + this.captionService.setLanguage(langOpt.lang); } toggleCaptions() { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts index b4648f26ef..96103720c1 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts @@ -188,19 +188,19 @@ export class CaptionsLangDirective implements OnDestroy { * * Default: ``` * [ - * { name: 'English', ISO: 'en-US' }, - * { name: 'Español', ISO: 'es-ES' }, - * { name: 'Deutsch', ISO: 'de-DE' }, - * { name: 'Français', ISO: 'fr-FR' }, - * { name: '中国', ISO: 'zh-CN' }, - * { name: 'हिन्दी', ISO: 'hi-IN' }, - * { name: 'Italiano', ISO: 'it-IT' }, - * { name: 'やまと', ISO: 'jp-JP' }, - * { name: 'Português', ISO: 'pt-PT' } + * { name: 'English', lang: 'en-US' }, + * { name: 'Español', lang: 'es-ES' }, + * { name: 'Deutsch', lang: 'de-DE' }, + * { name: 'Français', lang: 'fr-FR' }, + * { name: '中国', lang: 'zh-CN' }, + * { name: 'हिन्दी', lang: 'hi-IN' }, + * { name: 'Italiano', lang: 'it-IT' }, + * { name: 'やまと', lang: 'jp-JP' }, + * { name: 'Português', lang: 'pt-PT' } * ]``` * * @example - * + * */ @Directive({ selector: 'ov-videoconference[captionsLangOptions]' diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/caption.model.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/caption.model.ts index 9586962322..bf04425a2a 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/caption.model.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/caption.model.ts @@ -14,7 +14,7 @@ export interface CaptionModel { export interface CaptionsLangOption { name: string; - ISO: string; + lang: string; } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/caption/caption.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/caption/caption.service.ts index 9366ae8322..a6f4ff28b9 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/caption/caption.service.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/caption/caption.service.ts @@ -10,20 +10,20 @@ import { StorageService } from '../storage/storage.service'; providedIn: 'root' }) export class CaptionService { - private langs: CaptionsLangOption [] = [ - { name: 'English', ISO: 'en-US' }, - { name: 'Español', ISO: 'es-ES' }, - { name: 'Deutsch', ISO: 'de-DE' }, - { name: 'Français', ISO: 'fr-FR' }, - { name: '中国', ISO: 'zh-CN' }, - { name: 'हिन्दी', ISO: 'hi-IN' }, - { name: 'Italiano', ISO: 'it-IT' }, - { name: 'やまと', ISO: 'jp-JP' }, - { name: 'Português', ISO: 'pt-PT' } + private langsOptions: CaptionsLangOption [] = [ + { name: 'English', lang: 'en-US' }, + { name: 'Español', lang: 'es-ES' }, + { name: 'Deutsch', lang: 'de-DE' }, + { name: 'Français', lang: 'fr-FR' }, + { name: '中国', lang: 'zh-CN' }, + { name: 'हिन्दी', lang: 'hi-IN' }, + { name: 'Italiano', lang: 'it-IT' }, + { name: 'やまと', lang: 'jp-JP' }, + { name: 'Português', lang: 'pt-PT' } ]; - captionLangSelected: { name: string; ISO: string }; - captionLangObs: Observable<{ name: string; ISO: string }>; - private _captionLang: Subject<{ name: string; ISO: string }> = new Subject(); + captionLangSelected: CaptionsLangOption; + captionLangObs: Observable; + private _captionLang: Subject = new Subject(); private captionsEnabled: boolean = false; constructor(private storageService: StorageService) { @@ -34,7 +34,7 @@ export class CaptionService { setLanguageOptions(options: CaptionsLangOption [] | undefined) { if(options && options.length > 0) { - this.langs = options; + this.langsOptions = options; this.updateLangSelected(); } } @@ -48,29 +48,29 @@ export class CaptionService { } setLanguage(lang: string) { - const newLang = this.langs.find((l) => l.ISO === lang); - if (!!newLang && newLang.ISO !== this.captionLangSelected.ISO) { - this.captionLangSelected = newLang; + const newLangOpt = this.langsOptions.find((opt) => opt.lang === lang); + if (!!newLangOpt && newLangOpt.lang !== this.captionLangSelected.lang) { + this.captionLangSelected = newLangOpt; this.storageService.setCaptionLang(lang); this._captionLang.next(this.captionLangSelected); } } - getLangSelected(): { name: string; ISO: string } { + getLangSelected(): CaptionsLangOption { return this.captionLangSelected; } - getCaptionLanguages(): { name: string; ISO: string }[] { - return this.langs; + getCaptionLanguages(): CaptionsLangOption[] { + return this.langsOptions; } private updateLangSelected(): void { - const iso = this.storageService.getCaptionsLang(); - const lang = this.langs.find((lang) => lang.ISO === iso); - if (iso && lang) { - this.captionLangSelected = lang; + const storageLang = this.storageService.getCaptionsLang(); + const langOpt = this.langsOptions.find((opt) => opt.lang === storageLang); + if (storageLang && langOpt) { + this.captionLangSelected = langOpt; } else { - this.captionLangSelected = this.langs[0]; + this.captionLangSelected = this.langsOptions[0]; } } }