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.html

@@ -1,5 +1,5 @@
 <div>
-	<mat-list>
+	<mat-list *ngIf="isOpenViduPro">
 		<div>
 			<mat-list-item>
 				<div mat-line>{{ 'PANEL.SETTINGS.CAPTIONS' | translate }}</div>
@@ -28,4 +28,11 @@
 			<span class="section-description">{{ 'PANEL.SETTINGS.CAPTIONS_LANG_TEXT' | translate }}</span>
 		</div>
 	</mat-list>
+
+	<div *ngIf="!isOpenViduPro" class="pro-feature">
+		<img
+			src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAAEOCAMAAABPbwmXAAAC/VBMVEUAAADr6+s1Nzzo6Ojr1dHr7Ozq5eTr6+vq6+vo6OhAOkDo6Ojr6+vr6+vr6+vs7Ozs7Ozr6+vr7OzETk7q6urr6+vs7Ozr6+zr6+vs7OzCTEzs7Ozr6+vr6+vWbWXr6+vq6ur8+vslMTcvP0br7Ozq6urs7Ozs7Ozt7e3r6+vs7Ozs7OwsOUDr6+vr6+vs7OzCTEzs7Ozs7OzSUlLs7Ozr6+vr6+vs6+s1PkU3R0/t7e3s7Ozs7OyztLXYVFTs7OwzQkkyP0bhdW8zQkrggXM4SVHs7OyXTlHt7u4yP0bKT0/mkX/wu7jLhHU3R083R08zQ0vrlIE4SFHc3Nzb29vIUFA1REzJYF/slIE1RU3rlIHDTU3IT084Rk1IUFSum5c3R0/d3t7rk4DMVlY2Q0uDTVHb29s3R0/CTEzWVlXXWVjX2Njjy8vrlIHslYLmk4PokH7KzM3slIG+wMCSmJvV1tdJVVsmMjinp6icoaTc3Nzojn17fYDv8PDx8fEmMjjc3NzCxMXZ2dmmqKmhb2bYn597VlS5vb/linrrlIHEfHNLVlxdZGfJysyWZWGvsbOlRUfPxMWymZrGgnP+/v5jcHeVR0mudmrcsbHSjo7o6Oj+4drEgXLXVFTr6+vCTEw3R0/b29vslIHs7e3///8lMjjXU1M1REympqbglZU1Rk7HTk7CSkraVFTZWVjt7u7p6OjTU1POUVLk5OQ0Q0u9S0vaqanm5uYyQUnETk7f39/w8PDd3d3GUlPi4eHMzM2wSkq/UFG3T1DV1dXnhnefR0ibnZ7pkn/75eM/SVCoTU+3SkrFxcbWinuURkgwPkW6vL2PkZLfjn3caGdKSE+pR0jPfX3aYV+HioxuTVHS0tL0zMt9Qkb19vapq6xbSk82Njv88PCVl5h0en2jpKSioaK0fHJgaW1QOj7429rY2dpEOT28gnjKbWxxQETpp6Tgu7yXbGV5XlvRWlpiPUHn2dnVnZ3Tk49ZXF/gfX2udWrjiYmHYlu3kIyya2wPP+XLAAAAnXRSTlMA/QUEB/kKHxgOCxT1L91mX+zBa0o96LdYnfqQKSQYQzj9LhTxgGzlr04z0ifu2M+vo5Y4qot3Ux784Mtx/fHGbDr+vy+xhv25XlBM/f3n1IptMNi+vJr+993T05F8SST06sJ9UP727ujix2b96qGU3ZldXFQt/vfSp6GAbPnv46+efHv94+HJuq6l69/ZxIx5Ovrb2p2c1sm4spxqGmVgbgAAGPJJREFUeNrswYEAAAAAgKD9qRepAgAAAAAAAAAAAAAAAAAAmF3zjk0iDMP4h4C1trYVoaXSYlGqdbXWVW2r1VpnxbhHXXHExL333ivuFY1cLRwajSJ6USIC2jqoA2NAxT1iorFq3Ns//I4DDnoDSUDj+P1hG2xiv+fe93mf7z3/85///Oc///nP3wyvYng4+HeBx68UllBPJBRHZyc3a9w0TpAlEIJ/iwjX8SXx+PFTo2IbRvI5iBv9sLFc8C+RQRyfAX3RqOR/qmHq8hEIsxxFRXMqgb+EWtM2TJ48eepQwEyNSIQFXRGk93TwN1B52jq+DEXRe5mTmQWp15BVDmMRpFcN8OdTawMfdSHL2gQYSIj1Jwdk2Fjwp1N59kmUJJOp4MMyERY4UA6cUUsqgj+beRz00f47aNdXstL9z1C0E8N5KqX+hBx/vqG2WIeij+xd0Ve5smeOO7BfxAy5I41VDrPRYDCbzRiGNQs00/3+wFKhMlkcaihHLpTji6zUDuVAO/EAHeE5CBscjjuUNA3keBHZcYKU5CQe/IV+G5U7t2vXtyYgmC1zy4GW2mGzoFvD6J9iHPJzxPHAz5OM6M8UYcPmbGvfAvwCIgAQVuH6FEbbNu1majSahZ0JaVaiuBx30Fff0NJcXA5ZEqCD27T8MNFjEL0OKYcgEDOVcLCi27fLTj1d2xOEHK44JzojKjbe+3k3WIiLgevRwDllcTlkX6CVeuRgCA/xvjHU7DJPI1YuuqdFgJ8nMb0Oduby+acXZgyuAEJNbTmCt3SdRK/i6K5xMaAWUR2kHI8IOeoxPEjEC6yIxOyrR2pAo4WbuG3G58f37z9tH3r3EPOR+vEpcnlMmKefay7UPL/1EKrxYEVNj3egdx6hpXdQGfwCvYPhOB3Ky2E0GogKwRBvMsMCmWsNQOebl423e00LvXdwxXxBIuDGREamVgEu2s7U3LJ9fXvru3XZYGKy6FCoQyla+swlR1NAT3PfFGrAdHCa6I24Lj7+EZsAGIiWxCRV4npZeoPKDVqEx3PKTpmTQcipKKnDEeNfOyF8oac6Zmq+q1QKhUr1pC+RSe+haKnjFbrf/uiOtiuzdYBoXyPluDyEUh4NYbMxzSZOw9SUDuIqEVxn37ZoC/0immM+Ze4UyuxG/vP8uniRpCANM4CL3Q80T1S2NwrbsjfO6hgyCreLrs/QZ3fQR11LUbQxY+fRbzsM5eWIFDHF/ChXRKma1jQ5I2FIA8KhOZghpwr4BTRGkHg49ZJi64vCAYG04MlbG6wOm/XNsiH4YJl172Sk952lU0SACw9zeTlgJdIjkiMkZ4b1Sm8uTAwHwrT6kkTwK6gXk8VPj8lORVJ4nooZ/sSqUqm+K6xvd0jx4pi9dNq0pcNkKIEsPiLAhQdVDo7Yf7epDVcxNVSuTk58bXFSaG99VPuLIt2thwKXw2ZRvFjFw/vXOe2HLk49KZPJFsTVZQnYSXLacI43i28UiwZ+J3UZxlF7mitK0DhaBGdf6GneEMlpnlVfSJ4y32qBclgUX60TvKPq0GlTx06dzpqEqlRl2goafF0lm8HZBV61oUd8kUftmg5CTsWkZiKQ4NWavNVfbXh1vLCqeoDASMxkKo5yZ0tmdVKIHtMhFLBFwV89h8OT82oLmZtxSv83X6EcUJLxeSAwKrmPUz6OmRFfJP6852qZms6DloAgk5ieVo9XVx4ZJ6ZXWlptkurJtSd4u/QPoDiYFx56MoSRxDPcGDwVVcahHdjDkkAw4dZNg64piMWjUA1aMUZrz6osbx+uWD18Qn7glZfD2iokTdmvgLpTOoZla+8IEEQqZbHeKruMsWuVuSqYwTr2GdGkcuCprhNLq/hfeIQLPD5Kb8mQ4Eb12rAIq3ZKgT1ehxKUpSNaKx3KvQ7YKBatUtl6zKAuUt/TSvPy8vPz86SMxZdCfaJkq/hdeCTWQQjIDQnlijxMCIJINAcRiCpywyR8JKtZts8zyuujJIDlkUt8d2T0CEKGoXn5PeZOGF4wvn9/i1WxZQ1TH6XTHQFDKGTRGpeQ71Ljqo4hzUF6hYFgkVA3C8ms4hyv+OKqvne/NBmjVRJoc3O1xcWH4HcnlLkTJk4kZFC5sVkVCsVcKVPmpx6B5mypldguxNgpxjQHmcMLVsSIg62SDpxk8KGnegndZbTWriQ48k5rv/jedEh59ARsHAoWi8VmtU7ksS88yNubkWZIRIWx1RamZ3xtBRk1FgQFYpfpWuqLIuFwqeKlBqwKJcHefu+0px++P6osOZqrooKLYbXZ5rI9X/KJkoHU78Ij3OXz6qtn1LR6YJhzmdRrevDur/Cu5jaRWEEVjxqtlS60eHmUKC9qNHdNJQ4LrRxQD4V1Uh5jcPBfHQ3rsb3TLMMQJnQ6zGxYFKQLXTJci8oznHE4B8kUhXPJ2iC0eKe043oUl3ScCfWAxcGMZRKNn8aUPzpmNJpp5IgUsa0HDDqEDQ5staCQIKxdFamTnZBYVwBNhHRRqAbRKsVHCF1Ob+8+U/Ow41kVHf3HFwyH7mqZCChk6LwhXjWRavhZeCQjLloZKM1CGdNBQgJ/xdhMPj7s3BrnjbEr92rte3E5TIQc77ZX7rxQs6I/nRgTYfDg8QaN7jewEYU+N7wZx3gqTgbbWxo4i1hpDIIG+SqkqtCVvvq4TANytJiYLf1MXUDbdkPyJxSMp0gyadWaufl5Aw8eLKThoDevDyNMxLBceNRFGHt1RINgEZECazdTIqmKZLk3HIOUbhzaIyUOKEZx8VFHNQAqV4BawRg6ZUoPgik9httsMHh8tahWXbxU6I+Dxw8j0PkwumedzbIsUV8+xSoHNJ7g6SGOk9cGILuxu1WqtVa60WqVp99pTSUmRy40Bjqk+euHF0zaUjBhzZVj/uX4qHZGJzovTWbbO2Ps1QGdNIhUFEXARuV6bFRLCEFQUmwyOc5aoEVMAbQ0aCGVSiuCjacL/cvxifj/YHRW0IwtwnFO6f288A4V0jHO0aqFfzgxFeNi4BRQcwXsHjeD4HEvXfIjxw1SDv9uyCOvf2p8+aNWEy9qqEhAyBjhTqLufjF5ssZqyjhrMbKFW5g+hYXXr/iVQwebhT6WplO7uL53/tTpL58xtyorumrAsPJTKQaEilrrjyq9gfcWMolOlFJ+3C2HdCAsDr/N8hJD9AajQU9X8FzKnE13H1eQg9xvpbttTluSqjPqb7fS+zqJPAmEisEtbx09RNSG1kGMWy2ZvQrm5jG0aZPqhf452O/D4cOw6g/TIOBRF6XywxB1WvTQeVFlZw7HdggDtefDTxD9ZT3lNhwSenbbt+9W8SGH3ctN99pVJOOH96BdH3epDjl26Vh1Cie8MH08zsTyalSWO/9iRLWNG3ceP755DfxkBPwIQqTUkDtphb579u058KAEKkHiKg9SkdVThrqGysiaFdyWUwi5fuW6v/pghvGnr59zfnf9tOcj0zif6ugAQgQsjgN79hy41vHIIY8WZHmQTJowZSgPqkdOlkaFIeOSO9D8IObaflyIwvjUaCkti1VbSiUu67bYpbtucQnW5QFxS1zjfk9IxAsh4kG8+gM6ViZMMoymTRsrtVTpg6J92Y2QTXiSJptsPIhn35kz06/mDKWdnfk9bPdyXua33/f7fuf7zpxcRs+59+9FYYwPB5pDhLUQHARvIWF0KQUFIb30NwZcunNtSQUOPLISz5CMVA55yaQyKVWRXz93B0NTVBld5MLegMUYtlEGOpJJSeru3ZRQoKpoOLf/zRMWqysQtRTxitgg+YfcvMvkUn3fXM1jh8P2AlS0aWRwviVKyo9gq+x2kivJ7mKxW+r6sqnno6KQIFFWb91w7OPDqH2IPysTYKzeECDvfo5XS2to5dIQ2JMOS5R0apuH8dvbpK4y5K7eT5vy4NFfZW8vI2bVTjzSnx50lMGziyO50Z1joWXl5Syb0Y5tDjFKeprQgSCh0tvb+7ZrB25zbQHSkTLZGJ5Zws2bRNsR4Un1OlLcETRUoQP46Ia0gc/Th7kJUTuRKEfHPRYHpjWMIVMQv7d9nDDOmrriD7DbhGX7fqdDSnYn6XfrZyypQS3rpyNVMHEj54I+2hKc47KsMbjKxNyOWg9S+jt0fnZMOxu1D6ilKdM2QSWC1gycoF3LjOx3yJKRDu0Xp0/YqqXxRxobfeY9tQrM5uoCNt5EpgN1+IiRDrlb+2b9nqideIQmzIie76KA8IW5uoDjIHHzcDPj8Tu6dYJOKlH7gOJhti0WmePbVkwjxeap/5AtWnjIn6L2AenIpdimyQtLRyx4BO36XM6Adacl2ZgtMv38kojaiLhOxzuTlpp1IxYc90HEpTtNdy2/Q6+1va/szBYsLSbteMtHLLNIS0qMsa+wbVkuyUy2UORtpAO1lJ1XQGGxbsSCTWpRFFGHUEyZ8Chqv9hkPx2APiMdPRdEK0cs2KQWxethtlnaZQyPbhoe8smojUCbnmEKi1CBzXUrKR5BE9OrTBpixvCQipqWxqP2AekoZAyF5amFIxY0YWSMk25l/7aXhgebLb09URsR/8Oe9vEHa4fVWGfFWJo5sOcFZypLptnyNutAaQH09TGFxeIRCx8UVKQDBiMWbvOO2mgMD6nomJay+5Zn32PWj1j89Oi8QUv5sYHxHqi1ssRmC9FS2+lg1RSGCkMxYpm7goZHZe55Ot3CHB5qbReTLU7ZdJwomBeWCGcRoL0GiEUqqm8QeA/SWisx2eKMTUc5RYtu+bAaX6sSIRo0eIOiRveCfYbwkIsytelR+4BaCnhXMO/9tFg2rPY3q3SUS4unTZWoVaa1tphUS4sjNh3VA3s/1g+r2w02fVY6LeoH+NadliVGPJwoLYi+d2a9nzm8Za8PU1t6Q5voddxIp2OiMFPdEUGtTTLi4ZRNR/NBC4vb0mE13sojEj60lseI+SQ2RHHMCNN9rVx0xqazanrgbmN768qA25Jh9eiReGcTSRUwprTSRtIxrONkwmCoLaqWyvbbdESGdk0Xq4/h75i1dP44V4u/Tv0cH5nHl19hFAGxTjp0oRnpG6tPGIx0SM7YdEZND5Yt42h/02xv3YoRaA3z9AYGsmkRxTYaHGD/NwenzB2ub2sZOhzqACFSKh8TOCsx1gXP3RYqv2gSSy/lyY6OFJVFjXgICKUUk8U5m47eY/ISDmHRVlZc2MSDeFKXTjrRDTHtrXtsIBt9mJPd9Iqu6ZlpnKWYQiQj7ev0cnPHqaWWvP7WCiUWQC7uoHVWNgRHsuhkN72iTbjH4st+po8j+pmOtXm5pmbabIQqAxpCPN4IvX2cNOkPOmjTccawmLMWfCu1X7EIz00cL6g3QHWkVTrcWllZsF0yBAc5H9Vlv01/+IhJluNmj8RzfO3hATHR4hPS5OFHRnxCwM9NEUnNdUWGszpKIQEc7ADhQG7yVpOteWuTZ1Xtd72EZ83unAnx0TwdiG0ItMzzrBGJw5ui9aRPHKHPjli+fbmUdLCbjtPrM2xhaQoIgTUzhYUTa/emK9USO8lLKm9geihQycaM9bIxOPatPSJrdHxyzqan1HM/Zi9i+wJuCPJ6+ugilBd1quBpnd4RE5EN6P1oOoo4tGAbyR/HbDqO4/YMM+rGyHbX+PDUjoW+hpF8rd404lLL7QriMxomzqpkY53uRxH7ls3YTjhy1qanMmjREaFF7nHT1VfEfeNrvrnCs2qFOrFuI8E2cSm0BL36TBItBwYHbGEIHY7a9Iy5Rfe3wD0bdI42po5WkD/YAgFyA/Qn3LhSwPvZ1i5PGoNj+zKO20i6p9VtuqJUJ0sB1EAHMR0mhSU0RmgmqtHoc60cWY//CM9xwxCO58JNK8b4cSLJWI7la8kpGEJHdZuezeWr+rRXeVxTFQmMDYIzG5g490eEOf7RE9e420P1dcY8TYsECI/Gsc3QjtbdOauj62fQo/vJqja9ZxAurRzoT/z1+fphzVdmTRUtTZHYwMJivCwpML8FrzSoHSOCYpCb2942HFOF0dEjJ1QvshwkpcqgNvHjgYr+vz3eIF0zGP8PLX2nHfEwt+gNMwXfGCi04brbpby3fVGoY1YjP5wSsnMfq6P0gtR1xHj8vbQouQcUXytWKAQVa/JftTV55V9tel8GT+kfNHuKxkmzR3fOmVhvE/nKzd27dx/dBYDP8B9S5fQ6jkA1HlVs+uADDQV9hdKTLxRyWXxVSOnX1/T/Gx2JTEpvof+59+Mdznk89e9tT91HnGdShWKHfiYI6Khi038Y6YgXSqUfP0oDP/JlOgYZOqoAjUeV3o/VdECq6I+M2E6vB0Xjwdp09j+fUygb/QOFnng0ke0vy6tSQMpqsOnQ+xk6TL35+bWO3dNJqkgSW2TxDEyV85RKVtOFUkJ79AEqIko0UxpMaFV2gK4ZeFWDTcfez5Dg7vsyzpNUkZENLLIEaDwAb/94nrKg8jGQoX/vKaGGZEt6ucmpa77marHpUFiGEpdflnGLpAqygUVWx1pCRzWbnh8slfpf6YUGogQrCiUJkIU1g9naWh7HuaHELZSOq2yqAPbi/hGMh1SttEBaJOLwhSILAorIvcI1iahSEx1g0YcSEaRjt1mq7NuJa8F4SP95Nl1hfqiz5QG9nyEEf7PMxvNfxN1PSBRhFADwWcV2/VNtpYIklJZg7oohmxo55B4KFiSEgi6lROCloyVbeAmDDlpBpyB22WWNGaagEiHr4B4WBgXDHeqwjDiHmV0XQzET0ovRm3FnHsuMJ3e++R28rAfn+ea9t9/MN5O+wTGc+ZsswsHDudV0GNFtVHkrrkspHHNwHcXBg/z9lFhLce3HHu6bcR1/mTuwjhqDB/yGEytAWDzuUHY6es84VUbxVLGoozh4OLuafoqyU+2wcaowMc66jqIBIxwc4W1PhBrLg3iBDJcNZjjredQ0eDh3oRbWfuzUgqdKjJuZnWUs6ygOHgzjTGsh0VjAk/g+Or/Aabt4ZjFFYFc1wsHDmW1PREb0I0afFff+/ITigSmCdRT5cV8H6dV0Io3FY/TZ6PzyzrNdPUUY/Xt9Ebwzm3xrIdJYHul9dk59qdna5nohRRiGuxyiEA4eXMzJWgprP3aqM1Z/VqZA03z/zhakiL4+anIN4sAxGsL3UxJY+8E+K0p00gUJAimyvLkKKRK7EaQsDMQ46MezKsJjur1rP2VlZVVgBF6t+xTQLMtKaS1FmprW+r9vTQw0+5uLBYPB5oGYyrkLtReb9/lVPZpzmioAx0SVxFCY1dDJOVpabJqa7x/r6/OXmcAdUvuhUDnRWu6b/iLtR4mNs7yQZVVyRkzTK1PPQ+eCIcqsJ/RyFayrNiIkvccR3W6VYX50SWFVOSUjZenhsSp/n5+y8nZe1x8haRrXfuz2kBWW3uVZTS6j5POTd/tCPZSlwJTu93aEoM84otttHJIiL7MFgrI7OjFIHaBhpUDM/SD+EDFY+yFg6FWY57OsTlbyu5PYZ8uPVLsb2850e3tbTjcEXtAFsrJBKBxYPO5QZAyNhwWBL4rHoKfxbK2361JD68mOY/XtNa6oKpHUw5YV/hEPxymKlOqRx0JGyLEaXoDg3Kw/b37bXyLJGtYjRGAt/fqms8Vbe9RdWU7Zr3IkzGcysv7fl9KfElGrcAhKIY32IiRNw+5ZdTNxxYljVwOXjtc2VtsWlHJPm/d665UTc0nJSJEsb/WynITIL+hN6PU20Vpa/LyfivqO1uveNk/JY+Kp6w342l3awSa+pNKQIlBXeUHmF13mcKQwHLnbZFuLvpkYudp9gd46Twlj0d3pqyk6Xte3RUgRWT1pJDFhCkdcEhQ5m83mAOHW8mEnEbVQ4+vsLk1E3F0dxdUSUwSSg2XT5g/naDYHlTajIt1aYDOxtYqOLjd1aBd8UWRKEV7m0y6LN0v9SqVEUUyCvxGSpvGxDBZ8F6hDgrtTkVWKSEmrTwwf/7N37zoKAlEYgMfMoBAuzhARDBIouAhEDIZLgiS0Psw+E80mJttsYrVPsY+yic0W2+1UdtKgKMl85VRz/vzFqWbePgesx+lMn2XooKxBPxFpu7xfv9q65XfYNf2n8zokAv3AmrS9fP2dBnT+bjuQGoK+tLRfIJePIV3am0iqgTuAkaeSduSI6kUQ3IkQzdMd3cJGabLdpfNIAPclRjjXY8K1I8KRWM9xJILHQLwc1nt9F0gv3pSJFOz0fR3KPAKPhkRLMwozU5PAfbGycG6QqJlZGJolIjAoOOUtJ8SFmepNUhGJe1JjJpxEqqTRU7PAoWPxUwieCwm8JWsh9j1ztTk2sRIQ94Hp0PldEihxc9ysTM/HoSZbvIDAK4JIEGk4jr0wsF94+X6VbXS1OcSJUgVLsnVdSeKoCXVjWoqjJMl1t2QZVEoSHxpV32Srfe4VPjYWtkMDEAUEwQhBNBVoRrOZtZZlx9FsexGWpWFgjOeUfzWn6KFhlGW4sG3NcWR5bc1mdHJhOs7ZGYZhGIZhGIZhGIZh/tuDAxIAAAAAQf9ftyNQAQAAAAAAAAAAAABgKnFticyleiBsAAAAAElFTkSuQmCC"
+		/>
+		<p [innerHTML]="'PANEL.PRO_FEATURE' | translate"></p>
+	</div>
 </div>

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

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