openvidu-components: Updated recording panel

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;
+	justify-content: center;
-    display: flex;
+	display: flex;
-    flex-direction: column;
+	flex-direction: column;
-    box-flex: 1;
+	box-flex: 1;
-    flex-grow: 1;
+	flex-grow: 1;
-    text-align: center;
+	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; }
+	50% {
+		opacity: 0.4;
+	}
 }

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>
 

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 (this.recordingStatus !== RecordingStatus.FAILED) {
-					if (ev.info.status === RecordingStatus.STARTED) {
+						this.oldRecordingStatus = this.recordingStatus;
-						this.liveRecording = ev.info;
-					} else {
-						this.liveRecording = null;
 					}
+					this.recordingStatus = ev.info.status;
+					this.recordingAlive = ev.info.status === RecordingStatus.STARTED;
 				}
 				this.cd.markForCheck();
 			}