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

openvidu-components: Displayed dialog on PRO features

pull/763/head
Carlos Santos 2022-11-16 10:55:36 +01:00
parent 14debd515c
commit 41e9cc95eb
23 changed files with 150 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/dialog.component.ts
View File

@ -1,14 +1,7 @@
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { DialogData } from '../../models/dialog.model';
/**
* @internal
*/
export interface DialogData {
title: string;
description: string;
showActionButtons: boolean;
}
/**
* @internal
*/

34
openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts Normal file
View File

@ -0,0 +1,34 @@
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { DialogData } from '../../models/dialog.model';
/**
* @internal
*/
@Component({
selector: 'ov-pro-feature-template',
template: `
<h1 mat-dialog-title>{{ data.title }}</h1>
<div mat-dialog-content>{{ data.description }}</div>
<div mat-dialog-actions *ngIf="data.showActionButtons">
<button mat-button (click)="seeMore()">
<span>{{'PANEL.SEE_MORE' | translate}}</span>
<mat-icon>open_in_new</mat-icon>
</button>
<button mat-button (click)="close()">{{'PANEL.CLOSE' | translate}}</button>
</div>
`
})
export class ProFeatureDialogTemplateComponent {
constructor(public dialogRef: MatDialogRef<ProFeatureDialogTemplateComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
close() {
this.dialogRef.close();
}
seeMore() {
window.open('https://docs.openvidu.io/en/stable/openvidu-pro/', '_blank')?.focus();
}
}

4
openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/recording-dialog.component.ts
View File

@ -1,5 +1,6 @@
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { RecordingDialogData } from '../../models/dialog.model';
/**
* @internal
@ -25,9 +26,8 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
})
export class RecordingDialogComponent {
src: string;
type: string;
constructor(public dialogRef: MatDialogRef<RecordingDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
constructor(public dialogRef: MatDialogRef<RecordingDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: RecordingDialogData) {
this.src = data.src;
}
close() {

8
openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.css
View File

@ -14,6 +14,14 @@
color: var(--ov-text-color);
}
.pro-feature {
text-align: center;
}
.pro-feture p {
font-size: 14px;
}
::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
background-color: var(--ov-tertiary-color);
}

9
openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.html
View File

File diff suppressed because one or more lines are too long

13
openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.ts
View File

@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { CaptionService } from '../../../services/caption/caption.service';
import { LayoutService } from '../../../services/layout/layout.service';
import { OpenViduService } from '../../../services/openvidu/openvidu.service';
/**
* @internal
@ -16,13 +17,17 @@ export class CaptionsSettingComponent implements OnInit, OnDestroy {
languagesAvailable: { name: string; ISO: string }[] = [];
captionsSubscription: Subscription;
langSelected: string;
isOpenViduPro: boolean = false;
constructor(private layoutService: LayoutService, private captionService: CaptionService) {}
constructor(private layoutService: LayoutService, private captionService: CaptionService, private openviduService: OpenViduService) {}
ngOnInit(): void {
this.subscribeToCaptions();
this.langSelected = this.captionService.getLangSelected().name;
this.languagesAvailable = this.captionService.getCaptionLanguages();
this.isOpenViduPro = this.openviduService.isOpenViduPro();
if (this.isOpenViduPro) {
this.subscribeToCaptions();
this.langSelected = this.captionService.getLangSelected().name;
this.languagesAvailable = this.captionService.getCaptionLanguages();
}
}
ngOnDestroy() {

18
openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
View File

@ -541,14 +541,28 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
* @ignore
*/
toggleBackgroundEffects() {
this.panelService.togglePanel(PanelType.BACKGROUND_EFFECTS);
if (this.openviduService.isOpenViduPro()) {
this.panelService.togglePanel(PanelType.BACKGROUND_EFFECTS);
} else {
this.actionService.openProFeatureDialog(
this.translateService.translate('PANEL.BACKGROUND.TITLE'),
this.translateService.translate('PANEL.PRO_FEATURE')
);
}
}
/**
* @ignore
*/
toggleCaptions() {
this.layoutService.toggleCaptions();
if (this.openviduService.isOpenViduPro()) {
this.layoutService.toggleCaptions();
} else {
this.actionService.openProFeatureDialog(
this.translateService.translate('PANEL.SETTINGS.CAPTIONS'),
this.translateService.translate('PANEL.PRO_FEATURE')
);
}
}
/**

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

@ -280,8 +280,6 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
this.openviduService.setOpenViduEdition(OpenViduEdition.PRO);
} else {
this.openviduService.setOpenViduEdition(OpenViduEdition.CE);
this.libService.backgroundEffectsButton.next(false);
this.libService.captionsButton.next(false);
}
if (tokens.screen) {

2
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/cn.json
View File

@ -57,6 +57,8 @@
},
"PANEL": {
"CLOSE": "关闭",
"SEE_MORE": "查看更多",
"PRO_FEATURE": "此功能属于OpenVidu PRO级别",
"CHAT": {
"TITLE": "聊天",
"YOU": "你",

2
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/de.json
View File

@ -57,6 +57,8 @@
},
"PANEL": {
"CLOSE": "Schließen",
"SEE_MORE": "Mehr sehen",
"PRO_FEATURE": "Diese Funktion ist Teil des OpenVidu PRO-Tiers",
"CHAT": {
"TITLE": "Chat",
"YOU": "Sie",

2
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/en.json
View File

@ -57,6 +57,8 @@
},
"PANEL": {
"CLOSE": "Close",
"SEE_MORE": "See more",
"PRO_FEATURE": "This feature is part of OpenVidu PRO tier",
"CHAT": {
"TITLE": "Chat",
"YOU": "You",

2
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/es.json
View File

@ -57,6 +57,8 @@
},
"PANEL": {
"CLOSE": "Cerrar",
"SEE_MORE": "Ver más",
"PRO_FEATURE": "Esta funcionalidad es parte de OpenVidu PRO",
"CHAT": {
"TITLE": "Chat",
"YOU": "Tú",

2
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/fr.json
View File

@ -57,6 +57,8 @@
},
"PANEL": {
"CLOSE": "Fermer",
"SEE_MORE": "Voir plus",
"PRO_FEATURE": "Cette fonctionnalité fait partie de la gamme OpenVidu PRO",
"CHAT": {
"TITLE": "Chat",
"YOU": "Vous",

2
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/hi.json
View File

@ -57,6 +57,8 @@
},
"PANEL": {
"CLOSE": "बंद करें",
"SEE_MORE": "और देखें",
"PRO_FEATURE": "यह सुविधा OpenVidu PRO टायर का हिस्सा है",
"CHAT": {
"TITLE": "बातचीत",
"YOU": "आप",

2
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/it.json
View File

@ -57,6 +57,8 @@
},
"PANEL": {
"CLOSE": "Chiudi",
"SEE_MORE": "Vedi di più",
"PRO_FEATURE": "Questa funzione fa parte del livello OpenVidu PRO",
"CHAT": {
"TITLE": "Chat",
"YOU": "Tu",

2
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/ja.json
View File

@ -57,6 +57,8 @@
},
"PANEL": {
"CLOSE": "閉じる",
"PRO_FEATURE": "この機能はOpenVidu PROの機能です",
"SEE_MORE": "もっと見る",
"CHAT": {
"TITLE": "チャット",
"YOU": "あなた",

2
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/nl.json
View File

@ -57,6 +57,8 @@
},
"PANEL": {
"CLOSE": "Sluiten",
"SEE_MORE": "Zie meer",
"PRO_FEATURE": "Deze functie is onderdeel van OpenVidu PRO tier",
"CHAT": {
"TITLE": "Chat",
"YOU": "Jij",

2
openvidu-components-angular/projects/openvidu-angular/src/lib/lang/pt.json
View File

@ -57,6 +57,8 @@
},
"PANEL": {
"CLOSE": "Fechar",
"SEE_MORE": "Ver mais",
"PRO_FEATURE": "Esta funcionalidade é parte do OpenVidu PRO tier",
"CHAT": {
"TITLE": "Chat",
"YOU": "Você",

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

@ -0,0 +1,16 @@
/**
* @internal
*/
export interface DialogData {
title: string;
description: string;
showActionButtons: boolean;
}
/**
* @internal
*/
export interface RecordingDialogData {
src: string;
showActionButtons: boolean;
}

2
openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
View File

@ -47,6 +47,7 @@ import { AdminDashboardComponent } from './admin/dashboard/dashboard.component';
import { AdminLoginComponent } from './admin/login/login.component';
import { AvatarProfileComponent } from './components/avatar-profile/avatar-profile.component';
import { CaptionsComponent } from './components/captions/captions.component';
import { ProFeatureDialogTemplateComponent } from './components/dialogs/pro-feature-dialog.component';
import { ActivitiesPanelComponent } from './components/panel/activities-panel/activities-panel.component';
import { RecordingActivityComponent } from './components/panel/activities-panel/recording-activity-panel/recording-activity.component';
import { BackgroundEffectsPanelComponent } from './components/panel/background-effects-panel/background-effects-panel.component';
@ -82,6 +83,7 @@ const privateComponents = [
AudioWaveComponent,
CaptionsComponent,
DialogTemplateComponent,
ProFeatureDialogTemplateComponent,
RecordingDialogComponent,
DeleteDialogComponent,
AvatarProfileComponent,

4
openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/translate.pipe.ts
View File

@ -9,6 +9,8 @@ export class TranslatePipe implements PipeTransform {
constructor(private translateService: TranslateService) {}
transform(str: string): string {
return this.translateService.translate(str);
const translation = this.translateService.translate(str);
return translation.replace('OpenVidu PRO', '<a href="https://docs.openvidu.io/en/stable/openvidu-pro/" target="_blank">OpenVidu PRO</a>');
}
}

28
openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.ts
View File

@ -3,8 +3,9 @@ import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dial
import { MatSnackBar } from '@angular/material/snack-bar';
import { Subscription } from 'rxjs';
import { DeleteDialogComponent } from '../../components/dialogs/delete-recording.component';
import { RecordingDialogComponent } from '../../components/dialogs/recording-dialog.component';
import { DialogTemplateComponent } from '../../components/dialogs/dialog.component';
import { ProFeatureDialogTemplateComponent } from '../../components/dialogs/pro-feature-dialog.component';
import { RecordingDialogComponent } from '../../components/dialogs/recording-dialog.component';
import { INotificationOptions } from '../../models/notification-options.model';
/**
@ -14,7 +15,9 @@ import { INotificationOptions } from '../../models/notification-options.model';
providedIn: 'root'
})
export class ActionService {
private dialogRef: MatDialogRef<DialogTemplateComponent | RecordingDialogComponent | DeleteDialogComponent>;
private dialogRef:
| MatDialogRef<DialogTemplateComponent | RecordingDialogComponent | DeleteDialogComponent | ProFeatureDialogTemplateComponent>
| undefined;
private dialogSubscription: Subscription;
constructor(private snackBar: MatSnackBar, public dialog: MatDialog) {}
@ -47,7 +50,24 @@ export class ActionService {
};
this.dialogRef = this.dialog.open(DialogTemplateComponent, config);
this.dialogSubscription = this.dialogRef.afterClosed().subscribe((result) => {
this.dialogRef = null;
this.dialogRef = undefined;
});
}
}
openProFeatureDialog(titleMessage: string, descriptionMessage: string, allowClose = true) {
try {
this.closeDialog();
} catch (error) {
} finally {
const config: MatDialogConfig = {
minWidth: '250px',
data: { title: titleMessage, description: descriptionMessage, showActionButtons: allowClose },
disableClose: !allowClose
};
this.dialogRef = this.dialog.open(ProFeatureDialogTemplateComponent, config);
this.dialogSubscription = this.dialogRef.afterClosed().subscribe((result) => {
this.dialogRef = undefined;
});
}
}
@ -82,7 +102,7 @@ export class ActionService {
}
closeDialog() {
this.dialogRef.close();
this.dialogRef?.close();
if (this.dialogSubscription) this.dialogSubscription.unsubscribe();
}
}

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

@ -106,6 +106,13 @@ export class OpenViduService {
return this.ovEdition === OpenViduEdition.CE;
}
/**
* @internal
*/
isOpenViduPro(): boolean {
return this.ovEdition === OpenViduEdition.PRO;
}
/**
* @internal
*/