From 26f96761cdadcd60fe86a15cdfce5d65f8f52aba Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Wed, 22 Jun 2022 12:35:31 +0200 Subject: [PATCH] openvidu-components: Improved play recordings feature --- .../e2e/webcomponent-app/app.js | 1 - openvidu-components-angular/e2e/webcomponent.test.ts | 6 ------ .../src/lib/admin/dashboard/dashboard.component.ts | 11 +++-------- .../components/dialogs/recording-dialog.component.ts | 5 +---- .../activities-panel/activities-panel.component.html | 1 - .../activities-panel/activities-panel.component.ts | 12 +----------- .../recording-activity.component.ts | 8 ++------ .../videoconference/videoconference.component.html | 1 - .../videoconference/videoconference.component.ts | 7 ------- .../src/lib/services/action/action.service.ts | 5 ++--- .../src/lib/services/recording/recording.service.ts | 11 +++++------ .../openvidu-webcomponent.component.html | 1 - .../openvidu-webcomponent.component.ts | 12 ------------ 13 files changed, 14 insertions(+), 67 deletions(-) diff --git a/openvidu-components-angular/e2e/webcomponent-app/app.js b/openvidu-components-angular/e2e/webcomponent-app/app.js index 3b988a7c..c421883b 100644 --- a/openvidu-components-angular/e2e/webcomponent-app/app.js +++ b/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; diff --git a/openvidu-components-angular/e2e/webcomponent.test.ts b/openvidu-components-angular/e2e/webcomponent.test.ts index 5d4740fc..14f8aec1 100644 --- a/openvidu-components-angular/e2e/webcomponent.test.ts +++ b/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 () => { 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 96d2dff9..58ef8e8a 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 @@ -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 = new EventEmitter(); - /** - * Provides event notifications that fire when play recording button has been clicked. - * @param recordingId - */ - @Output() onPlayRecordingClicked: EventEmitter = new EventEmitter(); - /** * 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() { diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/recording-dialog.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/recording-dialog.component.ts index fb211a48..449003b2 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/dialogs/recording-dialog.component.ts +++ b/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: `
- +
@@ -31,7 +29,6 @@ export class RecordingDialogComponent { constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: any) { this.src = data.src; - this.type = data.type; } close() { this.dialogRef.close(); 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 ee602baa..8061053b 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 @@ -16,7 +16,6 @@ (onStopRecordingClicked)="_onStopRecordingClicked()" (onDownloadRecordingClicked)="_onDownloadRecordingClicked($event)" (onDeleteRecordingClicked)="_onDeleteRecordingClicked($event)" - (onPlayRecordingClicked)="_onPlayRecordingClicked($event)" >
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 9c22a5d3..c5b647f3 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 @@ -33,10 +33,7 @@ export class ActivitiesPanelComponent implements OnInit { * The recording should be deleted using the OpenVidu REST API. */ @Output() onDeleteRecordingClicked: EventEmitter = new EventEmitter(); - /** - * Provides event notifications that fire when play recording button has been clicked. - */ - @Output() onPlayRecordingClicked: EventEmitter = new EventEmitter(); + /** * @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) => { 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 7b9a3cba..a7542945 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 @@ -43,10 +43,7 @@ export class RecordingActivityComponent implements OnInit { */ @Output() onDeleteRecordingClicked: EventEmitter = new EventEmitter(); - /** - * Provides event notifications that fire when play recording button has been clicked. - */ - @Output() onPlayRecordingClicked: EventEmitter = new EventEmitter(); + /** * @internal */ @@ -179,8 +176,7 @@ export class RecordingActivityComponent implements OnInit { * @internal */ play(recordingId: string) { - this.onPlayRecordingClicked.emit(recordingId); - // this.recordingService.playRecording2(this.recordingsList.find(rec => rec.id === recordingId).url) + this.recordingService.playRecording(recordingId); } 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 ac863c81..1a0c5828 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 @@ -100,7 +100,6 @@ (onStopRecordingClicked)="onStopRecordingClicked('panel')" (onDownloadRecordingClicked)="onDownloadRecordingClicked($event)" (onDeleteRecordingClicked)="onDeleteRecordingClicked($event)" - (onPlayRecordingClicked)="onPlayRecordingClicked($event)" > 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 da6d550f..0eb47189 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 @@ -650,13 +650,6 @@ export class VideoconferenceComponent implements OnInit, OnDestroy, AfterViewIni this.onActivitiesPanelDeleteRecordingClicked.emit(recordingId); } - /** - * @internal - */ - onPlayRecordingClicked(recordingId: string) { - this.onActivitiesPanelPlayRecordingClicked.emit(recordingId); - } - /** * @internal */ diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.ts index 37250d47..f0279c19 100644 --- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/action/action.service.ts +++ b/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); 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 fd12827f..61290a65 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 @@ -18,6 +18,8 @@ export class RecordingService { private recordingTimeInterval: NodeJS.Timer; private currentRecording: RecordingInfo = { status: RecordingStatus.STOPPED }; private recordingStatus = >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) { - const src = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file)); - this.actionService.openRecordingPlayerDialog(src, file.type, true); + playRecording(recordingId: string) { + this.actionService.openRecordingPlayerDialog(`${this.baseUrl}recordings/${recordingId}`); } /** @@ -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, diff --git a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.html b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.html index a6bcd695..4111b919 100644 --- a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.html +++ b/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)" > diff --git a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts index 8d191004..eb767858 100644 --- a/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts +++ b/openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts @@ -498,11 +498,6 @@ export class OpenviduWebComponentComponent implements OnInit { */ @Output() onActivitiesPanelDeleteRecordingClicked: EventEmitter = new EventEmitter(); - /** - * Provides event notifications that fire when play recording button is clicked from {@link ActivitiesPanelComponent}. - */ - @Output() onActivitiesPanelPlayRecordingClicked: EventEmitter = new EventEmitter(); - /** * 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 */