From 9b8348bc0457d9352d4e4b353537714b06d731bf Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Tue, 29 Jul 2025 17:35:28 +0200
Subject: [PATCH] ov-components: Enhance recording activity component with
 improved status handling and styling

---
 .../recording-activity.component.html         | 68 +++++++++----------
 .../recording-activity.component.scss         |  7 +-
 2 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
index 88557b8a..26c4499f 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
@@ -62,7 +62,7 @@
 				}
 
 				<!-- Empty state content -->
-				@if (recordingList.length === 0) {
+				@if (recordingList.length === 0 && recordingStatus === recStatusEnum.STOPPED) {
 					<div class="empty-state">
 						<h2 class="recording-title">
 							{{
@@ -83,8 +83,40 @@
 					</div>
 				}
 
+				<!-- Panel body messages -->
+				<div class="recording-status-messages">
+					@if (recordingStatus === recStatusEnum.STARTING) {
+						<span class="recording-message">
+							{{ 'PANEL.RECORDING.STARTING' | translate }}
+						</span>
+					}
+
+					@if (recordingStatus === recStatusEnum.STOPPING) {
+						<span class="recording-message">
+							{{ 'PANEL.RECORDING.STOPPING' | translate }}
+						</span>
+					}
+
+					@if (recordingStatus === recStatusEnum.FAILED) {
+						<div class="recording-error-container">
+							<span class="recording-error">{{ recordingError }}</span>
+							<button mat-flat-button id="reset-recording-status-btn" (click)="resetStatus()">
+								<span>{{ 'PANEL.RECORDING.ACCEPT' | translate }}</span>
+							</button>
+						</div>
+					}
+				</div>
+
 				<!-- Recording control buttons -->
-				@if (!isReadOnlyMode) {
+				@if (isReadOnlyMode) {
+					<!-- View all recordings button -->
+					<div class="item recording-action-buttons">
+						<button mat-flat-button id="view-recordings-btn" (click)="viewAllRecordings()" class="view-recordings-button">
+							<span>{{ 'TOOLBAR.VIEW_RECORDINGS' | translate }}</span>
+							<mat-icon class="external-link-icon">open_in_new</mat-icon>
+						</button>
+					</div>
+				} @else {
 					<div class="item recording-action-buttons">
 						<!-- Stop recording button -->
 						@if (recordingAlive && showStartStopRecordingButton) {
@@ -126,38 +158,6 @@
 								</button>
 							</div>
 						}
-
-						<!-- Recording status messages -->
-						<div class="recording-status-messages">
-							@if (recordingStatus === recStatusEnum.STARTING) {
-								<span class="recording-message">
-									{{ 'PANEL.RECORDING.STARTING' | translate }}
-								</span>
-							}
-
-							@if (recordingStatus === recStatusEnum.STOPPING) {
-								<span class="recording-message">
-									{{ 'PANEL.RECORDING.STOPPING' | translate }}
-								</span>
-							}
-
-							@if (recordingStatus === recStatusEnum.FAILED) {
-								<div class="recording-error-container">
-									<span class="recording-error">Message: {{ recordingError }}</span>
-									<button mat-flat-button id="reset-recording-status-btn" (click)="resetStatus()">
-										<span>{{ 'PANEL.RECORDING.ACCEPT' | translate }}</span>
-									</button>
-								</div>
-							}
-						</div>
-					</div>
-				} @else {
-					<!-- View all recordings button -->
-					<div class="item recording-action-buttons">
-						<button mat-flat-button id="view-recordings-btn" (click)="viewAllRecordings()" class="view-recordings-button">
-							<span>{{ 'TOOLBAR.VIEW_RECORDINGS' | translate }}</span>
-							<mat-icon class="external-link-icon">open_in_new</mat-icon>
-						</button>
 					</div>
 				}
 			</div>
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss
index 91dcc98d..6459900a 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss
@@ -141,7 +141,7 @@
 		box-sizing: border-box;
 
 		&.recording-active {
-			background: linear-gradient(135deg,transparent 69%,var(--ov-error-color) 250%)
+			background: linear-gradient(135deg, transparent 69%, var(--ov-error-color) 250%);
 		}
 	}
 
@@ -453,6 +453,7 @@
 		width: 100%;
 		background-color: var(--ov-primary-action-color);
 		color: var(--ov-secondary-action-color);
+		border-radius: var(--ov-surface-radius);
 	}
 
 	#view-recordings-btn {
@@ -475,11 +476,13 @@
 		width: 100%;
 		background-color: var(--ov-error-color);
 		color: var(--ov-secondary-action-color);
+		border-radius: var(--ov-surface-radius);
 	}
 
 	#reset-recording-status-btn {
 		width: 100%;
-		background-color: var(--ov-secondary-action-color);
+		background-color: var(--ov-accent-action-color);
+		border-radius: var(--ov-surface-radius);
 	}
 
 	.recording-item {