From 07e4ede64d85c978bbe0cbbec848572e059f1de7 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Mon, 24 Jun 2024 18:10:47 +0200
Subject: [PATCH] ov-components: Fixed  recording panel elements

---
 .../recording-activity.component.css          |  6 ++
 .../recording-activity.component.html         | 64 ++++++++++---------
 2 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.css
index 9b0052ddd6..8a23513cf4 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.css
@@ -96,6 +96,12 @@
 	margin-bottom: 20px;
 }
 
+#recording-action-buttons {
+	position: absolute;
+	bottom: 10px;
+	right: 0;
+}
+
 #start-recording-btn {
 	width: 100%;
 	background-color: var(--ov-tertiary-color);
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
index c049e8896c..cd81237c98 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.html
@@ -90,45 +90,47 @@ <h2 *ngIf="recordingsList.length === 0">{{ 'PANEL.RECORDING.CONTENT_TITLE' | tra
 		<!-- Recording list -->
 		<div *ngIf="recordingsList.length > 0" class="item">
 			<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-icon class="recording-icon" mat-list-icon>video_file</mat-icon>
-					<div mat-line>
+					<mat-icon class="recording-icon" matListItemIcon>video_file</mat-icon>
+					<div matListItemTitle>
 						<span class="recording-name">{{ recording.id }}</span>
 					</div>
-					<div mat-line class="time-container">
+					<div matListItemLine class="time-container">
 						<span class="recording-duration"> {{ recording.duration | duration }} </span>
 						<span class="recording-size"> | {{ recording.size / 1024 / 1024 | number : '1.1-2' }} MBs</span>
 					</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
-						mat-icon-button
-						(click)="play(recording)"
-						id="play-recording-btn"
-						matTooltip="{{ 'PANEL.RECORDING.PLAY' | translate }}"
-					>
-						<mat-icon>play_arrow</mat-icon>
-					</button>
-					<button
-						mat-icon-button
-						(click)="download(recording)"
-						id="download-recording-btn"
-						matTooltip="{{ 'PANEL.RECORDING.DOWNLOAD' | translate }}"
-					>
-						<mat-icon>download</mat-icon>
-					</button>
+					<div *ngIf="recording.status !== recStatusEnum.STARTED" id="recording-action-buttons">
+						<button
+							mat-icon-button
+							(click)="play(recording)"
+							id="play-recording-btn"
+							matTooltip="{{ 'PANEL.RECORDING.PLAY' | translate }}"
+						>
+							<mat-icon>play_arrow</mat-icon>
+						</button>
+						<button
+							mat-icon-button
+							(click)="download(recording)"
+							id="download-recording-btn"
+							matTooltip="{{ 'PANEL.RECORDING.DOWNLOAD' | translate }}"
+						>
+							<mat-icon>download</mat-icon>
+						</button>
 
-					<button
-						*ngIf="isSessionCreator"
-						mat-icon-button
-						class="delete-recording-btn"
-						id="delete-recording-btn"
-						(click)="deleteRecording(recording.id)"
-						matTooltip="{{ 'PANEL.RECORDING.DELETE' | translate }}"
-					>
-						<mat-icon>delete</mat-icon>
-					</button>
+						<button
+							*ngIf="isSessionCreator"
+							mat-icon-button
+							class="delete-recording-btn"
+							id="delete-recording-btn"
+							(click)="deleteRecording(recording.id)"
+							matTooltip="{{ 'PANEL.RECORDING.DELETE' | translate }}"
+						>
+							<mat-icon>delete</mat-icon>
+						</button>
+					</div>
 				</mat-list-item>
 			</mat-list>
 		</div>