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

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

pull/809/head
Carlos Santos 2023-06-21 11:10:41 +02:00
parent bb72abe9c4
commit 41920219c3
9 changed files with 57 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

12
openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
View File

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

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

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

4
openvidu-components-angular/projects/openvidu-angular/src/lib/models/lang.model.ts Normal file
View File

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

44
openvidu-components-angular/projects/openvidu-angular/src/lib/services/translate/translate.service.ts
View File

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

2
openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
View File

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

1
openvidu-components-angular/src/app/openvidu-call/call.component.html
View File

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

6
openvidu-components-angular/src/app/openvidu-call/call.component.ts
View File

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