neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: update video room component to include access room title and add recordings card with navigation

Browse Source
This commit is contained in:
juancarmore 2025-06-06 17:15:33 +02:00
parent ec37389d1c
commit 1cd58c19b9
3 changed files with 85 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html
View File

@ -1,41 +1,52 @@
@if (!showRoom) {
<div class="form-container">
<mat-card class="form-card">
<h2 class="form-title">What is your name?</h2>
<form [formGroup]="participantForm" (ngSubmit)="accessRoom()">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Name</mat-label>
<input
id="participant-name-input"
matInput
placeholder="Enter your name"
formControlName="name"
required
/>
@if (participantForm.get('name')?.hasError('minlength')) {
<mat-error> The name must be at least <strong>4 characters</strong> </mat-error>
}
@if (participantForm.get('name')?.hasError('required')) {
<mat-error> The name is <strong>required</strong> </mat-error>
}
@if (participantForm.get('name')?.hasError('participantExists')) {
<mat-error>
The name is already taken. <strong> Please choose another name </strong>
</mat-error>
}
</mat-form-field>
<div class="card-wrapper">
<mat-card class="form-card">
<h2 class="form-title">
Access room <strong>{{ roomId }}</strong>
</h2>
<form [formGroup]="participantForm" (ngSubmit)="accessRoom()">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Name</mat-label>
<input
id="participant-name-input"
matInput
placeholder="Enter your name"
formControlName="name"
required
/>
@if (participantForm.get('name')?.hasError('minlength')) {
<mat-error> The name must be at least <strong>4 characters</strong> </mat-error>
}
@if (participantForm.get('name')?.hasError('required')) {
<mat-error> The name is <strong>required</strong> </mat-error>
}
@if (participantForm.get('name')?.hasError('participantExists')) {
<mat-error>
The name is already taken. <strong> Please choose another name </strong>
</mat-error>
}
</mat-form-field>
<button
mat-raised-button
color="primary"
id="participant-name-submit"
class="full-width"
[disabled]="participantForm.invalid"
>
Continue
</button>
</form>
</mat-card>
<button
mat-raised-button
color="primary"
id="participant-name-submit"
class="full-width"
[disabled]="participantForm.invalid"
>
Continue to room
</button>
</form>
</mat-card>
<mat-card class="recordings-card">
<div class="recordings-content">
<h3>View recordings</h3>
<button mat-stroked-button color="accent" (click)="goToRecordings()">Go to recordings</button>
</div>
</mat-card>
</div>
</div>
} @else {
<ov-videoconference

34
frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.scss
View File

@ -4,20 +4,52 @@
align-items: center;
height: 100vh;
background-color: var(--ov-background-color);
padding: 20px;
}
.form-card {
.card-wrapper {
display: flex;
gap: 40px;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
.form-card{
width: 400px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border-radius: var(--ov-surface-radius);
background-color: var(--ov-surface-color);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.recordings-card {
padding: 16px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
border-radius: var(--ov-surface-radius);
background-color: var(--ov-surface-color);
width: fit-content;
align-self: center;
}
.recordings-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.form-title {
text-align: center;
margin-bottom: 20px;
color: var(--ov-text-surface-color);
strong {
font-style: italic;
}
}
.full-width {

6
frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.ts
View File

@ -212,6 +212,12 @@ export class VideoRoomComponent implements OnInit, OnDestroy {
return { publisherSecret, moderatorSecret };
}
goToRecordings() {
this.router.navigate([`room/${this.roomId}/recordings`], {
queryParams: { secret: this.roomSecret }
});
}
onParticipantConnected(event: ParticipantModel) {
const message: OutboundEventMessage = {
event: WebComponentEvent.JOIN,