From a82b2189bc680f3ef7dd1613729fb9c718bf606e Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Thu, 22 Aug 2024 11:17:02 +0200
Subject: [PATCH] ov-componentes: Added ovToolbarAdditionalButtonsPosition
 directive

---
 .../components/toolbar/toolbar.component.html |  6 +-
 .../components/toolbar/toolbar.component.ts   | 26 ++++++++-
 .../directives/api/api.directive.module.ts    |  5 +-
 .../lib/directives/api/toolbar.directive.ts   | 57 +++++++++++++++++++
 .../src/lib/models/toolbar.model.ts           |  7 +++
 ...nvidu-components-angular.config.service.ts | 15 +++++
 6 files changed, 112 insertions(+), 4 deletions(-)
 create mode 100644 openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/toolbar.model.ts

diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html
index 185193b2..77157027 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html
@@ -91,6 +91,10 @@
 			</button>
 		</mat-menu>
 
+		<ng-container *ngIf="toolbarAdditionalButtonsTemplate && additionalButtonsPosition && additionalButtonsPosition === 'beforeMenu'">
+			<ng-container *ngTemplateOutlet="toolbarAdditionalButtonsTemplate"></ng-container>
+		</ng-container>
+
 		<!-- More options button -->
 		<button
 			mat-icon-button
@@ -187,7 +191,7 @@
 		</mat-menu>
 
 		<!-- External additional buttons  -->
-		<ng-container *ngIf="toolbarAdditionalButtonsTemplate">
+		<ng-container *ngIf="toolbarAdditionalButtonsTemplate && additionalButtonsPosition && additionalButtonsPosition === 'afterMenu'">
 			<ng-container *ngTemplateOutlet="toolbarAdditionalButtonsTemplate"></ng-container>
 		</ng-container>
 
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts
index 7202a535..6a2d5b1a 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts
@@ -48,6 +48,7 @@ import { TranslateService } from '../../services/translate/translate.service';
 import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.service';
 import { ParticipantModel } from '../../models/participant.model';
 import { Room, RoomEvent } from 'livekit-client';
+import { ToolbarAdditionalButtonsPosition } from '../../models/toolbar.model';
 
 /**
  * The **ToolbarComponent** is hosted inside of the {@link VideoconferenceComponent}.
@@ -75,7 +76,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 	 */
 	@ContentChild(ToolbarAdditionalButtonsDirective)
 	set externalAdditionalButtons(externalAdditionalButtons: ToolbarAdditionalButtonsDirective) {
-		// This directive will has value only when ADDITIONAL BUTTONS component tagget with '*ovToolbarAdditionalButtons' directive
+		// This directive will has value only when ADDITIONAL BUTTONS component (tagged with '*ovToolbarAdditionalButtons' directive)
 		// is inside of the TOOLBAR component tagged with '*ovToolbar' directive
 		if (externalAdditionalButtons) {
 			this.toolbarAdditionalButtonsTemplate = externalAdditionalButtons.template;
@@ -87,7 +88,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 	 */
 	@ContentChild(ToolbarAdditionalPanelButtonsDirective)
 	set externalAdditionalPanelButtons(externalAdditionalPanelButtons: ToolbarAdditionalPanelButtonsDirective) {
-		// This directive will has value only when ADDITIONAL PANEL BUTTONS component tagget with '*ovToolbarAdditionalPanelButtons' directive
+		// This directive will has value only when ADDITIONAL PANEL BUTTONS component tagged with '*ovToolbarAdditionalPanelButtons' directive
 		// is inside of the TOOLBAR component tagged with '*ovToolbar' directive
 		if (externalAdditionalPanelButtons) {
 			this.toolbarAdditionalPanelButtonsTemplate = externalAdditionalPanelButtons.template;
@@ -266,6 +267,11 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 	 */
 	showCaptionsButton: boolean = true;
 
+	/**
+	 * @ignore
+	 */
+	additionalButtonsPosition: ToolbarAdditionalButtonsPosition;
+
 	/**
 	 * @ignore
 	 */
@@ -333,6 +339,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 	private displayRoomNameSub: Subscription;
 	private settingsButtonSub: Subscription;
 	private captionsSubs: Subscription;
+	private additionalButtonsPositionSub: Subscription;
 	private fullscreenChangeSubscription: Subscription;
 	private currentWindowHeight = window.innerHeight;
 
@@ -427,6 +434,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 		if (this.settingsButtonSub) this.settingsButtonSub.unsubscribe();
 		if (this.captionsSubs) this.captionsSubs.unsubscribe();
 		if (this.fullscreenChangeSubscription) this.fullscreenChangeSubscription.unsubscribe();
+		if (this.additionalButtonsPositionSub) this.additionalButtonsPositionSub.unsubscribe();
 		this.isFullscreenActive = false;
 		this.cdkOverlayService.setSelector('body');
 	}
@@ -744,6 +752,20 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 			this.showCaptionsButton = value;
 			this.cd.markForCheck();
 		});
+
+		this.additionalButtonsPositionSub = this.libService.toolbarAdditionalButtonsPosition$.subscribe(
+			(value: ToolbarAdditionalButtonsPosition) => {
+				// Using Promise.resolve() to defer change detection until the next microtask.
+				// This ensures that Angular's change detection has the latest value before updating the view.
+				// Without this, Angular's OnPush strategy might not immediately reflect the change,
+				// due to asynchronous operations affecting the timing of the detection cycle.
+
+				Promise.resolve().then(() => {
+					this.additionalButtonsPosition = value;
+					this.cd.markForCheck();
+				});
+			}
+		);
 	}
 
 	private subscribeToCaptionsToggling() {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts
index 4536e920..f93c564b 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts
@@ -21,7 +21,8 @@ import {
 	ToolbarParticipantsPanelButtonDirective,
 	ToolbarRecordingButtonDirective,
 	ToolbarScreenshareButtonDirective,
-	ToolbarSettingsButtonDirective
+	ToolbarSettingsButtonDirective,
+	ToolbarAdditionalButtonsPossitionDirective
 } from './toolbar.directive';
 import {
 	AudioEnabledDirective,
@@ -65,6 +66,7 @@ import {
 		ToolbarDisplayRoomNameDirective,
 		ToolbarDisplayLogoDirective,
 		ToolbarSettingsButtonDirective,
+		ToolbarAdditionalButtonsPossitionDirective,
 		StreamDisplayParticipantNameDirective,
 		StreamDisplayAudioDetectionDirective,
 		StreamVideoControlsDirective,
@@ -101,6 +103,7 @@ import {
 		ToolbarDisplayRoomNameDirective,
 		ToolbarDisplayLogoDirective,
 		ToolbarSettingsButtonDirective,
+		ToolbarAdditionalButtonsPossitionDirective,
 		StreamDisplayParticipantNameDirective,
 		StreamDisplayAudioDetectionDirective,
 		StreamVideoControlsDirective,
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/toolbar.directive.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/toolbar.directive.ts
index a4be49db..2c4daa73 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/toolbar.directive.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/toolbar.directive.ts
@@ -1,5 +1,6 @@
 import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
 import { OpenViduComponentsConfigService } from '../../services/config/openvidu-components-angular.config.service';
+import { ToolbarAdditionalButtonsPosition } from '../../models/toolbar.model';
 
 /**
  * The **screenshareButton** directive allows show/hide the screenshare toolbar button.
@@ -812,3 +813,59 @@ export class ToolbarDisplayLogoDirective implements AfterViewInit, OnDestroy {
 		}
 	}
 }
+
+/**
+ * The **ovToolbarAdditionalButtonsPosition** defines the position where the additional buttons should be inserted.
+ *
+ * The possible values are: {@link ToolbarAdditionalButtonsPosition}
+ * Default: `afterMenu`
+ *
+ * It can be used in the any element which contains the  structural directive {@link ToolbarAdditionalButtonsDirective}.
+ *
+ * @example
+ * <div *ovToolbarAdditionalButtons [ovToolbarAdditionalButtonsPosition]="'beforeMenu'"></div>
+ *
+ */
+@Directive({
+	selector: '[ovToolbarAdditionalButtonsPosition]'
+})
+export class ToolbarAdditionalButtonsPossitionDirective implements AfterViewInit, OnDestroy {
+	/**
+	 * @ignore
+	 */
+	@Input() set ovToolbarAdditionalButtonsPosition(value: ToolbarAdditionalButtonsPosition) {
+		if (!value) return;
+		if (!Object.values(ToolbarAdditionalButtonsPosition).includes(value)) return;
+
+		this.additionalButtonsPosition = value;
+		this.update(this.additionalButtonsPosition);
+	}
+
+	private additionalButtonsPosition: ToolbarAdditionalButtonsPosition = ToolbarAdditionalButtonsPosition.AFTER_MENU;
+
+	/**
+	 * @ignore
+	 */
+	constructor(
+		public elementRef: ElementRef,
+		private libService: OpenViduComponentsConfigService
+	) {}
+
+	ngAfterViewInit() {
+		this.update(this.additionalButtonsPosition);
+	}
+
+	ngOnDestroy(): void {
+		this.clear();
+	}
+	private clear() {
+		this.additionalButtonsPosition = ToolbarAdditionalButtonsPosition.AFTER_MENU;
+		this.update(ToolbarAdditionalButtonsPosition.AFTER_MENU);
+	}
+
+	private update(value: ToolbarAdditionalButtonsPosition) {
+		if (this.libService.getToolbarAdditionalButtonsPosition() !== value) {
+			this.libService.setToolbarAdditionalButtonsPosition(value);
+		}
+	}
+}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/toolbar.model.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/toolbar.model.ts
new file mode 100644
index 00000000..1068893a
--- /dev/null
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/toolbar.model.ts
@@ -0,0 +1,7 @@
+/**
+ * Enum representing the position of additional buttons in a toolbar.
+ */
+export enum ToolbarAdditionalButtonsPosition {
+	BEFORE_MENU = 'beforeMenu',
+	AFTER_MENU = 'afterMenu'
+}
\ No newline at end of file
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/config/openvidu-components-angular.config.service.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/config/openvidu-components-angular.config.service.ts
index fd0b20df..1773aa45 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/config/openvidu-components-angular.config.service.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/config/openvidu-components-angular.config.service.ts
@@ -3,6 +3,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { OpenViduComponentsConfig, ParticipantFactoryFunction } from '../../config/openvidu-components-angular.config';
 import { RecordingInfo } from '../../models/recording.model';
 import { DOCUMENT } from '@angular/common';
+import { ToolbarAdditionalButtonsPosition } from '../../models/toolbar.model';
 
 // import { version } from '../../../../package.json';
 
@@ -60,6 +61,12 @@ export class OpenViduComponentsConfigService {
 
 	private displayLogo = <BehaviorSubject<boolean>>new BehaviorSubject(true);
 	displayLogo$: Observable<boolean>;
+
+	private toolbarAdditionalButtonsPosition = <BehaviorSubject<ToolbarAdditionalButtonsPosition>>(
+		new BehaviorSubject(ToolbarAdditionalButtonsPosition.AFTER_MENU)
+	);
+	toolbarAdditionalButtonsPosition$: Observable<ToolbarAdditionalButtonsPosition>;
+
 	private displayParticipantName = <BehaviorSubject<boolean>>new BehaviorSubject(true);
 	displayParticipantName$: Observable<boolean>;
 	private displayAudioDetection = <BehaviorSubject<boolean>>new BehaviorSubject(true);
@@ -114,6 +121,7 @@ export class OpenViduComponentsConfigService {
 		this.broadcastingButton$ = this.broadcastingButton.asObservable();
 		this.toolbarSettingsButton$ = this.toolbarSettingsButton.asObservable();
 		this.captionsButton$ = this.captionsButton.asObservable();
+		this.toolbarAdditionalButtonsPosition$ = this.toolbarAdditionalButtonsPosition.asObservable();
 		//Stream observables
 		this.displayParticipantName$ = this.displayParticipantName.asObservable();
 		this.displayAudioDetection$ = this.displayAudioDetection.asObservable();
@@ -261,6 +269,13 @@ export class OpenViduComponentsConfigService {
 	showLogo(): boolean {
 		return this.displayLogo.getValue();
 	}
+	getToolbarAdditionalButtonsPosition(): ToolbarAdditionalButtonsPosition {
+		return this.toolbarAdditionalButtonsPosition.getValue();
+	}
+
+	setToolbarAdditionalButtonsPosition(toolbarAdditionalButtonsPosition: ToolbarAdditionalButtonsPosition) {
+		this.toolbarAdditionalButtonsPosition.next(toolbarAdditionalButtonsPosition);
+	}
 
 	setRecordingButton(recordingButton: boolean) {
 		this.recordingButton.next(recordingButton);