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

frontend: update room-related terminology from roomIdPrefix to roomName across components and services

Browse Source
This commit is contained in:
juancarmore 2025-08-05 17:46:27 +02:00
parent adcd5d8e8d
commit c22c00b602
20 changed files with 83 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html
View File

@ -109,16 +109,17 @@
</ng-container>
}
<!-- Room ID Column -->
<!-- Room Info Column -->
@if (showRoomInfo) {
<ng-container matColumnDef="roomId">
<th mat-header-cell *matHeaderCellDef class="room-header">Room ID</th>
<ng-container matColumnDef="roomInfo">
<th mat-header-cell *matHeaderCellDef class="room-header">Room</th>
<td mat-cell *matCellDef="let recording" class="room-cell">
<div class="room-info">
<!-- <span class="room-name">{{ recording.roomName }}</span> -->
<span class="room-id">{{ recording.roomId }}</span>
@if (recording.filename) {
<!-- <span class="filename">{{ recording.filename }}</span> -->
}
<!-- @if (recording.filename) {
<span class="filename">{{ recording.filename }}</span>
} -->
</div>
</td>
</ng-container>
@ -262,7 +263,13 @@
<!-- Load More Section -->
@if (showLoadMore) {
<div class="load-more-container" id="load-more-container">
<button mat-button class="load-more-btn" (click)="loadMoreRecordings()" [disabled]="loading" id="load-more-btn">
<button
mat-button
class="load-more-btn"
(click)="loadMoreRecordings()"
[disabled]="loading"
id="load-more-btn"
>
<mat-icon>expand_more</mat-icon>
<span>Load More Recordings</span>
</button>

8
frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss
View File

@ -87,13 +87,17 @@
.room-info {
@extend .ov-info-display;
.room-id {
.room-name {
@extend .primary-text;
}
.filename {
.room-id {
@extend .secondary-text, .monospace-text;
}
// .filename {
// @extend .secondary-text, .monospace-text;
// }
}
// Status badge

4
frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts
View File

@ -111,7 +111,7 @@ export class RecordingListsComponent implements OnInit, OnChanges {
someSelected = signal(false);
// Table configuration
displayedColumns: string[] = ['select', 'roomId', 'status', 'startDate', 'duration', 'size', 'actions'];
displayedColumns: string[] = ['select', 'roomInfo', 'status', 'startDate', 'duration', 'size', 'actions'];
// Status options using enum values
statusOptions = [
@ -188,7 +188,7 @@ export class RecordingListsComponent implements OnInit, OnChanges {
this.displayedColumns.push('select');
}
if (this.showRoomInfo) {
this.displayedColumns.push('roomId');
this.displayedColumns.push('roomInfo');
}
this.displayedColumns.push('status', 'startDate', 'duration', 'size', 'actions');

11
frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.html
View File

@ -14,7 +14,7 @@
<input
matInput
[formControl]="nameFilterControl"
placeholder="Search by room ID or prefix"
placeholder="Search by room name"
id="search-input"
/>
<mat-icon matSuffix>search</mat-icon>
@ -110,11 +110,12 @@
</ng-container>
}
<!-- Room ID Column -->
<ng-container matColumnDef="roomId">
<th mat-header-cell *matHeaderCellDef class="room-header" id="room-id-header">Room ID</th>
<td mat-cell *matCellDef="let room" class="room-cell" id="room-id-cell-{{ room.roomId }}">
<!-- Room Name Column -->
<ng-container matColumnDef="roomName">
<th mat-header-cell *matHeaderCellDef class="room-header" id="room-name-header">Room Name</th>
<td mat-cell *matCellDef="let room" class="room-cell" id="room-name-cell-{{ room.roomId }}">
<div class="room-info" id="room-info-{{ room.roomId }}">
<span class="room-name" id="room-name-{{ room.roomId }}">{{ room.roomName }}</span>
<span class="room-id" id="room-id-{{ room.roomId }}">{{ room.roomId }}</span>
</div>
</td>

6
frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.scss
View File

@ -114,9 +114,13 @@
.room-info {
@extend .ov-info-display;
.room-id {
.room-name {
@extend .primary-text;
}
.room-id {
@extend .secondary-text, .monospace-text;
}
}
.status-badge {

4
frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.ts
View File

@ -119,7 +119,7 @@ export class RoomsListsComponent implements OnInit, OnChanges {
someSelected = signal(false);
// Table configuration
displayedColumns: string[] = ['select', 'roomId', 'status', 'creationDate', 'autoDeletion', 'actions'];
displayedColumns: string[] = ['select', 'roomName', 'status', 'creationDate', 'autoDeletion', 'actions'];
// Status options
statusOptions = [
@ -171,7 +171,7 @@ export class RoomsListsComponent implements OnInit, OnChanges {
this.displayedColumns.push('select');
}
this.displayedColumns.push('roomId', 'status', 'creationDate', 'autoDeletion', 'actions');
this.displayedColumns.push('roomName', 'status', 'creationDate', 'autoDeletion', 'actions');
}
// ===== SELECTION METHODS =====

2
frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts
View File

@ -80,7 +80,7 @@ export class RecordingsComponent implements OnInit {
nextPageToken: this.nextPageToken
};
// Apply room name filter if provided
// Apply room ID filter if provided
if (filters?.nameFilter) {
recordingFilters.roomId = filters.nameFilter;
}

14
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.html
View File

@ -5,7 +5,7 @@
<div class="page-title-group">
<h2 class="page-title">Create Room</h2>
<p class="page-description">
Create a new video room with optional name prefix. For advanced options, use the room wizard.
Create a new room by just providing a name. For advanced options, use the room wizard.
</p>
</div>
</header>
@ -13,14 +13,14 @@
<!-- Form Section -->
<main class="page-content">
<form [formGroup]="roomCreationForm" class="room-basic-creation-form" (ngSubmit)="onCreateRoom()">
<!-- Room Prefix Field -->
<!-- Room Field -->
<mat-form-field appearance="outline" class="form-field">
<mat-label>Room Name Prefix</mat-label>
<input matInput formControlName="roomIdPrefix" placeholder="e.g. demo-room" />
<mat-label>Room Name</mat-label>
<input matInput formControlName="roomName" placeholder="e.g. Demo Room" />
<mat-icon matSuffix class="ov-settings-icon">label</mat-icon>
<mat-hint>Optional prefix for room names. Leave empty for default naming.</mat-hint>
@if (roomCreationForm.get('roomIdPrefix')?.hasError('maxlength')) {
<mat-error> Room name prefix cannot exceed 50 characters </mat-error>
<mat-hint>Enter a custom room name, or leave blank to use the default name "Room".</mat-hint>
@if (roomCreationForm.get('roomName')?.hasError('maxlength')) {
<mat-error>Room name cannot exceed 50 characters</mat-error>
}
</mat-form-field>

16
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnDestroy, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { Component, EventEmitter, OnDestroy, Output } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
@ -25,15 +25,13 @@ export class RoomBasicCreationComponent implements OnDestroy {
@Output() createRoom = new EventEmitter<string | undefined>();
@Output() openAdvancedMode = new EventEmitter<void>();
roomCreationForm: FormGroup;
roomCreationForm = new FormGroup({
roomName: new FormControl('Room', [Validators.maxLength(50)])
});
private destroy$ = new Subject<void>();
constructor(private fb: FormBuilder) {
this.roomCreationForm = this.fb.group({
roomIdPrefix: ['', [Validators.maxLength(50)]]
});
constructor() {
this.roomCreationForm.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
// Optional: Save form data to local storage or service if needed
});
@ -47,7 +45,7 @@ export class RoomBasicCreationComponent implements OnDestroy {
onCreateRoom() {
if (this.roomCreationForm.valid) {
const formValue = this.roomCreationForm.value;
this.createRoom.emit(formValue.roomIdPrefix || undefined);
this.createRoom.emit(formValue.roomName || undefined);
}
}

10
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/room-wizard.component.ts
View File

@ -89,8 +89,8 @@ export class RoomWizardComponent implements OnInit {
if (!this.roomId) return;
try {
const { roomIdPrefix, autoDeletionDate, preferences } = await this.roomService.getRoom(this.roomId);
this.existingRoomData = { roomIdPrefix, autoDeletionDate, preferences };
const { roomName, autoDeletionDate, preferences } = await this.roomService.getRoom(this.roomId);
this.existingRoomData = { roomName, autoDeletionDate, preferences };
if (this.existingRoomData) {
this.isBasicCreation.set(false);
}
@ -127,13 +127,13 @@ export class RoomWizardComponent implements OnInit {
await this.navigationService.navigateTo('rooms', undefined, true);
}
async createRoom(roomIdPrefix?: string) {
async createRoom(roomName?: string) {
try {
// Call the room service to create a new room
const { moderatorRoomUrl } = await this.roomService.createRoom({ roomIdPrefix });
const { moderatorRoomUrl } = await this.roomService.createRoom({ roomName });
await this.navigationService.redirectTo(moderatorRoomUrl);
} catch (error) {
const errorMessage = `Failed to create room ${roomIdPrefix}`;
const errorMessage = `Failed to create room ${roomName}`;
this.notificationService.showSnackbar(errorMessage);
console.error(errorMessage, error);
} finally {

14
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.html
View File

@ -5,7 +5,7 @@
<div class="step-title-group">
<h3 class="step-title">Room Details</h3>
<p class="step-description">
Configure your room's details including name prefix and automatic deletion date
Configure your room's details including name and automatic deletion date
</p>
</div>
</header>
@ -13,14 +13,14 @@
<!-- Form Section -->
<main class="step-content">
<form [formGroup]="roomDetailsForm" class="room-details-form">
<!-- Room Prefix Field -->
<!-- Room Field -->
<mat-form-field appearance="outline" class="form-field">
<mat-label>Room Name Prefix</mat-label>
<input matInput formControlName="roomIdPrefix" placeholder="e.g. demo-room" />
<mat-label>Room Name</mat-label>
<input matInput formControlName="roomName" placeholder="e.g. Demo Room" />
<mat-icon matSuffix class="ov-settings-icon">label</mat-icon>
<mat-hint>Optional prefix for room names. Leave empty for default naming.</mat-hint>
@if (roomDetailsForm.get('roomIdPrefix')?.hasError('maxlength')) {
<mat-error> Room name prefix cannot exceed 50 characters </mat-error>
<mat-hint>Enter a custom room name, or leave blank to use the default name "Room".</mat-hint>
@if (roomDetailsForm.get('roomName')?.hasError('maxlength')) {
<mat-error>Room name cannot exceed 50 characters</mat-error>
}
</mat-form-field>

2
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.ts
View File

@ -66,7 +66,7 @@ export class RoomWizardRoomDetailsComponent implements OnDestroy {
}
const stepData: Partial<MeetRoomOptions> = {
roomIdPrefix: formValue.roomIdPrefix,
roomName: formValue.roomName,
autoDeletionDate: autoDeletionDateTime
};

2
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.ts
View File

@ -163,7 +163,7 @@ export class RoomsComponent implements OnInit {
// const searchStr = filter.toLowerCase();
// return (
// data.roomId.toLowerCase().includes(searchStr) ||
// data.roomIdPrefix?.toLowerCase().includes(searchStr) ||
// data.roomName.toLowerCase().includes(searchStr) ||
// false ||
// (data.markedForDeletion ? 'inactive' : 'active').includes(searchStr)
// );

2
frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html
View File

@ -125,7 +125,7 @@
<div class="room-header">
<mat-icon class="ov-room-icon room-icon">video_chat</mat-icon>
<div class="room-info">
<h1 class="room-title">{{ roomId }}</h1>
<h1 class="room-title">{{ roomName }}</h1>
<p class="room-subtitle">Choose how you want to proceed</p>
</div>
</div>

18
frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts
View File

@ -121,6 +121,10 @@ export class MeetingComponent implements OnInit {
this.features = this.featureConfService.features;
}
get roomName(): string {
return this.room?.roomName || 'Room';
}
get hostname(): string {
return window.location.origin.replace('http://', '').replace('https://', '');
}
@ -128,6 +132,7 @@ export class MeetingComponent implements OnInit {
async ngOnInit() {
this.roomId = this.roomService.getRoomId();
this.roomSecret = this.roomService.getRoomSecret();
this.room = await this.roomService.getRoom(this.roomId);
await this.setBackButtonText();
await this.checkForRecordings();
@ -270,10 +275,9 @@ export class MeetingComponent implements OnInit {
try {
const { token, role } = await this.participantTokenService.generateToken({
roomId: this.roomId,
participantName: this.participantName,
secret: this.roomSecret
secret: this.roomSecret,
participantName: this.participantName
});
// The components library needs the token to be set in the 'onTokenRequested' method
this.participantToken = token;
this.participantRole = role;
} catch (error: any) {
@ -398,23 +402,15 @@ export class MeetingComponent implements OnInit {
}
async copyModeratorLink() {
await this.loadRoomIfAbsent();
this.clipboard.copy(this.room!.moderatorRoomUrl);
this.notificationService.showSnackbar('Moderator link copied to clipboard');
}
async copyPublisherLink() {
await this.loadRoomIfAbsent();
this.clipboard.copy(this.room!.publisherRoomUrl);
this.notificationService.showSnackbar('Publisher link copied to clipboard');
}
private async loadRoomIfAbsent() {
if (!this.room) {
this.room = await this.roomService.getRoom(this.roomId);
}
}
async onRecordingStartRequested(event: RecordingStartRequestedEvent) {
try {
await this.recManagerService.startRecording(event.roomName);

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

@ -12,8 +12,8 @@
<div class="room-info">
<h1 class="room-title">
Recordings for room
<span class="room-id">
{{ roomId }}
<span class="room-name">
{{ roomName }}
</span>
</h1>
</div>

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

@ -35,7 +35,7 @@
color: var(--ov-meet-text-primary);
line-height: var(--ov-meet-line-height-tight);
.room-id {
.room-name {
font-weight: var(--ov-meet-font-weight-semibold);
color: var(--ov-meet-text-primary);
}

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

@ -19,6 +19,7 @@ import { ILogger, LoggerService } from 'openvidu-components-angular';
export class RoomRecordingsComponent implements OnInit {
recordings = signal<MeetRecordingInfo[]>([]);
roomId = '';
roomName = '';
canDeleteRecordings = false;
isLoading = false;
@ -43,6 +44,9 @@ export class RoomRecordingsComponent implements OnInit {
async ngOnInit() {
this.roomId = this.route.snapshot.paramMap.get('room-id')!;
const parts = this.roomId.split('-');
this.roomName = parts.slice(0, -1).join('-');
this.canDeleteRecordings = this.recordingService.canDeleteRecordings();
await this.loadRecordings();
}

2
frontend/projects/shared-meet-components/src/lib/services/room.service.ts
View File

@ -20,7 +20,6 @@ import { LoggerService } from 'openvidu-components-angular';
export class RoomService {
protected readonly ROOMS_API = `${HttpService.API_PATH_PREFIX}/rooms`;
protected readonly INTERNAL_ROOMS_API = `${HttpService.INTERNAL_API_PATH_PREFIX}/rooms`;
protected readonly MEETINGS_API = `${HttpService.INTERNAL_API_PATH_PREFIX}/meetings`;
protected roomId: string = '';
protected roomSecret: string = '';
@ -212,7 +211,6 @@ export class RoomService {
this.roomPreferences = preferences;
}
/**
* Retrieves the role and permissions for a specified room and secret.
*

8
frontend/projects/shared-meet-components/src/lib/services/wizard-state.service.ts
View File

@ -72,8 +72,8 @@ export class RoomWizardStateService {
isVisible: true,
formGroup: this.formBuilder.group(
{
roomIdPrefix: [
{ value: initialRoomOptions.roomIdPrefix || '', disabled: editMode },
roomName: [
{ value: initialRoomOptions.roomName || 'Room', disabled: editMode },
editMode ? [] : [Validators.maxLength(50)]
],
autoDeletionDate: [
@ -198,8 +198,8 @@ export class RoomWizardStateService {
};
// Only update fields that are explicitly provided
if ('roomIdPrefix' in stepData) {
updatedOptions.roomIdPrefix = stepData.roomIdPrefix;
if ('roomName' in stepData) {
updatedOptions.roomName = stepData.roomName;
}
if ('autoDeletionDate' in stepData) {
updatedOptions.autoDeletionDate = stepData.autoDeletionDate;