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.lang = LANG;
webComponent.captionsLang = CAPTIONS_LANG; webComponent.captionsLang = CAPTIONS_LANG;
if (CUSTOM_CAPTIONS_LANG_OPTIONS) { 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.prejoin = PREJOIN;
webComponent.videoMuted = VIDEO_MUTED; 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; 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 browser.get(`${url}&prejoin=false`);
await utils.checkSessionIsPresent(); 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-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": "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: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" "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 { animate, style, transition, trigger } from '@angular/animations';
import { Session, SpeechToTextEvent } from 'openvidu-browser'; 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 { PanelSettingsOptions, PanelType } from '../../models/panel.model';
import { CaptionService } from '../../services/caption/caption.service'; import { CaptionService } from '../../services/caption/caption.service';
import { OpenViduService } from '../../services/openvidu/openvidu.service'; import { OpenViduService } from '../../services/openvidu/openvidu.service';
@ -50,7 +50,7 @@ export class CaptionsComponent implements OnInit {
private DELETE_TIMEOUT = 10 * 1000; private DELETE_TIMEOUT = 10 * 1000;
private MAX_EVENTS_LIMIT = 3; private MAX_EVENTS_LIMIT = 3;
private captionLanguageSubscription: Subscription; private captionLanguageSubscription: Subscription;
private captionLangSelected: { name: string; ISO: string }; private captionLangSelected: CaptionsLangOption;
private screenSizeSub: Subscription; private screenSizeSub: Subscription;
private panelTogglingSubscription: Subscription; private panelTogglingSubscription: Subscription;
private sttStatusSubscription: Subscription; private sttStatusSubscription: Subscription;
@ -70,7 +70,7 @@ export class CaptionsComponent implements OnInit {
this.captionLangSelected = this.captionService.getLangSelected(); this.captionLangSelected = this.captionService.getLangSelected();
this.session = this.openviduService.getWebcamSession(); this.session = this.openviduService.getWebcamSession();
await this.openviduService.subscribeRemotesToSTT(this.captionLangSelected.ISO); await this.openviduService.subscribeRemotesToSTT(this.captionLangSelected.lang);
this.subscribeToCaptionLanguage(); this.subscribeToCaptionLanguage();
this.subscribeToPanelToggling(); this.subscribeToPanelToggling();
@ -196,8 +196,8 @@ export class CaptionsComponent implements OnInit {
} }
private subscribeToCaptionLanguage() { private subscribeToCaptionLanguage() {
this.captionLanguageSubscription = this.captionService.captionLangObs.subscribe((lang) => { this.captionLanguageSubscription = this.captionService.captionLangObs.subscribe((langOpt) => {
this.captionLangSelected = lang; this.captionLangSelected = langOpt;
this.cd.markForCheck(); 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.log.w(event.name, event.message);
this.openviduService.setSTTReady(false); this.openviduService.setSTTReady(false);
// Try to re-subscribe to STT // Try to re-subscribe to STT
await this.openviduService.subscribeRemotesToSTT(this.captionService.getLangSelected().ISO); await this.openviduService.subscribeRemotesToSTT(this.captionService.getLangSelected().lang);
} else { } else {
this.log.e(event.name, event.message); this.log.e(event.name, event.message);
} }
@ -326,7 +326,7 @@ export class SessionComponent implements OnInit, OnDestroy {
const data = event.stream?.connection?.data; const data = event.stream?.connection?.data;
const isCameraType: boolean = this.participantService.getTypeConnectionData(data) === VideoType.CAMERA; const isCameraType: boolean = this.participantService.getTypeConnectionData(data) === VideoType.CAMERA;
const isRemoteConnection: boolean = !this.openviduService.isMyOwnConnection(connectionId); const isRemoteConnection: boolean = !this.openviduService.isMyOwnConnection(connectionId);
const lang = this.captionService.getLangSelected().ISO; const lang = this.captionService.getLangSelected().lang;
if (isRemoteConnection) { if (isRemoteConnection) {
const subscriber: Subscriber = this.session.subscribe(event.stream, undefined); const subscriber: Subscriber = this.session.subscribe(event.stream, undefined);
@ -368,12 +368,12 @@ export class SessionComponent implements OnInit, OnDestroy {
} }
private subscribeToCaptionLanguage() { private subscribeToCaptionLanguage() {
this.captionLanguageSubscription = this.captionService.captionLangObs.subscribe(async (lang) => { this.captionLanguageSubscription = this.captionService.captionLangObs.subscribe(async (langOpt) => {
if (this.captionService.areCaptionsEnabled()) { if (this.captionService.areCaptionsEnabled()) {
// Unsubscribe all streams from speech to text and re-subscribe with new language // 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.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> <mat-icon>expand_more</mat-icon>
</button> </button>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<button *ngFor="let lang of languagesAvailable" mat-menu-item [id]="lang.ISO" (click)="onLangSelected(lang)"> <button *ngFor="let langOpt of languagesAvailable" mat-menu-item [id]="langOpt.lang" (click)="onLangSelected(langOpt)">
<span>{{ lang.name }}</span> <span>{{ langOpt.name }}</span>
</button> </button>
</mat-menu> </mat-menu>
</mat-list-item> </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 { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { CaptionsLangOption } from '../../../models/caption.model';
import { CaptionService } from '../../../services/caption/caption.service'; import { CaptionService } from '../../../services/caption/caption.service';
import { LayoutService } from '../../../services/layout/layout.service'; import { LayoutService } from '../../../services/layout/layout.service';
import { OpenViduService } from '../../../services/openvidu/openvidu.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 { export class CaptionsSettingComponent implements OnInit, OnDestroy {
isSttReady: boolean = true; isSttReady: boolean = true;
captionsEnabled: boolean; captionsEnabled: boolean;
languagesAvailable: { name: string; ISO: string }[] = []; languagesAvailable: CaptionsLangOption[] = [];
langSelected: string; langSelected: string;
isOpenViduPro: boolean = false; isOpenViduPro: boolean = false;
private captionsStatusSubs: Subscription; private captionsStatusSubs: Subscription;
@ -39,9 +40,9 @@ export class CaptionsSettingComponent implements OnInit, OnDestroy {
if (this.sttStatusSubs) this.sttStatusSubs.unsubscribe(); if (this.sttStatusSubs) this.sttStatusSubs.unsubscribe();
} }
onLangSelected(lang: { name: string; ISO: string }) { onLangSelected(langOpt: CaptionsLangOption) {
this.langSelected = lang.name; this.langSelected = langOpt.name;
this.captionService.setLanguage(lang.ISO); this.captionService.setLanguage(langOpt.lang);
} }
toggleCaptions() { 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: ``` * Default: ```
* [ * [
* { name: 'English', ISO: 'en-US' }, * { name: 'English', lang: 'en-US' },
* { name: 'Español', ISO: 'es-ES' }, * { name: 'Español', lang: 'es-ES' },
* { name: 'Deutsch', ISO: 'de-DE' }, * { name: 'Deutsch', lang: 'de-DE' },
* { name: 'Français', ISO: 'fr-FR' }, * { name: 'Français', lang: 'fr-FR' },
* { name: '中国', ISO: 'zh-CN' }, * { name: '中国', lang: 'zh-CN' },
* { name: 'हिन्दी', ISO: 'hi-IN' }, * { name: 'हिन्दी', lang: 'hi-IN' },
* { name: 'Italiano', ISO: 'it-IT' }, * { name: 'Italiano', lang: 'it-IT' },
* { name: 'やまと', ISO: 'jp-JP' }, * { name: 'やまと', lang: 'jp-JP' },
* { name: 'Português', ISO: 'pt-PT' } * { name: 'Português', lang: 'pt-PT' }
* ]``` * ]```
* *
* @example * @example
* <ov-videoconference [captionsLangOptions]="[{name:'Spanish', ISO: 'es-ES'}]"></ov-videoconference> * <ov-videoconference [captionsLangOptions]="[{name:'Spanish', lang: 'es-ES'}]"></ov-videoconference>
*/ */
@Directive({ @Directive({
selector: 'ov-videoconference[captionsLangOptions]' 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 { export interface CaptionsLangOption {
name: string; 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' providedIn: 'root'
}) })
export class CaptionService { export class CaptionService {
private langs: CaptionsLangOption [] = [ private langsOptions: CaptionsLangOption [] = [
{ name: 'English', ISO: 'en-US' }, { name: 'English', lang: 'en-US' },
{ name: 'Español', ISO: 'es-ES' }, { name: 'Español', lang: 'es-ES' },
{ name: 'Deutsch', ISO: 'de-DE' }, { name: 'Deutsch', lang: 'de-DE' },
{ name: 'Français', ISO: 'fr-FR' }, { name: 'Français', lang: 'fr-FR' },
{ name: '中国', ISO: 'zh-CN' }, { name: '中国', lang: 'zh-CN' },
{ name: 'हिन्दी', ISO: 'hi-IN' }, { name: 'हिन्दी', lang: 'hi-IN' },
{ name: 'Italiano', ISO: 'it-IT' }, { name: 'Italiano', lang: 'it-IT' },
{ name: 'やまと', ISO: 'jp-JP' }, { name: 'やまと', lang: 'jp-JP' },
{ name: 'Português', ISO: 'pt-PT' } { name: 'Português', lang: 'pt-PT' }
]; ];
captionLangSelected: { name: string; ISO: string }; captionLangSelected: CaptionsLangOption;
captionLangObs: Observable<{ name: string; ISO: string }>; captionLangObs: Observable<CaptionsLangOption>;
private _captionLang: Subject<{ name: string; ISO: string }> = new Subject(); private _captionLang: Subject<CaptionsLangOption> = new Subject();
private captionsEnabled: boolean = false; private captionsEnabled: boolean = false;
constructor(private storageService: StorageService) { constructor(private storageService: StorageService) {
@ -34,7 +34,7 @@ export class CaptionService {
setLanguageOptions(options: CaptionsLangOption [] | undefined) { setLanguageOptions(options: CaptionsLangOption [] | undefined) {
if(options && options.length > 0) { if(options && options.length > 0) {
this.langs = options; this.langsOptions = options;
this.updateLangSelected(); this.updateLangSelected();
} }
} }
@ -48,29 +48,29 @@ export class CaptionService {
} }
setLanguage(lang: string) { setLanguage(lang: string) {
const newLang = this.langs.find((l) => l.ISO === lang); const newLangOpt = this.langsOptions.find((opt) => opt.lang === lang);
if (!!newLang && newLang.ISO !== this.captionLangSelected.ISO) { if (!!newLangOpt && newLangOpt.lang !== this.captionLangSelected.lang) {
this.captionLangSelected = newLang; this.captionLangSelected = newLangOpt;
this.storageService.setCaptionLang(lang); this.storageService.setCaptionLang(lang);
this._captionLang.next(this.captionLangSelected); this._captionLang.next(this.captionLangSelected);
} }
} }
getLangSelected(): { name: string; ISO: string } { getLangSelected(): CaptionsLangOption {
return this.captionLangSelected; return this.captionLangSelected;
} }
getCaptionLanguages(): { name: string; ISO: string }[] { getCaptionLanguages(): CaptionsLangOption[] {
return this.langs; return this.langsOptions;
} }
private updateLangSelected(): void { private updateLangSelected(): void {
const iso = this.storageService.getCaptionsLang(); const storageLang = this.storageService.getCaptionsLang();
const lang = this.langs.find((lang) => lang.ISO === iso); const langOpt = this.langsOptions.find((opt) => opt.lang === storageLang);
if (iso && lang) { if (storageLang && langOpt) {
this.captionLangSelected = lang; this.captionLangSelected = langOpt;
} else { } else {
this.captionLangSelected = this.langs[0]; this.captionLangSelected = this.langsOptions[0];
} }
} }
} }