From c6e84cb5dafa9ddc0b9d447330e7fc9c362e60f9 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Mon, 7 Mar 2022 15:50:27 +0100
Subject: [PATCH] openvidu-components: Allowed meeting customization

Added attribute directives for allowing the app customization
---
 .../components/layout/layout.component.html   |   4 +-
 .../lib/components/layout/layout.component.ts |   2 +-
 .../lib/components/panel/panel.component.ts   |   2 +-
 .../participants-panel.component.ts           |   2 +-
 .../pre-join/pre-join.component.html          |   2 +-
 .../components/session/session.component.html |   2 +-
 .../components/stream/stream.component.html   |   6 +-
 .../lib/components/stream/stream.component.ts |  55 +++-
 .../components/toolbar/toolbar.component.css  |   3 +
 .../components/toolbar/toolbar.component.html |  24 +-
 .../components/toolbar/toolbar.component.ts   | 129 +++++---
 .../videoconference.component.ts              |  30 +-
 .../directives/api/api.directive.module.ts    |  50 +++
 .../lib/directives/api/stream.directive.ts    | 131 ++++++++
 .../lib/directives/api/toolbar.directive.ts   | 300 ++++++++++++++++++
 .../api/videoconference.directive.ts          |  32 ++
 .../openvidu-angular.directive.spec.ts        |   8 -
 .../directives/openvidu-angular.directive.ts  |  50 ---
 .../openvidu-angular.directive.module.ts      |  35 ++
 .../template/openvidu-angular.directive.ts    |  65 ++++
 .../src/lib/openvidu-angular.module.ts        |  33 +-
 .../config/openvidu-angular.config.service.ts |  51 ++-
 .../src/lib/services/device/device.service.ts |  17 +-
 .../openvidu-angular/src/public-api.ts        |   8 +-
 24 files changed, 876 insertions(+), 165 deletions(-)
 create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts
 create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/stream.directive.ts
 create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/toolbar.directive.ts
 create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts
 delete mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/directives/openvidu-angular.directive.spec.ts
 delete mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/directives/openvidu-angular.directive.ts
 create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.module.ts
 create mode 100644 openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html
index 1a7e39a5..2d6121e0 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.html
@@ -1,6 +1,6 @@
 <div id="layout" class="layout">
 	<div
-		class="OT_root OT_publisher"
+		class="OT_root OT_publisher ovStream"
 		*ngFor="let stream of localParticipant | streams"
 		[ngClass]="{ OV_big: stream.videoEnlarged }"
 	>
@@ -9,7 +9,7 @@
 
 	<div
 		*ngFor="let stream of remoteParticipants | streams"
-		class="OT_root OT_publisher"
+		class="OT_root OT_publisher ovStream"
 		id="remote-participant"
 		[ngClass]="{ OV_big: stream.videoEnlarged }"
 	>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts
index e1e421c2..9d29702e 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/layout/layout.component.ts
@@ -3,7 +3,7 @@ import { Subscription } from 'rxjs';
 import { ParticipantService } from '../../services/participant/participant.service';
 import { ParticipantAbstractModel } from '../../models/participant.model';
 import { LayoutService } from '../../services/layout/layout.service';
-import { StreamDirective } from '../../directives/openvidu-angular.directive';
+import { StreamDirective } from '../../directives/template/openvidu-angular.directive';
 
 @Component({
 	selector: 'ov-layout',
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 bdb79501..14950363 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,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, OnInit, TemplateRef } from '@angular/core';
 import { skip, Subscription } from 'rxjs';
-import { ChatPanelDirective, ParticipantsPanelDirective } from '../../directives/openvidu-angular.directive';
+import { ChatPanelDirective, ParticipantsPanelDirective } from '../../directives/template/openvidu-angular.directive';
 import { MenuType } from '../../models/menu.model';
 import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.service';
 
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 50822f64..096652f1 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
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, On
 import { ParticipantAbstractModel } from '../../../../models/participant.model';
 import { ParticipantService } from '../../../../services/participant/participant.service';
 import { SidenavMenuService } from '../../../..//services/sidenav-menu/sidenav-menu.service';
-import { ParticipantPanelItemDirective } from '../../../../directives/openvidu-angular.directive';
+import { ParticipantPanelItemDirective } from '../../../../directives/template/openvidu-angular.directive';
 import { Subscription } from 'rxjs';
 
 @Component({
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html
index 8f034cde..31c1ab99 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html
@@ -2,7 +2,7 @@
 	<div fxFlex.gt-sm="65%" fxFlex.lt-md="55%" fxLayoutAlign="center center">
 		<ov-layout>
 			<ng-template #stream let-stream>
-				<ov-stream [stream]="stream" [showNickname]="false" [showSettings]="false"></ov-stream>
+				<ov-stream [stream]="stream" [displayParticipantName]="false" [settingsButton]="false"></ov-stream>
 			</ng-template>
 		</ov-layout>
 	</div>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html
index 16ed92b0..2f1ec71a 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.html
@@ -19,7 +19,7 @@
 		</mat-sidenav-content>
 	</mat-sidenav-container>
 
-	<div id="footer-container">
+	<div id="footer-container" class="ovToolbar">
 		<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
 	</div>
 </div>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
index f4e081f2..9ea55f22 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.html
@@ -4,7 +4,7 @@
 	[id]="'container-' + this._stream.streamManager?.stream?.streamId"
 	#streamContainer
 >
-	<div class="nickname" [class.fullscreen]="isFullscreen" *ngIf="showNickname">
+	<div *ngIf="!isMinimal && showNickname" class="nickname" [class.fullscreen]="isFullscreen">
 		<div (click)="toggleNicknameForm()" class="nicknameContainer" selected *ngIf="!toggleNickname">
 			<span id="nickname" *ngIf="this._stream.type === 'CAMERA'">{{ this._stream.participant.nickname }}</span>
 			<span id="nickname" *ngIf="this._stream.type === 'SCREEN'">{{ this._stream.participant.nickname }}_SCREEN</span>
@@ -22,7 +22,7 @@
 		</div>
 	</div>
 
-	<div id="audio-wave-container" *ngIf="showAudioDetection && _stream.type === 'CAMERA'">
+	<div *ngIf="!isMinimal && showAudioDetection && _stream.type === 'CAMERA'" id="audio-wave-container">
 		<ov-audio-wave [streamManager]="_stream.streamManager"></ov-audio-wave>
 	</div>
 
@@ -44,7 +44,7 @@
 		</button>
 	</div>
 
-	<div class="videoButtons" *ngIf="showSettings">
+	<div *ngIf="!isMinimal && showSettingsButton" class="videoButtons">
 		<button mat-icon-button (click)="toggleVideoMenu($event)" matTooltip="Settings" aria-label="Video settings menu">
 			<mat-icon>more_vert</mat-icon>
 		</button>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
index 9d65609d..51479af1 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
@@ -1,4 +1,5 @@
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';
 import { VideoSizeIcon } from '../../models/icon.model';
 import { ScreenType, VideoType } from '../../models/video-type.model';
@@ -11,6 +12,7 @@ import { Signal } from '../../models/signal.model';
 import { PublisherProperties } from 'openvidu-browser';
 import { StreamModel } from '../../models/participant.model';
 import { ParticipantService } from '../../services/participant/participant.service';
+import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
 
 @Component({
 	selector: 'ov-stream',
@@ -18,19 +20,27 @@ import { ParticipantService } from '../../services/participant/participant.servi
 	styleUrls: ['./stream.component.css']
 })
 export class StreamComponent implements OnInit {
+	@ViewChild(MatMenuTrigger) public menuTrigger: MatMenuTrigger;
+	@ViewChild('menu') menu: MatMenuPanel;
+
 	videoSizeIconEnum = VideoSizeIcon;
 	videoTypeEnum = VideoType;
 	videoSizeIcon: VideoSizeIcon = VideoSizeIcon.BIG;
 	toggleNickname: boolean;
 	_stream: StreamModel;
 	nickname: string;
-	private _streamContainer: ElementRef;
-	@ViewChild(MatMenuTrigger) public menuTrigger: MatMenuTrigger;
-	@ViewChild('menu') menu: MatMenuPanel;
 
-	@Input() showNickname: boolean = true;
-	@Input() showAudioDetection: boolean = true;
-	@Input() showSettings: boolean = true;
+	isMinimal: boolean = false;
+	showNickname: boolean = true;
+	showAudioDetection: boolean = true;
+	showSettingsButton: boolean = true;
+
+	private _streamContainer: ElementRef;
+
+	private minimalSub: Subscription;
+	private displayParticipantNameSub: Subscription;
+	private displayAudioDetectionSub: Subscription;
+	private settingsButtonSub: Subscription;
 
 	constructor(
 		protected documentService: DocumentService,
@@ -38,7 +48,8 @@ export class StreamComponent implements OnInit {
 		protected layoutService: LayoutService,
 		protected participantService: ParticipantService,
 		protected storageService: StorageService,
-		protected cdkSrv: CdkOverlayService
+		protected cdkSrv: CdkOverlayService,
+		private libService: OpenViduAngularConfigService
 	) {}
 
 	@ViewChild('streamContainer', { static: false, read: ElementRef })
@@ -57,7 +68,7 @@ export class StreamComponent implements OnInit {
 	set stream(stream: StreamModel) {
 		this._stream = stream;
 		this.checkVideoEnlarged();
-		if(this._stream.participant) {
+		if (this._stream.participant) {
 			this.nickname = this._stream.participant.nickname;
 		}
 	}
@@ -70,10 +81,14 @@ export class StreamComponent implements OnInit {
 	}
 
 	ngOnInit() {
+		this.subscribeToStreamDirectives();
 	}
 
 	ngOnDestroy() {
 		this.cdkSrv.setSelector('body');
+		if (this.settingsButtonSub) this.settingsButtonSub.unsubscribe();
+		if (this.displayAudioDetectionSub) this.displayAudioDetectionSub.unsubscribe();
+		if (this.displayParticipantNameSub) this.displayParticipantNameSub.unsubscribe();
 	}
 
 	toggleVideoEnlarged() {
@@ -98,7 +113,6 @@ export class StreamComponent implements OnInit {
 
 	toggleSound() {
 		this._stream.participant.setMutedForcibly(!this._stream.participant.isMutedForcibly);
-
 	}
 
 	toggleNicknameForm() {
@@ -109,7 +123,7 @@ export class StreamComponent implements OnInit {
 
 	updateNickname(event) {
 		if (event?.keyCode === 13 || event?.type === 'focusout') {
-			if(!!this.nickname){
+			if (!!this.nickname) {
 				this.participantService.setMyNickname(this.nickname);
 				this.storageService.setNickname(this.nickname);
 				this.openviduService.sendSignal(Signal.NICKNAME_CHANGED, undefined, { clientData: this.nickname });
@@ -128,7 +142,26 @@ export class StreamComponent implements OnInit {
 		await this.openviduService.replaceTrack(VideoType.SCREEN, properties);
 	}
 
-	protected checkVideoEnlarged() {
+	private checkVideoEnlarged() {
 		this.videoSizeIcon = this._stream.videoEnlarged ? VideoSizeIcon.NORMAL : VideoSizeIcon.BIG;
 	}
+
+	private subscribeToStreamDirectives() {
+
+		this.minimalSub = this.libService.minimalObs.subscribe((value: boolean) => {
+			this.isMinimal = value;
+		});
+		this.displayParticipantNameSub = this.libService.displayParticipantNameObs.subscribe((value: boolean) => {
+			this.showNickname = value;
+			// this.cd.markForCheck();
+		});
+		this.displayAudioDetectionSub = this.libService.displayAudioDetectionObs.subscribe((value: boolean) => {
+			this.showAudioDetection = value;
+			// this.cd.markForCheck();
+		});
+		this.settingsButtonSub = this.libService.settingsButtonObs.subscribe((value: boolean) => {
+			this.showSettingsButton = value;
+			// this.cd.markForCheck();
+		});
+	}
 }
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
index f63c818a..de639455 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
@@ -14,6 +14,9 @@
 	display: flex;
 	align-items: center;
 }
+#media-buttons-container {
+	max-height: 100%;
+}
 
 #media-buttons-container > *, ::ng-deep #media-buttons-container > * {
 	width: 40px;
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 f2d09adc..ab277cdd 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
@@ -1,8 +1,8 @@
 <mat-toolbar id="toolbar" role="heading" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
 	<div fxFlex="20%" fxLayoutAlign="start center">
 		<div id="img-container">
-			<img id="branding-logo" src='assets/images/openvidu_globe.png'/>
-			<span id="session-title" *ngIf="session && session.sessionId">{{ session.sessionId }}</span>
+			<img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/ov_company_logo.png" ovImage />
+			<span id="session-title" *ngIf="!isMinimal && session && session.sessionId && showSessionName">{{ session.sessionId }}</span>
 		</div>
 	</div>
 	<div fxFlex="60%" fxFlexOrder="2" fxLayoutAlign="center center" id="media-buttons-container">
@@ -32,8 +32,9 @@
 
 		<!-- Screenshare button -->
 		<button
-			id="navScreenButton"
 			mat-icon-button
+			*ngIf="!isMinimal && showScreenshareButton"
+			id="navScreenButton"
 			(click)="toggleScreenShare()"
 			[disabled]="isConnectionLost"
 			[class.active-btn]="isScreenShareActive"
@@ -43,7 +44,13 @@
 		</button>
 
 		<!-- Fullscreen button -->
-		<button mat-icon-button (click)="toggleFullscreen()" [disabled]="isConnectionLost" [class.active-btn]="isFullscreenActive">
+		<button
+			mat-icon-button
+			*ngIf="!isMinimal && showFullscreenButton"
+			(click)="toggleFullscreen()"
+			[disabled]="isConnectionLost"
+			[class.active-btn]="isFullscreenActive"
+		>
 			<mat-icon *ngIf="isFullscreenActive" matTooltip="Exit Fullscreen">fullscreen_exit</mat-icon>
 			<mat-icon *ngIf="!isFullscreenActive" matTooltip="Fullscreen">fullscreen</mat-icon>
 		</button>
@@ -52,7 +59,7 @@
 		<ng-content select="[toolbar-btn]"></ng-content>
 
 		<!-- Leave session button -->
-		<button mat-icon-button (click)="leaveSession()" id="leave-btn">
+		<button mat-icon-button *ngIf="showLeaveButton" (click)="leaveSession()" id="leave-btn">
 			<mat-icon matTooltip="Leave the session">call_end</mat-icon>
 		</button>
 	</div>
@@ -60,6 +67,7 @@
 		<!-- Default participants button -->
 		<button
 			mat-icon-button
+			*ngIf="!isMinimal && showParticipantsPanelButton"
 			matTooltip="Show articipants"
 			(click)="toggleMenu('participants')"
 			[disabled]="isConnectionLost"
@@ -68,14 +76,10 @@
 			<mat-icon>people</mat-icon>
 		</button>
 
-		<div #customMenuButton>
-			<ng-content select="[menu-button]"></ng-content>
-		</div>
-
 		<!-- Default chat button -->
 		<button
 			mat-icon-button
-			*ngIf="!customMenuButton.innerHTML"
+			*ngIf="!isMinimal && showChatPanelButton"
 			(click)="toggleMenu('chat')"
 			[disabled]="isConnectionLost"
 			[class.active-btn]="isChatOpened"
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 af352700..ca854a70 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
@@ -26,6 +26,7 @@ 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 { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
 
 @Component({
 	selector: 'ov-toolbar',
@@ -55,12 +56,48 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 	isChatOpened: boolean = false;
 	isParticipantsOpened: boolean = false;
 
-	protected log: ILogger;
-	protected menuTogglingSubscription: Subscription;
-	protected chatMessagesSubscription: Subscription;
-	protected localParticipantSubscription: Subscription;
+	isMinimal: boolean = false;
+	showScreenshareButton = true;
+	showFullscreenButton: boolean = true;
+	showLeaveButton: boolean = true;
+	showParticipantsPanelButton: boolean = true;
+	showChatPanelButton: boolean = true;
+	showLogo: boolean = true;
+	showSessionName: boolean = true;
+
+	private log: ILogger;
+	private minimalSub: Subscription;
+	private menuTogglingSubscription: Subscription;
+	private chatMessagesSubscription: Subscription;
+	private localParticipantSubscription: Subscription;
+	private screenshareButtonSub: Subscription;
+	private fullscreenButtonSub: Subscription;
+	private leaveButtonSub: Subscription;
+	private participantsPanelButtonSub: Subscription;
+	private chatPanelButtonSub: Subscription;
+	private displayLogoSub: Subscription;
+	private displaySessionNameSub: Subscription;
 	private currentWindowHeight = window.innerHeight;
 
+	@HostListener('window:resize', ['$event'])
+	sizeChange(event) {
+		if (this.currentWindowHeight >= window.innerHeight) {
+			// The user has exit the fullscreen mode
+			this.isFullscreenActive = false;
+			this.currentWindowHeight = window.innerHeight;
+		}
+	}
+
+	@HostListener('document:keydown', ['$event'])
+	keyDown(event: KeyboardEvent) {
+		if (event.key === 'F11') {
+			event.preventDefault();
+			this.toggleFullscreen();
+			this.currentWindowHeight = window.innerHeight;
+			return false;
+		}
+	}
+
 	constructor(
 		protected documentService: DocumentService,
 		protected chatService: ChatService,
@@ -71,43 +108,15 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 		protected oVDevicesService: DeviceService,
 		protected actionService: ActionService,
 		protected loggerSrv: LoggerService,
-		private cd: ChangeDetectorRef
+		private cd: ChangeDetectorRef,
+		private libService: OpenViduAngularConfigService
 	) {
 		this.log = this.loggerSrv.get('ToolbarComponent');
 	}
 
-	ngOnDestroy(): void {
-		if (this.menuTogglingSubscription) {
-			this.menuTogglingSubscription.unsubscribe();
-		}
-		if (this.chatMessagesSubscription) {
-			this.chatMessagesSubscription.unsubscribe();
-		}
-		if (this.localParticipantSubscription) {
-			this.localParticipantSubscription.unsubscribe();
-		}
-	}
-
-	@HostListener('window:resize', ['$event'])
-	sizeChange(event) {
-		if(this.currentWindowHeight >= window.innerHeight) {
-			// The user has exit the fullscreen mode
-			this.isFullscreenActive = false;
-			this.currentWindowHeight = window.innerHeight;
-		}
-	}
-
-	@HostListener('document:keydown', ['$event'])
-	keyDown(event: KeyboardEvent) {
-		if(event.key === 'F11'){
-			event.preventDefault();
-			this.toggleFullscreen();
-			this.currentWindowHeight = window.innerHeight;
-			return false;
-		}
-	}
-
 	async ngOnInit() {
+		this.subscribeToToolbarDirectives();
+
 		await this.oVDevicesService.initializeDevices();
 		this.hasVideoDevices = this.oVDevicesService.hasVideoDeviceAvailable();
 		this.hasAudioDevices = this.oVDevicesService.hasAudioDeviceAvailable();
@@ -119,6 +128,19 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 		this.subscribeToChatMessages();
 	}
 
+	ngOnDestroy(): void {
+		if (this.menuTogglingSubscription) this.menuTogglingSubscription.unsubscribe();
+		if (this.chatMessagesSubscription) this.chatMessagesSubscription.unsubscribe();
+		if (this.localParticipantSubscription) this.localParticipantSubscription.unsubscribe();
+		if (this.screenshareButtonSub) this.screenshareButtonSub.unsubscribe();
+		if (this.fullscreenButtonSub) this.fullscreenButtonSub.unsubscribe();
+		if (this.leaveButtonSub) this.leaveButtonSub.unsubscribe();
+		if (this.participantsPanelButtonSub) this.participantsPanelButtonSub.unsubscribe();
+		if (this.chatPanelButtonSub) this.chatPanelButtonSub.unsubscribe();
+		if (this.displayLogoSub) this.displayLogoSub.unsubscribe();
+		if (this.displaySessionNameSub) this.displaySessionNameSub.unsubscribe();
+	}
+
 	toggleMicrophone() {
 		this.onMicClicked.emit();
 
@@ -297,4 +319,39 @@ export class ToolbarComponent implements OnInit, OnDestroy {
 			this.cd.markForCheck();
 		});
 	}
+
+	private subscribeToToolbarDirectives() {
+		this.minimalSub = this.libService.minimalObs.subscribe((value: boolean) => {
+			this.isMinimal = value;
+			this.cd.markForCheck();
+		});
+		this.screenshareButtonSub = this.libService.screenshareButtonObs.subscribe((value: boolean) => {
+			this.showScreenshareButton = value;
+			this.cd.markForCheck();
+		});
+		this.fullscreenButtonSub = this.libService.fullscreenButtonObs.subscribe((value: boolean) => {
+			this.showFullscreenButton = value;
+			this.cd.markForCheck();
+		});
+		this.leaveButtonSub = this.libService.leaveButtonObs.subscribe((value: boolean) => {
+			this.showLeaveButton = value;
+			this.cd.markForCheck();
+		});
+		this.chatPanelButtonSub = this.libService.chatPanelButtonObs.subscribe((value: boolean) => {
+			this.showChatPanelButton = value;
+			this.cd.markForCheck();
+		});
+		this.participantsPanelButtonSub = this.libService.participantsPanelButtonObs.subscribe((value: boolean) => {
+			this.showParticipantsPanelButton = value;
+			this.cd.markForCheck();
+		});
+		this.displayLogoSub = this.libService.displayLogoObs.subscribe((value: boolean) => {
+			this.showLogo = value;
+			this.cd.markForCheck();
+		});
+		this.displaySessionNameSub = this.libService.displaySessionNameObs.subscribe((value: boolean) => {
+			this.showSessionName = value;
+			this.cd.markForCheck();
+		});
+	}
 }
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 4be77eef..074b5e5a 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
@@ -7,7 +7,7 @@ import {
 	ParticipantsPanelDirective,
 	StreamDirective,
 	ToolbarDirective
-} from '../../directives/openvidu-angular.directive';
+} from '../../directives/template/openvidu-angular.directive';
 import { ILogger } from '../../models/logger.model';
 import { LoggerService } from '../../services/logger/logger.service';
 
@@ -17,13 +17,16 @@ import { LoggerService } from '../../services/logger/logger.service';
 	styleUrls: ['./videoconference.component.css']
 })
 export class VideoconferenceComponent implements OnInit, AfterViewInit {
-	//Toolbar
+	// *** Toolbar ***
 	@ContentChild(ToolbarDirective) externalToolbar: ToolbarDirective;
-	// Panels
+
+	// *** Panels ***
 	@ContentChild(PanelDirective) externalPanel: PanelDirective;
 	@ContentChild(ChatPanelDirective) externalChatPanel: ChatPanelDirective;
 	@ContentChild(ParticipantsPanelDirective) externalParticipantsPanel: ParticipantsPanelDirective;
 	@ContentChild(ParticipantPanelItemDirective) externalParticipantPanelItem: ParticipantPanelItemDirective;
+
+	// *** Layout ***
 	@ContentChild(LayoutDirective) externalLayout: LayoutDirective;
 	@ContentChild(StreamDirective) externalStream: StreamDirective;
 
@@ -43,8 +46,9 @@ export class VideoconferenceComponent implements OnInit, AfterViewInit {
 	openviduAngularLayoutTemplate: TemplateRef<any>;
 	openviduAngularStreamTemplate: TemplateRef<any>;
 
+	// *** Parameters ***
 	@Input() sessionName: string;
-	@Input() userName: string;
+	@Input() participantName: string;
 
 	@Input()
 	set tokens(tokens: { webcam: string; screen: string }) {
@@ -63,8 +67,20 @@ export class VideoconferenceComponent implements OnInit, AfterViewInit {
 		}
 	}
 
-	@Output() onJoinClicked = new EventEmitter<any>();
-	@Output() onCloseClicked = new EventEmitter<any>();
+	// *** Events ***
+
+	// Event sent when user click on the join button in pre-join page
+	@Output() onJoinSessionClicked = new EventEmitter<any>();
+
+	// Event sent when participant has joined the session
+	@Output() onParticipantJoined = new EventEmitter<any>();
+
+	// Event sent when participant has left the session
+	@Output() onParticipantLeft = new EventEmitter<any>();
+
+	// Event sent when session has been created
+	@Output() onSessionCreated = new EventEmitter<any>();
+
 
 	joinSessionClicked: boolean = false;
 	// closeClicked: boolean = false;
@@ -140,7 +156,7 @@ export class VideoconferenceComponent implements OnInit, AfterViewInit {
 
 	async _onJoinClicked() {
 		this.joinSessionClicked = true;
-		this.onJoinClicked.emit();
+		this.onJoinSessionClicked.emit();
 	}
 	// onLeaveSessionClicked() {
 	// 	this.isSessionAlive = false;
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts
new file mode 100644
index 00000000..08a11351
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/api.directive.module.ts
@@ -0,0 +1,50 @@
+import { NgModule } from '@angular/core';
+import {
+	StreamDisplayParticipantNameDirective,
+	StreamDisplayAudioDetectionDirective,
+	StreamSettingsButtonDirective
+} from './stream.directive';
+import {
+	ToolbarScreenshareButtonDirective,
+	ToolbarFullscreenButtonDirective,
+	ToolbarLeaveButtonDirective,
+	ToolbarParticipantsPanelButtonDirective,
+	ToolbarChatPanelButtonDirective,
+	ToolbarDisplaySessionNameDirective,
+	ToolbarDisplayLogoDirective
+} from './toolbar.directive';
+import { AudioMutedDirective, MinimalDirective, VideoMutedDirective } from './videoconference.directive';
+
+@NgModule({
+	declarations: [
+		MinimalDirective,
+		VideoMutedDirective,
+		AudioMutedDirective,
+		ToolbarScreenshareButtonDirective,
+		ToolbarFullscreenButtonDirective,
+		ToolbarLeaveButtonDirective,
+		ToolbarParticipantsPanelButtonDirective,
+		ToolbarChatPanelButtonDirective,
+		ToolbarDisplaySessionNameDirective,
+		ToolbarDisplayLogoDirective,
+		StreamDisplayParticipantNameDirective,
+		StreamDisplayAudioDetectionDirective,
+		StreamSettingsButtonDirective,
+	],
+	exports: [
+		MinimalDirective,
+		VideoMutedDirective,
+		AudioMutedDirective,
+		ToolbarScreenshareButtonDirective,
+		ToolbarFullscreenButtonDirective,
+		ToolbarLeaveButtonDirective,
+		ToolbarParticipantsPanelButtonDirective,
+		ToolbarChatPanelButtonDirective,
+		ToolbarDisplaySessionNameDirective,
+		ToolbarDisplayLogoDirective,
+		StreamDisplayParticipantNameDirective,
+		StreamDisplayAudioDetectionDirective,
+		StreamSettingsButtonDirective
+	]
+})
+export class ApiDirectiveModule {}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/stream.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/stream.directive.ts
new file mode 100644
index 00000000..ab686161
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/stream.directive.ts
@@ -0,0 +1,131 @@
+import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
+import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
+
+const VIDEOCONFERENCE_COMPONENT_NAME = 'ov-videoconference';
+const OV_STREAM_CLASS = 'ovStream';
+
+@Directive({
+	selector: 'ov-videoconference[streamDisplayParticipantName], [displayParticipantName]'
+})
+export class StreamDisplayParticipantNameDirective implements AfterViewInit {
+	@Input() set streamDisplayParticipantName(value: boolean) {
+		this.displayParticipantNameValue = value;
+		this.update(this.displayParticipantNameValue);
+	}
+	@Input() set displayParticipantName(value: boolean) {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_STREAM_CLASS);
+
+		if (isExternalComponentInput) {
+			this.displayParticipantNameValue = value;
+			this.update(this.displayParticipantNameValue);
+		}
+	}
+
+	displayParticipantNameValue: boolean;
+
+	constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
+
+	ngAfterViewInit() {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if 'screenButton' attribute is in the 'ov-videoconference' element
+		const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_STREAM_CLASS);
+
+		if (isGlobalInput || isExternalComponentInput) {
+			this.update(this.displayParticipantNameValue);
+		}
+	}
+
+	update(value: boolean) {
+		if (this.libService.displayParticipantName.getValue() !== value) {
+			this.libService.displayParticipantName.next(value);
+		}
+	}
+}
+
+@Directive({
+	selector: 'ov-videoconference[streamDisplayAudioDetection], [displayAudioDetection]'
+})
+export class StreamDisplayAudioDetectionDirective implements AfterViewInit {
+	@Input() set streamDisplayAudioDetection(value: boolean) {
+		this.displayAudioDetectionValue = value;
+		this.update(this.displayAudioDetectionValue);
+	}
+	@Input() set displayAudioDetection(value: boolean) {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_STREAM_CLASS);
+
+		if (isExternalComponentInput) {
+			this.displayAudioDetectionValue = value;
+			this.update(this.displayAudioDetectionValue);
+		}
+	}
+
+	displayAudioDetectionValue: boolean;
+
+	constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
+
+	ngAfterViewInit() {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if 'screenButton' attribute is in the 'ov-videoconference' element
+		const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_STREAM_CLASS);
+
+		if (isGlobalInput || isExternalComponentInput) {
+			this.update(this.displayAudioDetectionValue);
+		}
+	}
+
+	update(value: boolean) {
+		if (this.libService.displayAudioDetection.getValue() !== value) {
+			this.libService.displayAudioDetection.next(value);
+		}
+	}
+}
+
+@Directive({
+	selector: 'ov-videoconference[streamSettingsButton], [settingsButton]'
+})
+export class StreamSettingsButtonDirective implements AfterViewInit {
+	@Input() set streamSettingsButton(value: boolean) {
+		this.settingsValue = value;
+		this.update(this.settingsValue);
+	}
+	@Input() set settingsButton(value: boolean) {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_STREAM_CLASS);
+
+		if (isExternalComponentInput) {
+			this.settingsValue = value;
+			this.update(this.settingsValue);
+		}
+	}
+
+	settingsValue: boolean;
+
+	constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
+
+	ngAfterViewInit() {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if 'screenButton' attribute is in the 'ov-videoconference' element
+		const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_STREAM_CLASS);
+
+		if (isGlobalInput || isExternalComponentInput) {
+			this.update(this.settingsValue);
+		}
+	}
+
+	update(value: boolean) {
+		if (this.libService.settingsButton.getValue() !== value) {
+			this.libService.settingsButton.next(value);
+		}
+	}
+}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/toolbar.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/toolbar.directive.ts
new file mode 100644
index 00000000..24863b25
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/toolbar.directive.ts
@@ -0,0 +1,300 @@
+import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
+import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
+
+const VIDEOCONFERENCE_COMPONENT_NAME = 'ov-videoconference';
+const OV_TOOLBAR_CLASS = 'ovToolbar';
+
+@Directive({
+	selector: 'ov-videoconference[toolbarScreenshareButton], [screenshareButton]'
+})
+export class ToolbarScreenshareButtonDirective implements AfterViewInit {
+	@Input() set toolbarScreenshareButton(value: boolean) {
+		this.screenshareValue = value;
+		this.update(this.screenshareValue);
+	}
+	@Input() set screenshareButton(value: boolean) {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
+
+		if (isExternalComponentInput) {
+			this.screenshareValue = value;
+			this.update(this.screenshareValue);
+		}
+	}
+
+	screenshareValue: boolean = true;
+
+	constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
+
+	ngAfterViewInit() {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// We need to distinguish where the directive is being used
+		// Checking if 'screenButton' attribute is in the 'ov-videoconference' element
+		const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
+
+		if (isGlobalInput || isExternalComponentInput) {
+			this.update(this.screenshareValue);
+		}
+	}
+
+	update(value: boolean) {
+		if (this.libService.screenshareButton.getValue() !== value) {
+			this.libService.screenshareButton.next(value);
+		}
+	}
+}
+
+@Directive({
+	selector: 'ov-videoconference[toolbarFullscreenButton], [fullscreenButton]'
+})
+export class ToolbarFullscreenButtonDirective implements AfterViewInit {
+	@Input() set toolbarFullscreenButton(value: boolean) {
+		this.fullscreenValue = value;
+		this.update(this.fullscreenValue);
+	}
+	@Input() set fullscreenButton(value: boolean) {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
+
+		if (isExternalComponentInput) {
+			this.fullscreenValue = value;
+			this.update(this.fullscreenValue);
+		}
+	}
+
+	fullscreenValue: boolean = true;
+
+	constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
+
+	ngAfterViewInit() {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// We need to distinguish where the directive is being used
+		// Checking if 'screenButton' attribute is in the 'ov-videoconference' element
+		const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
+
+		if (isGlobalInput || isExternalComponentInput) {
+			this.update(this.fullscreenValue);
+		}
+	}
+
+	update(value: boolean) {
+		if (this.libService.fullscreenButton.getValue() !== value) {
+			this.libService.fullscreenButton.next(value);
+		}
+	}
+}
+
+@Directive({
+	selector: 'ov-videoconference[toolbarLeaveButton], [leaveButton]'
+})
+export class ToolbarLeaveButtonDirective implements AfterViewInit {
+	@Input() set toolbarLeaveButton(value: boolean) {
+		this.leaveValue = value;
+		this.update(this.leaveValue);
+	}
+	@Input() set leaveButton(value: boolean) {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
+
+		if (isExternalComponentInput) {
+			this.leaveValue = value;
+			this.update(this.leaveValue);
+		}
+	}
+
+	leaveValue: boolean;
+
+	constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
+
+	ngAfterViewInit() {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if 'screenButton' attribute is in the 'ov-videoconference' element
+		const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
+
+		if (isGlobalInput || isExternalComponentInput) {
+			this.update(this.leaveValue);
+		}
+	}
+
+	update(value: boolean) {
+		if (this.libService.leaveButton.getValue() !== value) {
+			this.libService.leaveButton.next(value);
+		}
+	}
+}
+
+@Directive({
+	selector: 'ov-videoconference[toolbarParticipantsPanelButton], [participantsPanelButton]'
+})
+export class ToolbarParticipantsPanelButtonDirective implements AfterViewInit {
+	@Input() set toolbarParticipantsPanelButton(value: boolean) {
+		this.participantsPanelValue = value;
+		this.update(this.participantsPanelValue);
+	}
+	@Input() set participantsPanelButton(value: boolean) {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
+
+		if (isExternalComponentInput) {
+			this.participantsPanelValue = value;
+			this.update(this.participantsPanelValue);
+		}
+	}
+
+	participantsPanelValue: boolean;
+
+	constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
+
+	ngAfterViewInit() {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if 'screenButton' attribute is in the 'ov-videoconference' element
+		const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
+
+		if (isGlobalInput || isExternalComponentInput) {
+			this.update(this.participantsPanelValue);
+		}
+	}
+
+	update(value: boolean) {
+		if (this.libService.participantsPanelButton.getValue() !== value) {
+			this.libService.participantsPanelButton.next(value);
+		}
+	}
+}
+
+@Directive({
+	selector: 'ov-videoconference[toolbarChatPanelButton], [chatPanelButton]'
+})
+export class ToolbarChatPanelButtonDirective implements AfterViewInit {
+	@Input() set toolbarChatPanelButton(value: boolean) {
+		this.toolbarChatPanelValue = value;
+		this.update(this.toolbarChatPanelValue);
+	}
+	@Input() set chatPanelButton(value: boolean) {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
+
+		if (isExternalComponentInput) {
+			this.toolbarChatPanelValue = value;
+			this.update(this.toolbarChatPanelValue);
+		}
+	}
+	toolbarChatPanelValue: boolean;
+
+	constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
+
+	ngAfterViewInit() {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if 'screenButton' attribute is in the 'ov-videoconference' element
+		const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
+
+		if (isGlobalInput || isExternalComponentInput) {
+			this.update(this.toolbarChatPanelValue);
+		}
+	}
+
+	update(value: boolean) {
+		if (this.libService.chatPanelButton.getValue() !== value) {
+			this.libService.chatPanelButton.next(value);
+		}
+	}
+}
+
+@Directive({
+	selector: 'ov-videoconference[toolbarDisplaySessionName], [displaySessionName]'
+})
+export class ToolbarDisplaySessionNameDirective implements AfterViewInit {
+	@Input() set toolbarDisplaySessionName(value: boolean) {
+		this.displaySessionValue = value;
+		this.update(this.displaySessionValue);
+	}
+	@Input() set displaySessionName(value: boolean) {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
+
+		if (isExternalComponentInput) {
+			this.displaySessionValue = value;
+			this.update(this.displaySessionValue);
+		}
+	}
+
+	displaySessionValue: boolean;
+
+	constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
+
+	ngAfterViewInit() {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if 'screenButton' attribute is in the 'ov-videoconference' element
+		const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
+
+		if (isGlobalInput || isExternalComponentInput) {
+			this.update(this.displaySessionValue);
+		}
+	}
+
+	update(value: boolean) {
+		if (this.libService.displaySessionName.getValue() !== value) {
+			this.libService.displaySessionName.next(value);
+		}
+	}
+}
+
+@Directive({
+	selector: 'ov-videoconference[toolbarDisplayLogo], [displayLogo]'
+})
+export class ToolbarDisplayLogoDirective implements AfterViewInit {
+	@Input() set toolbarDisplayLogo(value: boolean) {
+		this.displayLogoValue = value;
+		this.update(this.displayLogoValue);
+	}
+	@Input() set displayLogo(value: boolean) {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
+
+		if (isExternalComponentInput) {
+			this.displayLogoValue = value;
+			this.update(this.displayLogoValue);
+		}
+	}
+
+	displayLogoValue: boolean;
+
+	constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
+
+	ngAfterViewInit() {
+		const element = <HTMLElement>this.elementRef.nativeElement;
+		// Checking if 'screenButton' attribute is in the 'ov-videoconference' element
+		const isGlobalInput = element.localName === VIDEOCONFERENCE_COMPONENT_NAME;
+		// Checking if element is injected inside of an element with ovToolbar class
+		const isExternalComponentInput = element.parentElement?.classList.contains(OV_TOOLBAR_CLASS);
+
+		if (isGlobalInput || isExternalComponentInput) {
+			this.update(this.displayLogoValue);
+		}
+	}
+
+	update(value: boolean) {
+		if (this.libService.displayLogo.getValue() !== value) {
+			this.libService.displayLogo.next(value);
+		}
+	}
+}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts
new file mode 100644
index 00000000..b5e019a0
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/api/videoconference.directive.ts
@@ -0,0 +1,32 @@
+import { Directive, Input, ElementRef } from '@angular/core';
+import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
+
+@Directive({
+	selector: 'ov-videoconference[minimal]'
+})
+export class MinimalDirective {
+	@Input() set minimal(value: boolean) {
+		this.libService.minimal.next(value);
+	}
+	constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
+}
+
+@Directive({
+	selector: 'ov-videoconference[videoMuted]'
+})
+export class VideoMutedDirective {
+	@Input() set videoMuted(value: boolean) {
+		this.libService.videoMuted.next(value);
+	}
+	constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
+}
+
+@Directive({
+	selector: 'ov-videoconference[audioMuted]'
+})
+export class AudioMutedDirective {
+	@Input() set audioMuted(value: boolean) {
+		this.libService.audioMuted.next(value);
+	}
+	constructor(public elementRef: ElementRef, private libService: OpenViduAngularConfigService) {}
+}
\ No newline at end of file
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/openvidu-angular.directive.spec.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/openvidu-angular.directive.spec.ts
deleted file mode 100644
index c946870a..00000000
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/openvidu-angular.directive.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { OpenviduAngularDirective } from './openvidu-angular.directive';
-
-describe('OpenviduAngularDirective', () => {
-  it('should create an instance', () => {
-    const directive = new OpenviduAngularDirective();
-    expect(directive).toBeTruthy();
-  });
-});
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/openvidu-angular.directive.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/openvidu-angular.directive.ts
deleted file mode 100644
index f8c8e321..00000000
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/openvidu-angular.directive.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
-
-@Directive({
-	selector: '[ovToolbar]'
-})
-export class ToolbarDirective {
-	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
-}
-
-@Directive({
-	selector: '[ovPanel]'
-})
-export class PanelDirective {
-	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
-}
-
-@Directive({
-	selector: '[ovChatPanel]'
-})
-export class ChatPanelDirective {
-	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
-}
-
-@Directive({
-	selector: '[ovParticipantsPanel]'
-})
-export class ParticipantsPanelDirective {
-	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
-}
-
-@Directive({
-	selector: '[ovParticipantPanelItem]'
-})
-export class ParticipantPanelItemDirective {
-	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
-}
-
-@Directive({
-	selector: '[ovLayout]'
-})
-export class LayoutDirective {
-	constructor(public template: TemplateRef<any>, public container: ViewContainerRef) {}
-}
-
-@Directive({
-	selector: '[ovStream]'
-})
-export class StreamDirective {
-	constructor(public template: TemplateRef<any>, public container: ViewContainerRef) {}
-}
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
new file mode 100644
index 00000000..7dbcc0a5
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.module.ts
@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import {
+	ChatPanelDirective,
+	LayoutDirective,
+	OvImageDirective,
+	PanelDirective,
+	ParticipantPanelItemDirective,
+	ParticipantsPanelDirective,
+	StreamDirective,
+	ToolbarDirective
+} from './openvidu-angular.directive';
+
+@NgModule({
+	declarations: [
+		ChatPanelDirective,
+		LayoutDirective,
+		OvImageDirective,
+		PanelDirective,
+		ParticipantPanelItemDirective,
+		ParticipantsPanelDirective,
+		StreamDirective,
+		ToolbarDirective
+	],
+	exports: [
+		ChatPanelDirective,
+		LayoutDirective,
+		OvImageDirective,
+		PanelDirective,
+		ParticipantPanelItemDirective,
+		ParticipantsPanelDirective,
+		StreamDirective,
+		ToolbarDirective
+	]
+})
+export class OpenViduAngularDirectiveModule {}
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
new file mode 100644
index 00000000..5de41312
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
@@ -0,0 +1,65 @@
+import { Directive, ElementRef, HostListener, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+
+@Directive({
+	selector: '[ovToolbar]'
+})
+export class ToolbarDirective {
+	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
+}
+
+@Directive({
+	selector: '[ovPanel]'
+})
+export class PanelDirective {
+	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
+}
+
+@Directive({
+	selector: '[ovChatPanel]'
+})
+export class ChatPanelDirective {
+	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
+}
+
+@Directive({
+	selector: '[ovParticipantsPanel]'
+})
+export class ParticipantsPanelDirective {
+	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
+}
+
+@Directive({
+	selector: '[ovParticipantPanelItem]'
+})
+export class ParticipantPanelItemDirective {
+	constructor(public template: TemplateRef<any>, public viewContainer: ViewContainerRef) {}
+}
+
+@Directive({
+	selector: '[ovLayout]'
+})
+export class LayoutDirective {
+	constructor(public template: TemplateRef<any>, public container: ViewContainerRef) {}
+}
+
+@Directive({
+	selector: '[ovStream]'
+})
+export class StreamDirective {
+	constructor(public template: TemplateRef<any>, public container: ViewContainerRef) {}
+}
+
+@Directive({
+	selector: 'img[ovImage]'
+})
+export class OvImageDirective {
+	@Input() ovImage: string;
+	constructor(public elementRef: ElementRef) {}
+	@HostListener('error')
+	loadDefaultImage() {
+		const element = <HTMLImageElement>this.elementRef.nativeElement;
+		element.src =
+			this.ovImage ||
+			'data:image/png;base64,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';
+	}
+}
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 0b4383b3..f3cac73c 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
@@ -60,16 +60,9 @@ import { PanelComponent } from './components/panel/panel.component';
 import { AudioWaveComponent } from './components/audio-wave/audio-wave.component';
 import { PreJoinComponent } from './components/pre-join/pre-join.component';
 
-import {
-	ChatPanelDirective,
-	LayoutDirective,
-	PanelDirective,
-	ParticipantPanelItemDirective,
-	ParticipantsPanelDirective,
-	StreamDirective,
-	ToolbarDirective
-} from './directives/openvidu-angular.directive';
 import { AvatarProfileComponent } from './components/avatar-profile/avatar-profile.component';
+import { OpenViduAngularDirectiveModule } from './directives/template/openvidu-angular.directive.module';
+import { ApiDirectiveModule } from './directives/api/api.directive.module';
 
 @NgModule({
 	declarations: [
@@ -89,15 +82,8 @@ import { AvatarProfileComponent } from './components/avatar-profile/avatar-profi
 		VideoconferenceComponent,
 		AudioWaveComponent,
 		PanelComponent,
-		ToolbarDirective,
-		PanelDirective,
-		ChatPanelDirective,
-		ParticipantsPanelDirective,
-		ParticipantPanelItemDirective,
-		LayoutDirective,
-		StreamDirective,
+		AvatarProfileComponent,
 		PreJoinComponent,
-		AvatarProfileComponent
 	],
 	imports: [
 		CommonModule,
@@ -124,7 +110,9 @@ import { AvatarProfileComponent } from './components/avatar-profile/avatar-profi
 		FlexLayoutModule,
 		MatMenuModule,
 		MatDividerModule,
-		MatListModule
+		MatListModule,
+		OpenViduAngularDirectiveModule,
+		ApiDirectiveModule
 	],
 	providers: [
 		ActionService,
@@ -159,13 +147,8 @@ import { AvatarProfileComponent } from './components/avatar-profile/avatar-profi
 		ParticipantStreamsPipe,
 		StreamTypesEnabledPipe,
 		CommonModule,
-		ToolbarDirective,
-		PanelDirective,
-		ChatPanelDirective,
-		ParticipantsPanelDirective,
-		ParticipantPanelItemDirective,
-		LayoutDirective,
-		StreamDirective
+		OpenViduAngularDirectiveModule,
+		ApiDirectiveModule
 	],
 	entryComponents: [DialogTemplateComponent]
 })
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts
index e34cb9e7..eedaa351 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/config/openvidu-angular.config.service.ts
@@ -1,17 +1,66 @@
 import { Inject, Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { OpenViduAngularConfig, ParticipantFactoryFunction } from '../../config/openvidu-angular.config';
 
 // import { version } from '../../../../package.json';
 
+
 @Injectable()
 export class OpenViduAngularConfigService {
 	private configuration: OpenViduAngularConfig;
 
+	minimal = <BehaviorSubject<boolean>>new BehaviorSubject(false);
+	minimalObs: Observable<boolean>;
+	videoMuted = <BehaviorSubject<boolean>>new BehaviorSubject(false);
+	videoMutedObs: Observable<boolean>;
+	audioMuted = <BehaviorSubject<boolean>>new BehaviorSubject(false);
+	audioMutedObs: Observable<boolean>;
+	screenshareButton = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+	screenshareButtonObs: Observable<boolean>;
+
+	fullscreenButton = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+	fullscreenButtonObs: Observable<boolean>;
+
+	leaveButton = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+	leaveButtonObs: Observable<boolean>;
+
+	participantsPanelButton = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+	participantsPanelButtonObs: Observable<boolean>;
+
+	chatPanelButton = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+	chatPanelButtonObs: Observable<boolean>;
+
+	displaySessionName = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+	displaySessionNameObs: Observable<boolean>;
+
+	displayLogo = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+	displayLogoObs: Observable<boolean>;
+	displayParticipantName = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+	displayParticipantNameObs: Observable<boolean>;
+	displayAudioDetection = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+	displayAudioDetectionObs: Observable<boolean>;
+	settingsButton = <BehaviorSubject<boolean>>new BehaviorSubject(true);
+	settingsButtonObs: Observable<boolean>;
+
 	constructor(@Inject('OPENVIDU_ANGULAR_CONFIG') config: OpenViduAngularConfig) {
 		this.configuration = config;
 		console.log(this.configuration);
 		if(this.isProduction()) console.log('OpenVidu Angular Production Mode');
-		// console.log(version)
+		this.minimalObs = this.minimal.asObservable();
+		this.videoMutedObs = this.videoMuted.asObservable();
+		this.audioMutedObs = this.audioMuted.asObservable();
+		//Toolbar observables
+		this.screenshareButtonObs = this.screenshareButton.asObservable();
+		this.fullscreenButtonObs = this.fullscreenButton.asObservable();
+		this.leaveButtonObs = this.leaveButton.asObservable();
+		this.participantsPanelButtonObs = this.participantsPanelButton.asObservable();
+		this.chatPanelButtonObs = this.chatPanelButton.asObservable();
+		this.displaySessionNameObs = this.displaySessionName.asObservable();
+		this.displayLogoObs = this.displayLogo.asObservable();
+		//Stream observables
+		this.displayParticipantNameObs = this.displayParticipantName.asObservable();
+		this.displayAudioDetectionObs = this.displayAudioDetection.asObservable();
+		this.settingsButtonObs = this.settingsButton.asObservable();
 	}
 
 	getConfig(): OpenViduAngularConfig {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/device/device.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/device/device.service.ts
index 3fc68f69..a742f217 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/device/device.service.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/device/device.service.ts
@@ -3,6 +3,7 @@ import { Device, OpenVidu, OpenViduError, OpenViduErrorName } from 'openvidu-bro
 
 import { CameraType, DeviceType, CustomDevice } from '../../models/device.model';
 import { ILogger } from '../../models/logger.model';
+import { OpenViduAngularConfigService } from '../config/openvidu-angular.config.service';
 
 import { LoggerService } from '../logger/logger.service';
 import { PlatformService } from '../platform/platform.service';
@@ -28,7 +29,12 @@ export class DeviceService {
 	private _isAudioMuted: boolean;
 	private deviceAccessDeniedError: boolean = false;
 
-	constructor(private loggerSrv: LoggerService, private platformSrv: PlatformService, private storageSrv: StorageService) {
+	constructor(
+		private loggerSrv: LoggerService,
+		private platformSrv: PlatformService,
+		private storageSrv: StorageService,
+		private libSrv: OpenViduAngularConfigService
+	) {
 		this.log = this.loggerSrv.get('DevicesService');
 		this.OV = new OpenVidu();
 	}
@@ -38,7 +44,6 @@ export class DeviceService {
 	}
 
 	async initializeDevices() {
-
 		try {
 			// Forcing media permissions request.
 			// Sometimes, browser doens't launch the media permissions modal.
@@ -54,8 +59,8 @@ export class DeviceService {
 		this.cameras = customDevices.cameras;
 		this.microphones = customDevices.microphones;
 
-		this._isVideoMuted = this.storageSrv.isVideoMuted();
-		this._isAudioMuted = this.storageSrv.isAudioMuted();
+		this._isVideoMuted = this.storageSrv.isVideoMuted() || this.libSrv.videoMuted.getValue();
+		this._isAudioMuted = this.storageSrv.isAudioMuted() || this.libSrv.audioMuted.getValue();;
 
 		this.log.d('Media devices', customDevices);
 	}
@@ -79,7 +84,7 @@ export class DeviceService {
 			if (!!storageMicrophone) {
 				this.microphoneSelected = storageMicrophone;
 			} else if (customDevices.microphones.length > 0) {
-				if(this.deviceAccessDeniedError && customDevices.microphones.length > 1){
+				if (this.deviceAccessDeniedError && customDevices.microphones.length > 1) {
 					// We assume that the default device is already in use
 					// Assign an alternative device with the aim of avoiding the DEVICE_ALREADY_IN_USE error
 					this.microphoneSelected = customDevices.microphones[1];
@@ -115,7 +120,7 @@ export class DeviceService {
 			if (!!storageCamera) {
 				this.cameraSelected = storageCamera;
 			} else if (customDevices.cameras.length > 0) {
-				if(this.deviceAccessDeniedError && customDevices.cameras.length > 1){
+				if (this.deviceAccessDeniedError && customDevices.cameras.length > 1) {
 					// We assume that the default device is already in use
 					// Assign an alternative device with the aim of avoiding the DEVICE_ALREADY_IN_USE error
 					this.cameraSelected = customDevices.cameras[1];
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
index a3a98b22..0589f04e 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
@@ -46,4 +46,10 @@ export * from './lib/models/notification-options.model';
 export * from './lib/pipes/participant.pipe';
 
 // Directives
-export * from './lib/directives/openvidu-angular.directive';
\ No newline at end of file
+export * from './lib/directives/api/api.directive.module';
+export * from './lib/directives/template/openvidu-angular.directive.module';
+
+export * from './lib/directives/template/openvidu-angular.directive';
+export * from './lib/directives/api/toolbar.directive';
+export * from './lib/directives/api/stream.directive';
+export * from './lib/directives/api/videoconference.directive';