openvidu-components: Emitted an event when language has been changed

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

@@ -3,7 +3,7 @@
 	<mat-icon>expand_more</mat-icon>
 </button>
 <mat-menu #menu="matMenu">
-	<button mat-menu-item *ngFor="let lang of languages" (click)="onLangSelected(lang.ISO)">
+	<button mat-menu-item *ngFor="let lang of languages" (click)="onLangSelected(lang.lang)">
 		<span>{{lang.name}}</span>
 	</button>
 </mat-menu>

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<void>();
+	@Output() onLangSelectorClicked = new EventEmitter<void>();
-	langSelected: { name: string; ISO: string };
+	langSelected: LangOption | undefined;
-	languages: { name: string; ISO: string }[] = [];
+	languages: LangOption[] = [];
 
 	/**
 	 * @ignore

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<void> = new EventEmitter<void>();
 
+	/**
+	 * Provides event notifications that fire when the application language has changed.
+	 */
+	@Output() onLangChanged: EventEmitter<LangOption> = new EventEmitter<LangOption>();
+
 	/**
 	 * @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);
+		});
 	}
 }

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 {
+export interface CaptionsLangOption extends LangOption {}
-
-	name: string;
-	lang: string;
-
-}
-

openvidu-components-angular/projects/openvidu-angular/src/lib/models/lang.model.ts

@@ -0,0 +1,4 @@
+export interface LangOption {
+	name: string;
+	lang: string;
+}

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 = [
+	private langOptions: LangOption[] = [
-		{ name: 'English', ISO: 'en' },
+		{ name: 'English', lang: 'en' },
-		{ name: 'Español', ISO: 'es' },
+		{ name: 'Español', lang: 'es' },
-		{ name: 'Deutsch', ISO: 'de' },
+		{ name: 'Deutsch', lang: 'de' },
-		{ name: 'Français', ISO: 'fr' },
+		{ name: 'Français', lang: 'fr' },
-		{ name: '中国', ISO: 'cn' },
+		{ name: '中国', lang: 'cn' },
-		{ name: 'हिन्दी', ISO: 'hi' },
+		{ name: 'हिन्दी', lang: 'hi' },
-		{ name: 'Italiano', ISO: 'it' },
+		{ name: 'Italiano', lang: 'it' },
-		{ name: 'やまと', ISO: 'ja' },
+		{ name: 'やまと', lang: 'ja' },
-		{ name: 'Dutch', ISO: 'nl' },
+		{ name: 'Dutch', lang: 'nl' },
-		{ name: 'Português', ISO: 'pt' }
+		{ name: 'Português', lang: 'pt' }
 	];
 	private currentLang: any;
-	langSelected: { name: string; ISO: string };
+	langSelected: LangOption | undefined;
+	langSelectedObs: Observable<LangOption | undefined>;
+	private _langSelected: BehaviorSubject<LangOption  | undefined> = new BehaviorSubject<LangOption | undefined>(undefined);
 
 	constructor(private storageService: StorageService) {
 		const iso = this.storageService.getLang() || 'en';
-		this.langSelected = this.langTitles.find((lang) => lang.ISO === iso) || this.langTitles[0];
+		this.langSelected = this.langOptions.find((l) => l.lang === iso) || this.langOptions[0];
-		this.currentLang = this.availableLanguages[this.langSelected.ISO];
+		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 {

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

openvidu-components-angular/src/app/openvidu-call/call.component.html

@@ -46,6 +46,7 @@
 	(onActivitiesPanelStopBroadcastingClicked)="onStopBroadcastingClicked()"
 	(onToolbarStopBroadcastingClicked)="onStopBroadcastingClicked()"
 	(onNodeCrashed)="onNodeCrashed()"
+	(onLangChanged)="onLangChanged($event)"
 >
 	<!-- <div *ovActivitiesPanel>HELLO</div> -->
 

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 {