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

ov-components: Fixed recording panel elements

pull/820/merge
Carlos Santos 2024-06-24 18:10:47 +02:00
parent 5dd689adc6
commit 07e4ede64d
2 changed files with 39 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -96,6 +96,12 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
#recording-action-buttons {
position: absolute;
bottom: 10px;
right: 0;
}
#start-recording-btn { #start-recording-btn {
width: 100%; width: 100%;
background-color: var(--ov-tertiary-color); background-color: var(--ov-tertiary-color);

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

@ -90,45 +90,47 @@
<!-- Recording list --> <!-- Recording list -->
<div *ngIf="recordingsList.length > 0" class="item"> <div *ngIf="recordingsList.length > 0" class="item">
<mat-list> <mat-list>
<div mat-subheader>{{ 'PANEL.RECORDING.RECORDINGS' | translate }}</div> <!-- <div mat-subheader>{{ 'PANEL.RECORDING.RECORDINGS' | translate }}</div> -->
<mat-list-item *ngFor="let recording of recordingsList"> <mat-list-item *ngFor="let recording of recordingsList">
<mat-icon class="recording-icon" mat-list-icon>video_file</mat-icon> <mat-icon class="recording-icon" matListItemIcon>video_file</mat-icon>
<div mat-line> <div matListItemTitle>
<span class="recording-name">{{ recording.id }}</span> <span class="recording-name">{{ recording.id }}</span>
</div> </div>
<div mat-line class="time-container"> <div matListItemLine class="time-container">
<span class="recording-duration"> {{ recording.duration | duration }} </span> <span class="recording-duration"> {{ recording.duration | duration }} </span>
<span class="recording-size"> | {{ recording.size / 1024 / 1024 | number : '1.1-2' }} MBs</span> <span class="recording-size"> | {{ recording.size / 1024 / 1024 | number : '1.1-2' }} MBs</span>
</div> </div>
<div mat-line class="recording-date">{{ recording.createdAt | date : 'HH:mm - dd/MM/yyyy' }}</div> <div matListItemLine class="recording-date">{{ recording.createdAt | date : 'HH:mm - dd/MM/yyyy' }}</div>
<button <div *ngIf="recording.status !== recStatusEnum.STARTED" id="recording-action-buttons">
mat-icon-button <button
(click)="play(recording)" mat-icon-button
id="play-recording-btn" (click)="play(recording)"
matTooltip="{{ 'PANEL.RECORDING.PLAY' | translate }}" id="play-recording-btn"
> matTooltip="{{ 'PANEL.RECORDING.PLAY' | translate }}"
<mat-icon>play_arrow</mat-icon> >
</button> <mat-icon>play_arrow</mat-icon>
<button </button>
mat-icon-button <button
(click)="download(recording)" mat-icon-button
id="download-recording-btn" (click)="download(recording)"
matTooltip="{{ 'PANEL.RECORDING.DOWNLOAD' | translate }}" id="download-recording-btn"
> matTooltip="{{ 'PANEL.RECORDING.DOWNLOAD' | translate }}"
<mat-icon>download</mat-icon> >
</button> <mat-icon>download</mat-icon>
</button>
<button <button
*ngIf="isSessionCreator" *ngIf="isSessionCreator"
mat-icon-button mat-icon-button
class="delete-recording-btn" class="delete-recording-btn"
id="delete-recording-btn" id="delete-recording-btn"
(click)="deleteRecording(recording.id)" (click)="deleteRecording(recording.id)"
matTooltip="{{ 'PANEL.RECORDING.DELETE' | translate }}" matTooltip="{{ 'PANEL.RECORDING.DELETE' | translate }}"
> >
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
</div> </div>