frontend: Updated appearance component

frontend/projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.ts

@@ -52,7 +52,6 @@ export class BaseCardComponent implements AfterViewInit {
 	constructor(protected cdr: ChangeDetectorRef) {}
 
 	ngAfterViewInit() {
-		console.log(this.cardContent);
 		this.showCardContent = this.cardContent?.nativeElement.children.length > 0;
 		this.cdr.detectChanges();
 	}

frontend/projects/shared-call-components/src/lib/components/cards/selection-card/selection-card.component.ts

@@ -18,11 +18,12 @@ export class SelectionCardComponent extends BaseCardComponent {
 
 	@Input() selectionType: 'text' | 'color' = 'text';
 	@Output() onOptionSelected = new EventEmitter<any>();
+	@Output() onColorChanged = new EventEmitter<{ label: string; value: string }>();
 	onSelectionChange(event: any) {
 		this.onOptionSelected.emit(event.value);
 	}
 
 	onColorChange(label: string, event: any) {
-		console.log('color changed', label, event.target.value);
+		this.onColorChanged.emit({ label, value: event.target.value });
 	}
 }

frontend/projects/shared-call-components/src/lib/pages/console/appearance/appearance.component.html

@@ -16,7 +16,6 @@
 		[iconBackgroundColor]="'#FFCD00'"
 		[selectionType]="'color'"
 		[options]="colorOptions"
-		(onColorChange)="onColorChange($event)"
 	></ov-selection-card>
 
 	<ng-content></ng-content>

frontend/projects/shared-call-components/src/lib/pages/console/appearance/appearance.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectorRef, Component } from '@angular/core';
 import { DynamicGridComponent, LogoCardComponent, SelectionCardComponent } from '../../../components';
-import { GlobalPreferencesService } from '../../../services';
 import { AppearancePreferences } from '@openvidu/call-common-types';
 
 @Component({
@@ -12,7 +11,7 @@ import { AppearancePreferences } from '@openvidu/call-common-types';
 })
 export class AppearanceComponent {
 	appearancePreferences: AppearancePreferences = {
-		theme: 'default',
+		// theme: 'default',
 		colors: new Map<string, string>([
 			['primary', '#303030'],
 			['secondary', '#3e3f3f'],
@@ -27,36 +26,22 @@ export class AppearanceComponent {
 	};
 	colorOptions: { label: string; value: string }[] = [];
 
-	constructor(private globalPreferencesService: GlobalPreferencesService, private cdr: ChangeDetectorRef) {}
+	constructor(protected cdr: ChangeDetectorRef) {}
 
 	async ngOnInit() {
 		try {
 			await this.loadAppearancePreferences();
 			this.cdr.detectChanges();
 		} catch (error) {}
 	}
-	onColorChange(event: any) {
-		console.log('color changed', event);
-	}
 
 	async loadAppearancePreferences() {
 		try {
-			this.appearancePreferences = await this.globalPreferencesService.getAppearancePreferences();
-			if (this.appearancePreferences.colors) {
-				this.colorOptions = Array.from(this.appearancePreferences.colors.keys()).map((key) => {
-					return { label: key, value: this.appearancePreferences.colors!.get(key) as string };
-				});
-			}
-
-		} catch (error) {
-			console.error('Error fetching appearance preferences', error);
-		}
-		if (this.appearancePreferences.colors) {
-			this.colorOptions = Array.from(this.appearancePreferences.colors.keys()).map((key) => {
+			this.colorOptions = Array.from(this.appearancePreferences.colors!.keys()).map((key) => {
 				return { label: key, value: this.appearancePreferences.colors!.get(key) as string };
 			});
+		} catch (error) {
+			console.error(error);
 		}
-		console.log('colorOptions', this.colorOptions);
-
 	}
 }

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

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { AppearancePreferences, RoomPreferences } from '@openvidu/call-common-types';
+import { RoomPreferences } from '@openvidu/call-common-types';
 import { LoggerService } from 'openvidu-components-angular';
 import { HttpService } from '../http/http.service';
 
@@ -8,14 +8,12 @@ import { HttpService } from '../http/http.service';
 })
 // This service is used to store the global preferences of the application
 export class GlobalPreferencesService {
-	private log;
-	// private globalPreferences: GlobalPreferences
-	private roomPreferences!: RoomPreferences;
-	private appearancePreferences: any;
+	protected log;
+	protected roomPreferences: RoomPreferences | undefined;
 
 	constructor(
-		private loggerService: LoggerService,
-		private httpService: HttpService
+		protected loggerService: LoggerService,
+		protected httpService: HttpService
 	) {
 		this.log = this.loggerService.get('OVCall - GlobalPreferencesService');
 	}
@@ -42,30 +40,5 @@ export class GlobalPreferencesService {
 		this.roomPreferences = preferences;
 	}
 
-	/**
-	 * Retrieves the appearance preferences.
-	 * If the preferences are not already loaded, it fetches them from the server.
-	 *
-	 * @returns {Promise<AppearancePreferences>} A promise that resolves to the appearance preferences.
-	 */
-	async getAppearancePreferences(): Promise<AppearancePreferences> {
-		if (!this.roomPreferences) {
-			this.log.d('Appearance preferences not found, fetching from server');
-			this.appearancePreferences = await this.httpService.getAppearancePreferences();
-		}
-
-		return this.appearancePreferences;
-	}
 
-	/**
-	 * Saves the appearance preferences.
-	 *
-	 * @param {AppearancePreferences} preferences - The preferences to be saved.
-	 * @returns {Promise<void>} A promise that resolves when the preferences have been saved.
-	 */
-	async saveAppearancePreferences(preferences: AppearancePreferences): Promise<void> {
-		this.log.d('Saving appearance preferences', preferences);
-		await this.httpService.saveAppearancePreferences(preferences);
-		this.appearancePreferences = preferences;
-	}
 }