ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Updated captionsLangOptions api 

Replaced ISO attribute by lang with the aim of matching the openvidu-browser  api
pull/771/head
Carlos Santos 2022-12-20 11:09:43 +01:00
parent 316b14561f
commit 5349177f14
10 changed files with 56 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openvidu-components-angular/e2e/webcomponent-app/app.js
View File

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

2
openvidu-components-angular/e2e/webcomponent.pro.test.ts
View File

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

2
openvidu-components-angular/package.json
View File

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

10
openvidu-components-angular/projects/openvidu-angular/src/lib/components/captions/captions.component.ts
View File

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

10
openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
View File

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

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

@ -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>

9
openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.ts
View File

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

20
openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts
View File

@ -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]'

2
openvidu-components-angular/projects/openvidu-angular/src/lib/models/caption.model.ts
View File

@ -14,7 +14,7 @@ export interface CaptionModel {
export interface CaptionsLangOption {
name: string;
ISO: string;
lang: string;
}

50
openvidu-components-angular/projects/openvidu-angular/src/lib/services/caption/caption.service.ts
View File

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