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

frontend: Add RoomFormComponent with routing and basic structure

Browse Source
This commit is contained in:
Carlos Santos 2025-03-17 17:31:02 +01:00
parent 8ecc62ba46
commit 4f6eb1d7e3
10 changed files with 146 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss
View File

@ -4,8 +4,8 @@ mat-sidenav-container {
}
.page-content {
height: 100%;
padding: 15px;
height: calc(100% - (64px + 40px));
padding: 20px;
}
.toolbar-title {
font-size: 1.5rem;
@ -55,7 +55,6 @@ mat-sidenav {
.centeredEntry {
justify-content: center !important;
}
}

1
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.html Normal file
View File

@ -0,0 +1 @@
<p>room-form works!</p>

0
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.scss Normal file
View File

23
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RoomFormComponent } from './room-form.component';
describe('RoomFormComponent', () => {
let component: RoomFormComponent;
let fixture: ComponentFixture<RoomFormComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [RoomFormComponent]
})
.compileComponents();
fixture = TestBed.createComponent(RoomFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

12
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.ts Normal file
View File

@ -0,0 +1,12 @@
import { Component } from '@angular/core';
@Component({
selector: 'ov-room-form',
standalone: true,
imports: [],
templateUrl: './room-form.component.html',
styleUrl: './room-form.component.scss'
})
export class RoomFormComponent {
}

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

@ -30,13 +30,14 @@
</div> -->
<h1>Rooms</h1>
<ov-dynamic-grid [maxColumns]="2" [withHeader]="true" [gutter]="'10px'" [layoutMode]="'grid'">
<!-- Custom Header-->
<div header></div>
<!-- <ov-dynamic-grid [maxColumns]="2" [withHeader]="true" [gutter]="'10px'" [layoutMode]="'grid'"> -->
<!-- Custom Header-->
<!-- <div header></div> -->
@if (!isInRoomForm()) {
<mat-list class="grid-item" [attr.data-span]="2">
<div mat-subheader class="item-subheader">
<h3>Active Rooms</h3>
<h3>Rooms</h3>
<div class="subheader-button">
<button mat-flat-button color="primary" (click)="createRoom()">
<mat-icon class="icon-left">add</mat-icon>
@ -53,7 +54,7 @@
<div matListItemLine class="item-details">
<div>
<mat-icon class="icon">auto_delete</mat-icon>
<p>{{ item.expirationDate | date: 'dd/MM/yyyy' }}</p>
<p>Expires: {{ item.expirationDate | date: 'dd/MM/yyyy' }}</p>
</div>
</div>
@ -71,9 +72,10 @@
<p class="empty-rooms-message">No rooms created yet</p>
}
</mat-list>
}
<!-- Recording Toggle -->
<ov-toggle-card
<!-- Recording Toggle -->
<!-- <ov-toggle-card
[title]="'Recording'"
[description]="'Allow record your rooms for later use'"
[icon]="'radio_button_checked'"
@ -82,10 +84,10 @@
[toggleValue]="recordingEnabled"
(onToggleValueChanged)="onRecordingToggle($event)"
>
</ov-toggle-card>
</ov-toggle-card> -->
<!-- Chat Toggle -->
<ov-toggle-card
<!-- Chat Toggle -->
<!-- <ov-toggle-card
[title]="'Chat'"
[description]="'Allow participants to communicate via chat'"
[icon]="'message'"
@ -94,9 +96,9 @@
[toggleValue]="chatEnabled"
(onToggleValueChanged)="onChatToggle($event)"
>
</ov-toggle-card>
</ov-toggle-card> -->
<ov-toggle-card
<!-- <ov-toggle-card
[title]="'Backgrounds'"
[description]="'Allow participants to change their backgrounds'"
[icon]="'blur_on'"
@ -105,5 +107,8 @@
[toggleValue]="backgroundsEnabled"
(onToggleValueChanged)="onVirtualBackgroundToggle($event)"
>
</ov-toggle-card>
</ov-dynamic-grid>
</ov-toggle-card> -->
<!-- </ov-dynamic-grid> -->
<div>
<router-outlet></router-outlet>
</div>

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

@ -1,5 +1,6 @@
.grid-item {
padding: 0 0 10px;
padding: 0px;
border: 1px solid #e9ecef;
.empty-rooms-message {
padding: 10px;
@ -13,9 +14,13 @@
margin: 0;
display: flex;
justify-content: space-between;
border: 1px solid #e9ecef;
.subheader-button {
align-content: center;
button {
border-radius: 4px !important;
}
}
}

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

@ -9,6 +9,7 @@ import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListItem, MatListModule } from '@angular/material/list';
import { OpenViduMeetRoom } from 'projects/shared-meet-components/src/lib/typings/ce/room';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
@Component({
selector: 'ov-room-preferences',
@ -20,14 +21,15 @@ import { OpenViduMeetRoom } from 'projects/shared-meet-components/src/lib/typing
MatCardModule,
DatePipe,
MatButtonModule,
MatIconModule
MatIconModule,
RouterModule
],
templateUrl: './rooms.component.html',
styleUrl: './rooms.component.scss'
})
export class RoomsComponent implements OnInit {
createdRooms: OpenViduMeetRoom[] = [];
private roomPreferences!: RoomPreferences;
// private roomPreferences!: RoomPreferences;
recordingEnabled = false;
chatEnabled = false;
backgroundsEnabled = false;
@ -37,31 +39,38 @@ export class RoomsComponent implements OnInit {
constructor(
protected loggerService: LoggerService,
private roomService: RoomService,
private notificationService: NotificationService
private notificationService: NotificationService,
protected router: Router,
protected route: ActivatedRoute
) {
this.log = this.loggerService.get('OpenVidu Meet - RoomService');
}
async ngOnInit() {
try {
const [rooms] = await Promise.all([this.roomService.listRooms(), this.loadRoomPreferences()]);
console.log('Rooms:', rooms);
const rooms = await this.roomService.listRooms();
this.createdRooms = rooms;
} catch (error) {
console.error('Error fetching room preferences', error);
}
}
isInRoomForm(): boolean {
return this.route.snapshot.firstChild !== null; // Verifica si hay un hijo en la ruta
}
async createRoom() {
try {
const room = await this.roomService.createRoom();
this.notificationService.showSnackbar('Room created');
this.log.d('Room created:', room);
this.createdRooms.push(room);
} catch (error) {
this.notificationService.showAlert('Error creating room');
this.log.e('Error creating room:', error);
}
//TODO: Go to room details page
await this.router.navigate(['new'], { relativeTo: this.route });
// try {
// const room = await this.roomService.createRoom();
// this.notificationService.showSnackbar('Room created');
// this.log.d('Room created:', room);
// this.createdRooms.push(room);
// } catch (error) {
// this.notificationService.showAlert('Error creating room');
// this.log.e('Error creating room:', error);
// }
}
openRoom(roomName: string) {
@ -79,72 +88,74 @@ export class RoomsComponent implements OnInit {
}
}
onRoomClicked(room: OpenViduMeetRoom) {
async onRoomClicked(room: OpenViduMeetRoom) {
console.log('Room clicked:', room);
//TODO: Go to room details page
await this.router.navigate([room.roomName, 'edit'], { relativeTo: this.route });
}
async onRecordingToggle(enabled: boolean) {
console.log('Recording toggled', enabled);
// async onRecordingToggle(enabled: boolean) {
// console.log('Recording toggled', enabled);
try {
this.roomPreferences.recordingPreferences.enabled = enabled;
await this.roomService.saveRoomPreferences(this.roomPreferences);
this.recordingEnabled = enabled;
// try {
// this.roomPreferences.recordingPreferences.enabled = enabled;
// await this.roomService.saveRoomPreferences(this.roomPreferences);
// this.recordingEnabled = enabled;
// TODO: Show a toast message
} catch (error) {
console.error('Error saving recording preferences', error);
// TODO: Show a toast message
}
}
// // TODO: Show a toast message
// } catch (error) {
// console.error('Error saving recording preferences', error);
// // TODO: Show a toast message
// }
// }
async onChatToggle(enabled: boolean) {
console.log('Chat toggled', enabled);
// async onChatToggle(enabled: boolean) {
// console.log('Chat toggled', enabled);
try {
this.roomPreferences.chatPreferences.enabled = enabled;
await this.roomService.saveRoomPreferences(this.roomPreferences);
this.chatEnabled = enabled;
// TODO: Show a toast message
} catch (error) {
console.error('Error saving chat preferences', error);
// TODO: Show a toast message
}
}
// try {
// this.roomPreferences.chatPreferences.enabled = enabled;
// await this.roomService.saveRoomPreferences(this.roomPreferences);
// this.chatEnabled = enabled;
// // TODO: Show a toast message
// } catch (error) {
// console.error('Error saving chat preferences', error);
// // TODO: Show a toast message
// }
// }
async onVirtualBackgroundToggle(enabled: boolean) {
console.log('Virtual background toggled', enabled);
// async onVirtualBackgroundToggle(enabled: boolean) {
// console.log('Virtual background toggled', enabled);
try {
this.roomPreferences.virtualBackgroundPreferences.enabled = enabled;
await this.roomService.saveRoomPreferences(this.roomPreferences);
this.backgroundsEnabled = enabled;
// TODO: Show a toast message
} catch (error) {
console.error('Error saving virtual background preferences', error);
// TODO: Show a toast message
}
}
// try {
// this.roomPreferences.virtualBackgroundPreferences.enabled = enabled;
// await this.roomService.saveRoomPreferences(this.roomPreferences);
// this.backgroundsEnabled = enabled;
// // TODO: Show a toast message
// } catch (error) {
// console.error('Error saving virtual background preferences', error);
// // TODO: Show a toast message
// }
// }
/**
* Loads the room preferences from the global preferences service and assigns them to the component's properties.
*
* @returns {Promise<void>} A promise that resolves when the room preferences have been loaded and assigned.
*/
private async loadRoomPreferences() {
const preferences = await this.roomService.getRoomPreferences();
this.roomPreferences = preferences;
// private async loadRoomPreferences() {
// const preferences = await this.roomService.getRoomPreferences();
// this.roomPreferences = preferences;
console.log('Room preferences:', preferences);
// console.log('Room preferences:', preferences);
// Destructures the `preferences` object to extract the enabled status of various features.
const {
recordingPreferences: { enabled: recordingEnabled },
chatPreferences: { enabled: chatEnabled },
virtualBackgroundPreferences: { enabled: backgroundsEnabled }
} = preferences;
// // Destructures the `preferences` object to extract the enabled status of various features.
// const {
// recordingPreferences: { enabled: recordingEnabled },
// chatPreferences: { enabled: chatEnabled },
// virtualBackgroundPreferences: { enabled: backgroundsEnabled }
// } = preferences;
// Assigns the extracted values to the component's properties.
Object.assign(this, { recordingEnabled, chatEnabled, backgroundsEnabled });
}
// // Assigns the extracted values to the component's properties.
// Object.assign(this, { recordingEnabled, chatEnabled, backgroundsEnabled });
// }
}

1
frontend/projects/shared-meet-components/src/lib/pages/index.ts
View File

@ -1,5 +1,6 @@
export * from './console/console.component';
export * from './console/rooms/rooms.component';
export * from './console/rooms/room-form/room-form.component';
export * from './console/recordings/recordings.component';
export * from './console/access-permissions/access-permissions.component';
export * from './console/appearance/appearance.component';

9
frontend/projects/shared-meet-components/src/lib/routes/base-routes.ts
View File

@ -23,7 +23,8 @@ import {
RecordingsComponent,
RoomsComponent,
SecurityPreferencesComponent,
VideoRoomComponent
VideoRoomComponent,
RoomFormComponent
} from '../pages';
import { LoginComponent } from '@lib/pages/login/login.component';
import { Role } from '@lib/typings/ce';
@ -74,7 +75,11 @@ export const baseRoutes: Routes = [
},
{
path: 'rooms',
component: RoomsComponent
component: RoomsComponent,
children: [
{ path: 'new', component: RoomFormComponent },
{ path: ':roomName/edit', component: RoomFormComponent }
]
},
{
path: 'recordings',