openvidu-components: Improved play and download recordings

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"

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) {
+	download(recording: RecordingInfo) {
-		this.onDownloadRecordingClicked.emit(recordingId);
+		this.recordingService.downloadRecording(recording);
 	}
 
 	/**
@@ -157,8 +151,8 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
 	/**
 	 * @internal
 	 */
-	async play(recordingId: string) {
+	async play(recording: RecordingInfo) {
-		this.recordingService.playRecording(recordingId);
+		this.recordingService.playRecording(recording);
 	}
 
 	private subscribeToAdminDirectives() {

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>

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
 	 */

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 }}"
 					>

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) {
+	download(recording: RecordingInfo) {
-		this.onDownloadRecordingClicked.emit(recordingId);
+		this.recordingService.downloadRecording(recording);
 	}
 
 	/**
 	 * @internal
 	 */
-	play(recordingId: string) {
+	play(recording: RecordingInfo) {
-		this.recordingService.playRecording(recordingId);
+		this.recordingService.playRecording(recording);
 	}
 
 	private subscribeToRecordingStatus() {

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>

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
 	 */

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) {
+	playRecording(recording: RecordingInfo) {
-		this.actionService.openRecordingPlayerDialog(`${this.baseUrl}recordings/${recordingId}`);
+		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.
+	 * @internal
-	 * This parameter must be obtained from backend using the OpenVidu REST API
+	 * Download the the recording file received .
-	 * @param fileName
+	 * @param recording
-	 * @param blob
 	 */
-	downloadRecording(fileName: string, blob: Blob) {
+	downloadRecording(recording: RecordingInfo) {
-		const data = URL.createObjectURL(blob);
+		const recordingId = recording.id;
+		const extension = recording.url?.split('.').pop();
+
 		const link = document.createElement('a');
-		link.href = data;
+		link.href = `/recordings/${recordingId}/${recordingId}.${extension}`;
-		link.download = `${fileName}.mp4`;
+		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);
 	}