From d7b81739e7868f8c73db7e892879ca244b512f68 Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Wed, 6 Apr 2022 12:00:42 +0200 Subject: [PATCH] openvidu-components: Allowed external panels - Allowed injecting external panels and exported the panel service for toggling panels and subscribe to the panel status - Renamed menu to panel - Updated docs --- .../panel/chat-panel/chat-panel.component.ts | 10 +- .../lib/components/panel/panel.component.html | 5 + .../lib/components/panel/panel.component.ts | 35 +++++-- .../participants-panel.component.html | 5 +- .../participants-panel.component.ts | 22 ++++- .../components/session/session.component.css | 4 + .../components/session/session.component.ts | 15 +-- .../components/toolbar/toolbar.component.html | 8 +- .../components/toolbar/toolbar.component.ts | 38 ++++++-- .../videoconference.component.html | 8 ++ .../videoconference.component.ts | 53 ++++++++--- .../openvidu-angular.directive.module.ts | 8 +- .../template/openvidu-angular.directive.ts | 24 +++++ .../models/{menu.model.ts => panel.model.ts} | 5 +- .../src/lib/services/chat/chat.service.ts | 4 +- .../src/lib/services/panel/panel.service.ts | 93 ++++++++++--------- 16 files changed, 236 insertions(+), 101 deletions(-) rename openvidu-components-angular/projects/openvidu-angular/src/lib/models/{menu.model.ts => panel.model.ts} (51%) diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts index be67b1c2..60bdbc88 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts @@ -10,7 +10,7 @@ import { } from '@angular/core'; import { Subscription } from 'rxjs'; import { ChatMessage } from '../../../models/chat.model'; -import { MenuType } from '../../../models/menu.model'; +import { PanelType } from '../../../models/panel.model'; import { ChatService } from '../../../services/chat/chat.service'; import { PanelService } from '../../../services/panel/panel.service'; @@ -65,14 +65,14 @@ export class ChatPanelComponent implements OnInit, AfterViewInit { /** * @ignore */ - constructor(private chatService: ChatService, private PanelService: PanelService, private cd: ChangeDetectorRef) {} + constructor(private chatService: ChatService, private panelService: PanelService, private cd: ChangeDetectorRef) {} /** * @ignore */ @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) { - if (this.PanelService.isPanelOpened()) { + if (this.panelService.isPanelOpened()) { this.close(); } } @@ -119,13 +119,13 @@ export class ChatPanelComponent implements OnInit, AfterViewInit { } close() { - this.PanelService.togglePanel(MenuType.CHAT); + this.panelService.togglePanel(PanelType.CHAT); } private subscribeToMessages() { this.chatMessageSubscription = this.chatService.messagesObs.subscribe((messages: ChatMessage[]) => { this.messageList = messages; - if (this.PanelService.isPanelOpened()) { + if (this.panelService.isPanelOpened()) { this.scrollToBottom(); this.cd.markForCheck(); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html index 74eb725a..0a897199 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html @@ -9,4 +9,9 @@ + + + + + diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts index 7032b348..3097a100 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnInit, TemplateRef } from '@angular/core'; import { skip, Subscription } from 'rxjs'; -import { ChatPanelDirective, ParticipantsPanelDirective } from '../../directives/template/openvidu-angular.directive'; -import { MenuType } from '../../models/menu.model'; +import { ChatPanelDirective, AdditionalPanelsDirective, ParticipantsPanelDirective } from '../../directives/template/openvidu-angular.directive'; +import { PanelType } from '../../models/panel.model'; import { PanelService } from '../../services/panel/panel.service'; /** @@ -32,6 +32,7 @@ import { PanelService } from '../../services/panel/panel.service'; * |:----------------------------------:|:---------------------------------------------:| * | ***ovChatPanel** | {@link ChatPanelDirective} | * | ***ovParticipantsPanel** | {@link ParticipantsPanelDirective} | + * | ***ovAdditionalPanels** | {@link AdditionalPanelsDirective} | * *

* See all {@link OpenViduAngularDirectiveModule OpenVidu Angular Directives} @@ -57,6 +58,11 @@ export class PanelComponent implements OnInit { */ @ContentChild('chatPanel', { read: TemplateRef }) chatPanelTemplate: TemplateRef; + /** + * @ignore + */ + @ContentChild('additionalPanels', { read: TemplateRef }) additionalPanelsTemplate: TemplateRef; + @ContentChild(ParticipantsPanelDirective) set externalParticipantPanel(externalParticipantsPanel: ParticipantsPanelDirective) { // This directive will has value only when PARTICIPANTS PANEL component tagged with '*ovParticipantsPanel' @@ -75,9 +81,23 @@ export class PanelComponent implements OnInit { } } + @ContentChild(AdditionalPanelsDirective) + set externalAdditionalPanels(externalAdditionalPanels: AdditionalPanelsDirective) { + // This directive will has value only when ADDITIONAL PANELS component tagged with '*ovPanelAdditionalPanels' + // is inside of the PANEL component tagged with '*ovPanel' + if (externalAdditionalPanels) { + this.additionalPanelsTemplate = externalAdditionalPanels.template; + } + } + isParticipantsPanelOpened: boolean; isChatPanelOpened: boolean; - private menuSubscription: Subscription; + + /** + * @internal + */ + isExternalPanelOpened: boolean; + private panelSubscription: Subscription; /** * @ignore @@ -91,13 +111,14 @@ export class PanelComponent implements OnInit { ngOnDestroy() { this.isChatPanelOpened = false; this.isParticipantsPanelOpened = false; - if (this.menuSubscription) this.menuSubscription.unsubscribe(); + if (this.panelSubscription) this.panelSubscription.unsubscribe(); } private subscribeToPanelToggling() { - this.menuSubscription = this.panelService.panelOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: MenuType }) => { - this.isChatPanelOpened = ev.opened && ev.type === MenuType.CHAT; - this.isParticipantsPanelOpened = ev.opened && ev.type === MenuType.PARTICIPANTS; + this.panelSubscription = this.panelService.panelOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: PanelType | string }) => { + this.isChatPanelOpened = ev.opened && ev.type === PanelType.CHAT; + this.isParticipantsPanelOpened = ev.opened && ev.type === PanelType.PARTICIPANTS; + this.isExternalPanelOpened = ev.opened && ev.type !== PanelType.PARTICIPANTS && ev.type !== PanelType.CHAT; this.cd.markForCheck(); }); } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html index 36bf3a12..23d22f03 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html @@ -19,6 +19,9 @@ - + + + + diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts index 18400103..2d7dd827 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnDestroy, OnInit, TemplateRef } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { ParticipantAbstractModel } from '../../../../models/participant.model'; import { ParticipantService } from '../../../../services/participant/participant.service'; import { PanelService } from '../../../..//services/panel/panel.service'; @@ -44,10 +44,15 @@ import { Subscription } from 'rxjs'; styleUrls: ['./participants-panel.component.css'], changeDetection: ChangeDetectionStrategy.OnPush }) -export class ParticipantsPanelComponent implements OnInit, OnDestroy { +export class ParticipantsPanelComponent implements OnInit, OnDestroy, AfterViewInit { localParticipant: any; remoteParticipants: ParticipantAbstractModel[] = []; + /** + * @ignore + */ + @ViewChild('defaultParticipantPanelItem', { static: false, read: TemplateRef }) defaultParticipantPanelItemTemplate: TemplateRef; + /** * @ignore */ @@ -70,7 +75,7 @@ export class ParticipantsPanelComponent implements OnInit, OnDestroy { */ constructor( protected participantService: ParticipantService, - protected PanelService: PanelService, + protected panelService: PanelService, private cd: ChangeDetectorRef ) {} @@ -99,7 +104,16 @@ export class ParticipantsPanelComponent implements OnInit, OnDestroy { if (this.remoteParticipantsSubs) this.remoteParticipantsSubs.unsubscribe; } + ngAfterViewInit(){ + if(!this.participantPanelItemTemplate) { + // the user has override the default participants panel but not the 'participant-panel-item' + // so the default component must be injected + this.participantPanelItemTemplate = this.defaultParticipantPanelItemTemplate + this.cd.markForCheck(); + } + } + close() { - this.PanelService.closeMenu(); + this.panelService.closePanel(); } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css index 30fc6b0b..975707da 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.css @@ -24,6 +24,10 @@ z-index: 1; } +.mat-drawer.mat-drawer-side { + z-index: 1; +} + .sidenav-main { height: 100%; overflow: hidden; diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts index 359bc8a4..b1290fd0 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts @@ -25,7 +25,7 @@ import { MatSidenav } from '@angular/material/sidenav'; import { SidenavMode } from '../../models/layout.model'; import { LayoutService } from '../../services/layout/layout.service'; import { Subscription, skip } from 'rxjs'; -import { MenuType } from '../../models/menu.model'; +import { PanelType } from '../../models/panel.model'; import { PanelService } from '../../services/panel/panel.service'; import { PlatformService } from '../../services/platform/platform.service'; @@ -45,8 +45,6 @@ export class SessionComponent implements OnInit { @ContentChild('layout', { read: TemplateRef }) layoutTemplate: TemplateRef; @Output() onSessionCreated = new EventEmitter(); - // @Output() _publisher = new EventEmitter(); - // @Output() _error = new EventEmitter(); session: Session; sessionScreen: Session; @@ -54,8 +52,6 @@ export class SessionComponent implements OnInit { sideMenu: MatSidenav; sidenavMode: SidenavMode = SidenavMode.SIDE; - isParticipantsPanelOpened: boolean; - isChatPanelOpened: boolean; protected readonly SIDENAV_WIDTH_LIMIT_MODE = 790; protected menuSubscription: Subscription; @@ -73,8 +69,7 @@ export class SessionComponent implements OnInit { protected chatService: ChatService, protected tokenService: TokenService, protected layoutService: LayoutService, - protected panelService: PanelService, - private platformService: PlatformService + protected panelService: PanelService ) { this.log = this.loggerSrv.get('SessionComponent'); } @@ -126,8 +121,6 @@ export class SessionComponent implements OnInit { this.participantService.clear(); this.session = null; this.sessionScreen = null; - this.isChatPanelOpened = false; - this.isParticipantsPanelOpened = false; if (this.menuSubscription) this.menuSubscription.unsubscribe(); if (this.layoutWidthSubscription) this.layoutWidthSubscription.unsubscribe(); } @@ -153,10 +146,8 @@ export class SessionComponent implements OnInit { this.updateLayoutInterval = setInterval(() => this.layoutService.update(), 50); }); - this.menuSubscription = this.panelService.panelOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: MenuType }) => { + this.menuSubscription = this.panelService.panelOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean, type?: PanelType }) => { if (this.sideMenu) { - this.isChatPanelOpened = ev.opened && ev.type === MenuType.CHAT; - this.isParticipantsPanelOpened = ev.opened && ev.type === MenuType.PARTICIPANTS; ev.opened ? this.sideMenu.open() : this.sideMenu.close(); } }); diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html index 6fc916f0..93b188a2 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html @@ -72,7 +72,7 @@ mat-icon-button id="participants-panel-btn" *ngIf="!isMinimal && showParticipantsPanelButton" - matTooltip="Show articipants" + matTooltip="Participants" (click)="toggleParticipantsPanel()" [disabled]="isConnectionLost" [class.active-btn]="isParticipantsOpened" @@ -85,6 +85,7 @@ mat-icon-button id="chat-panel-btn" *ngIf="!isMinimal && showChatPanelButton" + matTooltip="Chat" (click)="toggleChatPanel()" [disabled]="isConnectionLost" [class.active-btn]="isChatOpened" @@ -99,5 +100,10 @@ chat + + + + + 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 c4dc8b2b..a537ed25 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 @@ -24,9 +24,9 @@ import { ActionService } from '../../services/action/action.service'; import { DeviceService } from '../../services/device/device.service'; import { ChatMessage } from '../../models/chat.model'; import { ParticipantService } from '../../services/participant/participant.service'; -import { MenuType } from '../../models/menu.model'; +import { PanelType } from '../../models/panel.model'; import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service'; -import { ToolbarAdditionalButtonsDirective } from '../../directives/template/openvidu-angular.directive'; +import { ToolbarAdditionalButtonsDirective, ToolbarAdditionalPanelButtonsDirective } from '../../directives/template/openvidu-angular.directive'; import { ParticipantAbstractModel } from '../../models/participant.model'; /** @@ -75,6 +75,7 @@ import { ParticipantAbstractModel } from '../../models/participant.model'; * | **Directive** | **Reference** | * |:----------------------------------:|:---------------------------------------------:| * | ***ovToolbarAdditionalButtons** | {@link ToolbarAdditionalButtonsDirective} | + * |***ovToolbarAdditionalPanelButtons** | {@link ToolbarAdditionalPanelButtonsDirective} | * *

* See all {@link OpenViduAngularDirectiveModule OpenVidu Angular Directives} @@ -95,6 +96,11 @@ export class ToolbarComponent implements OnInit, OnDestroy { */ @ContentChild('toolbarAdditionalButtons', { read: TemplateRef }) toolbarAdditionalButtonsTemplate: TemplateRef; + /** + * @ignore + */ + @ContentChild('toolbarAdditionalPanelButtons', { read: TemplateRef }) toolbarAdditionalPanelButtonsTemplate: TemplateRef; + /** * @ignore */ @@ -107,6 +113,18 @@ export class ToolbarComponent implements OnInit, OnDestroy { } } + /** + * @ignore + */ + @ContentChild(ToolbarAdditionalPanelButtonsDirective) + set externalAdditionalPanelButtons(externalAdditionalPanelButtons: ToolbarAdditionalPanelButtonsDirective) { + // This directive will has value only when ADDITIONAL PANEL BUTTONS component tagget with '*ovToolbarAdditionalPanelButtons' directive + // is inside of the TOOLBAR component tagged with '*ovToolbar' directive + if (externalAdditionalPanelButtons) { + this.toolbarAdditionalPanelButtonsTemplate = externalAdditionalPanelButtons.template; + } + } + @Output() onLeaveButtonClicked = new EventEmitter(); @Output() onCameraButtonClicked = new EventEmitter(); @Output() onMicrophoneButtonClicked = new EventEmitter(); @@ -199,7 +217,7 @@ export class ToolbarComponent implements OnInit, OnDestroy { private log: ILogger; private minimalSub: Subscription; - private menuTogglingSubscription: Subscription; + private panelTogglingSubscription: Subscription; private chatMessagesSubscription: Subscription; private localParticipantSubscription: Subscription; private screenshareButtonSub: Subscription; @@ -269,7 +287,7 @@ export class ToolbarComponent implements OnInit, OnDestroy { } ngOnDestroy(): void { - if (this.menuTogglingSubscription) this.menuTogglingSubscription.unsubscribe(); + if (this.panelTogglingSubscription) this.panelTogglingSubscription.unsubscribe(); if (this.chatMessagesSubscription) this.chatMessagesSubscription.unsubscribe(); if (this.localParticipantSubscription) this.localParticipantSubscription.unsubscribe(); if (this.screenshareButtonSub) this.screenshareButtonSub.unsubscribe(); @@ -340,7 +358,7 @@ export class ToolbarComponent implements OnInit, OnDestroy { */ toggleParticipantsPanel() { this.onParticipantsPanelButtonClicked.emit(); - this.panelService.togglePanel(MenuType.PARTICIPANTS); + this.panelService.togglePanel(PanelType.PARTICIPANTS); } /** @@ -348,7 +366,7 @@ export class ToolbarComponent implements OnInit, OnDestroy { */ toggleChatPanel() { this.onChatPanelButtonClicked.emit(); - this.panelService.togglePanel(MenuType.CHAT); + this.panelService.togglePanel(PanelType.CHAT); } /** @@ -363,7 +381,7 @@ export class ToolbarComponent implements OnInit, OnDestroy { protected subscribeToReconnection() { this.session.on('reconnecting', () => { if (this.panelService.isPanelOpened()) { - this.panelService.closeMenu(); + this.panelService.closePanel(); } this.isConnectionLost = true; }); @@ -372,9 +390,9 @@ export class ToolbarComponent implements OnInit, OnDestroy { }); } protected subscribeToMenuToggling() { - this.menuTogglingSubscription = this.panelService.panelOpenedObs.subscribe((ev: { opened: boolean; type?: MenuType }) => { - this.isChatOpened = ev.opened && ev.type === MenuType.CHAT; - this.isParticipantsOpened = ev.opened && ev.type === MenuType.PARTICIPANTS; + this.panelTogglingSubscription = this.panelService.panelOpenedObs.subscribe((ev: { opened: boolean; type?: PanelType }) => { + this.isChatOpened = ev.opened && ev.type === PanelType.CHAT; + this.isParticipantsOpened = ev.opened && ev.type === PanelType.PARTICIPANTS; if (this.isChatOpened) { this.unreadMessages = 0; } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html index 5b5289b3..f7411278 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html @@ -51,6 +51,10 @@ + + + + @@ -63,6 +67,10 @@ + + + + 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 4024687d..4b1994aa 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 @@ -15,12 +15,14 @@ import { Subscription } from 'rxjs'; import { ChatPanelDirective, LayoutDirective, + AdditionalPanelsDirective, PanelDirective, ParticipantPanelItemDirective, ParticipantPanelItemElementsDirective, ParticipantsPanelDirective, StreamDirective, ToolbarAdditionalButtonsDirective, + ToolbarAdditionalPanelButtonsDirective, ToolbarDirective } from '../../directives/template/openvidu-angular.directive'; import { ILogger } from '../../models/logger.model'; @@ -79,11 +81,13 @@ import { TokenService } from '../../services/token/token.service'; * It will recognise the following {@link https://angular.io/guide/structural-directives Angular structural directives} * in the elements added as children. * - * | **Directive** | **Reference** | - * |:----------------------------------:|:---------------------------------------------:| - * | ***ovToolbar** | {@link ToolbarDirective} | + * | **Directive** | **Reference** | + * |:-----------------------------------:|:---------------------------------------------:| + * | ***ovToolbar** | {@link ToolbarDirective} | * | ***ovToolbarAdditionalButtons** | {@link ToolbarAdditionalButtonsDirective} | + * |***ovToolbarAdditionalPanelButtons** | {@link ToolbarAdditionalPanelButtonsDirective} | * | ***ovPanel** | {@link PanelDirective} | + * | ***ovAdditionalPanels** | {@link AdditionalPanelsDirective} | * | ***ovChatPanel** | {@link ChatPanelDirective} | * | ***ovParticipantsPanel** | {@link ParticipantsPanelDirective} | * | ***ovParticipantPanelItem** | {@link ParticipantPanelItemDirective} | @@ -112,6 +116,14 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni * @internal */ @ContentChild(ToolbarAdditionalButtonsDirective) externalToolbarAdditionalButtons: ToolbarAdditionalButtonsDirective; + /** + * @internal + */ + @ContentChild(ToolbarAdditionalPanelButtonsDirective) externalToolbarAdditionalPanelButtons: ToolbarAdditionalPanelButtonsDirective; + /** + * @internal + */ + @ContentChild(AdditionalPanelsDirective) externalAdditionalPanels: AdditionalPanelsDirective; // *** Panels *** @@ -183,6 +195,10 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni * @internal */ openviduAngularToolbarAdditionalButtonsTemplate: TemplateRef; + /** + * @internal + */ + openviduAngularToolbarAdditionalPanelButtonsTemplate: TemplateRef; /** * @internal */ @@ -195,6 +211,10 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni * @internal */ openviduAngularParticipantsPanelTemplate: TemplateRef; + /** + * @internal + */ + openviduAngularAdditionalPanelsTemplate: TemplateRef; /** * @internal */ @@ -346,20 +366,24 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni */ ngAfterViewInit() { if (this.externalToolbar) { - this.openviduAngularToolbarTemplate = this.externalToolbar.template; this.log.d('Setting EXTERNAL TOOLBAR'); + this.openviduAngularToolbarTemplate = this.externalToolbar.template; } else { + this.log.d('Setting DEFAULT TOOLBAR'); if (this.externalToolbarAdditionalButtons) { this.log.d('Setting EXTERNAL TOOLBAR ADDITIONAL BUTTONS'); this.openviduAngularToolbarAdditionalButtonsTemplate = this.externalToolbarAdditionalButtons.template; } + if (this.externalToolbarAdditionalPanelButtons) { + this.log.d('Setting EXTERNAL TOOLBAR ADDITIONAL PANEL BUTTONS'); + this.openviduAngularToolbarAdditionalPanelButtonsTemplate = this.externalToolbarAdditionalPanelButtons.template; + } this.openviduAngularToolbarTemplate = this.defaultToolbarTemplate; - this.log.d('Setting DEFAULT TOOLBAR'); } if (this.externalPanel) { - this.openviduAngularPanelTemplate = this.externalPanel.template; this.log.d('Setting EXTERNAL PANEL'); + this.openviduAngularPanelTemplate = this.externalPanel.template; } else { this.log.d('Setting DEFAULT PANEL'); @@ -369,8 +393,8 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni } else { this.log.d('Setting DEFAULT PARTICIPANTS PANEL'); if (this.externalParticipantPanelItem) { - this.openviduAngularParticipantPanelItemTemplate = this.externalParticipantPanelItem.template; this.log.d('Setting EXTERNAL P ITEM'); + this.openviduAngularParticipantPanelItemTemplate = this.externalParticipantPanelItem.template; } else { if (this.externalParticipantPanelItemElements) { this.log.d('Setting EXTERNAL PARTICIPANT PANEL ITEM ELEMENT'); @@ -383,27 +407,32 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni } if (this.externalChatPanel) { - this.openviduAngularChatPanelTemplate = this.externalChatPanel.template; this.log.d('Setting EXTERNAL CHAT PANEL'); + this.openviduAngularChatPanelTemplate = this.externalChatPanel.template; } else { - this.openviduAngularChatPanelTemplate = this.defaultChatPanelTemplate; this.log.d('Setting DEFAULT CHAT PANEL'); + this.openviduAngularChatPanelTemplate = this.defaultChatPanelTemplate; + } + + if (this.externalAdditionalPanels) { + this.log.d('Setting EXTERNAL ADDITIONAL PANELS'); + this.openviduAngularAdditionalPanelsTemplate = this.externalAdditionalPanels.template; } this.openviduAngularPanelTemplate = this.defaultPanelTemplate; } if (this.externalLayout) { - this.openviduAngularLayoutTemplate = this.externalLayout.template; this.log.d('Setting EXTERNAL LAYOUT'); + this.openviduAngularLayoutTemplate = this.externalLayout.template; } else { this.log.d('Setting DEAFULT LAYOUT'); if (this.externalStream) { - this.openviduAngularStreamTemplate = this.externalStream.template; this.log.d('Setting EXTERNAL STREAM'); + this.openviduAngularStreamTemplate = this.externalStream.template; } else { - this.openviduAngularStreamTemplate = this.defaultStreamTemplate; this.log.d('Setting DEFAULT STREAM'); + this.openviduAngularStreamTemplate = this.defaultStreamTemplate; } this.openviduAngularLayoutTemplate = this.defaultLayoutTemplate; } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.module.ts index c0faac07..9168a586 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.module.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.module.ts @@ -8,7 +8,9 @@ import { ParticipantsPanelDirective, StreamDirective, ToolbarAdditionalButtonsDirective, - ToolbarDirective + ToolbarDirective, + ToolbarAdditionalPanelButtonsDirective, + AdditionalPanelsDirective } from './openvidu-angular.directive'; @NgModule({ @@ -16,22 +18,26 @@ import { ChatPanelDirective, LayoutDirective, PanelDirective, + AdditionalPanelsDirective, ParticipantPanelItemDirective, ParticipantsPanelDirective, StreamDirective, ToolbarDirective, ToolbarAdditionalButtonsDirective, + ToolbarAdditionalPanelButtonsDirective, ParticipantPanelItemElementsDirective ], exports: [ ChatPanelDirective, LayoutDirective, PanelDirective, + AdditionalPanelsDirective, ParticipantPanelItemDirective, ParticipantsPanelDirective, StreamDirective, ToolbarDirective, ToolbarAdditionalButtonsDirective, + ToolbarAdditionalPanelButtonsDirective, ParticipantPanelItemElementsDirective ] }) diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts index 447ceb89..d8cce83e 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts @@ -124,11 +124,35 @@ export class ToolbarAdditionalButtonsDirective { constructor(public template: TemplateRef, public viewContainer: ViewContainerRef) {} } +@Directive({ + selector: '[ovToolbarAdditionalPanelButtons]' +}) +export class ToolbarAdditionalPanelButtonsDirective { + /** + * @ignore + */ + constructor(public template: TemplateRef, public viewContainer: ViewContainerRef) {} +} + @Directive({ selector: '[ovPanel]' }) export class PanelDirective { + /** + * @ignore + */ + constructor(public template: TemplateRef, public viewContainer: ViewContainerRef) {} +} + + +@Directive({ + selector: '[ovAdditionalPanels]' +}) +export class AdditionalPanelsDirective { + /** + * @ignore + */ constructor(public template: TemplateRef, public viewContainer: ViewContainerRef) {} } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/menu.model.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/panel.model.ts similarity index 51% rename from openvidu-components-angular/projects/openvidu-angular/src/lib/models/menu.model.ts rename to openvidu-components-angular/projects/openvidu-angular/src/lib/models/panel.model.ts index ef3dbe53..f71048ec 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/models/menu.model.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/models/panel.model.ts @@ -1,7 +1,4 @@ -/** - * @internal - */ -export enum MenuType { +export enum PanelType { CHAT = 'chat', PARTICIPANTS = 'participants' } \ No newline at end of file diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/chat/chat.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/chat/chat.service.ts index fcfca5c2..fdd62384 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/chat/chat.service.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/chat/chat.service.ts @@ -12,7 +12,7 @@ import { LoggerService } from '../logger/logger.service'; import { Signal } from '../../models/signal.model'; import { PanelService } from '../panel/panel.service'; import { ParticipantService } from '../participant/participant.service'; -import { MenuType } from '../../models/menu.model'; +import { PanelType } from '../../models/panel.model'; /** * @internal @@ -77,6 +77,6 @@ export class ChatService { } protected launchNotification(options: INotificationOptions) { - this.actionService.launchNotification(options, this.panelService.togglePanel.bind(this.panelService, MenuType.CHAT)); + this.actionService.launchNotification(options, this.panelService.togglePanel.bind(this.panelService, PanelType.CHAT)); } } diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/panel/panel.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/panel/panel.service.ts index f5d5deb5..0a576750 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/panel/panel.service.ts +++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/panel/panel.service.ts @@ -1,69 +1,78 @@ import { Injectable } from '@angular/core'; import { BehaviorSubject, Observable } from 'rxjs'; import { ILogger } from '../../models/logger.model'; -import { MenuType } from '../../models/menu.model'; +import { PanelType } from '../../models/panel.model'; import { LoggerService } from '../logger/logger.service'; -/** - * @internal - */ @Injectable({ providedIn: 'root' }) export class PanelService { - panelOpenedObs: Observable<{ opened: boolean; type?: MenuType }>; + panelOpenedObs: Observable<{ opened: boolean; type?: PanelType | string }>; protected log: ILogger; - protected isChatPanelOpened: boolean = false; - protected isParticipantsPanelOpened: boolean = false; - protected _panelOpened = >new BehaviorSubject({ opened: false }); + protected isChatOpened: boolean = false; + protected isParticipantsOpened: boolean = false; + private isExternalOpened: boolean = false; + private externalType: string; + protected _panelOpened = >new BehaviorSubject({ opened: false }); + /** + * @internal + */ constructor(protected loggerSrv: LoggerService) { this.log = this.loggerSrv.get('PanelService'); this.panelOpenedObs = this._panelOpened.asObservable(); } - isPanelOpened(): boolean { - return this.isChatOpened() || this.isParticipantsOpened(); - } - - togglePanel(type: MenuType) { + togglePanel(type: PanelType | string) { this.log.d(`Toggling ${type} menu`); - if (type === MenuType.CHAT) { - if (this.isChatPanelOpened) { - // Close chat and side menu - this.isChatPanelOpened = false; - this._panelOpened.next({ opened: false }); - } else { - // Open chat - this.isChatPanelOpened = true; - this.isParticipantsPanelOpened = false; - this._panelOpened.next({ opened: true, type: MenuType.CHAT }); - } - } else if (type === MenuType.PARTICIPANTS) { - if (this.isParticipantsPanelOpened) { - // Close participants menu and side menu - this.isParticipantsPanelOpened = false; - this._panelOpened.next({ opened: false }); - } else { - // Open participants menu - this.isParticipantsPanelOpened = true; - this.isChatPanelOpened = false; - this._panelOpened.next({ opened: true, type: MenuType.PARTICIPANTS }); - } + let opened: boolean; + if (type === PanelType.CHAT) { + this.isChatOpened = !this.isChatOpened; + this.isParticipantsOpened = false; + this.isExternalOpened = false; + opened = this.isChatOpened; + } else if (type === PanelType.PARTICIPANTS) { + this.isParticipantsOpened = !this.isParticipantsOpened; + this.isChatOpened = false; + this.isExternalOpened = false; + opened = this.isParticipantsOpened; + } else { + this.log.d('Toggling external panel'); + this.isChatOpened = false; + this.isParticipantsOpened = false; + // Open when is close or is opened with another type + this.isExternalOpened = !this.isExternalOpened || this.externalType !== type; + this.externalType = !this.isExternalOpened ? '' : type; + opened = this.isExternalOpened; } + + this._panelOpened.next({ opened, type }); } - closeMenu() { - this.isParticipantsPanelOpened = false; - this.isChatPanelOpened = false; + /** + * @internal + */ + isPanelOpened(): boolean { + return this.isChatPanelOpened() || this.isParticipantsPanelOpened() || this.isExternalPanelOpened(); + } + + closePanel(): void { + this.isParticipantsOpened = false; + this.isChatOpened = false; + this.isExternalOpened = false; this._panelOpened.next({ opened: false }); } - isChatOpened() { - return this.isChatPanelOpened; + isChatPanelOpened(): boolean { + return this.isChatOpened; } - isParticipantsOpened() { - return this.isParticipantsPanelOpened; + isParticipantsPanelOpened(): boolean { + return this.isParticipantsOpened; + } + + private isExternalPanelOpened(): boolean { + return this.isExternalOpened; } }