openvidu-components: Improved play recordings feature

openvidu-components-angular/e2e/webcomponent-app/app.js

@@ -94,7 +94,6 @@ $(document).ready(() => {
 
     webComponent.addEventListener('onActivitiesPanelDownloadRecordingClicked', (event) => appendElement('onActivitiesPanelDownloadRecordingClicked'));
     webComponent.addEventListener('onActivitiesPanelDeleteRecordingClicked', (event) => appendElement('onActivitiesPanelDeleteRecordingClicked'));
-    webComponent.addEventListener('onActivitiesPanelPlayRecordingClicked', (event) => appendElement('onActivitiesPanelPlayRecordingClicked'));
 
     webComponent.addEventListener('onSessionCreated', (event) => {
         var session = event.detail;

openvidu-components-angular/e2e/webcomponent.test.ts

@@ -844,12 +844,6 @@ describe('Testing videoconference EVENTS', () => {
 		element = await browser.wait(until.elementLocated(By.id('onActivitiesPanelDeleteRecordingClicked')), TIMEOUT);
 		expect(await element.isDisplayed()).to.be.true;
 
-		// Play event
-		element = await browser.findElement(By.id('play-recording-btn'));
-		expect(await element.isDisplayed()).to.be.true;
-		await element.click();
-		element = await browser.wait(until.elementLocated(By.id('onActivitiesPanelPlayRecordingClicked')), TIMEOUT);
-		expect(await element.isDisplayed()).to.be.true;
 	});
 
 	it('should receive the onSessionCreated event', async () => {

openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.ts

@@ -3,6 +3,7 @@ import { Subscription } from 'rxjs';
 import { RecordingInfo } from '../../models/recording.model';
 import { ActionService } from '../../services/action/action.service';
 import { OpenViduAngularConfigService } from '../../services/config/openvidu-angular.config.service';
+import { RecordingService } from '../../services/recording/recording.service';
 
 @Component({
 	selector: 'ov-admin-dashboard',
@@ -24,12 +25,6 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
 	 */
 	@Output() onDeleteRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
 
-	/**
-	 * Provides event notifications that fire when play recording button has been clicked.
-	 * @param recordingId
-	 */
-	@Output() onPlayRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
-
 	/**
 	 * Provides event notifications that fire when refresh recordings button has been clicked.
 	 */
@@ -62,7 +57,7 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
 	 */
 	constructor(
 		private actionService: ActionService,
-
+		private recordingService: RecordingService,
 		private libService: OpenViduAngularConfigService
 	) {}
 
@@ -163,7 +158,7 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
 	 * @internal
 	 */
 	async play(recordingId: string) {
-		this.onPlayRecordingClicked.emit(recordingId);
+		this.recordingService.playRecording(recordingId);
 	}
 
 	private subscribeToAdminDirectives() {

openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/recording-dialog.component.ts

@@ -8,9 +8,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 	selector: 'app-recording-dialog',
 	template: `
 		<div mat-dialog-content>
-			<video controls autoplay>
+			<video controls autoplay [src]="src"></video>
-				<source [src]="src" [type]="type" />
-			</video>
 		</div>
 		<div mat-dialog-actions *ngIf="data.showActionButtons" align="end">
 			<button mat-button (click)="close()">{{ 'PANEL.CLOSE' | translate }}</button>
@@ -31,7 +29,6 @@ export class RecordingDialogComponent {
 
 	constructor(public dialogRef: MatDialogRef<RecordingDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
 		this.src = data.src;
-		this.type = data.type;
 	}
 	close() {
 		this.dialogRef.close();

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.html

@@ -16,7 +16,6 @@
 				(onStopRecordingClicked)="_onStopRecordingClicked()"
 				(onDownloadRecordingClicked)="_onDownloadRecordingClicked($event)"
 				(onDeleteRecordingClicked)="_onDeleteRecordingClicked($event)"
-				(onPlayRecordingClicked)="_onPlayRecordingClicked($event)"
 			></ov-recording-activity>
 		</mat-accordion>
 	</div>

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts

@@ -33,10 +33,7 @@ export class ActivitiesPanelComponent implements OnInit {
 	 * The recording should be deleted using the OpenVidu REST API.
 	 */
 	@Output() onDeleteRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
-	/**
+
-	 * Provides event notifications that fire when play recording button has been clicked.
-	 */
-	@Output() onPlayRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
 
 	/**
 	 * @internal
@@ -105,13 +102,6 @@ export class ActivitiesPanelComponent implements OnInit {
 		this.onDeleteRecordingClicked.emit(recordingId);
 	}
 
-	/**
-	 * @internal
-	 */
-	_onPlayRecordingClicked(recordingId: string) {
-		this.onPlayRecordingClicked.emit(recordingId);
-	}
-
 	private subscribeToPanelToggling() {
 		this.panelSubscription = this.panelService.panelOpenedObs.subscribe(
 			(ev: PanelEvent) => {

openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/activities-panel/recording-activity-panel/recording-activity.component.ts

@@ -43,10 +43,7 @@ export class RecordingActivityComponent implements OnInit {
 	 */
 	@Output() onDeleteRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
 
-	/**
+
-	 * Provides event notifications that fire when play recording button has been clicked.
-	 */
-	@Output() onPlayRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
 	/**
 	 * @internal
 	 */
@@ -179,8 +176,7 @@ export class RecordingActivityComponent implements OnInit {
 	 * @internal
 	 */
 	play(recordingId: string) {
-		this.onPlayRecordingClicked.emit(recordingId);
+		this.recordingService.playRecording(recordingId);
-		// this.recordingService.playRecording2(this.recordingsList.find(rec => rec.id === recordingId).url)
 	}
 
 	private subscribeToRecordingStatus() {

openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html

@@ -100,7 +100,6 @@
 		(onStopRecordingClicked)="onStopRecordingClicked('panel')"
 		(onDownloadRecordingClicked)="onDownloadRecordingClicked($event)"
 		(onDeleteRecordingClicked)="onDeleteRecordingClicked($event)"
-		(onPlayRecordingClicked)="onPlayRecordingClicked($event)"
 	></ov-activities-panel>
 </ng-template>
 

openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts

@@ -650,13 +650,6 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni
 		this.onActivitiesPanelDeleteRecordingClicked.emit(recordingId);
 	}
 
-	/**
-	 * @internal
-	 */
-	onPlayRecordingClicked(recordingId: string) {
-		this.onActivitiesPanelPlayRecordingClicked.emit(recordingId);
-	}
-
 	/**
 	 * @internal
 	 */

openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
 import { Subscription } from 'rxjs';
 import { DeleteDialogComponent } from '../../components/dialogs/delete-recording.component';
 import { RecordingDialogComponent } from '../../components/dialogs/recording-dialog.component';
@@ -68,14 +67,14 @@ export class ActionService {
 		}
 	}
 
-	openRecordingPlayerDialog(src: SafeUrl, type: string, allowClose = true) {
+	openRecordingPlayerDialog(src: string, allowClose = true) {
 		try {
 			this.closeDialog();
 		} catch (error) {
 		} finally {
 			const config: MatDialogConfig = {
 				minWidth: '250px',
-				data: { src, type, showActionButtons: allowClose },
+				data: { src, showActionButtons: allowClose },
 				disableClose: !allowClose
 			};
 			this.dialogRef = this.dialog.open(RecordingDialogComponent, config);

openvidu-components-angular/projects/openvidu-angular/src/lib/services/recording/recording.service.ts

@@ -18,6 +18,8 @@ export class RecordingService {
 	private recordingTimeInterval: NodeJS.Timer;
 	private currentRecording: RecordingInfo = { status: RecordingStatus.STOPPED };
 	private recordingStatus = <BehaviorSubject<{ info: RecordingInfo; time?: Date }>>new BehaviorSubject(null);
+	private baseUrl = '/' + (!!window.location.pathname.split('/')[1] ? window.location.pathname.split('/')[1] + '/' : '');
+
 
 	/**
 	 * @internal
@@ -66,12 +68,11 @@ export class RecordingService {
 	}
 
 	/**
+	 * @internal
 	 * Play the recording blob received as parameter. This parameter must be obtained from backend using the OpenVidu REST API
-	 * @param blob
 	 */
-	playRecording(file: Blob) {
+	playRecording(recordingId: string) {
-		const src = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file));
+		this.actionService.openRecordingPlayerDialog(`${this.baseUrl}recordings/${recordingId}`);
-		this.actionService.openRecordingPlayerDialog(src, file.type, true);
 	}
 
 	/**
@@ -85,8 +86,6 @@ export class RecordingService {
 		const link = document.createElement('a');
 		link.href = data;
 		link.download = `${fileName}.mp4`;
-
-		// this is necessary as link.click() does not work on the latest firefox
 		link.dispatchEvent(
 			new MouseEvent('click', {
 				bubbles: true,

openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.html

@@ -39,7 +39,6 @@
 	(onActivitiesPanelStopRecordingClicked)="onStopRecordingClicked('panel')"
 	(onActivitiesPanelDownloadRecordingClicked)="_onActivitiesDownloadRecordingClicked($event)"
 	(onActivitiesPanelDeleteRecordingClicked)="_onActivitiesDeleteRecordingClicked($event)"
-	(onActivitiesPanelPlayRecordingClicked)="_onActivitiesPlayRecordingClicked($event)"
 	(onSessionCreated)="_onSessionCreated($event)"
 	(onParticipantCreated)="_onParticipantCreated($event)"
 ></ov-videoconference>

openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts

@@ -498,11 +498,6 @@ export class OpenviduWebComponentComponent implements OnInit {
 	 */
 	@Output() onActivitiesPanelDeleteRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
 
-	/**
-	 * Provides event notifications that fire when play recording button is clicked from {@link ActivitiesPanelComponent}.
-	 */
-	@Output() onActivitiesPanelPlayRecordingClicked: EventEmitter<string> = new EventEmitter<string>();
-
 	/**
 	 * Provides event notifications that fire when OpenVidu Session is created.
 	 * See {@link https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/Session.html openvidu-browser Session}.
@@ -646,13 +641,6 @@ export class OpenviduWebComponentComponent implements OnInit {
 		this.onActivitiesPanelDeleteRecordingClicked.emit(recordingId);
 	}
 
-	/**
-	 * @internal
-	 */
-	_onActivitiesPlayRecordingClicked(recordingId: string) {
-		this.onActivitiesPanelPlayRecordingClicked.emit(recordingId);
-	}
-
 	/**
 	 * @internal
 	 */