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

ov-components: update status icons visibility and styling for better user feedback

master
Carlos Santos 2025-12-23 13:15:11 +01:00
parent ce7dd0aa6f
commit c2a87459cd
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html
View File

@ -38,7 +38,7 @@
></ov-media-element> ></ov-media-element>
@if (!_track.participant.hasEncryptionError) { @if (!_track.participant.hasEncryptionError) {
<div class="status-icons"> <div class="status-icons" *ngIf="!_track.participant?.isMicrophoneEnabled || _track.isMutedForcibly || _track.isPinned">
<mat-icon id="status-mic" fontIcon="mic_off" *ngIf="!_track.participant?.isMicrophoneEnabled"></mat-icon> <mat-icon id="status-mic" fontIcon="mic_off" *ngIf="!_track.participant?.isMicrophoneEnabled"></mat-icon>
<mat-icon id="status-muted-forcibly" fontIcon="volume_off" *ngIf="_track.isMutedForcibly"></mat-icon> <mat-icon id="status-muted-forcibly" fontIcon="volume_off" *ngIf="_track.isMutedForcibly"></mat-icon>
<mat-icon id="status-pinned" fontIcon="push_pin" *ngIf="_track.isPinned"></mat-icon> <mat-icon id="status-pinned" fontIcon="push_pin" *ngIf="_track.isPinned"></mat-icon>

24
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss
View File

@ -90,21 +90,35 @@
.status-icons { .status-icons {
position: absolute; position: absolute;
bottom: 0; bottom: 8px;
z-index: 999; z-index: 999;
left: 0; left: 8px;
line-height: 0; display: flex;
gap: 6px;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
padding: 4px 8px;
border-radius: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
#status-mic, #status-mic,
#status-muted-forcibly, #status-muted-forcibly,
#status-pinned { #status-pinned {
font-size: 24px; font-size: 20px;
margin: 5px; width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
} }
#status-mic, #status-mic,
#status-muted-forcibly { #status-muted-forcibly {
color: var(--ov-error-color); color: var(--ov-error-color);
} }
#status-pinned {
color: var(--ov-accent-action-color);
}
} }
/* Contains the video element, used to fix video letter-boxing */ /* Contains the video element, used to fix video letter-boxing */