From 1617e2b9d6eb4ac4a4436fb51a7f98deac82bbcd Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Mon, 28 Jul 2025 18:10:50 +0200 Subject: [PATCH] frontend: refactored video-room component and renamed by meeting component - Implemented EndMeetingComponent to handle user disconnection scenarios. - Created SCSS styles for the EndMeetingComponent to enhance UI/UX. - Updated MeetingComponent to manage participant interactions and room functionalities. - Added HTML structure for meeting access and participant form. - Integrated routing to replace DisconnectedComponent with EndMeetingComponent. - Added unit tests for MeetingComponent to ensure functionality. --- .../disconnected.component.spec.ts | 22 -- .../src/lib/pages/index.ts | 4 +- .../end-meeting/end-meeting.component.html} | 0 .../end-meeting/end-meeting.component.scss} | 2 +- .../end-meeting/end-meeting.component.ts} | 8 +- .../meeting.component.html} | 217 +++++++++--------- .../meeting.component.scss} | 0 .../meeting.component.spec.ts} | 10 +- .../meeting.component.ts} | 20 +- .../src/lib/routes/base-routes.ts | 8 +- 10 files changed, 135 insertions(+), 156 deletions(-) delete mode 100644 frontend/projects/shared-meet-components/src/lib/pages/disconnected/disconnected.component.spec.ts rename frontend/projects/shared-meet-components/src/lib/pages/{disconnected/disconnected.component.html => meeting/end-meeting/end-meeting.component.html} (100%) rename frontend/projects/shared-meet-components/src/lib/pages/{disconnected/disconnected.component.scss => meeting/end-meeting/end-meeting.component.scss} (98%) rename frontend/projects/shared-meet-components/src/lib/pages/{disconnected/disconnected.component.ts => meeting/end-meeting/end-meeting.component.ts} (96%) rename frontend/projects/shared-meet-components/src/lib/pages/{video-room/video-room.component.html => meeting/meeting.component.html} (98%) rename frontend/projects/shared-meet-components/src/lib/pages/{video-room/video-room.component.scss => meeting/meeting.component.scss} (100%) rename frontend/projects/shared-meet-components/src/lib/pages/{video-room/video-room.component.spec.ts => meeting/meeting.component.spec.ts} (60%) rename frontend/projects/shared-meet-components/src/lib/pages/{video-room/video-room.component.ts => meeting/meeting.component.ts} (96%) diff --git a/frontend/projects/shared-meet-components/src/lib/pages/disconnected/disconnected.component.spec.ts b/frontend/projects/shared-meet-components/src/lib/pages/disconnected/disconnected.component.spec.ts deleted file mode 100644 index cdde2f5..0000000 --- a/frontend/projects/shared-meet-components/src/lib/pages/disconnected/disconnected.component.spec.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DisconnectedComponent } from './disconnected.component'; - -describe('ParticipantDisconnectedComponent', () => { - let component: DisconnectedComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [DisconnectedComponent] - }).compileComponents(); - - fixture = TestBed.createComponent(DisconnectedComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/projects/shared-meet-components/src/lib/pages/index.ts b/frontend/projects/shared-meet-components/src/lib/pages/index.ts index 717c377..18f198c 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/index.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/index.ts @@ -6,9 +6,9 @@ export * from './console/recordings/recordings.component'; export * from './console/rooms/rooms.component'; export * from './console/rooms/room-wizard/room-wizard.component'; export * from './console/users-permissions/users-permissions.component'; -export * from './disconnected/disconnected.component'; +export * from './meeting/end-meeting/end-meeting.component'; export * from './error/error.component'; export * from './login/login.component'; export * from './room-recordings/room-recordings.component'; -export * from './video-room/video-room.component'; +export * from './meeting/meeting.component'; export * from './view-recording/view-recording.component'; diff --git a/frontend/projects/shared-meet-components/src/lib/pages/disconnected/disconnected.component.html b/frontend/projects/shared-meet-components/src/lib/pages/meeting/end-meeting/end-meeting.component.html similarity index 100% rename from frontend/projects/shared-meet-components/src/lib/pages/disconnected/disconnected.component.html rename to frontend/projects/shared-meet-components/src/lib/pages/meeting/end-meeting/end-meeting.component.html diff --git a/frontend/projects/shared-meet-components/src/lib/pages/disconnected/disconnected.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/meeting/end-meeting/end-meeting.component.scss similarity index 98% rename from frontend/projects/shared-meet-components/src/lib/pages/disconnected/disconnected.component.scss rename to frontend/projects/shared-meet-components/src/lib/pages/meeting/end-meeting/end-meeting.component.scss index d8dbf7e..7913d4c 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/disconnected/disconnected.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/meeting/end-meeting/end-meeting.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../src/assets/styles/design-tokens'; +@import '../../../../../../../src/assets/styles/design-tokens'; .disconnected-container { @include ov-theme-transition; diff --git a/frontend/projects/shared-meet-components/src/lib/pages/disconnected/disconnected.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/meeting/end-meeting/end-meeting.component.ts similarity index 96% rename from frontend/projects/shared-meet-components/src/lib/pages/disconnected/disconnected.component.ts rename to frontend/projects/shared-meet-components/src/lib/pages/meeting/end-meeting/end-meeting.component.ts index cf8d3f2..309f0ac 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/disconnected/disconnected.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/meeting/end-meeting/end-meeting.component.ts @@ -8,13 +8,13 @@ import { AppDataService, AuthService, NavigationService, WebComponentManagerServ import { LeftEventReason } from '@lib/typings/ce'; @Component({ - selector: 'ov-disconnected', + selector: 'ov-end-meeting', standalone: true, imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule], - templateUrl: './disconnected.component.html', - styleUrl: './disconnected.component.scss' + templateUrl: './end-meeting.component.html', + styleUrl: './end-meeting.component.scss' }) -export class DisconnectedComponent implements OnInit { +export class EndMeetingComponent implements OnInit { disconnectedTitle = 'You Left the Meeting'; disconnectReason = 'You have successfully left the meeting'; diff --git a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html similarity index 98% rename from frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html rename to frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html index 8d09e15..c5a3780 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.html +++ b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html @@ -1,111 +1,4 @@ -@if (!showRoom) { -
-
- -
- video_chat -
-

{{ roomId }}

-

Choose how you want to proceed

-
-
- - -
- - - - meeting_room -
- Join Meeting - Enter the room and start connecting -
- - - -
- - Your display name - - person - @if (participantForm.get('name')?.hasError('minlength')) { - The name must be at least 4 characters - } - @if (participantForm.get('name')?.hasError('required')) { - The name is required - } - @if (participantForm.get('name')?.hasError('participantExists')) { - - The name is already taken. Please choose another name - - } - - - -
- - - - - @if (showRecordingCard) { - - - video_library -
- View Recordings - Browse and manage past recordings -
- - - -
-

- Access previously recorded meetings from this room. You can watch, download, or - manage existing recordings. -

-
- - - - - } -
- - - @if (showBackButton) { -
- -
- } -
-
-} @else { +@if (showMeeting) { } +} @else { + +
+
+ +
+ video_chat +
+

{{ roomId }}

+

Choose how you want to proceed

+
+
+ + +
+ + + + meeting_room +
+ Join Meeting + Enter the room and start connecting +
+ + + +
+ + Your display name + + person + @if (participantForm.get('name')?.hasError('minlength')) { + The name must be at least 4 characters + } + @if (participantForm.get('name')?.hasError('required')) { + The name is required + } + @if (participantForm.get('name')?.hasError('participantExists')) { + + The name is already taken. Please choose another name + + } + + + +
+ + + + + @if (showRecordingCard) { + + + video_library +
+ View Recordings + Browse and manage past recordings +
+ + + +
+

+ Access previously recorded meetings from this room. You can watch, download, or + manage existing recordings. +

+
+ + + + + } +
+ + + @if (showBackButton) { +
+ +
+ } +
+
} diff --git a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss similarity index 100% rename from frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.scss rename to frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss diff --git a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.spec.ts b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.spec.ts similarity index 60% rename from frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.spec.ts rename to frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.spec.ts index 8befc53..cbf0480 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.spec.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { VideoRoomComponent } from './video-room.component'; +import { MeetingComponent } from './meeting.component'; describe('CallComponent', () => { - let component: VideoRoomComponent; - let fixture: ComponentFixture; + let component: MeetingComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [VideoRoomComponent] + imports: [MeetingComponent] }).compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(VideoRoomComponent); + fixture = TestBed.createComponent(MeetingComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts similarity index 96% rename from frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.ts rename to frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts index 5dd7254..3f0ed3c 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/video-room/video-room.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts @@ -51,9 +51,9 @@ import { } from 'openvidu-components-angular'; @Component({ - selector: 'app-video-room', - templateUrl: './video-room.component.html', - styleUrls: ['./video-room.component.scss'], + selector: 'app-meeting', + templateUrl: './meeting.component.html', + styleUrls: ['./meeting.component.scss'], standalone: true, imports: [ OpenViduComponentsUiModule, @@ -72,7 +72,7 @@ import { MatRippleModule ] }) -export class VideoRoomComponent implements OnInit { +export class MeetingComponent implements OnInit { participantForm = new FormGroup({ name: new FormControl('', [Validators.required, Validators.minLength(4)]) }); @@ -88,7 +88,7 @@ export class VideoRoomComponent implements OnInit { participantToken = ''; participantRole: ParticipantRole = ParticipantRole.PUBLISHER; - showRoom = false; + showMeeting = false; features: Signal; meetingEndedByMe = false; @@ -216,11 +216,11 @@ export class VideoRoomComponent implements OnInit { } } - async submitAccessRoom() { + async submitAccessMeeting() { const { valid, value } = this.participantForm; if (!valid || !value.name?.trim()) { // If the form is invalid, do not proceed - console.warn('Participant form is invalid. Cannot access room.'); + console.warn('Participant form is invalid. Cannot access meeting.'); return; } @@ -231,14 +231,14 @@ export class VideoRoomComponent implements OnInit { await this.generateParticipantToken(); await this.addParticipantNameToUrl(); await this.roomService.loadPreferences(this.roomId); - this.showRoom = true; + this.showMeeting = true; } catch (error) { - console.error('Error accessing room:', error); + console.error('Error accessing meeting:', error); } } /** - * Generates a participant token for joining a video room. + * Generates a participant token for joining a meeting. * * @throws When participant already exists in the room (status 409) * @returns Promise that resolves when token is generated diff --git a/frontend/projects/shared-meet-components/src/lib/routes/base-routes.ts b/frontend/projects/shared-meet-components/src/lib/routes/base-routes.ts index 5da4afb..b9d84dc 100644 --- a/frontend/projects/shared-meet-components/src/lib/routes/base-routes.ts +++ b/frontend/projects/shared-meet-components/src/lib/routes/base-routes.ts @@ -13,7 +13,7 @@ import { import { ConsoleComponent, DevelopersSettingsComponent, - DisconnectedComponent, + EndMeetingComponent, ErrorComponent, LoginComponent, OverviewComponent, @@ -22,7 +22,7 @@ import { RoomsComponent, RoomWizardComponent, UsersPermissionsComponent, - VideoRoomComponent, + MeetingComponent, ViewRecordingComponent } from '@lib/pages'; @@ -34,7 +34,7 @@ export const baseRoutes: Routes = [ }, { path: 'room/:room-id', - component: VideoRoomComponent, + component: MeetingComponent, canActivate: [ runGuardsSerially(extractRoomQueryParamsGuard, checkParticipantRoleAndAuthGuard, removeRoomSecretGuard) ] @@ -56,7 +56,7 @@ export const baseRoutes: Routes = [ component: ViewRecordingComponent, canActivate: [checkRecordingAuthGuard] }, - { path: 'disconnected', component: DisconnectedComponent }, + { path: 'disconnected', component: EndMeetingComponent }, { path: 'error', component: ErrorComponent }, { path: '',