openvidu-components: Updated testapp

openvidu-components-angular/package.json

@@ -35,7 +35,7 @@
     "@angular/platform-browser-dynamic": "13.0.0",
     "@angular/router": "13.0.0",
     "autolinker": "3.14.3",
-    "openvidu-browser": "2.22.0",
+    "openvidu-browser": "^2.22.0",
     "rxjs": "7.5.4",
     "tslib": "2.3.1",
     "zone.js": "0.11.4"
@@ -70,7 +70,7 @@
     "karma-notify-reporter": "1.3.0",
     "mocha": "9.2.2",
     "ng-packagr": "13.0.3",
-    "selenium-webdriver": "4.1.2",
+    "selenium-webdriver": "4.2.0",
     "ts-node": "10.4.0",
     "tslint": "6.1.3",
     "typescript": "4.4.4",

openvidu-components-angular/src/app/admin/admin-dashboard/admin-dashboard.component.html

@@ -1 +1,11 @@
-<p>admin-dashboard works!</p>
+<ov-admin-login *ngIf="!logged" [error]="error" (onLoginButtonClicked)="login($event)"></ov-admin-login>
+
+<ov-admin-dashboard
+	*ngIf="logged"
+	[recordingsList]="recordings"
+	(onLogoutClicked)="onLogoutClicked()"
+	(onRefreshRecordingsClicked)="onRefreshRecordingsClicked()"
+	(onDeleteRecordingClicked)="onDeleteRecordingClicked($event)"
+	(onDownloadRecordingClicked)="onDownloadRecordingClicked($event)"
+
+></ov-admin-dashboard>

openvidu-components-angular/src/app/admin/admin-dashboard/admin-dashboard.component.ts

@@ -1,15 +1,65 @@
 import { Component, OnInit } from '@angular/core';
+import { RecordingService } from 'openvidu-angular';
+import { RestService } from 'src/app/services/rest.service';
 
 @Component({
-  selector: 'app-admin-dashboard',
+	selector: 'app-admin-dashboard',
-  templateUrl: './admin-dashboard.component.html',
+	templateUrl: './admin-dashboard.component.html',
-  styleUrls: ['./admin-dashboard.component.scss']
+	styleUrls: ['./admin-dashboard.component.scss']
 })
 export class AdminDashboardComponent implements OnInit {
+	recordings: any[] = [];
+	logged: boolean;
+	error: any;
+	constructor(private restService: RestService, private recordingService: RecordingService) {}
 
-  constructor() { }
+	async ngOnInit() {
+		try {
+			const resp: any = await this.restService.login('');
+			this.logged = true;
+			this.recordings = resp.recordings;
+		} catch (error) {}
+	}
 
-  ngOnInit(): void {
+	async login(pass: string) {
-  }
+		try {
+			const resp: any = await this.restService.login(pass);
+			this.logged = true;
+			this.recordings = resp.recordings;
+		} catch (error) {
+			this.error = error;
+			console.log(error);
+		}
+	}
 
+	async onLogoutClicked() {
+		this.logged = false;
+		await this.restService.logout();
+	}
+
+	async onRefreshRecordingsClicked() {
+		console.log('GET ALL ');
+		const ecordings = await this.restService.getRecordings();
+		console.log(this.recordings);
+		this.recordings = ecordings;
+	}
+
+	async onDeleteRecordingClicked(recordingId: string) {
+		console.warn('DELETE RECORDING CLICKED');
+
+		try {
+			this.recordings = await this.restService.deleteRecording(recordingId);
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	async onDownloadRecordingClicked(recordingId: string) {
+		try {
+			const file = await this.restService.getRecording(recordingId);
+			this.recordingService.downloadRecording(recordingId, file);
+		} catch (error) {
+			console.error(error);
+		}
+	}
 }

openvidu-components-angular/src/app/app.module.ts

@@ -25,7 +25,7 @@ import { ParticipantsPanelDirectiveComponent } from './examples/participantsPane
 import { ParticipantPanelItemDirectiveComponent } from './examples/participantPanelItem-directive/participantPanelItem-directive.component';
 import { ParticipantPanelItemElementsDirectiveComponent } from './examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component';
 import { ChatPanelDirectiveComponent } from './examples/chatPanel-directive/chatPanel-directive.component';
-
+import { AdminDashboardComponent } from './admin/admin-dashboard/admin-dashboard.component';
 // openvidu-angular
 import { OpenViduAngularModule } from 'openvidu-angular';
 import { ExamplesDashboardComponent } from './examples/examples-dashboard/examples-dashboard.component';
@@ -34,6 +34,7 @@ import { ExamplesDashboardComponent } from './examples/examples-dashboard/exampl
 	declarations: [
 		AppComponent,
 		DashboardComponent,
+		AdminDashboardComponent,
 		CallComponent,
 		TestingComponent,
 		ExamplesDashboardComponent,

openvidu-components-angular/src/app/app.routing.module.ts

@@ -16,11 +16,13 @@ import { ParticipantPanelItemElementsDirectiveComponent } from './examples/parti
 import { ParticipantPanelItemDirectiveComponent } from './examples/participantPanelItem-directive/participantPanelItem-directive.component';
 import { ToolbarAdditionalPanelButtonsDirectiveComponent } from './examples/toolbarAdditionalPanelButtons-directive/toolbarAdditionalPanelButtons-directive.component';
 import { AdditionalPanelsDirectiveComponent } from './examples/additionalPanels-directive/additionalPanels-directive.component';
+import { AdminDashboardComponent } from './admin/admin-dashboard/admin-dashboard.component';
 
 const routes: Routes = [
 	{ path: '', component: DashboardComponent },
 	{ path: 'call', component: CallComponent },
 	{ path: 'testing', component: TestingComponent },
+	{ path: 'admin', component: AdminDashboardComponent },
 
 	{ path: 'examples', component: ExamplesDashboardComponent},
 	{ path: 'examples/toolbarDirective', component: ToolbarDirectiveComponent },

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

@@ -8,6 +8,21 @@
 	(onToolbarFullscreenButtonClicked)="onToolbarFullscreenButtonClicked()"
 	(onToolbarParticipantsPanelButtonClicked)="onToolbarParticipantsPanelButtonClicked()"
 	(onToolbarChatPanelButtonClicked)="onToolbarChatPanelButtonClicked()"
+	(onToolbarStartRecordingClicked)="onStartRecordingClicked()"
+	(onToolbarStopRecordingClicked)="onStopRecordingClicked()"
+	(onActivitiesPanelStartRecordingClicked)="onStartRecordingClicked()"
+	(onActivitiesPanelStopRecordingClicked)="onStopRecordingClicked()"
+	(onActivitiesPanelDeleteRecordingClicked)="onDeleteRecordingClicked($event)"
+	(onActivitiesPanelDownloadRecordingClicked)="onDownloadRecordingClicked($event)"
 	[minimal]="false"
+	[prejoin]="true"
+	[activitiesPanelRecordingActivity]="true"
+	[recordingActivityRecordingsList]="recordingList"
+	[recordingActivityRecordingError]="recordingError"
+	[toolbarSettingsButton]="true"
 >
+	<!-- <div *ovActivitiesPanel>HOLA</div> -->
+
+	<!-- <ov-toolbar *ovToolbar [activitiesPanelButton]="false"
+	[chatPanelButton]="false"></ov-toolbar> -->
 </ov-videoconference>

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { TokenModel } from 'dist/openvidu-angular/public-api';
+import { RecordingInfo, TokenModel, RecordingService } from 'openvidu-angular';
 import { RestService } from '../services/rest.service';
 
 @Component({
@@ -17,17 +17,28 @@ export class CallComponent implements OnInit {
 	joinSessionClicked: boolean = false;
 	closeClicked: boolean = false;
 	isSessionAlive: boolean = false;
+	recordingList: RecordingInfo[] = [];
+	recordingError: any;
 
-	constructor(private restService: RestService) {}
+	constructor(private restService: RestService, private recordingService: RecordingService) {}
 
 	async ngOnInit() {
+		// this.tokens = {
+		// 	webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
+		// 	screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
+		// };
+
+		// console.log(this.tokens)
+
+
+		const response = await this.restService.getTokensFromBackend(this.sessionId);
+		this.recordingList = response.recordings;
 		this.tokens = {
-			webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
+			webcam: response.cameraToken,
-			screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
+			screen: response.screenToken
 		};
 
-		console.log(this.tokens)
+		console.log(this.tokens);
-
 	}
 
 	onJoinClicked() {
@@ -81,4 +92,48 @@ export class CallComponent implements OnInit {
 		this.isSessionAlive = false;
 		console.log('TOOLBAR LEAVE CLICKED');
 	}
+
+	async onStartRecordingClicked() {
+		console.warn('START RECORDING CLICKED');
+		try {
+			await this.restService.startRecording(this.sessionId);
+		} catch (error) {
+			this.recordingError = error;
+
+		}
+	}
+	async onStopRecordingClicked() {
+		console.warn('STOP RECORDING CLICKED');
+		try {
+			// await this.restService.startRecording(this.sessionId);
+
+			this.recordingList = await this.restService.stopRecording(this.sessionId);
+			console.log('RECORDING LIST ', this.recordingList);
+		} catch (error) {
+			this.recordingError = error;
+
+		}
+	}
+
+	async onDeleteRecordingClicked(recordingId: string) {
+		console.warn('DELETE RECORDING CLICKED');
+
+		try {
+			this.recordingList = await this.restService.deleteRecording(recordingId);
+
+		} catch (error) {
+			this.recordingError = error;
+
+			console.error('?', error)
+		}
+	}
+
+	async onDownloadRecordingClicked(recordingId: string) {
+		try {
+			const file = await this.restService.getRecording(recordingId);
+			this.recordingService.downloadRecording(recordingId, file);
+		} catch (error) {
+			this.recordingError = error;
+		}
+	}
 }

openvidu-components-angular/src/app/services/rest.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { catchError, lastValueFrom } from 'rxjs';
 import { throwError as observableThrowError } from 'rxjs/internal/observable/throwError';
+import { RecordingInfo } from 'openvidu-angular';
 
 @Injectable({
 	providedIn: 'root'
@@ -17,14 +18,117 @@ export class RestService {
 			const _sessionId = await this.createSession(sessionId, openviduServerUrl, openviduSecret);
 			return await this.createToken(_sessionId, openviduServerUrl, openviduSecret);
 		}
-		// try {
+	}
-		// 	return lastValueFrom(this.http.post<any>(this.baseHref + 'call', { sessionId }));
+	async getTokensFromBackend(sessionId: string): Promise<{ cameraToken: string; screenToken: string; recordings?: RecordingInfo[] }> {
-		// } catch (error) {
+		try {
-		// 	if (error.status === 404) {
+			return lastValueFrom(this.http.post<any>(this.baseHref + 'sessions', { sessionId }));
-		// 		throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
+		} catch (error) {
-		// 	}
+			if (error.status === 404) {
-		// 	throw error;
+				throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
-		// }
+			}
+			throw error;
+		}
+	}
+
+	async startRecording(sessionId: string) {
+		try {
+			return lastValueFrom(this.http.post<any>(this.baseHref + 'recordings/start', { sessionId }));
+		} catch (error) {
+			if (error.status === 404) {
+				throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
+			}
+			throw error;
+		}
+	}
+
+	async stopRecording(sessionId: string) {
+		try {
+			return lastValueFrom(this.http.post<any>(this.baseHref + 'recordings/stop', { sessionId }));
+		} catch (error) {
+			if (error.status === 404) {
+				throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
+			}
+			throw error;
+		}
+	}
+
+	async login(password: string): Promise<any[]> {
+		try {
+			return lastValueFrom(
+				this.http.post<any>(`${this.baseHref}admin/login`, {
+					password
+				})
+			);
+		} catch (error) {
+			console.log(error);
+			if (error.status === 404) {
+				throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
+			}
+			throw error;
+		}
+	}
+
+	async logout(): Promise<void> {
+		try {
+			return lastValueFrom(
+				this.http.post<any>(`${this.baseHref}admin/logout`, {})
+			);
+		} catch (error) {
+			console.log(error);
+			if (error.status === 404) {
+				throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
+			}
+			throw error;
+		}
+	}
+
+
+	async deleteRecording(id: string): Promise<any[]> {
+		try {
+			return lastValueFrom(this.http.delete<any>(`${this.baseHref}recordings/delete/${id}`));
+		} catch (error) {
+			console.log(error);
+			if (error.status === 404) {
+				throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
+			}
+			throw error;
+		}
+	}
+
+	getRecordings(): Promise<any[]> {
+		return lastValueFrom(
+			this.http.get<any>(`${this.baseHref}recordings`)
+		);
+	}
+
+	getRecording(recordingId: string) {
+		try {
+			return lastValueFrom(
+				this.http.get(`${this.baseHref}recordings/${recordingId}`, {
+					responseType: 'blob'
+				})
+			);
+		} catch (error) {
+			if (error.status === 404) {
+				throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
+			}
+			throw error;
+		}
+	}
+
+	getRecording2(recordingId: string) {
+		try {
+			return lastValueFrom(
+				this.http.get(`${this.baseHref}recordings/${recordingId}`,{
+					responseType: 'blob'
+				})
+			);
+		} catch (error) {
+			if (error.status === 404) {
+				throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
+			}
+			throw error;
+		}
 	}
 
 	/**
@@ -79,7 +183,6 @@ export class RestService {
 					})
 				)
 				.subscribe((response) => {
-
 					console.warn(response);
 
 					resolve(response.token);