From c22c00b6027fcd76dd2828df60d2966c868d0019 Mon Sep 17 00:00:00 2001 From: juancarmore Date: Tue, 5 Aug 2025 17:46:27 +0200 Subject: [PATCH] frontend: update room-related terminology from roomIdPrefix to roomName across components and services --- .../recording-lists.component.html | 21 ++++++++++++------- .../recording-lists.component.scss | 8 +++++-- .../recording-lists.component.ts | 4 ++-- .../rooms-lists/rooms-lists.component.html | 11 +++++----- .../rooms-lists/rooms-lists.component.scss | 6 +++++- .../rooms-lists/rooms-lists.component.ts | 4 ++-- .../recordings/recordings.component.ts | 2 +- .../room-basic-creation.component.html | 14 ++++++------- .../room-basic-creation.component.ts | 16 +++++++------- .../room-wizard/room-wizard.component.ts | 10 ++++----- .../room-details/room-details.component.html | 14 ++++++------- .../room-details/room-details.component.ts | 2 +- .../pages/console/rooms/rooms.component.ts | 2 +- .../lib/pages/meeting/meeting.component.html | 2 +- .../lib/pages/meeting/meeting.component.ts | 18 +++++++--------- .../room-recordings.component.html | 4 ++-- .../room-recordings.component.scss | 2 +- .../room-recordings.component.ts | 4 ++++ .../src/lib/services/room.service.ts | 2 -- .../src/lib/services/wizard-state.service.ts | 8 +++---- 20 files changed, 83 insertions(+), 71 deletions(-) diff --git a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html index 7b49d8e..796221a 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html +++ b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html @@ -109,16 +109,17 @@ } - + @if (showRoomInfo) { - - Room ID + + Room
+ {{ recording.roomId }} - @if (recording.filename) { - - } +
@@ -262,7 +263,13 @@ @if (showLoadMore) {
- diff --git a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss index 9780aef..6203752 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss @@ -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 diff --git a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts index fab18ca..4698754 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts @@ -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'); diff --git a/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.html b/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.html index 5de1178..484f670 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.html +++ b/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.html @@ -14,7 +14,7 @@ search @@ -110,11 +110,12 @@ } - - - Room ID - + + + Room Name +
+ {{ room.roomName }} {{ room.roomId }}
diff --git a/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.scss b/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.scss index 61d91d6..c15c092 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.scss @@ -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 { diff --git a/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.ts b/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.ts index b866628..8915373 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.ts @@ -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 ===== diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts index 99bab95..e2deb62 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts @@ -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; } diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.html b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.html index 56a0744..b2ae9a5 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.html +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.html @@ -5,7 +5,7 @@

Create Room

- 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.

@@ -13,14 +13,14 @@
- + - Room Name Prefix - + Room Name + label - Optional prefix for room names. Leave empty for default naming. - @if (roomCreationForm.get('roomIdPrefix')?.hasError('maxlength')) { - Room name prefix cannot exceed 50 characters + Enter a custom room name, or leave blank to use the default name "Room". + @if (roomCreationForm.get('roomName')?.hasError('maxlength')) { + Room name cannot exceed 50 characters } diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.ts index 5fadda7..b1cd4a7 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.ts @@ -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(); @Output() openAdvancedMode = new EventEmitter(); - roomCreationForm: FormGroup; + roomCreationForm = new FormGroup({ + roomName: new FormControl('Room', [Validators.maxLength(50)]) + }); private destroy$ = new Subject(); - 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); } } diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/room-wizard.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/room-wizard.component.ts index f21a1a4..187d788 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/room-wizard.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/room-wizard.component.ts @@ -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 { diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.html b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.html index 13c4779..54de660 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.html +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.html @@ -5,7 +5,7 @@

Room Details

- Configure your room's details including name prefix and automatic deletion date + Configure your room's details including name and automatic deletion date

@@ -13,14 +13,14 @@
- + - Room Name Prefix - + Room Name + label - Optional prefix for room names. Leave empty for default naming. - @if (roomDetailsForm.get('roomIdPrefix')?.hasError('maxlength')) { - Room name prefix cannot exceed 50 characters + Enter a custom room name, or leave blank to use the default name "Room". + @if (roomDetailsForm.get('roomName')?.hasError('maxlength')) { + Room name cannot exceed 50 characters } diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.ts index c58610e..7705bc7 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.ts @@ -66,7 +66,7 @@ export class RoomWizardRoomDetailsComponent implements OnDestroy { } const stepData: Partial = { - roomIdPrefix: formValue.roomIdPrefix, + roomName: formValue.roomName, autoDeletionDate: autoDeletionDateTime }; diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.ts index 204139a..65afc49 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.ts @@ -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) // ); diff --git a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html index 8e96529..5f546d6 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html +++ b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html @@ -125,7 +125,7 @@
video_chat
-

{{ roomId }}

+

{{ roomName }}

Choose how you want to proceed

diff --git a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts index 6a71f22..e4deb60 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts @@ -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); diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.html b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.html index c3bb963..f20cc7e 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.html +++ b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.html @@ -12,8 +12,8 @@

Recordings for room - - {{ roomId }} + + {{ roomName }}

diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.scss index 7b6dc16..0d08aae 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.scss @@ -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); } diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.ts index ab15ba6..04649eb 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.ts @@ -19,6 +19,7 @@ import { ILogger, LoggerService } from 'openvidu-components-angular'; export class RoomRecordingsComponent implements OnInit { recordings = signal([]); 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(); } diff --git a/frontend/projects/shared-meet-components/src/lib/services/room.service.ts b/frontend/projects/shared-meet-components/src/lib/services/room.service.ts index 8a8b39c..f2ba4a8 100644 --- a/frontend/projects/shared-meet-components/src/lib/services/room.service.ts +++ b/frontend/projects/shared-meet-components/src/lib/services/room.service.ts @@ -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. * diff --git a/frontend/projects/shared-meet-components/src/lib/services/wizard-state.service.ts b/frontend/projects/shared-meet-components/src/lib/services/wizard-state.service.ts index aca1a9b..32e853a 100644 --- a/frontend/projects/shared-meet-components/src/lib/services/wizard-state.service.ts +++ b/frontend/projects/shared-meet-components/src/lib/services/wizard-state.service.ts @@ -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;