ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ov-components: fixed panel toggle logic for external panels. Fixes #854 

refactor togglePanel method for improved state management and clarity
master
Carlos Santos 2025-05-22 12:35:52 +02:00
parent ffbc1f5e5d
commit daf1349e75
1 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
openvidu-components-angular/projects/openvidu-components-angular/src/lib/services/panel/panel.service.ts
View File

@ -38,23 +38,38 @@ export class PanelService {
* If the type is differente, it will switch to the properly panel. * If the type is differente, it will switch to the properly panel.
*/ */
togglePanel(panelType: PanelType | string, subOptionType?: PanelSettingsOptions | string) { togglePanel(panelType: PanelType | string, subOptionType?: PanelSettingsOptions | string) {
let nextOpenedValue: boolean = false; const previousState = this._panelOpened.getValue();
const previousPanelType = this._panelOpened.getValue().panelType; const isDefaultPanel = this.panelTypes.includes(panelType);
const previousOpened = this._panelOpened.getValue().isOpened;
if (this.panelTypes.includes(panelType)) { this.log.d(`Toggling ${isDefaultPanel ? panelType : 'external'} menu`);
this.log.d(`Toggling ${panelType} menu`);
nextOpenedValue = previousPanelType !== panelType ? true : !previousOpened; // Set the next panel state
let nextOpenedValue: boolean;
if (panelType === previousState.panelType) {
// Same panel clicked, toggle it
nextOpenedValue = !previousState.isOpened;
} else { } else {
// Panel is external // Different panel clicked, always open it
this.log.d('Toggling external panel'); nextOpenedValue = true;
// Opening when external panel is closed or is opened with another type
this.isExternalOpened = !this.isExternalOpened || this.externalType !== panelType;
this.externalType = !this.isExternalOpened ? '' : panelType;
nextOpenedValue = this.isExternalOpened;
} }
this._panelOpened.next({ isOpened: nextOpenedValue, panelType, subOptionType, previousPanelType }); // Update external panel tracking
if (isDefaultPanel) {
this.isExternalOpened = false;
this.externalType = '';
} else {
this.isExternalOpened = nextOpenedValue;
this.externalType = nextOpenedValue ? panelType : '';
}
// Update the panel state
this._panelOpened.next({
isOpened: nextOpenedValue,
panelType,
subOptionType,
previousPanelType: previousState.panelType
});
} }
/** /**