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 UI with additional status indicators and style adjustments

master
Carlos Santos 2025-07-21 17:03:22 +02:00
parent 181c5f0789
commit 6fb7d9583c
2 changed files with 33 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -168,7 +168,11 @@
<div class="recording-status-indicator"> <div class="recording-status-indicator">
@if (recording.status === recStatusEnum.STARTED) { @if (recording.status === recStatusEnum.STARTED) {
<div class="status-dot recording-live"></div> <div class="status-dot recording-live"></div>
} @else { } @else if (recording.status === recStatusEnum.STOPPING) {
<div class="status-dot recording-stopping"></div>
} @else if (recording.status === recStatusEnum.FAILED) {
<div class="status-dot recording-failed"></div>
} @else if (recording.status === recStatusEnum.READY) {
<div class="status-dot recording-ready"></div> <div class="status-dot recording-ready"></div>
} }
</div> </div>
@ -216,12 +220,12 @@
@if (showControls.externalView) { @if (showControls.externalView) {
<button <button
mat-icon-button mat-button
(click)="onViewRecordingClicked.emit(recording.id)" (click)="onViewRecordingClicked.emit(recording.id)"
matTooltip="{{ 'PANEL.RECORDING.WATCH' | translate }}"
class="action-btn action-view" class="action-btn action-view"
> >
<mat-icon>open_in_new</mat-icon> <mat-icon>visibility</mat-icon>
{{ 'PANEL.RECORDING.WATCH' | translate }}
</button> </button>
} }
@ -248,12 +252,12 @@
} }
} @else { } @else {
<button <button
mat-icon-button mat-button
(click)="onViewRecordingClicked.emit(recording.id)" (click)="onViewRecordingClicked.emit(recording.id)"
matTooltip="{{ 'PANEL.RECORDING.WATCH' | translate }}"
class="action-btn action-view" class="action-btn action-view"
> >
<mat-icon>visibility</mat-icon> <mat-icon>open_in_new</mat-icon>
{{ 'PANEL.RECORDING.WATCH' | translate }}
</button> </button>
} }
</div> </div>

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

@ -103,7 +103,7 @@
.recording-list-container { .recording-list-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 10px;
padding-top: 16px; padding-top: 16px;
max-height: 500px; max-height: 500px;
@ -129,7 +129,7 @@
.recording-card { .recording-card {
background: var(--ov-surface-background-color); background: var(--ov-surface-background-color);
border: 1px solid rgba(0, 102, 204, 0.1); border: 1px solid rgba(0, 102, 204, 0.1);
border-radius: 12px; border-radius: var(--ov-surface-radius);
padding: 8px; padding: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative; position: relative;
@ -141,21 +141,7 @@
box-sizing: border-box; box-sizing: border-box;
&.recording-active { &.recording-active {
border-color: var(--ov-primary-action-color); background: linear-gradient(135deg,transparent 69%,var(--ov-error-color) 250%)
background: linear-gradient(135deg,
rgba(255, 87, 34, 0.05) 0%,
transparent 50%);
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--ov-primary-action-color);
animation: pulse-border 2s infinite;
}
} }
} }
@ -184,13 +170,22 @@
border-radius: 50%; border-radius: 50%;
&.recording-live { &.recording-live {
background: var(--ov-primary-action-color); background: #ffffff;
box-shadow: 0 0 0 4px rgba(255, 87, 34, 0.2); box-shadow: 0 0 0 4px var(--ov-error-color);
animation: pulse-dot 2s infinite; animation: pulse-dot 2s infinite;
} }
&.recording-stopping {
background: var(--ov-warn-color);
animation: pulse-dot 2s infinite;
}
&.recording-failed {
background: var(--ov-error-color);
}
&.recording-ready { &.recording-ready {
background: var(--ov-accent-action-color); background: #4caf50;
} }
} }
@ -266,7 +261,6 @@
} }
.action-btn { .action-btn {
mat-icon { mat-icon {
font-size: 18px; font-size: 18px;
width: 18px; width: 18px;
@ -284,19 +278,15 @@
&.action-view { &.action-view {
color: var(--ov-accent-action-color); color: var(--ov-accent-action-color);
border-radius: var(--ov-surface-radius);
&:hover {
background: rgba(0, 102, 204, 0.1);
color: var(--ov-accent-action-color);
}
} }
&.action-download { &.action-download {
color: #4CAF50; color: #4caf50;
&:hover { &:hover {
background: rgba(76, 175, 80, 0.1); background: rgba(76, 175, 80, 0.1);
color: #4CAF50; color: #4caf50;
} }
} }
@ -312,7 +302,8 @@
// Animations // Animations
@keyframes pulse-dot { @keyframes pulse-dot {
0%, 100% { 0%,
100% {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
} }
@ -323,7 +314,8 @@
} }
@keyframes pulse-border { @keyframes pulse-border {
0%, 100% { 0%,
100% {
opacity: 1; opacity: 1;
} }
50% { 50% {