From a46502cecac2b1eb99fe89a5f7ccdbf16d37b849 Mon Sep 17 00:00:00 2001
From: csantosm <4a.santos@gmail.com>
Date: Tue, 28 Jun 2022 12:47:29 +0200
Subject: [PATCH] openvidu-components: Improved play and download recordings

---
 .../admin/dashboard/dashboard.component.html  |  4 ++--
 .../admin/dashboard/dashboard.component.ts    | 14 ++++-------
 .../activities-panel.component.html           |  1 -
 .../activities-panel.component.ts             | 12 ----------
 .../recording-activity.component.html         |  4 ++--
 .../recording-activity.component.ts           | 14 ++++-------
 .../videoconference.component.html            |  1 -
 .../videoconference.component.ts              | 13 ----------
 .../services/recording/recording.service.ts   | 24 ++++++++++---------
 9 files changed, 25 insertions(+), 62 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html
index d0add33d7..741959aa7 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html
@@ -82,7 +82,7 @@
 										recording.properties.outputMode !== 'INDIVIDUAL'
 									"
 									mat-icon-button
-									(click)="play(recording.id)"
+									(click)="play(recording)"
 								>
 									<mat-icon id="play" aria-label="Play" title="{{ 'PANEL.RECORDING.PLAY' | translate }}"
 										>play_arrow</mat-icon
@@ -90,7 +90,7 @@
 								</button>
 
 								<button
-									(click)="download(recording.id)"
+									(click)="download(recording)"
 									*ngIf="!!recording.url && recording.status !== 'failed' && recording.status !== 'stopped'"
 									mat-icon-button
 									aria-label="Download"
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.ts
index 58ef8e8a8..cad967b94 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.ts
@@ -11,12 +11,6 @@ import { RecordingService } from '../../services/recording/recording.service';
 	styleUrls: ['./dashboard.component.css']
 })
 export class AdminDashboardComponent implements OnInit, OnDestroy {
-	/**
-	 * Provides event notifications that fire when download recording button has been clicked.
-	 * The recording should be downloaded using the REST API.
-	 * @param recordingId
-	 */
-	@Output() onDownloadRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
 
 	/**
 	 * Provides event notifications that fire when delete recording button has been clicked.
@@ -143,8 +137,8 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
 	/**
 	 * @internal
 	 */
-	download(recordingId: string) {
-		this.onDownloadRecordingClicked.emit(recordingId);
+	download(recording: RecordingInfo) {
+		this.recordingService.downloadRecording(recording);
 	}
 
 	/**
@@ -157,8 +151,8 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
 	/**
 	 * @internal
 	 */
-	async play(recordingId: string) {
-		this.recordingService.playRecording(recordingId);
+	async play(recording: RecordingInfo) {
+		this.recordingService.playRecording(recording);
 	}
 
 	private subscribeToAdminDirectives() {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html
index 8061053b1..20a7c08ce 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html
@@ -14,7 +14,6 @@
 				[expanded]="expandedPanel === 'recording'"
 				(onStartRecordingClicked)="_onStartRecordingClicked()"
 				(onStopRecordingClicked)="_onStopRecordingClicked()"
-				(onDownloadRecordingClicked)="_onDownloadRecordingClicked($event)"
 				(onDeleteRecordingClicked)="_onDeleteRecordingClicked($event)"
 			></ov-recording-activity>
 		</mat-accordion>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts
index c5b647f33..021f4418d 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts
@@ -23,11 +23,6 @@ export class ActivitiesPanelComponent implements OnInit {
 	 */
 	@Output() onStopRecordingClicked: EventEmitter<void> = new EventEmitter<void>();
 
-	/**
-	 * Provides event notifications that fire when download recording button has been clicked.
-	 * The recording should be downloaded using the OpenVidu REST API.
-	 */
-	@Output() onDownloadRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
 	/**
 	 * Provides event notifications that fire when delete recording button has been clicked.
 	 * The recording should be deleted using the OpenVidu REST API.
@@ -88,13 +83,6 @@ export class ActivitiesPanelComponent implements OnInit {
 		this.onStopRecordingClicked.emit();
 	}
 
-	/**
-	 * @internal
-	 */
-	_onDownloadRecordingClicked(recordingId: string) {
-		this.onDownloadRecordingClicked.emit(recordingId);
-	}
-
 	/**
 	 * @internal
 	 */
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 1b5f71c4a..3769ebbb8 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
@@ -101,7 +101,7 @@
 
 					<button
 						mat-icon-button
-						(click)="play(recording.id)"
+						(click)="play(recording)"
 						id="play-recording-btn"
 						matTooltip="{{ 'PANEL.RECORDING.PLAY' | translate }}"
 					>
@@ -109,7 +109,7 @@
 					</button>
 					<button
 						mat-icon-button
-						(click)="download(recording.id)"
+						(click)="download(recording)"
 						id="download-recording-btn"
 						matTooltip="{{ 'PANEL.RECORDING.DOWNLOAD' | translate }}"
 					>
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 a7542945f..61a5e857e 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
@@ -31,12 +31,6 @@ export class RecordingActivityComponent implements OnInit {
 	 */
 	@Output() onStopRecordingClicked: EventEmitter<void> = new EventEmitter<void>();
 
-	/**
-	 * Provides event notifications that fire when download recording button has been clicked.
-	 * The recording should be downloaded using the REST API.
-	 */
-	@Output() onDownloadRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
-
 	/**
 	 * Provides event notifications that fire when delete recording button has been clicked.
 	 * The recording should be deleted using the REST API.
@@ -168,15 +162,15 @@ export class RecordingActivityComponent implements OnInit {
 	/**
 	 * @internal
 	 */
-	download(recordingId: string) {
-		this.onDownloadRecordingClicked.emit(recordingId);
+	download(recording: RecordingInfo) {
+		this.recordingService.downloadRecording(recording);
 	}
 
 	/**
 	 * @internal
 	 */
-	play(recordingId: string) {
-		this.recordingService.playRecording(recordingId);
+	play(recording: RecordingInfo) {
+		this.recordingService.playRecording(recording);
 	}
 
 	private subscribeToRecordingStatus() {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
index 1a0c58282..305961c5f 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
@@ -98,7 +98,6 @@
 		id="default-activities-panel"
 		(onStartRecordingClicked)="onStartRecordingClicked('panel')"
 		(onStopRecordingClicked)="onStopRecordingClicked('panel')"
-		(onDownloadRecordingClicked)="onDownloadRecordingClicked($event)"
 		(onDeleteRecordingClicked)="onDeleteRecordingClicked($event)"
 	></ov-activities-panel>
 </ng-template>
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
index 0eb47189c..0993b7b4e 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
@@ -352,12 +352,6 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
 	 */
 	@Output() onActivitiesPanelStopRecordingClicked: EventEmitter<void> = new EventEmitter<void>();
 
-	/**
-	 * Provides event notifications that fire when download recording button is clicked from {@link ActivitiesPanelComponent}.
-	 *  The recording should be downloaded using the REST API.
-	 */
-	@Output() onActivitiesPanelDownloadRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
-
 	/**
 	 * Provides event notifications that fire when delete recording button is clicked from {@link ActivitiesPanelComponent}.
 	 *  The recording should be deleted using the REST API.
@@ -636,13 +630,6 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
 		}
 	}
 
-	/**
-	 * @internal
-	 */
-	onDownloadRecordingClicked(recordingId: string) {
-		this.onActivitiesPanelDownloadRecordingClicked.emit(recordingId);
-	}
-
 	/**
 	 * @internal
 	 */
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/recording/recording.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/recording/recording.service.ts
index 61290a654..7cc362381 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/recording/recording.service.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/recording/recording.service.ts
@@ -71,21 +71,24 @@ export class RecordingService {
 	 * @internal
 	 * Play the recording blob received as parameter. This parameter must be obtained from backend using the OpenVidu REST API
 	 */
-	playRecording(recordingId: string) {
-		this.actionService.openRecordingPlayerDialog(`${this.baseUrl}recordings/${recordingId}`);
+	playRecording(recording: RecordingInfo) {
+		const recordingId = recording.id;
+		const extension = recording.url?.split('.').pop();
+		this.actionService.openRecordingPlayerDialog(`${this.baseUrl}recordings/${recordingId}/${recordingId}.${extension}`);
 	}
 
 	/**
-	 * Download the the recording blob received as second parameter and renamed with the value of the firts parameter.
-	 * This parameter must be obtained from backend using the OpenVidu REST API
-	 * @param fileName
-	 * @param blob
+	 * @internal
+	 * Download the the recording file received .
+	 * @param recording
 	 */
-	downloadRecording(fileName: string, blob: Blob) {
-		const data = URL.createObjectURL(blob);
+	downloadRecording(recording: RecordingInfo) {
+		const recordingId = recording.id;
+		const extension = recording.url?.split('.').pop();
+
 		const link = document.createElement('a');
-		link.href = data;
-		link.download = `${fileName}.mp4`;
+		link.href = `/recordings/${recordingId}/${recordingId}.${extension}`;
+		link.download = `${recordingId}.${extension}`;
 		link.dispatchEvent(
 			new MouseEvent('click', {
 				bubbles: true,
@@ -96,7 +99,6 @@ export class RecordingService {
 
 		setTimeout(() => {
 			// For Firefox it is necessary to delay revoking the ObjectURL
-			window.URL.revokeObjectURL(data);
 			link.remove();
 		}, 100);
 	}