openvidu-copmponents: Updated recording and admin dashboard

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

@@ -1,6 +1,11 @@
 <div class="dashboard-container">
 	<mat-toolbar class="header">
 		<span>{{ 'ADMIN.DASHBOARD' | translate }}</span>
+		<div class="refresh-btn">
+			<button matSuffix mat-icon-button aria-label="Refresh" (click)="logout()">
+				<mat-icon>logout</mat-icon>
+			</button>
+		</div>
 	</mat-toolbar>
 
 	<div class="dashboard-body">
@@ -67,7 +72,7 @@
 									(recording.properties.outputMode === 'COMPOSED' ||
 										recording.properties.outputMode === 'COMPOSED_QUICK_START')
 								"
-								[src]="getThumbnailSrc(recording)"
+								[src]="recording.thumbnailB64"
 							/>
 							<div class="video-btns">
 								<button
@@ -77,7 +82,7 @@
 										recording.properties.outputMode !== 'INDIVIDUAL'
 									"
 									mat-icon-button
-									(click)="play(recording)"
+									(click)="play(recording.id)"
 								>
 									<mat-icon id="play" aria-label="Play" title="{{ 'PANEL.RECORDING.PLAY' | translate }}"
 										>play_arrow</mat-icon

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

@@ -3,7 +3,6 @@ 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',
@@ -36,6 +35,11 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
 	 */
 	@Output() onRefreshRecordingsClicked: EventEmitter<void> = new EventEmitter<void>();
 
+	/**
+	 * Provides event notifications that fire when logout button has been clicked.
+	 */
+	@Output() onLogoutClicked: EventEmitter<void> = new EventEmitter<void>();
+
 	/**
 	 * @internal
 	 */
@@ -58,7 +62,7 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
 	 */
 	constructor(
 		private actionService: ActionService,
-		private recordingService: RecordingService,
+
 		private libService: OpenViduAngularConfigService
 	) {}
 
@@ -68,10 +72,21 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
 	ngOnInit(): void {
 		this.subscribeToAdminDirectives();
 	}
+
+	/**
+	 * @internal
+	 */
 	ngOnDestroy() {
 		if (this.adminSubscription) this.adminSubscription.unsubscribe();
 	}
 
+	/**
+	 * @internal
+	 */
+	logout() {
+		this.onLogoutClicked.emit();
+	}
+
 	/**
 	 * @internal
 	 */
@@ -120,13 +135,6 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
 		this.sortByLegend = 'Size';
 	}
 
-	/**
-	 * @internal
-	 */
-	getThumbnailSrc(recording: RecordingInfo): string {
-		return !recording.url ? '' : recording.url.substring(0, recording.url.lastIndexOf('/')) + '/' + recording.id + '.jpg';
-	}
-
 	/**
 	 * @internal
 	 */
@@ -141,8 +149,6 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
 	 * @internal
 	 */
 	download(recordingId: string) {
-		//TODO solucionar el tema del login.
-		// TODO Si soy capaz de loguearme en openvidu al hacer login en el dashboard, no necesitaria emitir evento
 		this.onDownloadRecordingClicked.emit(recordingId);
 	}
 
@@ -156,8 +162,8 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
 	/**
 	 * @internal
 	 */
-	async play(recording: RecordingInfo) {
+	async play(recordingId: string) {
-		this.actionService.openRecordingPlayerDialog(recording.url, 'video/mp4', true);
+		this.onPlayRecordingClicked.emit(recordingId);
 	}
 
 	private subscribeToAdminDirectives() {

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { SafeResourceUrl } from '@angular/platform-browser';
+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,7 +68,7 @@ export class ActionService {
 		}
 	}
 
-	openRecordingPlayerDialog(src: SafeResourceUrl, type: string, allowClose = true) {
+	openRecordingPlayerDialog(src: SafeUrl, type: string, allowClose = true) {
 		try {
 			this.closeDialog();
 		} catch (error) {

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

@@ -69,9 +69,9 @@ export class RecordingService {
 	 * Play the recording blob received as parameter. This parameter must be obtained from backend using the OpenVidu REST API
 	 * @param blob
 	 */
-	playRecording(blob: Blob) {
+	playRecording(file: Blob) {
-		const src = URL.createObjectURL(blob);
+		const src = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file));
-		this.actionService.openRecordingPlayerDialog(this.sanitizer.bypassSecurityTrustResourceUrl(src), blob.type, true);
+		this.actionService.openRecordingPlayerDialog(src, file.type, true);
 	}
 
 	/**
@@ -81,7 +81,7 @@ export class RecordingService {
 	 * @param blob
 	 */
 	downloadRecording(fileName: string, blob: Blob) {
-		const data = window.URL.createObjectURL(blob);
+		const data = URL.createObjectURL(blob);
 		const link = document.createElement('a');
 		link.href = data;
 		link.download = `${fileName}.mp4`;