110 lines
3.0 KiB
TypeScript
110 lines
3.0 KiB
TypeScript
import { Component, WritableSignal, signal } from '@angular/core';
|
|
import {
|
|
RecordingInfo,
|
|
OpenViduComponentsModule,
|
|
RecordingStatus,
|
|
RecordingOutputMode,
|
|
RecordingDeleteRequestedEvent,
|
|
} from 'openvidu-components-angular';
|
|
|
|
@Component({
|
|
selector: 'app-root',
|
|
template: `
|
|
@if (logged) {
|
|
<ov-admin-dashboard
|
|
[recordingsList]="recordings()"
|
|
(onLogoutRequested)="onLogoutRequested()"
|
|
(onRefreshRecordingsRequested)="onRefreshRecordingsRequested()"
|
|
(onLoadMoreRecordingsRequested)="onLoadMoreRecordingsRequested()"
|
|
(onRecordingDeleteRequested)="onRecordingDeleteRequested($event)"
|
|
></ov-admin-dashboard>
|
|
} @else {
|
|
<ov-admin-login (onLoginRequested)="onLoginRequested($event)">
|
|
</ov-admin-login>
|
|
}
|
|
`,
|
|
standalone: true,
|
|
imports: [OpenViduComponentsModule],
|
|
})
|
|
export class AppComponent {
|
|
roomName = 'openvidu-admin-dashboard';
|
|
logged: boolean = false;
|
|
recordings: WritableSignal<RecordingInfo[]> = signal([
|
|
{
|
|
id: 'recording1',
|
|
roomName: this.roomName,
|
|
roomId: 'roomId1',
|
|
outputMode: RecordingOutputMode.COMPOSED,
|
|
status: RecordingStatus.READY,
|
|
filename: 'sampleRecording.mp4',
|
|
startedAt: new Date().getTime(),
|
|
endedAt: new Date().getTime(),
|
|
duration: 0,
|
|
size: 100,
|
|
location: 'http://localhost:8080/recordings/recording1',
|
|
},
|
|
]);
|
|
|
|
constructor() {}
|
|
|
|
onLoginRequested(credentials: { username: string; password: string }) {
|
|
console.log(`Loggin button clicked ${credentials}`);
|
|
/**
|
|
* WARNING! This code is developed for didactic purposes only.
|
|
* The authentication process should be done in the server side.
|
|
**/
|
|
this.logged = true;
|
|
}
|
|
|
|
onLogoutRequested() {
|
|
console.log('Logout button clicked');
|
|
/**
|
|
* WARNING! This code is developed for didactic purposes only.
|
|
* The authentication process should be done in the server side.
|
|
**/
|
|
this.logged = false;
|
|
}
|
|
|
|
onRefreshRecordingsRequested() {
|
|
console.log('Refresh recording clicked');
|
|
/**
|
|
* WARNING! This code is developed for didactic purposes only.
|
|
* The authentication process should be done in the server side.
|
|
**/
|
|
// Getting the recordings from the server
|
|
this.recordings.update(() => [
|
|
{
|
|
id: 'recording1',
|
|
roomName: this.roomName,
|
|
roomId: 'roomId1',
|
|
outputMode: RecordingOutputMode.COMPOSED,
|
|
status: RecordingStatus.READY,
|
|
filename: 'sampleRecording1.mp4',
|
|
startedAt: new Date().getTime(),
|
|
endedAt: new Date().getTime(),
|
|
duration: 0,
|
|
size: 100,
|
|
location: 'http://localhost:8080/recordings/recording1',
|
|
},
|
|
]);
|
|
}
|
|
|
|
onLoadMoreRecordingsRequested() {
|
|
console.log('Load more recordings clicked');
|
|
}
|
|
|
|
onRecordingDeleteRequested(recording: RecordingDeleteRequestedEvent) {
|
|
console.log(`Delete recording clicked ${recording.recordingId}`);
|
|
/**
|
|
* WARNING! This code is developed for didactic purposes only.
|
|
* The authentication process should be done in the server side.
|
|
**/
|
|
// Deleting the recording from the server
|
|
this.recordings.update((recordings) =>
|
|
recordings.filter((rec) => rec.id !== recording.recordingId)
|
|
);
|
|
|
|
console.log(this.recordings());
|
|
}
|
|
}
|