diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.html index 6b020237..f9be1389 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.html @@ -3,7 +3,7 @@ expand_more - \ No newline at end of file diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.ts index 602c5c24..2fd453de 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/lang-selector/lang-selector.component.ts @@ -1,8 +1,9 @@ -import { AfterViewInit, Component, OnInit, Output, ViewChild,EventEmitter } from '@angular/core'; +import { AfterViewInit, Component, OnInit, Output, ViewChild, EventEmitter } from '@angular/core'; import { MatMenuTrigger } from '@angular/material/menu'; import { MatSelect } from '@angular/material/select'; import { StorageService } from '../../../services/storage/storage.service'; import { TranslateService } from '../../../services/translate/translate.service'; +import { LangOption } from '../../../models/lang.model'; /** * @internal @@ -13,9 +14,9 @@ import { TranslateService } from '../../../services/translate/translate.service' styleUrls: ['./lang-selector.component.css'] }) export class LangSelectorComponent implements OnInit, AfterViewInit { - @Output() onLangSelectorClicked = new EventEmitter(); - langSelected: { name: string; ISO: string }; - languages: { name: string; ISO: string }[] = []; + @Output() onLangSelectorClicked = new EventEmitter(); + langSelected: LangOption | undefined; + languages: LangOption[] = []; /** * @ignore diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts index 64408c40..93ae49ea 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts @@ -39,6 +39,7 @@ import { OpenViduService } from '../../services/openvidu/openvidu.service'; import { ParticipantService } from '../../services/participant/participant.service'; import { StorageService } from '../../services/storage/storage.service'; import { TranslateService } from '../../services/translate/translate.service'; +import { LangOption } from '../../models/lang.model'; /** * The **VideoconferenceComponent** is the parent of all OpenVidu components. @@ -423,6 +424,11 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni */ @Output() onNodeCrashed: EventEmitter = new EventEmitter(); + /** + * Provides event notifications that fire when the application language has changed. + */ + @Output() onLangChanged: EventEmitter = new EventEmitter(); + /** * @internal */ @@ -458,6 +464,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni private externalParticipantName: string; private prejoinSub: Subscription; private participantNameSub: Subscription; + private langSub: Subscription; private log: ILogger; /** @@ -483,6 +490,7 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni async ngOnDestroy() { if (this.prejoinSub) this.prejoinSub.unsubscribe(); if (this.participantNameSub) this.participantNameSub.unsubscribe(); + if (this.langSub) this.langSub.unsubscribe(); this.deviceSrv.clear(); await this.openviduService.clear(); } @@ -776,5 +784,9 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni this.participantNameSub = this.libService.participantName.subscribe((nickname: string) => { this.externalParticipantName = nickname; }); + + this.langSub = this.translateService.langSelectedObs.subscribe((lang: LangOption) => { + this.onLangChanged.emit(lang); + }); } } 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 bf04425a..3f722531 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 @@ -1,9 +1,9 @@ +import { LangOption } from './lang.model'; /** * @internal */ export interface CaptionModel { - connectionId: string; nickname: string; color: string; @@ -11,10 +11,4 @@ export interface CaptionModel { text: string; } -export interface CaptionsLangOption { - - name: string; - lang: string; - -} - +export interface CaptionsLangOption extends LangOption {} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/lang.model.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/lang.model.ts new file mode 100644 index 00000000..01572c1a --- /dev/null +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/lang.model.ts @@ -0,0 +1,4 @@ +export interface LangOption { + name: string; + lang: string; +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/translate/translate.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/translate/translate.service.ts index 65d248b5..c2b6e49f 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/translate/translate.service.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/translate/translate.service.ts @@ -10,6 +10,8 @@ import * as ja from '../../lang/ja.json'; import * as nl from '../../lang/nl.json'; import * as pt from '../../lang/pt.json'; import { StorageService } from '../storage/storage.service'; +import { BehaviorSubject, Observable, Subject } from 'rxjs'; +import { LangOption } from '../../models/lang.model'; /** * @internal @@ -19,40 +21,46 @@ import { StorageService } from '../storage/storage.service'; }) export class TranslateService { private availableLanguages = { en, es, de, fr, cn, hi, it, ja, nl, pt }; - private langTitles = [ - { name: 'English', ISO: 'en' }, - { name: 'Español', ISO: 'es' }, - { name: 'Deutsch', ISO: 'de' }, - { name: 'Français', ISO: 'fr' }, - { name: '中国', ISO: 'cn' }, - { name: 'हिन्दी', ISO: 'hi' }, - { name: 'Italiano', ISO: 'it' }, - { name: 'やまと', ISO: 'ja' }, - { name: 'Dutch', ISO: 'nl' }, - { name: 'Português', ISO: 'pt' } + private langOptions: LangOption[] = [ + { name: 'English', lang: 'en' }, + { name: 'Español', lang: 'es' }, + { name: 'Deutsch', lang: 'de' }, + { name: 'Français', lang: 'fr' }, + { name: '中国', lang: 'cn' }, + { name: 'हिन्दी', lang: 'hi' }, + { name: 'Italiano', lang: 'it' }, + { name: 'やまと', lang: 'ja' }, + { name: 'Dutch', lang: 'nl' }, + { name: 'Português', lang: 'pt' } ]; private currentLang: any; - langSelected: { name: string; ISO: string }; + langSelected: LangOption | undefined; + langSelectedObs: Observable; + private _langSelected: BehaviorSubject = new BehaviorSubject(undefined); constructor(private storageService: StorageService) { const iso = this.storageService.getLang() || 'en'; - this.langSelected = this.langTitles.find((lang) => lang.ISO === iso) || this.langTitles[0]; - this.currentLang = this.availableLanguages[this.langSelected.ISO]; + this.langSelected = this.langOptions.find((l) => l.lang === iso) || this.langOptions[0]; + this.currentLang = this.availableLanguages[this.langSelected.lang]; + this.langSelectedObs = this._langSelected.asObservable(); + this._langSelected.next(this.langSelected); } setLanguage(lang: string) { - if(this.langTitles.some(l => l.ISO === lang)){ + const matchingLang = this.langOptions.find((l) => l.lang === lang); + if (matchingLang) { this.currentLang = this.availableLanguages[lang]; - this.langSelected = this.langTitles.find((l) => l.ISO === lang); + this.langSelected = matchingLang; + this._langSelected.next(this.langSelected); } } - getLangSelected(): { name: string; ISO: string } { + getLangSelected(): LangOption | undefined { return this.langSelected; } getLanguagesInfo() { - return this.langTitles; + return this.langOptions; } translate(key: string): string { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts index 07da6928..356a12c5 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts @@ -38,6 +38,7 @@ export * from './lib/models/recording.model'; export * from './lib/models/signal.model'; export * from './lib/models/token.model'; export * from './lib/models/video-type.model'; +export * from './lib/models/lang.model'; export * from './lib/openvidu-angular.module'; // Pipes export * from './lib/pipes/participant.pipe'; @@ -51,4 +52,3 @@ export * from './lib/services/openvidu/openvidu.service'; export * from './lib/services/panel/panel.service'; export * from './lib/services/participant/participant.service'; export * from './lib/services/recording/recording.service'; - diff --git a/openvidu-components-angular/src/app/openvidu-call/call.component.html b/openvidu-components-angular/src/app/openvidu-call/call.component.html index eda06de1..7118e137 100644 --- a/openvidu-components-angular/src/app/openvidu-call/call.component.html +++ b/openvidu-components-angular/src/app/openvidu-call/call.component.html @@ -46,6 +46,7 @@ (onActivitiesPanelStopBroadcastingClicked)="onStopBroadcastingClicked()" (onToolbarStopBroadcastingClicked)="onStopBroadcastingClicked()" (onNodeCrashed)="onNodeCrashed()" + (onLangChanged)="onLangChanged($event)" > diff --git a/openvidu-components-angular/src/app/openvidu-call/call.component.ts b/openvidu-components-angular/src/app/openvidu-call/call.component.ts index fd5e8717..27433ce8 100644 --- a/openvidu-components-angular/src/app/openvidu-call/call.component.ts +++ b/openvidu-components-angular/src/app/openvidu-call/call.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { BroadcastingService, BroadcastingStatus, RecordingInfo, RecordingService, RecordingStatus, TokenModel } from 'openvidu-angular'; +import { BroadcastingService, BroadcastingStatus, RecordingInfo, RecordingService, RecordingStatus, TokenModel, LangOption } from 'openvidu-angular'; import { RestService } from '../services/rest.service'; @Component({ @@ -85,6 +85,10 @@ export class CallComponent implements OnInit { console.log('TOOLBAR LEAVE CLICKED'); } + onLangChanged(lang: LangOption) { + console.warn('LANG CHANGED', lang); + } + async onStartBroadcastingClicked(broadcastUrl: string) { console.log('START STREAMING', broadcastUrl); try {