ov-components: Refactors config service to use RxJS Subjects

Updates the configuration service to use RxJS BehaviorSubjects and Observables for managing configuration values.

This change improves the reactivity and maintainability of the configuration system by providing a consistent and type-safe way to manage application settings.

Specifically, it introduces a helper method to create configuration items with BehaviorSubject and Observable, and uses distinctUntilChanged and shareReplay operators to optimize the observable streams.

ov-components: Refactor configuration management in OpenVidu components

- Updated directive methods to use centralized configuration updates for general, stream, and toolbar settings.
- Replaced individual setter methods with batch update methods for improved performance and maintainability.
- Introduced specific comparison methods for configuration objects to optimize change detection.
- Enhanced the structure of configuration interfaces for better clarity and organization.
- Removed redundant code and streamlined the configuration service for better readability.

ov-components: Enhance participant name handling in PreJoin and Videoconference components

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts

@@ -133,9 +133,21 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 		this.shouldRemoveTracksWhenComponentIsDestroyed = false;
 
 		// Assign participant name to the observable if it is defined
-		if(this.participantName) this.libService.setParticipantName(this.participantName);
+		if (this.participantName) {
+			this.libService.updateGeneralConfig({ participantName: this.participantName });
 
-		this.onReadyToJoin.emit();
+			// Wait for the next tick to ensure the participant name propagates
+			// through the observable before emitting onReadyToJoin
+			const sub = this.libService.participantName$.pipe(takeUntil(this.destroy$)).subscribe((name) => {
+				if (name === this.participantName) {
+					this.onReadyToJoin.emit();
+					sub.unsubscribe();
+				}
+			});
+		} else {
+			// No participant name to set, emit immediately
+			this.onReadyToJoin.emit();
+		}
 	}
 
 	onParticipantNameChanged(name: string) {
@@ -147,49 +159,37 @@ export class PreJoinComponent implements OnInit, OnDestroy {
 	}
 
 	private subscribeToPrejoinDirectives() {
-		this.libService.minimal$
-			.pipe(takeUntil(this.destroy$))
-			.subscribe((value: boolean) => {
-				this.isMinimal = value;
-				this.changeDetector.markForCheck();
-			});
+		this.libService.minimal$.pipe(takeUntil(this.destroy$)).subscribe((value: boolean) => {
+			this.isMinimal = value;
+			this.changeDetector.markForCheck();
+		});
 
-		this.libService.cameraButton$
-			.pipe(takeUntil(this.destroy$))
-			.subscribe((value: boolean) => {
-				this.showCameraButton = value;
-				this.changeDetector.markForCheck();
-			});
+		this.libService.cameraButton$.pipe(takeUntil(this.destroy$)).subscribe((value: boolean) => {
+			this.showCameraButton = value;
+			this.changeDetector.markForCheck();
+		});
 
-		this.libService.microphoneButton$
-			.pipe(takeUntil(this.destroy$))
-			.subscribe((value: boolean) => {
-				this.showMicrophoneButton = value;
-				this.changeDetector.markForCheck();
-			});
+		this.libService.microphoneButton$.pipe(takeUntil(this.destroy$)).subscribe((value: boolean) => {
+			this.showMicrophoneButton = value;
+			this.changeDetector.markForCheck();
+		});
 
-		this.libService.displayLogo$
-			.pipe(takeUntil(this.destroy$))
-			.subscribe((value: boolean) => {
-				this.showLogo = value;
-				this.changeDetector.markForCheck();
-			});
+		this.libService.displayLogo$.pipe(takeUntil(this.destroy$)).subscribe((value: boolean) => {
+			this.showLogo = value;
+			this.changeDetector.markForCheck();
+		});
 
-		this.libService.participantName$
-			.pipe(takeUntil(this.destroy$))
-			.subscribe((value: string) => {
-				if (value) {
-					this.participantName = value;
-					this.changeDetector.markForCheck();
-				}
-			});
-
-		this.libService.prejoinDisplayParticipantName$
-			.pipe(takeUntil(this.destroy$))
-			.subscribe((value: boolean) => {
-				this.showParticipantName = value;
+		this.libService.participantName$.pipe(takeUntil(this.destroy$)).subscribe((value: string) => {
+			if (value) {
+				this.participantName = value;
 				this.changeDetector.markForCheck();
-			});
+			}
+		});
+
+		this.libService.prejoinDisplayParticipantName$.pipe(takeUntil(this.destroy$)).subscribe((value: boolean) => {
+			this.showParticipantName = value;
+			this.changeDetector.markForCheck();
+		});
 	}
 
 	async videoEnabledChanged(enabled: boolean) {

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts

@@ -235,13 +235,13 @@ export class SessionComponent implements OnInit, OnDestroy {
 		this.subscribeToReconnection();
 		this.subscribeToVirtualBackground();
 
-		if (this.libService.isRecordingEnabled()) {
+		// if (this.libService.isRecordingEnabled()) {
 			// this.subscribeToRecordingEvents();
-		}
+		// }
 
-		if (this.libService.isBroadcastingEnabled()) {
+		// if (this.libService.isBroadcastingEnabled()) {
 			// this.subscribeToBroadcastingEvents();
-		}
+		// }
 		try {
 			await this.participantService.connect();
 			// Send room created after participant connect for avoiding to send incomplete room payload

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.ts

@@ -591,7 +591,9 @@ export class VideoconferenceComponent implements OnDestroy, AfterViewInit {
 			// Always initialize the room when ready to join
 			this.openviduService.initRoom();
 
-			const participantName = this.latestParticipantName;
+			// Get the most current participant name from the service
+			// This ensures we have the latest value after any batch updates
+			const participantName = this.libService.getCurrentParticipantName() || this.latestParticipantName;
 
 			if (this.componentState.isRoomReady) {
 				// Room is ready, hide prejoin and proceed
@@ -607,6 +609,16 @@ export class VideoconferenceComponent implements OnDestroy, AfterViewInit {
 					this.onTokenRequested.emit(participantName);
 				} else {
 					this.log.w('No participant name available when requesting token');
+					// Wait a bit and try again in case name is still propagating
+					setTimeout(() => {
+						const retryName = this.libService.getCurrentParticipantName()|| this.latestParticipantName;
+						if (retryName) {
+							this.log.d(`Retrying token request for participant: ${retryName}`);
+							this.onTokenRequested.emit(retryName);
+						} else {
+							this.log.e('Still no participant name available after retry');
+						}
+					}, 10);
 				}
 			}
 
@@ -734,7 +746,7 @@ export class VideoconferenceComponent implements OnDestroy, AfterViewInit {
 							const storedName = this.storageSrv.getParticipantName();
 							if (storedName) {
 								this.latestParticipantName = storedName;
-								this.libService.setParticipantName(storedName);
+								this.libService.updateGeneralConfig({ participantName: storedName });
 							}
 							this._onReadyToJoin();
 						}
@@ -747,7 +759,18 @@ export class VideoconferenceComponent implements OnDestroy, AfterViewInit {
 			if (name) {
 				this.latestParticipantName = name;
 				this.storageSrv.setParticipantName(name);
+
+				// If we're waiting for a participant name to proceed with joining, do it now
+				if (this.componentState.state === VideoconferenceState.JOINING &&
+					this.componentState.isRoomReady &&
+					!this.componentState.showPrejoin) {
+					this.log.d('Participant name received, proceeding to join');
+					this.updateComponentState({
+						state: VideoconferenceState.READY_TO_CONNECT,
+						showPrejoin: false
+					});
+				}
 			}
 		});
 	}
-}
+}

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/activities-panel.directive.ts

@@ -49,9 +49,7 @@ export class ActivitiesPanelRecordingActivityDirective implements AfterViewInit,
 	}
 
 	update(value: boolean) {
-		if (this.libService.showRecordingActivity() !== value) {
-			this.libService.setRecordingActivity(value);
-		}
+		this.libService.updateRecordingActivityConfig({ enabled: value });
 	}
 }
 
@@ -103,8 +101,6 @@ export class ActivitiesPanelBroadcastingActivityDirective implements AfterViewIn
 	}
 
 	update(value: boolean) {
-		if (this.libService.showBroadcastingActivity() !== value) {
-			this.libService.setBroadcastingActivity(value);
-		}
+		this.libService.setBroadcastingActivity(value);
 	}
 }

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/admin.directive.ts

@@ -16,15 +16,17 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
 	standalone: false
 })
 export class AdminDashboardRecordingsListDirective implements AfterViewInit, OnDestroy {
-
 	@Input() set recordingsList(value: RecordingInfo[]) {
 		this.recordingsValue = value;
 		this.update(this.recordingsValue);
 	}
 
-	recordingsValue: RecordingInfo [] = [];
+	recordingsValue: RecordingInfo[] = [];
 
-	constructor(public elementRef: ElementRef, private libService: OpenViduComponentsConfigService) {}
+	constructor(
+		public elementRef: ElementRef,
+		private libService: OpenViduComponentsConfigService
+	) {}
 
 	ngAfterViewInit() {
 		this.update(this.recordingsValue);
@@ -38,9 +40,7 @@ export class AdminDashboardRecordingsListDirective implements AfterViewInit, OnD
 	}
 
 	update(value: RecordingInfo[]) {
-		if (this.libService.getAdminRecordingsList() !== value) {
-			this.libService.setAdminRecordingsList(value);
-		}
+		this.libService.updateAdminConfig({ recordingsList: value });
 	}
 }
 
@@ -58,7 +58,6 @@ export class AdminDashboardRecordingsListDirective implements AfterViewInit, OnD
 	standalone: false
 })
 export class AdminDashboardTitleDirective implements AfterViewInit, OnDestroy {
-
 	@Input() set navbarTitle(value: string) {
 		this.navbarTitleValue = value;
 		this.update(this.navbarTitleValue);
@@ -66,7 +65,10 @@ export class AdminDashboardTitleDirective implements AfterViewInit, OnDestroy {
 
 	navbarTitleValue: string = 'OpenVidu Dashboard';
 
-	constructor(public elementRef: ElementRef, private libService: OpenViduComponentsConfigService) {}
+	constructor(
+		public elementRef: ElementRef,
+		private libService: OpenViduComponentsConfigService
+	) {}
 
 	ngAfterViewInit() {
 		this.update(this.navbarTitleValue);
@@ -80,13 +82,10 @@ export class AdminDashboardTitleDirective implements AfterViewInit, OnDestroy {
 	}
 
 	update(value: any) {
-		if (this.libService.getAdminDashboardTitle() !== value) {
-			this.libService.setAdminDashboardTitle(value);
-		}
+		this.libService.updateAdminConfig({ dashboardTitle: value });
 	}
 }
 
-
 /**
  * The **navbarTitle** directive allows customize the title of the navbar in {@link AdminLoginComponent}.
  *
@@ -101,7 +100,6 @@ export class AdminDashboardTitleDirective implements AfterViewInit, OnDestroy {
 	standalone: false
 })
 export class AdminLoginTitleDirective implements AfterViewInit, OnDestroy {
-
 	@Input() set navbarTitle(value: any) {
 		this.navbarTitleValue = value;
 		this.update(this.navbarTitleValue);
@@ -109,7 +107,10 @@ export class AdminLoginTitleDirective implements AfterViewInit, OnDestroy {
 
 	navbarTitleValue: any = null;
 
-	constructor(public elementRef: ElementRef, private libService: OpenViduComponentsConfigService) {}
+	constructor(
+		public elementRef: ElementRef,
+		private libService: OpenViduComponentsConfigService
+	) {}
 
 	ngAfterViewInit() {
 		this.update(this.navbarTitleValue);
@@ -123,14 +124,10 @@ export class AdminLoginTitleDirective implements AfterViewInit, OnDestroy {
 	}
 
 	update(value: any) {
-		if (this.libService.getAdminLoginTitle() !== value) {
-			this.libService.setAdminLoginTitle(value);
-		}
+		this.libService.updateAdminConfig({ loginTitle: value });
 	}
 }
 
-
-
 /**
  * The **error** directive allows show the authentication error in {@link AdminLoginComponent}.
  *
@@ -140,12 +137,11 @@ export class AdminLoginTitleDirective implements AfterViewInit, OnDestroy {
  * <ov-admin-login [error]="error"></ov-admin-login>
  *
  */
- @Directive({
+@Directive({
 	selector: 'ov-admin-login[error]',
 	standalone: false
 })
 export class AdminLoginErrorDirective implements AfterViewInit, OnDestroy {
-
 	@Input() set error(value: any) {
 		this.errorValue = value;
 		this.update(this.errorValue);
@@ -153,7 +149,10 @@ export class AdminLoginErrorDirective implements AfterViewInit, OnDestroy {
 
 	errorValue: any = null;
 
-	constructor(public elementRef: ElementRef, private libService: OpenViduComponentsConfigService) {}
+	constructor(
+		public elementRef: ElementRef,
+		private libService: OpenViduComponentsConfigService
+	) {}
 
 	ngAfterViewInit() {
 		this.update(this.errorValue);
@@ -167,9 +166,6 @@ export class AdminLoginErrorDirective implements AfterViewInit, OnDestroy {
 	}
 
 	update(value: any) {
-		if (this.libService.getAdminLoginError() !== value) {
-			this.libService.setAdminLoginError(value);
-		}
+		this.libService.updateAdminConfig({ loginError: value });
 	}
 }
-

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts

@@ -122,7 +122,7 @@ export class ToolbarBrandingLogoDirective implements AfterViewInit, OnDestroy {
 	}
 
 	private update(value: string) {
-		this.libService.setBrandingLogo(value);
+		this.libService.updateToolbarConfig({ brandingLogo: value });
 	}
 }
 
@@ -158,7 +158,7 @@ export class PrejoinDisplayParticipantName implements OnDestroy {
 	}
 
 	private update(value: boolean) {
-		this.libService.setPrejoinDisplayParticipantName(value);
+		this.libService.updateGeneralConfig({ prejoinDisplayParticipantName: value });
 	}
 }
 
@@ -213,7 +213,7 @@ export class RecordingActivityReadOnlyDirective implements OnDestroy {
 	 * @ignore
 	 */
 	update(value: boolean) {
-		this.libService.setRecordingActivityReadOnly(value);
+		this.libService.updateRecordingActivityConfig({ readOnly: value });
 	}
 }
 
@@ -239,7 +239,7 @@ export class RecordingActivityShowControlsDirective implements OnDestroy {
 	/**
 	 * @ignore
 	 */
-	@Input() set recordingActivityShowControls(value: { play?: boolean; download?: boolean; delete?: boolean; externalView?: boolean }) {
+	@Input() set recordingActivityShowControls(value: { play: boolean; download: boolean; delete: boolean; externalView: boolean }) {
 		this.update(value);
 	}
 
@@ -268,8 +268,8 @@ export class RecordingActivityShowControlsDirective implements OnDestroy {
 	/**
 	 * @ignore
 	 */
-	update(value: { play?: boolean; download?: boolean; delete?: boolean; externalView?: boolean }) {
-		this.libService.setRecordingActivityShowControls(value);
+	update(value: { play: boolean; download: boolean; delete: boolean; externalView: boolean }) {
+		this.libService.updateRecordingActivityConfig({ showControls: value });
 	}
 }
 
@@ -334,9 +334,7 @@ export class ToolbarViewRecordingsButtonDirective implements AfterViewInit, OnDe
 	}
 
 	private update(value: boolean) {
-		if (this.libService.getToolbarViewRecordingsButton() !== value) {
-			this.libService.setToolbarViewRecordingsButton(value);
-		}
+		this.libService.updateToolbarConfig({ viewRecordings: value });
 	}
 }
 
@@ -381,7 +379,7 @@ export class StartStopRecordingButtonsDirective implements OnDestroy {
 	}
 
 	private update(value: boolean) {
-		this.libService.setRecordingActivityStartStopRecordingButton(value);
+		this.libService.updateRecordingActivityConfig({ startStopButton: value });
 	}
 }
 
@@ -427,7 +425,7 @@ export class RecordingActivityViewRecordingsButtonDirective implements AfterView
 	}
 
 	private update(value: boolean) {
-		this.libService.setRecordingActivityViewRecordingsButton(value);
+		this.libService.updateRecordingActivityConfig({ viewRecordingsButton: value });
 	}
 }
 
@@ -473,6 +471,6 @@ export class RecordingActivityShowRecordingsListDirective implements AfterViewIn
 	}
 
 	private update(value: boolean) {
-		this.libService.setRecordingActivityShowRecordingsList(value);
+		this.libService.updateRecordingActivityConfig({ showRecordingsList: value });
 	}
-}
+}

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/participant-panel-item.directive.ts

@@ -32,7 +32,10 @@ export class ParticipantPanelItemMuteButtonDirective implements AfterViewInit, O
 
 	muteValue: boolean = true;
 
-	constructor(public elementRef: ElementRef, private libService: OpenViduComponentsConfigService) {}
+	constructor(
+		public elementRef: ElementRef,
+		private libService: OpenViduComponentsConfigService
+	) {}
 
 	ngAfterViewInit() {
 		this.update(this.muteValue);
@@ -46,8 +49,6 @@ export class ParticipantPanelItemMuteButtonDirective implements AfterViewInit, O
 	}
 
 	update(value: boolean) {
-		if (this.libService.showParticipantItemMuteButton() !== value) {
-			this.libService.setParticipantItemMuteButton(value);
-		}
+		this.libService.updateStreamConfig({ participantItemMuteButton: value });
 	}
-}
+}

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/stream.directive.ts

@@ -46,9 +46,7 @@ export class StreamDisplayParticipantNameDirective implements AfterViewInit, OnD
 	}
 
 	update(value: boolean) {
-		if (this.libService.isParticipantNameDisplayed() !== value) {
-			this.libService.setDisplayParticipantName(value);
-		}
+		this.libService.updateStreamConfig({ displayParticipantName: value });
 	}
 
 	clear() {
@@ -100,9 +98,7 @@ export class StreamDisplayAudioDetectionDirective implements AfterViewInit, OnDe
 	}
 
 	update(value: boolean) {
-		if (this.libService.isAudioDetectionDisplayed() !== value) {
-			this.libService.setDisplayAudioDetection(value);
-		}
+		this.libService.updateStreamConfig({ displayAudioDetection: value });
 	}
 	clear() {
 		this.update(true);
@@ -154,9 +150,7 @@ export class StreamVideoControlsDirective implements AfterViewInit, OnDestroy {
 	}
 
 	update(value: boolean) {
-		if (this.libService.showStreamVideoControls() !== value) {
-			this.libService.setStreamVideoControls(value);
-		}
+		this.libService.updateStreamConfig({ videoControls: value });
 	}
 
 	clear() {

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/toolbar.directive.ts

@@ -62,9 +62,7 @@ export class ToolbarCameraButtonDirective implements AfterViewInit, OnDestroy {
 	}
 
 	private update(value: boolean) {
-		if (this.libService.showCameraButton() !== value) {
-			this.libService.setCameraButton(value);
-		}
+		this.libService.updateToolbarConfig({ camera: value });
 	}
 }
 
@@ -128,9 +126,7 @@ export class ToolbarMicrophoneButtonDirective implements AfterViewInit, OnDestro
 	}
 
 	private update(value: boolean) {
-		if (this.libService.showMicrophoneButton() !== value) {
-			this.libService.setMicrophoneButton(value);
-		}
+		this.libService.updateToolbarConfig({ microphone: value });
 	}
 }
 
@@ -194,9 +190,7 @@ export class ToolbarScreenshareButtonDirective implements AfterViewInit, OnDestr
 	}
 
 	private update(value: boolean) {
-		if (this.libService.showScreenshareButton() !== value) {
-			this.libService.setScreenshareButton(value);
-		}
+		this.libService.updateToolbarConfig({ screenshare: value });
 	}
 }
 
@@ -257,9 +251,7 @@ export class ToolbarRecordingButtonDirective implements AfterViewInit, OnDestroy
 	}
 
 	private update(value: boolean) {
-		if (this.libService.showRecordingButton() !== value) {
-			this.libService.setRecordingButton(value);
-		}
+		this.libService.updateToolbarConfig({ recording: value });
 	}
 }
 
@@ -321,9 +313,7 @@ export class ToolbarBroadcastingButtonDirective implements AfterViewInit, OnDest
 	}
 
 	private update(value: boolean) {
-		if (this.libService.showBroadcastingButton() !== value) {
-			this.libService.setBroadcastingButton(value);
-		}
+		this.libService.setBroadcastingButton(value);
 	}
 }
 
@@ -384,9 +374,7 @@ export class ToolbarFullscreenButtonDirective implements AfterViewInit, OnDestro
 	}
 
 	private update(value: boolean) {
-		if (this.libService.showFullscreenButton() !== value) {
-			this.libService.setFullscreenButton(value);
-		}
+		this.libService.updateToolbarConfig({ fullscreen: value });
 	}
 }
 
@@ -447,9 +435,7 @@ export class ToolbarBackgroundEffectsButtonDirective implements AfterViewInit, O
 	}
 
 	private update(value: boolean) {
-		if (this.libService.showBackgroundEffectsButton() !== value) {
-			this.libService.setBackgroundEffectsButton(value);
-		}
+		this.libService.updateToolbarConfig({ backgroundEffects: value });
 	}
 }
 
@@ -569,9 +555,7 @@ export class ToolbarSettingsButtonDirective implements AfterViewInit, OnDestroy
 	}
 
 	private update(value: boolean) {
-		if (this.libService.showToolbarSettingsButton() !== value) {
-			this.libService.setToolbarSettingsButton(value);
-		}
+		this.libService.updateToolbarConfig({ settings: value });
 	}
 }
 
@@ -633,9 +617,7 @@ export class ToolbarLeaveButtonDirective implements AfterViewInit, OnDestroy {
 	}
 
 	private update(value: boolean) {
-		if (this.libService.showLeaveButton() !== value) {
-			this.libService.setLeaveButton(value);
-		}
+		this.libService.updateToolbarConfig({ leave: value });
 	}
 }
 
@@ -698,9 +680,7 @@ export class ToolbarParticipantsPanelButtonDirective implements AfterViewInit, O
 	}
 
 	private update(value: boolean) {
-		if (this.libService.showParticipantsPanelButton() !== value) {
-			this.libService.setParticipantsPanelButton(value);
-		}
+		this.libService.updateToolbarConfig({ participantsPanel: value });
 	}
 }
 
@@ -761,9 +741,7 @@ export class ToolbarChatPanelButtonDirective implements AfterViewInit, OnDestroy
 	}
 
 	private update(value: boolean) {
-		if (this.libService.showChatPanelButton() !== value) {
-			this.libService.setChatPanelButton(value);
-		}
+		this.libService.updateToolbarConfig({ chatPanel: value });
 	}
 }
 
@@ -824,9 +802,7 @@ export class ToolbarActivitiesPanelButtonDirective implements AfterViewInit, OnD
 	}
 
 	private update(value: boolean) {
-		if (this.libService.showActivitiesPanelButton() !== value) {
-			this.libService.setActivitiesPanelButton(value);
-		}
+		this.libService.updateToolbarConfig({ activitiesPanel: value });
 	}
 }
 
@@ -888,9 +864,7 @@ export class ToolbarDisplayRoomNameDirective implements AfterViewInit, OnDestroy
 	}
 
 	private update(value: boolean) {
-		if (this.libService.showRoomName() !== value) {
-			this.libService.setDisplayRoomName(value);
-		}
+		this.libService.updateToolbarConfig({ displayRoomName: value });
 	}
 }
 
@@ -952,9 +926,7 @@ export class ToolbarDisplayLogoDirective implements AfterViewInit, OnDestroy {
 	}
 
 	private update(value: boolean) {
-		if (this.libService.showLogo() !== value) {
-			this.libService.setDisplayLogo(value);
-		}
+		this.libService.updateToolbarConfig({ displayLogo: value });
 	}
 }
 
@@ -1009,8 +981,6 @@ export class ToolbarAdditionalButtonsPossitionDirective implements AfterViewInit
 	}
 
 	private update(value: ToolbarAdditionalButtonsPosition) {
-		if (this.libService.getToolbarAdditionalButtonsPosition() !== value) {
-			this.libService.setToolbarAdditionalButtonsPosition(value);
-		}
+		this.libService.updateToolbarConfig({ additionalButtonsPosition: value });
 	}
 }

openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/videoconference.directive.ts

@@ -55,7 +55,7 @@ export class LivekitUrlDirective implements OnDestroy {
 	 * @ignore
 	 */
 	update(value: string) {
-		this.libService.setLivekitUrl(value);
+		this.libService.updateGeneralConfig({ livekitUrl: value });
 	}
 }
 
@@ -108,7 +108,7 @@ export class TokenDirective implements OnDestroy {
 	 * @ignore
 	 */
 	update(value: string) {
-		this.libService.setToken(value);
+		this.libService.updateGeneralConfig({ token: value });
 	}
 }
 
@@ -160,7 +160,7 @@ export class TokenErrorDirective implements OnDestroy {
 	 * @ignore
 	 */
 	update(value: any) {
-		this.libService.setTokenError(value);
+		this.libService.updateGeneralConfig({ tokenError: value });
 	}
 }
 
@@ -212,9 +212,7 @@ export class MinimalDirective implements OnDestroy {
 	 * @ignore
 	 */
 	update(value: boolean) {
-		if (this.libService.isMinimal() !== value) {
-			this.libService.setMinimal(value);
-		}
+		this.libService.updateGeneralConfig({ minimal: value });
 	}
 }
 
@@ -538,7 +536,7 @@ export class ParticipantNameDirective implements AfterViewInit, OnDestroy {
 	 * @ignore
 	 */
 	update(value: string) {
-		if (value) this.libService.setParticipantName(value);
+		if (value) this.libService.updateGeneralConfig({ participantName: value });
 	}
 }
 
@@ -590,9 +588,7 @@ export class PrejoinDirective implements OnDestroy {
 	 * @ignore
 	 */
 	update(value: boolean) {
-		if (this.libService.showPrejoin() !== value) {
-			this.libService.setPrejoin(value);
-		}
+		this.libService.updateGeneralConfig({ prejoin: value });
 	}
 }
 
@@ -663,7 +659,7 @@ export class VideoEnabledDirective implements OnDestroy {
 
 		// Ensure libService state is consistent with the final enabled state
 		if (this.libService.isVideoEnabled() !== finalEnabledState) {
-			this.libService.setVideoEnabled(finalEnabledState);
+			this.libService.updateStreamConfig({ videoEnabled: finalEnabledState });
 		}
 	}
 }
@@ -731,7 +727,7 @@ export class AudioEnabledDirective implements OnDestroy {
 		this.storageService.setMicrophoneEnabled(finalEnabledState);
 
 		if (this.libService.isAudioEnabled() !== enabled) {
-			this.libService.setAudioEnabled(enabled);
+			this.libService.updateStreamConfig({ audioEnabled: enabled });
 		}
 	}
 }
@@ -785,7 +781,7 @@ export class ShowDisconnectionDialogDirective implements OnDestroy {
 	 */
 	update(value: boolean) {
 		if (this.libService.getShowDisconnectionDialog() !== value) {
-			this.libService.setShowDisconnectionDialog(value);
+			this.libService.updateGeneralConfig({ showDisconnectionDialog: value });
 		}
 	}
 }
@@ -857,6 +853,6 @@ export class RecordingStreamBaseUrlDirective implements AfterViewInit, OnDestroy
 	 * @ignore
 	 */
 	update(value: string) {
-		if (value) this.libService.setRecordingStreamBaseUrl(value);
+		if (value) this.libService.updateGeneralConfig({ recordingStreamBaseUrl: value });
 	}
 }