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

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

@ -1,7 +1,10 @@
@if (!showRoom) { @if (!showRoom) {
<div class="form-container"> <div class="form-container">
<div class="card-wrapper">
<mat-card class="form-card"> <mat-card class="form-card">
<h2 class="form-title">What is your name?</h2> <h2 class="form-title">
Access room <strong>{{ roomId }}</strong>
</h2>
<form [formGroup]="participantForm" (ngSubmit)="accessRoom()"> <form [formGroup]="participantForm" (ngSubmit)="accessRoom()">
<mat-form-field appearance="outline" class="full-width"> <mat-form-field appearance="outline" class="full-width">
<mat-label>Name</mat-label> <mat-label>Name</mat-label>
@ -32,10 +35,18 @@
class="full-width" class="full-width"
[disabled]="participantForm.invalid" [disabled]="participantForm.invalid"
> >
Continue Continue to room
</button> </button>
</form> </form>
</mat-card> </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> </div>
} @else { } @else {
<ov-videoconference <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; align-items: center;
height: 100vh; height: 100vh;
background-color: var(--ov-background-color); 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; width: 400px;
padding: 20px; padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
background-color: var(--ov-surface-color); 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 { .form-title {
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
color: var(--ov-text-surface-color); color: var(--ov-text-surface-color);
strong {
font-style: italic;
}
} }
.full-width { .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 }; return { publisherSecret, moderatorSecret };
} }
goToRecordings() {
this.router.navigate([`room/${this.roomId}/recordings`], {
queryParams: { secret: this.roomSecret }
});
}
onParticipantConnected(event: ParticipantModel) { onParticipantConnected(event: ParticipantModel) {
const message: OutboundEventMessage = { const message: OutboundEventMessage = {
event: WebComponentEvent.JOIN, event: WebComponentEvent.JOIN,