ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ov-components: Enhance recording status messages with improved styling and structure for starting and stopping states

master
Carlos Santos 2025-07-30 12:26:19 +02:00
parent fce026766b
commit 414c26c31b
2 changed files with 62 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
View File

@ -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">

48
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss
View File

@ -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;