diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/dialog.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/dialog.component.ts index 7054545d11..eadad33db4 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/dialog.component.ts +++ b/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 */ diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts new file mode 100644 index 0000000000..edb47a7522 --- /dev/null +++ b/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: ` +

{{ data.title }}

+
{{ data.description }}
+
+ + +
+ ` +}) +export class ProFeatureDialogTemplateComponent { + constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: DialogData) {} + + close() { + this.dialogRef.close(); + } + + seeMore() { + window.open('https://docs.openvidu.io/en/stable/openvidu-pro/', '_blank')?.focus(); + } +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/recording-dialog.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/recording-dialog.component.ts index 449003b24a..3bb4e9d201 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/recording-dialog.component.ts +++ b/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, @Inject(MAT_DIALOG_DATA) public data: any) { + constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: RecordingDialogData) { this.src = data.src; } close() { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.css index 6bc53a41ef..75903da396 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.css +++ b/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); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.html index 2e46970e59..78147dde4c 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.html @@ -1,5 +1,5 @@
- +
{{ 'PANEL.SETTINGS.CAPTIONS' | translate }}
@@ -28,4 +28,11 @@ {{ 'PANEL.SETTINGS.CAPTIONS_LANG_TEXT' | translate }}
+ +
+ +

+
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.ts index 0f77c2fcf8..4da6ad8a8d 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/captions/captions.component.ts +++ b/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() { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts index 08fd992e56..e653161a12 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts +++ b/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') + ); + } } /** diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts index 8a74d5e48b..4e1024c86c 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts +++ b/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) { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/cn.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/cn.json index 6e72fffd67..1393cfb4f6 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/cn.json +++ b/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": "你", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/de.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/de.json index 08194a9f20..9385705751 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/de.json +++ b/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", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/en.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/en.json index 395367a8f2..84ff19fe56 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/en.json +++ b/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", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/es.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/es.json index 63e90aaedb..56575bc1c8 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/es.json +++ b/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ú", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/fr.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/fr.json index 5cda9946f7..d263fac24f 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/fr.json +++ b/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", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/hi.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/hi.json index 18d2be57d3..79620a8f9d 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/hi.json +++ b/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": "आप", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/it.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/it.json index bfeebc562a..6e32c2fc9e 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/it.json +++ b/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", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/ja.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/ja.json index 4f76017dcf..06cd581624 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/ja.json +++ b/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": "あなた", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/nl.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/nl.json index e7fcdea281..b7970b118f 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/nl.json +++ b/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", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/pt.json b/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/pt.json index c5557aadb5..881c327119 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/lang/pt.json +++ b/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ê", diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/dialog.model.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/dialog.model.ts new file mode 100644 index 0000000000..58dd093efa --- /dev/null +++ b/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; +} diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts index 747477a9a6..8c7b2262e1 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts +++ b/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, diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/translate.pipe.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/translate.pipe.ts index d771d89216..6005685b59 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/pipes/translate.pipe.ts +++ b/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', 'OpenVidu PRO'); } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.ts index f0279c19c1..d630edfdeb 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.ts +++ b/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; + private dialogRef: + | MatDialogRef + | 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(); } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts index 637208ca18..155b217cf6 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/openvidu/openvidu.service.ts +++ b/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 */