From 414c26c31b0d6e67b8328ced92a21b24ac014709 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Wed, 30 Jul 2025 12:26:19 +0200
Subject: [PATCH] ov-components: Enhance recording status messages with
 improved styling and structure for starting and stopping states

---
 .../recording-activity.component.html         | 21 +++++---
 .../recording-activity.component.scss         | 48 ++++++++++++++++++-
 2 files changed, 62 insertions(+), 7 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 22a82ae2..9e8d95b6 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
@@ -84,18 +84,27 @@
 
 				<!-- Panel body messages -->
 				<div class="recording-status-messages">
+					<!-- Starting message -->
 					@if (recordingStatus === recStatusEnum.STARTING) {
-						<span class="recording-message">
-							{{ 'PANEL.RECORDING.STARTING' | translate }}
-						</span>
+						<div class="recording-status recording-status-starting blink" role="status">
+							<mat-icon class="status-icon" aria-hidden="true">hourglass_top</mat-icon>
+							<div class="status-content">
+								<span class="status-title">{{ 'PANEL.RECORDING.STARTING' | translate }}</span>
+							</div>
+						</div>
 					}
 
+					<!-- Stopping message -->
 					@if (recordingStatus === recStatusEnum.STOPPING) {
-						<span class="recording-message">
-							{{ 'PANEL.RECORDING.STOPPING' | translate }}
-						</span>
+						<div class="recording-status recording-status-stopping blink" role="status">
+							<mat-icon class="status-icon" aria-hidden="true">hourglass_bottom</mat-icon>
+							<div class="status-content">
+								<span class="status-title">{{ 'PANEL.RECORDING.STOPPING' | translate }}</span>
+							</div>
+						</div>
 					}
 
+					<!-- Error message -->
 					@if (showStartStopRecordingButton && recordingStatus === recStatusEnum.FAILED && recordingError) {
 						<div class="recording-error-container">
 							<div class="recording-error" role="alert">
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 741007f6..e5e77190 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
@@ -92,6 +92,52 @@
 		margin-top: 10px;
 	}
 
+	.recording-status {
+		display: flex;
+		align-items: flex-start;
+		gap: 12px;
+		border: 1px solid var(--ov-warn-color);
+		border-radius: 8px;
+		padding: 12px 16px;
+		margin: 16px 0;
+		font-size: 15px;
+		box-shadow: 0 2px 8px 0 rgba(255, 193, 7, 0.04);
+
+		.status-icon {
+			font-size: 28px;
+			color: var(--ov-warn-color);
+			flex-shrink: 0;
+			margin-top: 2px;
+		}
+
+		.status-content {
+			display: flex;
+			flex-direction: column;
+			gap: 2px;
+		}
+
+		.status-title {
+			font-weight: 600;
+			font-size: 15px;
+			margin-bottom: 2px;
+		}
+
+		.status-message {
+			font-size: 14px;
+			opacity: 0.85;
+		}
+	}
+
+	.recording-status-starting {
+		background: rgba(255, 193, 7, 0.08);
+		border-color: var(--ov-warn-color);
+	}
+
+	.recording-status-stopping {
+		background: rgba(255, 193, 7, 0.13);
+		border-color: var(--ov-warn-color);
+	}
+
 	.recording-error-container {
 		display: flex;
 		flex-direction: column;
@@ -412,7 +458,7 @@
 		margin: 16px 0;
 		color: var(--ov-error-color);
 		font-size: 15px;
-		box-shadow: 0 2px 8px 0 rgba(244,67,54,0.04);
+		box-shadow: 0 2px 8px 0 rgba(244, 67, 54, 0.04);
 
 		.error-icon {
 			font-size: 28px;