From cf77883982f6ce39f7232e81cdb5c51e77d7e671 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Mon, 13 Jun 2022 14:04:23 +0200
Subject: [PATCH] openvidu-components: Updated recording panel

---
 .../recording-activity.component.css          | 29 ++++++++++++-------
 .../recording-activity.component.html         | 28 +++++++++++++++---
 .../recording-activity.component.ts           | 28 +++++++++++++-----
 3 files changed, 63 insertions(+), 22 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.css
index 25ae5e17..b7048a65 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.css
@@ -28,13 +28,13 @@
 	height: 18px;
 }
 
-
 .started {
 	background-color: #3b7430 !important;
 	color: var(--ov-text-color);
 }
 
-.activity-icon.started, .failed {
+.activity-icon.started,
+.failed {
 	background-color: var(--ov-warn-color) !important;
 	color: var(--ov-text-color);
 }
@@ -54,12 +54,12 @@
 
 .panel-body-container > .content {
 	align-items: stretch;
-    justify-content: center;
-    display: flex;
-    flex-direction: column;
-    box-flex: 1;
-    flex-grow: 1;
-    text-align: center;
+	justify-content: center;
+	display: flex;
+	flex-direction: column;
+	box-flex: 1;
+	flex-grow: 1;
+	text-align: center;
 }
 
 .recording-error {
@@ -87,11 +87,13 @@
 }
 
 #start-recording-btn {
+	width: 100%;
 	background-color: var(--ov-tertiary-color);
 	color: var(--ov-text-color);
 }
 
 #stop-recording-btn {
+	width: 100%;
 	background-color: var(--ov-warn-color);
 	color: var(--ov-text-color);
 }
@@ -100,6 +102,11 @@
 	color: var(--ov-warn-color);
 }
 
+#reset-recording-status-btn {
+	width: 100%;
+	background-color: var(--ov-light-color);
+}
+
 mat-expansion-panel {
 	margin: 0px 0px 15px 0px;
 }
@@ -108,5 +115,7 @@ mat-expansion-panel {
 	animation: blinker 1.5s linear infinite !important;
 }
 @keyframes blinker {
-	50% { opacity: 0.4; }
-}
\ No newline at end of file
+	50% {
+		opacity: 0.4;
+	}
+}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.html
index d3cb66c3..1b5f71c4 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.html
@@ -50,13 +50,13 @@
 
 			<!-- Recording button -->
 			<div *ngIf="isSessionCreator" class="item recording-action-buttons">
-				<button *ngIf="liveRecording" mat-stroked-button id="stop-recording-btn" (click)="stopRecording()">
+				<button *ngIf="recordingAlive" mat-flat-button id="stop-recording-btn" (click)="stopRecording()">
 					<span>{{ 'TOOLBAR.STOP_RECORDING' | translate }}</span>
 				</button>
 
 				<button
 					*ngIf="recordingStatus === recStatusEnum.STOPPED"
-					mat-stroked-button
+					mat-flat-button
 					id="start-recording-btn"
 					(click)="startRecording()"
 				>
@@ -67,6 +67,16 @@
 				<span *ngIf="recordingStatus === recStatusEnum.STOPPING">{{ 'PANEL.RECORDING.STOPPING' | translate }} </span>
 				<span *ngIf="recordingStatus === recStatusEnum.FAILED">Message: </span>
 				<span *ngIf="recordingStatus === recStatusEnum.FAILED" class="recording-error">{{ recordingError | json }} </span>
+				<div>
+					<button
+						*ngIf="recordingStatus === recStatusEnum.FAILED"
+						mat-flat-button
+						id="reset-recording-status-btn"
+						(click)="resetStatus()"
+					>
+						<span>{{ 'PANEL.RECORDING.RESTORE' | translate }}</span>
+					</button>
+				</div>
 			</div>
 
 			<!-- Message for no Moderators-->
@@ -89,10 +99,20 @@
 					</div>
 					<div mat-line class="recording-date">{{ recording.createdAt | date: 'HH:mm - dd/MM/yyyy' }}</div>
 
-					<button mat-icon-button (click)="play(recording.id)" id="play-recording-btn" matTooltip="{{ 'PANEL.RECORDING.PLAY' | translate }}">
+					<button
+						mat-icon-button
+						(click)="play(recording.id)"
+						id="play-recording-btn"
+						matTooltip="{{ 'PANEL.RECORDING.PLAY' | translate }}"
+					>
 						<mat-icon>play_arrow</mat-icon>
 					</button>
-					<button mat-icon-button (click)="download(recording.id)" id="download-recording-btn" matTooltip="{{ 'PANEL.RECORDING.DOWNLOAD' | translate }}">
+					<button
+						mat-icon-button
+						(click)="download(recording.id)"
+						id="download-recording-btn"
+						matTooltip="{{ 'PANEL.RECORDING.DOWNLOAD' | translate }}"
+					>
 						<mat-icon>download</mat-icon>
 					</button>
 
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.ts
index f666c988..7b9a3cba 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.ts
@@ -51,6 +51,7 @@ export class RecordingActivityComponent implements OnInit {
 	 * @internal
 	 */
 	recordingStatus: RecordingStatus = RecordingStatus.STOPPED;
+	oldRecordingStatus: RecordingStatus;
 	/**
 	 * @internal
 	 */
@@ -69,7 +70,7 @@ export class RecordingActivityComponent implements OnInit {
 	/**
 	 * @internal
 	 */
-	liveRecording: RecordingInfo;
+	recordingAlive: boolean = false;
 	/**
 	 * @internal
 	 */
@@ -117,7 +118,6 @@ export class RecordingActivityComponent implements OnInit {
 	 * @internal
 	 */
 	panelOpened() {
-		//TODO emit event
 		this.opened = true;
 	}
 
@@ -125,10 +125,22 @@ export class RecordingActivityComponent implements OnInit {
 	 * @internal
 	 */
 	panelClosed() {
-		//TODO emit event
 		this.opened = false;
 	}
 
+	/**
+	 * @internal
+	 */
+	resetStatus() {
+		let status: RecordingStatus = this.oldRecordingStatus;
+		if (this.oldRecordingStatus === RecordingStatus.STARTING) {
+			status = RecordingStatus.STOPPED;
+		} else if (this.oldRecordingStatus === RecordingStatus.STOPPING) {
+			status = RecordingStatus.STARTED;
+		}
+		this.recordingService.updateStatus(status);
+	}
+
 	/**
 	 * @internal
 	 */
@@ -168,18 +180,18 @@ export class RecordingActivityComponent implements OnInit {
 	 */
 	play(recordingId: string) {
 		this.onPlayRecordingClicked.emit(recordingId);
+		// this.recordingService.playRecording2(this.recordingsList.find(rec => rec.id === recordingId).url)
 	}
 
 	private subscribeToRecordingStatus() {
 		this.recordingStatusSubscription = this.recordingService.recordingStatusObs.subscribe(
 			(ev: { info: RecordingInfo; time?: Date }) => {
 				if (ev?.info) {
-					this.recordingStatus = ev.info.status;
-					if (ev.info.status === RecordingStatus.STARTED) {
-						this.liveRecording = ev.info;
-					} else {
-						this.liveRecording = null;
+					if (this.recordingStatus !== RecordingStatus.FAILED) {
+						this.oldRecordingStatus = this.recordingStatus;
 					}
+					this.recordingStatus = ev.info.status;
+					this.recordingAlive = ev.info.status === RecordingStatus.STARTED;
 				}
 				this.cd.markForCheck();
 			}