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

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

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/panel.component.html

@@ -9,4 +9,9 @@
 	<ng-container *ngTemplateOutlet="participantsPanelTemplate"></ng-container>
 </ng-container>
 
+<!-- External additional panels  -->
+<ng-container *ngIf="additionalPanelsTemplate && isExternalPanelOpened">
+	<ng-container *ngTemplateOutlet="additionalPanelsTemplate"></ng-container>
+</ng-container>
+
 

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 { ChatPanelDirective, AdditionalPanelsDirective, ParticipantsPanelDirective } from '../../directives/template/openvidu-angular.directive';
-import { MenuType } from '../../models/menu.model';
+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}       |
  *
  * <p class="component-link-text">
  * 	<span class="italic">See all {@link OpenViduAngularDirectiveModule OpenVidu Angular Directives}</span>
@@ -57,6 +58,11 @@ export class PanelComponent implements OnInit {
      */
 	@ContentChild('chatPanel', { read: TemplateRef }) chatPanelTemplate: TemplateRef<any>;
 
+	/**
+     * @ignore
+     */
+	 @ContentChild('additionalPanels', { read: TemplateRef }) additionalPanelsTemplate: TemplateRef<any>;
+
 	@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.panelSubscription = this.panelService.panelOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: PanelType | string }) => {
-			this.isChatPanelOpened = ev.opened && ev.type === MenuType.CHAT;
+			this.isChatPanelOpened = ev.opened && ev.type === PanelType.CHAT;
-			this.isParticipantsPanelOpened = ev.opened && ev.type === MenuType.PARTICIPANTS;
+			this.isParticipantsPanelOpened = ev.opened && ev.type === PanelType.PARTICIPANTS;
+			this.isExternalPanelOpened = ev.opened && ev.type !== PanelType.PARTICIPANTS && ev.type !== PanelType.CHAT;
 			this.cd.markForCheck();
 		});
 	}

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html

@@ -19,6 +19,9 @@
 				<ng-container *ngTemplateOutlet="participantPanelItemTemplate; context: { $implicit: participant }"></ng-container>
 			</div>
 		</div>
-
 	</div>
 </div>
+
+<ng-template #defaultParticipantPanelItem let-participant>
+	<ov-participant-panel-item [participant]="participant" id="default-participant-panel-item"></ov-participant-panel-item>
+</ng-template>

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

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;

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<any>;
 
 	@Output() onSessionCreated = new EventEmitter<any>();
-	// @Output() _publisher = new EventEmitter<any>();
-	// @Output() _error = new EventEmitter<any>();
 
 	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,
+		protected panelService: PanelService
-		private platformService: PlatformService
 	) {
 		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();
 			}
 		});

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
 			</mat-icon>
 		</button>
+
+		<!-- External additional panel buttons  -->
+		<ng-container *ngIf="toolbarAdditionalPanelButtonsTemplate">
+			<ng-container *ngTemplateOutlet="toolbarAdditionalPanelButtonsTemplate"></ng-container>
+		</ng-container>
 	</div>
 </mat-toolbar>

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}   |
  *
  * <p class="component-link-text">
  * 	<span class="italic">See all {@link OpenViduAngularDirectiveModule OpenVidu Angular Directives}</span>
@@ -95,6 +96,11 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 	 */
 	@ContentChild('toolbarAdditionalButtons', { read: TemplateRef }) toolbarAdditionalButtonsTemplate: TemplateRef<any>;
 
+	/**
+	 * @ignore
+	 */
+	@ContentChild('toolbarAdditionalPanelButtons', { read: TemplateRef }) toolbarAdditionalPanelButtonsTemplate: TemplateRef<any>;
+
 	/**
 	 * @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<any>();
 	@Output() onCameraButtonClicked = new EventEmitter<any>();
 	@Output() onMicrophoneButtonClicked = new EventEmitter<any>();
@@ -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.panelTogglingSubscription = this.panelService.panelOpenedObs.subscribe((ev: { opened: boolean; type?: PanelType }) => {
-			this.isChatOpened = ev.opened && ev.type === MenuType.CHAT;
+			this.isChatOpened = ev.opened && ev.type === PanelType.CHAT;
-			this.isParticipantsOpened = ev.opened && ev.type === MenuType.PARTICIPANTS;
+			this.isParticipantsOpened = ev.opened && ev.type === PanelType.PARTICIPANTS;
 			if (this.isChatOpened) {
 				this.unreadMessages = 0;
 			}

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

@@ -51,6 +51,10 @@
 		<ng-template #toolbarAdditionalButtons>
 			<ng-container *ngTemplateOutlet="openviduAngularToolbarAdditionalButtonsTemplate"></ng-container>
 		</ng-template>
+
+		<ng-template #toolbarAdditionalPanelButtons>
+			<ng-container *ngTemplateOutlet="openviduAngularToolbarAdditionalPanelButtonsTemplate"></ng-container>
+		</ng-template>
 	</ov-toolbar>
 </ng-template>
 
@@ -63,6 +67,10 @@
 		<ng-template #participantsPanel>
 			<ng-container *ngTemplateOutlet="openviduAngularParticipantsPanelTemplate"></ng-container>
 		</ng-template>
+
+		<ng-template #additionalPanels>
+			<ng-container *ngTemplateOutlet="openviduAngularAdditionalPanelsTemplate"></ng-container>
+		</ng-template>
 	</ov-panel>
 </ng-template>
 

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**                 |
+ * |             **Directive**           |                 **Reference**                 |
- * |:----------------------------------:|:---------------------------------------------:|
+ * |:-----------------------------------:|:---------------------------------------------:|
- * |           ***ovToolbar**           |            {@link ToolbarDirective}           |
+ * |            ***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<any>;
+	/**
+	 * @internal
+	 */
+	openviduAngularToolbarAdditionalPanelButtonsTemplate: TemplateRef<any>;
 	/**
 	 * @internal
 	 */
@@ -195,6 +211,10 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
 	 * @internal
 	 */
 	openviduAngularParticipantsPanelTemplate: TemplateRef<any>;
+	/**
+	 * @internal
+	 */
+	openviduAngularAdditionalPanelsTemplate: TemplateRef<any>;
 	/**
 	 * @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;
 		}

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
 	]
 })

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<any>, public viewContainer: ViewContainerRef) {}
 }
 
+@Directive({
+	selector: '[ovToolbarAdditionalPanelButtons]'
+})
+export class ToolbarAdditionalPanelButtonsDirective {
+	/**
+	 * @ignore
+	 */
+	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
+}
+
 
 @Directive({
 	selector: '[ovPanel]'
 })
 export class PanelDirective {
+	/**
+	 * @ignore
+	 */
+	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
+}
+
+
+@Directive({
+	selector: '[ovAdditionalPanels]'
+})
+export class AdditionalPanelsDirective {
+	/**
+	 * @ignore
+	 */
 	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
 }
 

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

@@ -1,7 +1,4 @@
-/**
+export enum PanelType {
- * @internal
- */
-export enum MenuType {
 	CHAT = 'chat',
 	PARTICIPANTS = 'participants'
 }

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

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 isChatOpened: boolean = false;
-	protected isParticipantsPanelOpened: boolean = false;
+	protected isParticipantsOpened: boolean = false;
-	protected _panelOpened = <BehaviorSubject<{ opened: boolean; type?: MenuType }>>new BehaviorSubject({ opened: false });
+	private isExternalOpened: boolean = false;
+	private externalType: string;
+	protected _panelOpened = <BehaviorSubject<{ opened: boolean; type?: PanelType | string }>>new BehaviorSubject({ opened: false });
 
+	/**
+	 * @internal
+	 */
 	constructor(protected loggerSrv: LoggerService) {
 		this.log = this.loggerSrv.get('PanelService');
 		this.panelOpenedObs = this._panelOpened.asObservable();
 	}
 
-	isPanelOpened(): boolean {
+	togglePanel(type: PanelType | string) {
-		return this.isChatOpened() || this.isParticipantsOpened();
-	}
-
-	togglePanel(type: MenuType) {
 		this.log.d(`Toggling ${type} menu`);
-		if (type === MenuType.CHAT) {
+		let opened: boolean;
-			if (this.isChatPanelOpened) {
+		if (type === PanelType.CHAT) {
-				// Close chat and side menu
+			this.isChatOpened = !this.isChatOpened;
-				this.isChatPanelOpened = false;
+			this.isParticipantsOpened = false;
-				this._panelOpened.next({ opened: false });
+			this.isExternalOpened = false;
-			} else {
+			opened = this.isChatOpened;
-				// Open chat
+		} else if (type === PanelType.PARTICIPANTS) {
-				this.isChatPanelOpened = true;
+			this.isParticipantsOpened = !this.isParticipantsOpened;
-				this.isParticipantsPanelOpened = false;
+			this.isChatOpened = false;
-				this._panelOpened.next({ opened: true, type: MenuType.CHAT });
+			this.isExternalOpened = false;
-			}
+			opened = this.isParticipantsOpened;
-		} else if (type === MenuType.PARTICIPANTS) {
+		} else {
-			if (this.isParticipantsPanelOpened) {
+			this.log.d('Toggling external panel');
-				// Close participants menu and side menu
+			this.isChatOpened = false;
-				this.isParticipantsPanelOpened = false;
+			this.isParticipantsOpened = false;
-				this._panelOpened.next({ opened: false });
+			// Open when is close or is opened with another type
-			} else {
+			this.isExternalOpened = !this.isExternalOpened || this.externalType !== type;
-				// Open participants menu
+			this.externalType = !this.isExternalOpened ? '' : type;
-				this.isParticipantsPanelOpened = true;
+			opened = this.isExternalOpened;
-				this.isChatPanelOpened = false;
-				this._panelOpened.next({ opened: true, type: MenuType.PARTICIPANTS });
-			}
 		}
+
+		this._panelOpened.next({ opened, type });
 	}
 
-	closeMenu() {
+	/**
-		this.isParticipantsPanelOpened = false;
+	 * @internal
-		this.isChatPanelOpened = false;
+	 */
+	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() {
+	isChatPanelOpened(): boolean {
-		return this.isChatPanelOpened;
+		return this.isChatOpened;
 	}
 
-	isParticipantsOpened() {
+	isParticipantsPanelOpened(): boolean {
-		return this.isParticipantsPanelOpened;
+		return this.isParticipantsOpened;
+	}
+
+	private isExternalPanelOpened(): boolean {
+		return this.isExternalOpened;
 	}
 }