frontend: Updated console page and refactored code

frontend/projects/shared-call-components/src/lib/components/card/toggle-card/toggle-card.component.html

@@ -10,7 +10,7 @@
 	</div>
 
 	<div class="card-footer">
-		<span>{{ title }} is {{ toggleValue ? 'active' : 'disabled' }}</span>
-		<mat-slide-toggle [checked]="toggleValue" (change)="onToggleChange($event)"></mat-slide-toggle>
+		<span>{{ title }} is {{ toggleValue ? 'enabled' : 'disabled' }}</span>
+		<mat-slide-toggle class="ov-slide-toggle" [checked]="toggleValue" (change)="onToggleChange($event)"></mat-slide-toggle>
 	</div>
 </mat-card>

frontend/projects/shared-call-components/src/lib/components/card/toggle-card/toggle-card.component.scss

@@ -65,3 +65,19 @@
 .view-more:hover {
 	text-decoration: underline;
 }
+
+mat-slide-toggle.ov-slide-toggle {
+	--mdc-switch-selected-handle-color: #f9faf8;
+	--mdc-switch-selected-pressed-handle-color: var(--mdc-switch-selected-handle-color);
+	--mdc-switch-selected-hover-handle-color: var(--mdc-switch-selected-handle-color);
+	--mdc-switch-selected-focus-handle-color: var(--mdc-switch-selected-handle-color);
+
+	--mdc-switch-selected-track-color: #4fb64f;
+	--mdc-switch-selected-pressed-track-color: var(--mdc-switch-selected-track-color);
+	--mdc-switch-selected-hover-track-color: var(--mdc-switch-selected-track-color);
+	--mdc-switch-selected-focus-track-color: var(--mdc-switch-selected-track-color);
+
+	--mdc-switch-selected-pressed-state-layer-color: var(--mdc-switch-selected-track-color);
+	--mdc-switch-selected-hover-state-layer-color: var(--mdc-switch-selected-handle-color);
+	--mdc-switch-selected-focus-state-layer-color: var(--mdc-switch-selected-handle-color);
+  }

frontend/projects/shared-call-components/src/lib/services/global-preferences.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GlobalPreferencesService } from './global-preferences.service';
+
+describe('GlobalPreferencesService', () => {
+  let service: GlobalPreferencesService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GlobalPreferencesService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/projects/shared-call-components/src/lib/services/global-preferences.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { RoomPreferences } from '@openvidu/call-common-types';
+import { Subject } from 'rxjs';
+
+@Injectable({
+	providedIn: 'root'
+})
+// This service is used to store the global preferences of the application
+export class GlobalPreferencesService {
+	// private globalPreferences: GlobalPreferences
+	private roomPreferences: RoomPreferences;
+
+	// private roomPreferencesSubject = new Subject<RoomPreferences>();
+
+	// Observable to notify changes in the room preferences
+	// roomPreferences$ = this.roomPreferencesSubject.asObservable();
+
+	constructor() {}
+
+	setRoomPreferences(prefs: RoomPreferences) {
+		this.roomPreferences = prefs;
+		// this.roomPreferencesSubject.next(prefs);
+	}
+
+	getRoomPreferences(): RoomPreferences {
+		return this.roomPreferences;
+	}
+}

frontend/projects/shared-call-components/src/lib/services/http.service.ts

@@ -1,5 +1,6 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { AppearancePreferences, GlobalPreferences, RoomPreferences } from '@openvidu/call-common-types';
 import { RecordingInfo } from 'openvidu-components-angular';
 import { lastValueFrom } from 'rxjs';
 
@@ -14,52 +15,56 @@ export class HttpService {
 		// this.baseHref = '/' + (!!window.location.pathname.split('/')[1] ? window.location.pathname.split('/')[1] + '/' : '');
 	}
 
-	private generateUserHeaders(): HttpHeaders {
-		const headers = new HttpHeaders({
-			'Content-Type': 'application/json'
-		});
-		//! TODO: Fix this
-		const userCredentials = undefined; //this.storageService.getParticipantCredentials();
-
-		if (userCredentials?.username && userCredentials?.password) {
-			return headers.append(
-				'Authorization',
-				`Basic ${btoa(`${userCredentials.username}:${userCredentials.password}`)}`
-			);
-		}
-
-		return headers;
+	/**
+	 * Retrieves the global preferences.
+	 *
+	 * @returns {Promise<GlobalPreferences>} A promise that resolves to the global preferences.
+	 */
+	getGlobalPreferences(): Promise<GlobalPreferences> {
+		const headers = this.generateUserHeaders();
+		return this.getRequest(`${this.pathPrefix}/preferences`, headers);
 	}
 
-	private generateAdminHeaders(): HttpHeaders {
-		const headers = new HttpHeaders({
-			'Content-Type': 'application/json'
-		});
-		// TODO: Fix this
-		const adminCredentials = undefined; // this.storageService.getAdminCredentials();
-
-		if (!adminCredentials) {
-			console.error('Admin credentials not found');
-			return headers;
-		}
-
-		const { username, password } = adminCredentials;
-
-		if (username && password) {
-			return headers.set('Authorization', `Basic ${btoa(`${username}:${password}`)}`);
-		}
+	/**
+	 * Retrieves the room preferences.
+	 *
+	 * @returns {Promise<RoomPreferences>} A promise that resolves to the room preferences.
+	 */
+	getRoomPreferences(): Promise<RoomPreferences> {
+		const headers = this.generateUserHeaders();
+		return this.getRequest(`${this.pathPrefix}/preferences/room`, headers);
+	}
 
-		return headers;
+	/**
+	 * Retrieves the room preferences.
+	 *
+	 * @returns {Promise<AppearancePreferences>} A promise that resolves to the app appearance preferences.
+	 */
+	getAppearancePreferences(): Promise<AppearancePreferences> {
+		const headers = this.generateUserHeaders();
+		return this.getRequest(`${this.pathPrefix}/preferences/appearance`, headers);
 	}
 
-	saveGlobalPreferences(preferences: any): Promise<any> {
+	/**
+	 * Saves the room preferences.
+	 *
+	 * @param preferences - The room preferences to be saved.
+	 * @returns A promise that resolves when the preferences have been successfully saved.
+	 */
+	saveRoomPreferences(preferences: RoomPreferences): Promise<any> {
 		const headers = this.generateUserHeaders();
-		return this.postRequest(`${this.pathPrefix}/preferences`, preferences, headers);
+		return this.putRequest(`${this.pathPrefix}/preferences/room`, preferences, headers);
 	}
 
-	getGlobalPreferences(): Promise<any> {
+	/**
+	 * Saves the app appearance preferences.
+	 *
+	 * @param preferences - The app appearance preferences to be saved.
+	 * @returns A promise that resolves when the preferences have been successfully saved.
+	 */
+	saveAppearancePreferences(preferences: AppearancePreferences): Promise<any> {
 		const headers = this.generateUserHeaders();
-		return this.getRequest(`${this.pathPrefix}/preferences`, headers);
+		return this.putRequest(`${this.pathPrefix}/preferences/appearance`, preferences, headers);
 	}
 
 	async getConfig() {
@@ -181,4 +186,42 @@ export class HttpService {
 			throw error;
 		}
 	}
+
+	private generateUserHeaders(): HttpHeaders {
+		const headers = new HttpHeaders({
+			'Content-Type': 'application/json'
+		});
+		//! TODO: Fix this
+		const userCredentials = undefined; //this.storageService.getParticipantCredentials();
+
+		if (userCredentials?.username && userCredentials?.password) {
+			return headers.append(
+				'Authorization',
+				`Basic ${btoa(`${userCredentials.username}:${userCredentials.password}`)}`
+			);
+		}
+
+		return headers;
+	}
+
+	private generateAdminHeaders(): HttpHeaders {
+		const headers = new HttpHeaders({
+			'Content-Type': 'application/json'
+		});
+		// TODO: Fix this
+		const adminCredentials = undefined; // this.storageService.getAdminCredentials();
+
+		if (!adminCredentials) {
+			console.error('Admin credentials not found');
+			return headers;
+		}
+
+		const { username, password } = adminCredentials;
+
+		if (username && password) {
+			return headers.set('Authorization', `Basic ${btoa(`${username}:${password}`)}`);
+		}
+
+		return headers;
+	}
 }

frontend/projects/shared-call-components/src/lib/services/index.ts

@@ -1,2 +1,3 @@
 export * from './context.service';
 export * from './http.service';
+export * from './global-preferences.service';

frontend/src/app/app.routes.ts

@@ -6,7 +6,7 @@ import { roomGuard } from '@app/guards/room.guard';
 import { embeddedGuard } from '@app/guards/embedded.guard';
 import { nonEmbeddedGuard } from '@app/guards/non-embedded.guard';
 import { AppearanceComponent } from '@app/pages/console/appearance/appearance.component';
-import { RoomConfigComponent } from '@app/pages/console/room-config/room-config.component';
+import { RoomPreferencesComponent } from '@app/pages/console/room-preferences/room-preferences.component';
 import { AccessPermissionsComponent } from '@app/pages/console/access-permissions/access-permissions.component';
 import { UnauthorizedComponent } from 'shared-call-components';
 export const routes: Routes = [
@@ -18,7 +18,7 @@ export const routes: Routes = [
 		canActivate: [nonEmbeddedGuard],
 		children: [
 			{ path: 'appearance', component: AppearanceComponent },
-			{ path: 'room-config', component: RoomConfigComponent },
+			{ path: 'room-preferences', component: RoomPreferencesComponent },
 			{ path: 'access-permissions', component: AccessPermissionsComponent },
 		]
 	},

frontend/src/app/pages/console/console.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { ConsoleNavComponent, ConsoleNavLink, HttpService } from 'shared-call-components';
+import { Component } from '@angular/core';
+import { ConsoleNavComponent, ConsoleNavLink } from 'shared-call-components';
 
 @Component({
 	selector: 'app-console',
@@ -8,24 +8,19 @@ import { ConsoleNavComponent, ConsoleNavLink, HttpService } from 'shared-call-co
 	templateUrl: './console.component.html',
 	styleUrl: './console.component.scss'
 })
-export class ConsoleComponent implements OnInit {
+export class ConsoleComponent {
 	navLinks: ConsoleNavLink[] = [
 		{ label: 'Overview', route: '/', icon: 'dashboard' },
 		{ label: 'Appearance', route: 'appearance', icon: 'palette' },
-		{ label: 'Access & Permissions', route: 'access-permissions', icon: 'lock' },
-		{ label: 'Room Config', route: 'room-config', icon: 'video_settings' },
-		{ label: 'Security (PRO)', route: 'security', icon: 'security' },
-		{ label: 'Integrations (PRO)', route: 'integrations', icon: 'integration_instructions' },
-		{ label: 'Support', route: 'support', icon: 'support' },
-		{ label: 'About', route: 'about', icon: 'info' }
+		{ label: 'Room Preferences', route: 'room-preferences', icon: 'video_settings' },
+		{ label: 'Access & Permissions', route: 'access-permissions', icon: 'lock' }
+		// { label: 'Security (PRO)', route: 'security', icon: 'security' },
+		// { label: 'Integrations (PRO)', route: 'integrations', icon: 'integration_instructions' },
+		// { label: 'Support', route: 'support', icon: 'support' },
+		// { label: 'About', route: 'about', icon: 'info' }
 	];
 
-	constructor(private httpService: HttpService) {}
-
-	async ngOnInit() {
-		const globalPreferences = await this.httpService.getGlobalPreferences();
-		console.log(globalPreferences);
-	}
+	constructor() {}
 
 	logout() {
 		console.log('logout');

frontend/src/app/pages/console/room-config/room-config.component.html → frontend/src/app/pages/console/room-preferences/room-preferences.component.html

@@ -33,4 +33,15 @@
 		(onToggleValueChanged)="onChatToggle($event)"
 	>
 	</ov-toggle-card>
+
+	<ov-toggle-card
+		[title]="'Backgrounds'"
+		[description]="'Allow participants to change their backgrounds'"
+		[icon]="'blur_on'"
+		[iconBackgroundColor]="'#444444'"
+		[cardBackgroundColor]="'#ffffff'"
+		[toggleValue]="backgroundsEnabled"
+		(onToggleValueChanged)="onVirtualBackgroundToggle($event)"
+	>
+	</ov-toggle-card>
 </ov-dynamic-grid>

frontend/src/app/pages/console/room-config/room-config.component.spec.ts → frontend/src/app/pages/console/room-preferences/room-preferences.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RoomConfigComponent } from './room-config.component';
+import { RoomPreferencesComponent } from './room-preferences.component';
 
 describe('RoomConfigComponent', () => {
-  let component: RoomConfigComponent;
-  let fixture: ComponentFixture<RoomConfigComponent>;
+  let component: RoomPreferencesComponent;
+  let fixture: ComponentFixture<RoomPreferencesComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RoomConfigComponent]
+      imports: [RoomPreferencesComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(RoomConfigComponent);
+    fixture = TestBed.createComponent(RoomPreferencesComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });