From 0a49ca91d8084f529abef28ea9a95fc2dc52d68b Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Tue, 16 Sep 2025 17:06:14 +0200
Subject: [PATCH] ov-components: refactor toolbar component to improve
 readability and add helper methods for recording and broadcasting status

---
 .../components/toolbar/toolbar.component.html | 61 +++++++++++--------
 .../components/toolbar/toolbar.component.ts   | 14 +++++
 2 files changed, 50 insertions(+), 25 deletions(-)

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 25dc8d69..53b51885 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
@@ -1,35 +1,44 @@
 <mat-toolbar id="toolbar" class="toolbar-container">
+	<!-- Info container (logo, room name, recording/broadcasting status) -->
 	<div id="info-container" class="info-container">
 		<div>
-			<img *ngIf="!isMinimal && showLogo" id="branding-logo" [ovLogo]="brandingLogo" />
-			<div
-				id="session-info-container"
-				[class.collapsed]="recordingStatus === _recordingStatus.STARTED || broadcastingStatus === _broadcastingStatus.STARTED"
-			>
-				<span id="session-name" *ngIf="!isMinimal && showRoomName">{{ roomName }}</span>
-				<div
-					id="activities-tag"
-					*ngIf="recordingStatus === _recordingStatus.STARTED || broadcastingStatus === _broadcastingStatus.STARTED"
-				>
-					@if (recordingStatus === _recordingStatus.STARTED) {
-						<div id="recording-tag" class="recording-tag" (click)="openRecordingActivityPanel()">
-							<mat-icon class="blink">radio_button_checked</mat-icon>
-							<span class="blink">REC</span>
-							<span *ngIf="recordingTime"> | {{ recordingTime | date: 'H:mm:ss' }}</span>
-						</div>
-					}
+			<!-- Branding Logo -->
+			@if (!isMinimal && showLogo) {
+				<img id="branding-logo" [ovLogo]="brandingLogo" />
+			}
 
-					@if (broadcastingStatus === _broadcastingStatus.STARTED) {
-						<!-- Broadcasting tag -->
-						<div id="broadcasting-tag" class="broadcasting-tag">
-							<mat-icon class="blink">sensors</mat-icon>
-							<span class="blink">LIVE</span>
-						</div>
-					}
-				</div>
+			<!-- Session Info -->
+			<div id="session-info-container" [class.collapsed]="isRecordingStarted || isBroadcastingStarted">
+				<!-- Room Name -->
+				@if (!isMinimal && showRoomName) {
+					<span id="session-name">{{ roomName }}</span>
+				}
+
+				<!-- Activities (Recording / Broadcasting) -->
+				@if (isRecordingStarted || isBroadcastingStarted) {
+					<div id="activities-tag">
+						@if (isRecordingStarted) {
+							<div id="recording-tag" class="recording-tag" (click)="openRecordingActivityPanel()">
+								<mat-icon class="blink">radio_button_checked</mat-icon>
+								<span class="blink">REC</span>
+								<span *ngIf="recordingTime"> | {{ recordingTime | date: 'H:mm:ss' }}</span>
+							</div>
+						}
+
+						@if (isBroadcastingStarted) {
+							<!-- Broadcasting tag -->
+							<div id="broadcasting-tag" class="broadcasting-tag">
+								<mat-icon class="blink">sensors</mat-icon>
+								<span class="blink">LIVE</span>
+							</div>
+						}
+					</div>
+				}
 			</div>
 		</div>
 	</div>
+
+	<!-- Media and menu buttons container -->
 	<div class="media-buttons-container" id="media-buttons-container">
 		<!-- Camera button -->
 		<button
@@ -229,6 +238,8 @@
 			<mat-icon>call_end</mat-icon>
 		</button>
 	</div>
+
+	<!-- Panel buttons (chat, participants, activities) -->
 	<div class="menu-buttons-container" id="menu-buttons-container">
 		<!-- Default activities button -->
 		<button
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 0b879cc1..52e15c5e 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
@@ -398,6 +398,20 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 	) {
 		this.log = this.loggerSrv.get('ToolbarComponent');
 	}
+
+	/**
+	 * @ignore
+	 */
+	get isRecordingStarted(): boolean {
+		return this.recordingStatus === this._recordingStatus.STARTED;
+	}
+
+	/**
+	 * @ignore
+	 */
+	get isBroadcastingStarted(): boolean {
+		return this.broadcastingStatus === this._broadcastingStatus.STARTED;
+	}
 	/**
 	 * @ignore
 	 */