ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Improved play recordings feature

pull/739/head
csantosm 2022-06-22 12:35:31 +02:00
parent c71848ec3c
commit 26f96761cd
13 changed files with 14 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
openvidu-components-angular/e2e/webcomponent-app/app.js
View File

@ -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;

6
openvidu-components-angular/e2e/webcomponent.test.ts
View File

@ -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 () => {

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

@ -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() {

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

@ -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>
<source [src]="src" [type]="type" />
</video>
<video controls autoplay [src]="src"></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();

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

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

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

@ -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) => {

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

@ -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.playRecording2(this.recordingsList.find(rec => rec.id === recordingId).url)
this.recordingService.playRecording(recordingId);
}
private subscribeToRecordingStatus() {

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

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

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

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

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

@ -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);

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

@ -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) {
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,

1
openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.html
View File

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

12
openvidu-components-angular/src/app/openvidu-webcomponent/openvidu-webcomponent.component.ts
View File

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