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 activity component with improved status handling and styling

master
Carlos Santos 2025-07-29 17:35:28 +02:00
parent 1403d062e9
commit 9b8348bc04
2 changed files with 39 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,7 +62,7 @@
} }
<!-- Empty state content --> <!-- Empty state content -->
@if (recordingList.length === 0) { @if (recordingList.length === 0 && recordingStatus === recStatusEnum.STOPPED) {
<div class="empty-state"> <div class="empty-state">
<h2 class="recording-title"> <h2 class="recording-title">
{{ {{
@ -83,8 +83,40 @@
</div> </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 --> <!-- 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"> <div class="item recording-action-buttons">
<!-- Stop recording button --> <!-- Stop recording button -->
@if (recordingAlive && showStartStopRecordingButton) { @if (recordingAlive && showStartStopRecordingButton) {
@ -126,38 +158,6 @@
</button> </button>
</div> </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>
} }
</div> </div>

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

@ -141,7 +141,7 @@
box-sizing: border-box; box-sizing: border-box;
&.recording-active { &.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%; width: 100%;
background-color: var(--ov-primary-action-color); background-color: var(--ov-primary-action-color);
color: var(--ov-secondary-action-color); color: var(--ov-secondary-action-color);
border-radius: var(--ov-surface-radius);
} }
#view-recordings-btn { #view-recordings-btn {
@ -475,11 +476,13 @@
width: 100%; width: 100%;
background-color: var(--ov-error-color); background-color: var(--ov-error-color);
color: var(--ov-secondary-action-color); color: var(--ov-secondary-action-color);
border-radius: var(--ov-surface-radius);
} }
#reset-recording-status-btn { #reset-recording-status-btn {
width: 100%; width: 100%;
background-color: var(--ov-secondary-action-color); background-color: var(--ov-accent-action-color);
border-radius: var(--ov-surface-radius);
} }
.recording-item { .recording-item {