mirror of https://github.com/OpenVidu/openvidu.git
openvidu-components: Displayed dialog on PRO features
Carlos Santos
parent
14debd515c
commit
41e9cc95eb
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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,14 +17,18 @@ 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.isOpenViduPro = this.openviduService.isOpenViduPro();
|
||||
if (this.isOpenViduPro) {
|
||||
this.subscribeToCaptions();
|
||||
this.langSelected = this.captionService.getLangSelected().name;
|
||||
this.languagesAvailable = this.captionService.getCaptionLanguages();
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.captionsSubscription) this.captionsSubscription.unsubscribe();
|
||||
|
|
|
|||
|
|
@ -541,14 +541,28 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
* @ignore
|
||||
*/
|
||||
toggleBackgroundEffects() {
|
||||
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() {
|
||||
if (this.openviduService.isOpenViduPro()) {
|
||||
this.layoutService.toggleCaptions();
|
||||
} else {
|
||||
this.actionService.openProFeatureDialog(
|
||||
this.translateService.translate('PANEL.SETTINGS.CAPTIONS'),
|
||||
this.translateService.translate('PANEL.PRO_FEATURE')
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -57,6 +57,8 @@
|
|||
},
|
||||
"PANEL": {
|
||||
"CLOSE": "关闭",
|
||||
"SEE_MORE": "查看更多",
|
||||
"PRO_FEATURE": "此功能属于OpenVidu PRO级别",
|
||||
"CHAT": {
|
||||
"TITLE": "聊天",
|
||||
"YOU": "你",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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ú",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -57,6 +57,8 @@
|
|||
},
|
||||
"PANEL": {
|
||||
"CLOSE": "बंद करें",
|
||||
"SEE_MORE": "और देखें",
|
||||
"PRO_FEATURE": "यह सुविधा OpenVidu PRO टायर का हिस्सा है",
|
||||
"CHAT": {
|
||||
"TITLE": "बातचीत",
|
||||
"YOU": "आप",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -57,6 +57,8 @@
|
|||
},
|
||||
"PANEL": {
|
||||
"CLOSE": "閉じる",
|
||||
"PRO_FEATURE": "この機能はOpenVidu PROの機能です",
|
||||
"SEE_MORE": "もっと見る",
|
||||
"CHAT": {
|
||||
"TITLE": "チャット",
|
||||
"YOU": "あなた",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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ê",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
/**
|
||||
* @internal
|
||||
*/
|
||||
export interface DialogData {
|
||||
title: string;
|
||||
description: string;
|
||||
showActionButtons: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
export interface RecordingDialogData {
|
||||
src: string;
|
||||
showActionButtons: boolean;
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,6 +106,13 @@ export class OpenViduService {
|
|||
return this.ovEdition === OpenViduEdition.CE;
|
||||
}
|
||||
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
isOpenViduPro(): boolean {
|
||||
return this.ovEdition === OpenViduEdition.PRO;
|
||||
}
|
||||
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue