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 and download recordings

pull/743/head
csantosm 2022-06-28 12:47:29 +02:00
parent eaed1b3692
commit a46502ceca
9 changed files with 25 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
openvidu-components-angular/projects/openvidu-angular/src/lib/admin/dashboard/dashboard.component.html
View File

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

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

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

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

@ -14,7 +14,6 @@
[expanded]="expandedPanel === 'recording'"
(onStartRecordingClicked)="_onStartRecordingClicked()"
(onStopRecordingClicked)="_onStopRecordingClicked()"
(onDownloadRecordingClicked)="_onDownloadRecordingClicked($event)"
(onDeleteRecordingClicked)="_onDeleteRecordingClicked($event)"
></ov-recording-activity>
</mat-accordion>

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

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

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

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

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

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

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

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

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

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

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

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