mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Allowed override lang options with a directive
Carlos Santos
parent
7c6ba2b584
commit
0cff58edb7
|
|
@ -3,6 +3,7 @@ import monkeyPatchMediaDevices from './utils/media-devices.js';
|
|||
var MINIMAL;
|
||||
var LANG;
|
||||
var CAPTIONS_LANG;
|
||||
var CUSTOM_LANG_OPTIONS;
|
||||
var CUSTOM_CAPTIONS_LANG_OPTIONS;
|
||||
var PREJOIN;
|
||||
var VIDEO_MUTED;
|
||||
|
|
@ -52,6 +53,8 @@ $(document).ready(() => {
|
|||
MINIMAL = url.searchParams.get('minimal') === null ? false : url.searchParams.get('minimal') === 'true';
|
||||
LANG = url.searchParams.get('lang') || 'en';
|
||||
CAPTIONS_LANG = url.searchParams.get('captionsLang') || 'en-US';
|
||||
CUSTOM_LANG_OPTIONS =
|
||||
url.searchParams.get('langOptions') === null ? false : url.searchParams.get('langOptions') === 'true';
|
||||
CUSTOM_CAPTIONS_LANG_OPTIONS =
|
||||
url.searchParams.get('captionsLangOptions') === null ? false : url.searchParams.get('captionsLangOptions') === 'true';
|
||||
PARTICIPANT_NAME = url.searchParams.get('participantName') || 'TEST_USER';
|
||||
|
|
@ -216,6 +219,12 @@ async function joinSession(sessionName, participantName) {
|
|||
webComponent.minimal = MINIMAL;
|
||||
webComponent.lang = LANG;
|
||||
webComponent.captionsLang = CAPTIONS_LANG;
|
||||
if (CUSTOM_LANG_OPTIONS) {
|
||||
webComponent.langOptions = [
|
||||
{ name: 'Esp', lang: 'es' },
|
||||
{ name: 'Eng', lang: 'en' }
|
||||
];
|
||||
}
|
||||
if (CUSTOM_CAPTIONS_LANG_OPTIONS) {
|
||||
webComponent.captionsLangOptions = [
|
||||
{ name: 'Esp', lang: 'es-ES' },
|
||||
|
|
|
|||
|
|
@ -109,6 +109,52 @@ describe('Testing API Directives', () => {
|
|||
expect(await element.getText()).equal('Unirme ahora');
|
||||
});
|
||||
|
||||
it('should override the LANG OPTIONS', async () => {
|
||||
await browser.get(`${url}&prejoin=true&langOptions=true`);
|
||||
|
||||
|
||||
await utils.checkPrejoinIsPresent();
|
||||
await utils.waitForElement('.lang-button');
|
||||
await utils.clickOn('.lang-button');
|
||||
await browser.sleep(500);
|
||||
expect(await utils.getNumberOfElements('.lang-menu-opt')).equals(2);
|
||||
|
||||
await utils.clickOn('.lang-menu-opt');
|
||||
await browser.sleep(500);
|
||||
|
||||
await utils.clickOn('#join-button');
|
||||
|
||||
await utils.checkSessionIsPresent();
|
||||
|
||||
// Checking if toolbar is present
|
||||
await utils.checkToolbarIsPresent();
|
||||
|
||||
// Open more options menu
|
||||
await utils.clickOn('#more-options-btn');
|
||||
|
||||
await browser.sleep(500);
|
||||
|
||||
// Checking if button panel is present
|
||||
await utils.waitForElement('.mat-menu-content');
|
||||
expect(await utils.isPresent('.mat-menu-content')).to.be.true;
|
||||
|
||||
// Checking if captions button is present
|
||||
await utils.waitForElement('#toolbar-settings-btn');
|
||||
expect(await utils.isPresent('#toolbar-settings-btn')).to.be.true;
|
||||
await utils.clickOn('#toolbar-settings-btn');
|
||||
|
||||
await browser.sleep(500);
|
||||
|
||||
await utils.waitForElement('#settings-container');
|
||||
await utils.waitForElement('.lang-button');
|
||||
await utils.clickOn('.lang-button');
|
||||
|
||||
await browser.sleep(500);
|
||||
|
||||
expect(await utils.getNumberOfElements('.lang-menu-opt')).equals(2);
|
||||
|
||||
});
|
||||
|
||||
it('should show the PREJOIN page', async () => {
|
||||
await browser.get(`${url}&prejoin=true`);
|
||||
|
||||
|
|
|
|||
|
|
@ -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.lang)">
|
||||
<button mat-menu-item *ngFor="let lang of languages" (click)="onLangSelected(lang.lang)" class="lang-menu-opt">
|
||||
<span>{{lang.name}}</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
import { AfterViewInit, Component, OnInit, Output, ViewChild, EventEmitter } from '@angular/core';
|
||||
import { AfterViewInit, Component, OnInit, Output, ViewChild, EventEmitter, OnDestroy } 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';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
/**
|
||||
* @internal
|
||||
|
|
@ -13,11 +14,13 @@ import { LangOption } from '../../../models/lang.model';
|
|||
templateUrl: './lang-selector.component.html',
|
||||
styleUrls: ['./lang-selector.component.css']
|
||||
})
|
||||
export class LangSelectorComponent implements OnInit, AfterViewInit {
|
||||
export class LangSelectorComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||
@Output() onLangSelectorClicked = new EventEmitter<void>();
|
||||
langSelected: LangOption | undefined;
|
||||
languages: LangOption[] = [];
|
||||
|
||||
private langSub: Subscription;
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
|
|
@ -31,8 +34,12 @@ export class LangSelectorComponent implements OnInit, AfterViewInit {
|
|||
constructor(private translateService: TranslateService, private storageSrv: StorageService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.subscribeToLangSelected();
|
||||
this.languages = this.translateService.getLanguagesInfo();
|
||||
this.langSelected = this.translateService.getLangSelected();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.langSub?.unsubscribe();
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
|
|
@ -47,6 +54,11 @@ export class LangSelectorComponent implements OnInit, AfterViewInit {
|
|||
onLangSelected(lang: string) {
|
||||
this.translateService.setLanguage(lang);
|
||||
this.storageSrv.setLang(lang);
|
||||
this.langSelected = this.translateService.getLangSelected();
|
||||
}
|
||||
|
||||
subscribeToLangSelected() {
|
||||
this.langSub = this.translateService.langSelectedObs.subscribe((lang) => {
|
||||
this.langSelected = lang;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ import { LangOption } from '../../models/lang.model';
|
|||
* | :----------------------------: | :-------: | :---------------------------------------------: |
|
||||
* | **minimal** | `boolean` | {@link MinimalDirective} |
|
||||
* | **lang** | `string` | {@link LangDirective} |
|
||||
* | **langOptions** | `LangOption []` | {@link LangOptionsDirective} |
|
||||
* | **captionsLang** | `string` | {@link CaptionsLangDirective} |
|
||||
* | **captionsLangOptions** | `CaptionsLangOption []` | {@link CaptionsLangOptionsDirective} |
|
||||
* | **prejoin** | `boolean` | {@link PrejoinDirective} |
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ import {
|
|||
AudioMutedDirective,
|
||||
CaptionsLangDirective,
|
||||
CaptionsLangOptionsDirective,
|
||||
LangOptionsDirective,
|
||||
LangDirective,
|
||||
MinimalDirective,
|
||||
ParticipantNameDirective,
|
||||
|
|
@ -38,6 +39,7 @@ import {
|
|||
declarations: [
|
||||
MinimalDirective,
|
||||
LangDirective,
|
||||
LangOptionsDirective,
|
||||
CaptionsLangOptionsDirective,
|
||||
CaptionsLangDirective,
|
||||
PrejoinDirective,
|
||||
|
|
@ -73,6 +75,7 @@ import {
|
|||
exports: [
|
||||
MinimalDirective,
|
||||
LangDirective,
|
||||
LangOptionsDirective,
|
||||
CaptionsLangOptionsDirective,
|
||||
CaptionsLangDirective,
|
||||
PrejoinDirective,
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { CaptionsLangOption } from '../../models/caption.model';
|
|||
import { CaptionService } from '../../services/caption/caption.service';
|
||||
import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
|
||||
import { TranslateService } from '../../services/translate/translate.service';
|
||||
import { LangOption } from '../../models/lang.model';
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -116,6 +117,72 @@ export class LangDirective implements OnDestroy {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The **langOptions** directive allows to set the application language options.
|
||||
* It will override the application languages provided by default.
|
||||
* This propety is an array of objects which must comply with the {@link LangOption} interface.
|
||||
*
|
||||
* It is only available for {@link VideoconferenceComponent}.
|
||||
*
|
||||
* Default: ```
|
||||
* [
|
||||
* { 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' }
|
||||
* ]```
|
||||
*
|
||||
* Note: If you want to add a new language, you must add a new object with the name and the language code (e.g. `{ name: 'Custom', lang: 'cus' }`)
|
||||
* and then add the language file in the `assets/lang` folder with the name `cus.json`.
|
||||
*
|
||||
*
|
||||
* @example
|
||||
* <ov-videoconference [langOptions]="[{name:'Spanish', lang: 'es'}]"></ov-videoconference>
|
||||
*/
|
||||
@Directive({
|
||||
selector: 'ov-videoconference[langOptions]'
|
||||
})
|
||||
export class LangOptionsDirective implements OnDestroy {
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
@Input() set langOptions(value: LangOption []) {
|
||||
this.update(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
constructor(public elementRef: ElementRef, private translateService: TranslateService) {}
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
ngOnDestroy(): void {
|
||||
this.clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
clear() {
|
||||
this.update(undefined);
|
||||
}
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
update(value: LangOption [] | undefined) {
|
||||
this.translateService.setLanguageOptions(value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The **captionsLang** directive allows specify the deafult language that OpenVidu will try to recognise.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ 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 { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { LangOption } from '../../models/lang.model';
|
||||
|
||||
/**
|
||||
|
|
@ -36,20 +36,24 @@ export class TranslateService {
|
|||
private currentLang: any;
|
||||
langSelected: LangOption | undefined;
|
||||
langSelectedObs: Observable<LangOption | undefined>;
|
||||
private _langSelected: BehaviorSubject<LangOption | undefined> = new BehaviorSubject<LangOption | undefined>(undefined);
|
||||
private _langSelected: BehaviorSubject<LangOption | undefined> = new BehaviorSubject<LangOption | undefined>(undefined);
|
||||
|
||||
constructor(private storageService: StorageService) {
|
||||
const iso = this.storageService.getLang() || 'en';
|
||||
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);
|
||||
this.updateLangSelected();
|
||||
}
|
||||
|
||||
setLanguage(lang: string) {
|
||||
setLanguageOptions(options: LangOption[] | undefined) {
|
||||
if (options && options.length > 0) {
|
||||
this.langOptions = options;
|
||||
this.updateLangSelected();
|
||||
}
|
||||
}
|
||||
|
||||
async setLanguage(lang: string) {
|
||||
const matchingLang = this.langOptions.find((l) => l.lang === lang);
|
||||
if (matchingLang) {
|
||||
this.currentLang = this.availableLanguages[lang];
|
||||
this.currentLang = await this.getLangData(lang);
|
||||
this.langSelected = matchingLang;
|
||||
this._langSelected.next(this.langSelected);
|
||||
}
|
||||
|
|
@ -75,4 +79,32 @@ export class TranslateService {
|
|||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
private async updateLangSelected() {
|
||||
const storageLang = this.storageService.getLang();
|
||||
const langOpt = this.langOptions.find((opt) => opt.lang === storageLang);
|
||||
if (storageLang && langOpt) {
|
||||
this.langSelected = langOpt;
|
||||
} else {
|
||||
this.langSelected = this.langOptions[0];
|
||||
}
|
||||
this.currentLang = await this.getLangData(this.langSelected.lang);
|
||||
this._langSelected.next(this.langSelected);
|
||||
|
||||
}
|
||||
|
||||
private async getLangData(lang: string): Promise<void> {
|
||||
if (!(lang in this.availableLanguages)) {
|
||||
// Language not found in default languages options
|
||||
// Try to find it in the assets/lang directory
|
||||
try {
|
||||
const response = await fetch(`assets/lang/${lang}.json`);
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error(`Not found ${lang}.json in assets/lang`, error);
|
||||
}
|
||||
} else {
|
||||
return this.availableLanguages[lang];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<ov-videoconference
|
||||
[tokens]="tokens"
|
||||
[minimal]="false"
|
||||
[lang]="'en'"
|
||||
[lang]="'es'"
|
||||
[langOptions]="[{ name: 'Spanish', lang: 'es' },{ name: 'custom', lang: 'cus' }]"
|
||||
[captionsLang]=""
|
||||
[captionsLangOptions]="[{ name: 'Spanish', ISO: 'es-ES' },{ name: 'English', ISO: 'en-US' }]"
|
||||
[captionsLangOptions]="[{ name: 'Spanish', lang: 'es-ES' },{ name: 'English', lang: 'en-US' }]"
|
||||
[prejoin]="true"
|
||||
[participantName]="'Participant'"
|
||||
[videoMuted]="false"
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
[tokens]="_tokens"
|
||||
[minimal]="_minimal"
|
||||
[lang]="_lang"
|
||||
[langOptions]="_langOptions"
|
||||
[captionsLang]="_captionsLang"
|
||||
[captionsLangOptions]="_captionsLangOptions"
|
||||
[prejoin]="_prejoin"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import { OpenViduService, ParticipantAbstractModel, RecordingInfo, TokenModel } from 'openvidu-angular';
|
||||
import { OpenViduService, ParticipantAbstractModel, RecordingInfo, TokenModel, LangOption } from 'openvidu-angular';
|
||||
import { Session } from 'openvidu-browser';
|
||||
import { CaptionsLangOption } from '../../../projects/openvidu-angular/src/lib/models/caption.model';
|
||||
|
||||
|
|
@ -34,6 +34,11 @@ export class OpenviduWebComponentComponent implements OnInit {
|
|||
*/
|
||||
_captionsLang: string = '';
|
||||
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
_langOptions: LangOption;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
|
|
@ -181,6 +186,39 @@ export class OpenviduWebComponentComponent implements OnInit {
|
|||
@Input() set captionsLang(value: string) {
|
||||
this._captionsLang = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* The **langOptions** directive allows to set the application language options.
|
||||
* It will override the application languages provided by default.
|
||||
* This propety is an array of objects which must comply with the {@link LangOption} interface.
|
||||
*
|
||||
* It is only available for {@link VideoconferenceComponent}.
|
||||
*
|
||||
* Default: ```
|
||||
* [
|
||||
* { 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' }
|
||||
* ]```
|
||||
*
|
||||
* Note: If you want to add a new language, you must add a new object with the name and the language code (e.g. `{ name: 'Custom', lang: 'cus' }`)
|
||||
* and then add the language file in the `assets/lang` folder with the name `cus.json`.
|
||||
*
|
||||
*
|
||||
* @example
|
||||
* <openvidu-webcomponent captions-lang-options="[{name:'Spanish', lang: 'es-ES'}]"></openvidu-webcomponent>
|
||||
*/
|
||||
@Input() set langOptions(value: string | LangOption[]) {
|
||||
this._langOptions = this.castToArray(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* The captionsLangOptions attribute sets the language options for the captions.
|
||||
* It will override the languages provided by default.
|
||||
|
|
@ -188,19 +226,19 @@ export class OpenviduWebComponentComponent implements OnInit {
|
|||
*
|
||||
* Default: ```
|
||||
* [
|
||||
* { name: 'English', ISO: 'en-US' },
|
||||
* { name: 'Español', ISO: 'es-ES' },
|
||||
* { name: 'Deutsch', ISO: 'de-DE' },
|
||||
* { name: 'Français', ISO: 'fr-FR' },
|
||||
* { name: '中国', ISO: 'zh-CN' },
|
||||
* { name: 'हिन्दी', ISO: 'hi-IN' },
|
||||
* { name: 'Italiano', ISO: 'it-IT' },
|
||||
* { name: 'やまと', ISO: 'jp-JP' },
|
||||
* { name: 'Português', ISO: 'pt-PT' }
|
||||
* { name: 'English', lang: 'en-US' },
|
||||
* { name: 'Español', lang: 'es-ES' },
|
||||
* { name: 'Deutsch', lang: 'de-DE' },
|
||||
* { name: 'Français', lang: 'fr-FR' },
|
||||
* { name: '中国', lang: 'zh-CN' },
|
||||
* { name: 'हिन्दी', lang: 'hi-IN' },
|
||||
* { name: 'Italiano', lang: 'it-IT' },
|
||||
* { name: 'やまと', lang: 'jp-JP' },
|
||||
* { name: 'Português', lang: 'pt-PT' }
|
||||
* ]```
|
||||
*
|
||||
* @example
|
||||
* <openvidu-webcomponent captions-lang-options="[{name:'Spanish', ISO: 'es-ES'}]"></openvidu-webcomponent>
|
||||
* <openvidu-webcomponent captions-lang-options="[{name:'Spanish', lang: 'es-ES'}]"></openvidu-webcomponent>
|
||||
*/
|
||||
@Input() set captionsLangOptions(value: string | CaptionsLangOption[]) {
|
||||
this._captionsLangOptions = this.castToArray(value);
|
||||
|
|
@ -888,7 +926,7 @@ export class OpenviduWebComponentComponent implements OnInit {
|
|||
return value;
|
||||
} else {
|
||||
throw new Error(
|
||||
'Parameter has not a valid type. The parameters must to be string or CaptionsLangOptions [] [{name:string, ISO: string}].'
|
||||
'Parameter has not a valid type. The parameters must to be string or CaptionsLangOptions [] [{name:string, lang: string}].'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue