openvidu-components: Updated captionsLangOptions api

Replaced ISO attribute by lang with the aim of matching the openvidu-browser  api

Author: CSantosM

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;

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();

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"
 }

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();
 		});
 	}

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);
 			}
 		});
 	}

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

@@ -20,8 +20,8 @@
 					<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 *ngFor="let langOpt of languagesAvailable" mat-menu-item [id]="langOpt.lang" (click)="onLangSelected(langOpt)">
+						<span>{{ langOpt.name }}</span>
 					</button>
 				</mat-menu>
 			</mat-list-item>

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() {

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
- * <ov-videoconference [captionsLangOptions]="[{name:'Spanish', ISO: 'es-ES'}]"></ov-videoconference>
+ * <ov-videoconference [captionsLangOptions]="[{name:'Spanish', lang: 'es-ES'}]"></ov-videoconference>
  */
  @Directive({
 	selector: 'ov-videoconference[captionsLangOptions]'

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;
 
 }
 

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<CaptionsLangOption>;
+	private _captionLang: Subject<CaptionsLangOption> = 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];
 		}
 	}
 }