openvidu-components: Displayed dialog on PRO features

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

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

openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts

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

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

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

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

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

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

@@ -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.isOpenViduPro = this.openviduService.isOpenViduPro();
-		this.langSelected = this.captionService.getLangSelected().name;
+		if (this.isOpenViduPro) {
-		this.languagesAvailable = this.captionService.getCaptionLanguages();
+			this.subscribeToCaptions();
+			this.langSelected = this.captionService.getLangSelected().name;
+			this.languagesAvailable = this.captionService.getCaptionLanguages();
+		}
 	}
 
 	ngOnDestroy() {

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

@@ -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')
+			);
+		}
 	}
 
 	/**

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

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

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

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

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

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

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

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

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

@@ -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ú",

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

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

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

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

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

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

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

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

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

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

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

@@ -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ê",

openvidu-components-angular/projects/openvidu-angular/src/lib/models/dialog.model.ts

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

openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts

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

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

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

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

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

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

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