From ad3ad30e86b2e2b81ed3a42978a20a48974a0c8d Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Fri, 13 May 2022 17:11:04 +0200 Subject: [PATCH] openvidu-components: Added translations --- .../components/material/dialog.component.ts | 2 +- .../background-effects-panel.component.html | 17 ++-- .../background-effects-panel.component.ts | 1 + .../chat-panel/chat-panel.component.html | 12 +-- .../participants-panel.component.html | 4 +- .../pre-join/pre-join.component.css | 88 ++++++++++++------- .../pre-join/pre-join.component.html | 45 +++++++--- .../components/pre-join/pre-join.component.ts | 20 ++++- .../components/session/session.component.ts | 30 +++++-- .../components/stream/stream.component.html | 12 +-- .../components/toolbar/toolbar.component.html | 30 +++---- .../components/toolbar/toolbar.component.ts | 12 +-- .../videoconference.component.html | 2 +- .../videoconference.component.ts | 11 ++- .../directives/api/api.directive.module.ts | 5 +- .../api/videoconference.directive.ts | 62 +++++++++++++ .../openvidu-angular/src/lib/lang/cn.json | 77 ++++++++++++++++ .../openvidu-angular/src/lib/lang/de.json | 77 ++++++++++++++++ .../openvidu-angular/src/lib/lang/en.json | 80 +++++++++++++++-- .../openvidu-angular/src/lib/lang/es.json | 66 ++++++++++++++ .../openvidu-angular/src/lib/lang/fr.json | 77 ++++++++++++++++ .../openvidu-angular/src/lib/lang/hi.json | 77 ++++++++++++++++ .../openvidu-angular/src/lib/lang/it.json | 77 ++++++++++++++++ .../openvidu-angular/src/lib/lang/ja.json | 77 ++++++++++++++++ .../openvidu-angular/src/lib/lang/nl.json | 77 ++++++++++++++++ .../openvidu-angular/src/lib/lang/pt.json | 77 ++++++++++++++++ .../src/lib/models/background-effect.model.ts | 1 - .../src/lib/models/storage.model.ts | 5 +- .../src/lib/openvidu-angular.module.ts | 9 +- .../src/lib/pipes/participant.pipe.ts | 15 +++- .../src/lib/pipes/translate.pipe.ts | 14 +++ .../lib/services/storage/storage.service.ts | 8 ++ .../translate/translate.service.spec.ts | 16 ++++ .../services/translate/translate.service.ts | 67 ++++++++++++++ .../virtual-background.service.ts | 7 +- .../openvidu-angular/tsconfig.lib.json | 1 + 36 files changed, 1146 insertions(+), 112 deletions(-) create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/lang/cn.json create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/lang/de.json create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/lang/es.json create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/lang/fr.json create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/lang/hi.json create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/lang/it.json create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/lang/ja.json create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/lang/nl.json create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/lang/pt.json create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/translate.pipe.ts create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/services/translate/translate.service.spec.ts create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/services/translate/translate.service.ts diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/material/dialog.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/material/dialog.component.ts index 9c6310c5..7054545d 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/material/dialog.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/material/dialog.component.ts @@ -19,7 +19,7 @@ export interface DialogData {

{{ data.title }}

{{ data.description }}
- +
` }) diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html index 88a7b30b..18a21f31 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.html @@ -1,14 +1,14 @@
-

Background effects

-
-

No effects and blurred background

+

{{ 'PANEL.BACKGROUND.BLURRED_SECTION' | translate }}

+ + + + + + + +
@@ -15,6 +31,7 @@ - Nickname + {{ 'PREJOIN.NICKNAME' | translate }}
-

Choose your devices

+

{{ 'PREJOIN.DEVICE_SECTION' | translate }}

@@ -77,11 +94,15 @@ [class.warn-btn]="isVideoMuted" (click)="toggleCam()" > - videocam - videocam_off + videocam + videocam_off - Video devices + {{ 'PREJOIN.VIDEO_DEVICE' | translate }} - mic - mic_off + mic + mic_off - Audio devices + {{ 'PREJOIN.AUDIO_DEVICE' | translate }}
- +
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts index 71895dca..6eb4d5a0 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.ts @@ -20,6 +20,7 @@ import { OpenViduService } from '../../services/openvidu/openvidu.service'; import { PanelService } from '../../services/panel/panel.service'; import { ParticipantService } from '../../services/participant/participant.service'; import { StorageService } from '../../services/storage/storage.service'; +import { TranslateService } from '../../services/translate/translate.service'; import { VirtualBackgroundService } from '../../services/virtual-background/virtual-background.service'; /** @@ -32,6 +33,8 @@ import { VirtualBackgroundService } from '../../services/virtual-background/virt }) export class PreJoinComponent implements OnInit, OnDestroy { @Output() onJoinButtonClicked = new EventEmitter(); + languages: {name: string, ISO: string}[] = []; + langSelected: {name: string, ISO: string}; cameras: CustomDevice[]; microphones: CustomDevice[]; cameraSelected: CustomDevice; @@ -53,11 +56,13 @@ export class PreJoinComponent implements OnInit, OnDestroy { * @ignore */ isMinimal: boolean = false; + showLogo: boolean = true; private log: ILogger; private localParticipantSubscription: Subscription; private screenShareStateSubscription: Subscription; private minimalSub: Subscription; + private displayLogoSub: Subscription; private backgroundEffectsButtonSub: Subscription; @HostListener('window:resize') @@ -75,7 +80,8 @@ export class PreJoinComponent implements OnInit, OnDestroy { protected panelService: PanelService, private libService: OpenViduAngularConfigService, private storageSrv: StorageService, - private backgroundService: VirtualBackgroundService + private backgroundService: VirtualBackgroundService, + private translateService: TranslateService ) { this.log = this.loggerSrv.get('PreJoinComponent'); } @@ -83,6 +89,8 @@ export class PreJoinComponent implements OnInit, OnDestroy { ngOnInit() { this.subscribeToPrejoinDirectives(); this.subscribeToLocalParticipantEvents(); + this.languages = this.translateService.getLanguagesInfo(); + this.langSelected = this.translateService.getLangSelected(); this.windowSize = window.innerWidth; this.hasVideoDevices = this.deviceSrv.hasVideoDeviceAvailable(); @@ -148,6 +156,12 @@ export class PreJoinComponent implements OnInit, OnDestroy { } } + onLangSelected(lang: string){ + this.translateService.setLanguage(lang); + this.storageSrv.setLang(lang); + this.langSelected = this.translateService.getLangSelected(); + } + async toggleCam() { this.videoMuteChanging = true; const publish = this.isVideoMuted; @@ -194,6 +208,10 @@ export class PreJoinComponent implements OnInit, OnDestroy { this.isMinimal = value; // this.cd.markForCheck(); }); + this.displayLogoSub = this.libService.displayLogoObs.subscribe((value: boolean) => { + this.showLogo = value; + // this.cd.markForCheck(); + }); this.backgroundEffectsButtonSub = this.libService.backgroundEffectsButton.subscribe((value: boolean) => { this.showBackgroundEffectsButton = value; // this.cd.markForCheck(); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts index 50804483..45b3f1ac 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts @@ -11,7 +11,15 @@ import { TemplateRef, ViewChild } from '@angular/core'; -import { Subscriber, Session, StreamEvent, StreamPropertyChangedEvent, SessionDisconnectedEvent, ConnectionEvent, RecordingEvent } from 'openvidu-browser'; +import { + Subscriber, + Session, + StreamEvent, + StreamPropertyChangedEvent, + SessionDisconnectedEvent, + ConnectionEvent, + RecordingEvent +} from 'openvidu-browser'; import { VideoType } from '../../models/video-type.model'; import { ILogger } from '../../models/logger.model'; @@ -30,6 +38,7 @@ import { Subscription, skip } from 'rxjs'; import { PanelType } from '../../models/panel.model'; import { PanelService } from '../../services/panel/panel.service'; import { RecordingService } from '../../services/recording/recording.service'; +import { TranslateService } from '../../services/translate/translate.service'; /** * @internal @@ -73,7 +82,8 @@ export class SessionComponent implements OnInit { protected tokenService: TokenService, protected layoutService: LayoutService, protected panelService: PanelService, - private recordingService: RecordingService + private recordingService: RecordingService, + private translateService: TranslateService ) { this.log = this.loggerSrv.get('SessionComponent'); } @@ -98,7 +108,7 @@ export class SessionComponent implements OnInit { }, 0); } - @ViewChild('videoContainer', {static:false, read: ElementRef }) + @ViewChild('videoContainer', { static: false, read: ElementRef }) set videoContainer(container: ElementRef) { setTimeout(() => { if (container && !this.toolbarTemplate) { @@ -110,7 +120,7 @@ export class SessionComponent implements OnInit { } async ngOnInit() { - if(!this.usedInPrejoinPage){ + if (!this.usedInPrejoinPage) { this.session = this.openviduService.getWebcamSession(); this.sessionScreen = this.openviduService.getScreenSession(); this.subscribeToConnectionCreatedAndDestroyed(); @@ -121,7 +131,7 @@ export class SessionComponent implements OnInit { this.chatService.subscribeToChat(); this.subscribeToReconnection(); // if(RecordingEnabled){ - this.subscribeToRecordingEvents(); + this.subscribeToRecordingEvents(); // } this.onSessionCreated.emit(this.session); @@ -166,7 +176,7 @@ export class SessionComponent implements OnInit { this.updateLayoutInterval = setInterval(() => this.layoutService.update(), 50); }); - this.menuSubscription = this.panelService.panelOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean, type?: PanelType }) => { + this.menuSubscription = this.panelService.panelOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: PanelType }) => { if (this.sideMenu) { ev.opened ? this.sideMenu.open() : this.sideMenu.close(); } @@ -196,7 +206,7 @@ export class SessionComponent implements OnInit { } catch (error) { // this._error.emit({ error: error.error, messgae: error.message, code: error.code, status: error.status }); this.log.e('There was an error connecting to the session:', error.code, error.message); - this.actionService.openDialog('There was an error connecting to the session:', error?.error || error?.message); + this.actionService.openDialog(this.translateService.translate('ERRORS.SESSION'), error?.error || error?.message || error); } } @@ -277,7 +287,11 @@ export class SessionComponent implements OnInit { private subscribeToReconnection() { this.session.on('reconnecting', () => { this.log.w('Connection lost: Reconnecting'); - this.actionService.openDialog('Connection Problem', 'Oops! Trying to reconnect to the session ...', false); + this.actionService.openDialog( + this.translateService.translate('ERRRORS.CONNECTION'), + this.translateService.translate('ERRRORS.RECONNECT'), + false + ); }); this.session.on('reconnected', () => { this.log.w('Connection lost: Reconnected'); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html index 215c847e..e0e21694 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html @@ -48,22 +48,22 @@
- @@ -32,8 +32,8 @@ [disabled]="isConnectionLost || !hasVideoDevices || videoMuteChanging" [class.warn-btn]="!isWebcamVideoActive" > - videocam - videocam_off + videocam + videocam_off @@ -45,8 +45,8 @@ [disabled]="isConnectionLost" [class.active-btn]="isScreenShareActive" > - screen_share - screen_share + screen_share + screen_share @@ -58,8 +58,8 @@ [disabled]="isConnectionLost" [class.active-btn]="isFullscreenActive" > - fullscreen_exit - fullscreen + fullscreen_exit + fullscreen @@ -101,7 +101,7 @@ (click)="toggleBackgroundEffects()" > auto_awesome - Background effects + {{ 'TOOLBAR.BACKGROUND' | translate }} @@ -112,7 +112,7 @@