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

ov-components: Refactor VideoconferenceComponent to use private properties for external structural directives, enhancing encapsulation and template setup

master
Carlos Santos 2025-08-14 12:16:54 +02:00
parent 020413257f
commit 8d1c2468f5
1 changed files with 247 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -92,76 +92,268 @@ export class VideoconferenceComponent implements OnDestroy, AfterViewInit {
private static readonly MATERIAL_ICONS_SELECTOR = 'link[href*="Material+Symbols+Outlined"]'; private static readonly MATERIAL_ICONS_SELECTOR = 'link[href*="Material+Symbols+Outlined"]';
private static readonly SPINNER_DIAMETER = 50; private static readonly SPINNER_DIAMETER = 50;
// *** Toolbar *** // *** Toolbar ***
private _externalToolbar?: ToolbarDirective;
/** /**
* @internal * @internal
*/ */
@ContentChild(ToolbarDirective) externalToolbar: ToolbarDirective; @ContentChild(ToolbarDirective)
set externalToolbar(value: ToolbarDirective) {
this._externalToolbar = value;
this.setupTemplates();
}
get externalToolbar(): ToolbarDirective | undefined {
return this._externalToolbar;
}
private _externalToolbarAdditionalButtons?: ToolbarAdditionalButtonsDirective;
/** /**
* @internal * @internal
*/ */
@ContentChild(ToolbarAdditionalButtonsDirective) externalToolbarAdditionalButtons: ToolbarAdditionalButtonsDirective; @ContentChild(ToolbarAdditionalButtonsDirective)
set externalToolbarAdditionalButtons(value: ToolbarAdditionalButtonsDirective) {
this._externalToolbarAdditionalButtons = value;
this.setupTemplates();
}
/** /**
* @internal * @internal
*/ */
@ContentChild(ToolbarAdditionalPanelButtonsDirective) externalToolbarAdditionalPanelButtons: ToolbarAdditionalPanelButtonsDirective; get externalToolbarAdditionalButtons(): ToolbarAdditionalButtonsDirective | undefined {
return this._externalToolbarAdditionalButtons;
}
private _externalToolbarAdditionalPanelButtons?: ToolbarAdditionalPanelButtonsDirective;
/** /**
* @internal * @internal
*/ */
@ContentChild(AdditionalPanelsDirective) externalAdditionalPanels: AdditionalPanelsDirective; @ContentChild(ToolbarAdditionalPanelButtonsDirective)
set externalToolbarAdditionalPanelButtons(value: ToolbarAdditionalPanelButtonsDirective) {
this._externalToolbarAdditionalPanelButtons = value;
this.setupTemplates();
}
/**
* @internal
*/
get externalToolbarAdditionalPanelButtons(): ToolbarAdditionalPanelButtonsDirective | undefined {
return this._externalToolbarAdditionalPanelButtons;
}
private _externalAdditionalPanels?: AdditionalPanelsDirective;
/**
* @internal
*/
@ContentChild(AdditionalPanelsDirective)
set externalAdditionalPanels(value: AdditionalPanelsDirective) {
this._externalAdditionalPanels = value;
this.setupTemplates();
}
/**
* @internal
*/
get externalAdditionalPanels(): AdditionalPanelsDirective | undefined {
return this._externalAdditionalPanels;
}
// *** Panels *** // *** Panels ***
/** private _externalPanel?: PanelDirective;
* @internal
*/
@ContentChild(PanelDirective) externalPanel: PanelDirective;
/**
* @internal
*/
@ContentChild(ChatPanelDirective) externalChatPanel: ChatPanelDirective;
/**
* @internal
*/
@ContentChild(ActivitiesPanelDirective) externalActivitiesPanel: ActivitiesPanelDirective;
/** /**
* @internal * @internal
*/ */
@ContentChild(ParticipantsPanelDirective) externalParticipantsPanel: ParticipantsPanelDirective; @ContentChild(PanelDirective)
set externalPanel(value: PanelDirective) {
this._externalPanel = value;
this.setupTemplates();
}
/** /**
* @internal * @internal
*/ */
@ContentChild(ParticipantPanelItemDirective) externalParticipantPanelItem: ParticipantPanelItemDirective; get externalPanel(): PanelDirective | undefined {
return this._externalPanel;
}
private _externalChatPanel?: ChatPanelDirective;
/** /**
* @internal * @internal
*/ */
@ContentChild(ParticipantPanelItemElementsDirective) externalParticipantPanelItemElements: ParticipantPanelItemElementsDirective; @ContentChild(ChatPanelDirective)
set externalChatPanel(value: ChatPanelDirective) {
this._externalChatPanel = value;
this.setupTemplates();
}
/**
* @internal
*/
get externalChatPanel(): ChatPanelDirective | undefined {
return this._externalChatPanel;
}
private _externalActivitiesPanel?: ActivitiesPanelDirective;
/**
* @internal
*/
@ContentChild(ActivitiesPanelDirective)
set externalActivitiesPanel(value: ActivitiesPanelDirective) {
this._externalActivitiesPanel = value;
this.setupTemplates();
}
/**
* @internal
*/
get externalActivitiesPanel(): ActivitiesPanelDirective | undefined {
return this._externalActivitiesPanel;
}
private _externalParticipantsPanel?: ParticipantsPanelDirective;
/**
* @internal
*/
@ContentChild(ParticipantsPanelDirective)
set externalParticipantsPanel(value: ParticipantsPanelDirective) {
this._externalParticipantsPanel = value;
this.setupTemplates();
}
/**
* @internal
*/
get externalParticipantsPanel(): ParticipantsPanelDirective | undefined {
return this._externalParticipantsPanel;
}
private _externalParticipantPanelItem?: ParticipantPanelItemDirective;
/**
* @internal
*/
@ContentChild(ParticipantPanelItemDirective)
set externalParticipantPanelItem(value: ParticipantPanelItemDirective) {
this._externalParticipantPanelItem = value;
this.setupTemplates();
}
/**
* @internal
*/
get externalParticipantPanelItem(): ParticipantPanelItemDirective | undefined {
return this._externalParticipantPanelItem;
}
private _externalParticipantPanelItemElements?: ParticipantPanelItemElementsDirective;
/**
* @internal
*/
@ContentChild(ParticipantPanelItemElementsDirective)
set externalParticipantPanelItemElements(value: ParticipantPanelItemElementsDirective) {
this._externalParticipantPanelItemElements = value;
this.setupTemplates();
}
/**
* @internal
*/
get externalParticipantPanelItemElements(): ParticipantPanelItemElementsDirective | undefined {
return this._externalParticipantPanelItemElements;
}
// *** Layout *** // *** Layout ***
private _externalLayout?: LayoutDirective;
/** /**
* @internal * @internal
*/ */
@ContentChild(LayoutDirective) externalLayout: LayoutDirective; @ContentChild(LayoutDirective)
set externalLayout(value: LayoutDirective) {
this._externalLayout = value;
this.setupTemplates();
}
/** /**
* @internal * @internal
*/ */
@ContentChild(StreamDirective) externalStream: StreamDirective; get externalLayout(): LayoutDirective | undefined {
return this._externalLayout;
}
private _externalStream?: StreamDirective;
/**
* @internal
*/
@ContentChild(StreamDirective)
set externalStream(value: StreamDirective) {
this._externalStream = value;
this.setupTemplates();
}
/**
* @internal
*/
get externalStream(): StreamDirective | undefined {
return this._externalStream;
}
// *** PreJoin *** // *** PreJoin ***
private _externalPreJoin?: PreJoinDirective;
/** /**
* @internal * @internal
*/ */
@ContentChild(PreJoinDirective) externalPreJoin: PreJoinDirective; @ContentChild(PreJoinDirective)
set externalPreJoin(value: PreJoinDirective) {
this._externalPreJoin = value;
this.setupTemplates();
}
/**
* @internal
*/
get externalPreJoin(): PreJoinDirective | undefined {
return this._externalPreJoin;
}
private _externalParticipantPanelAfterLocalParticipant?: ParticipantPanelAfterLocalParticipantDirective;
/** /**
* @internal * @internal
*
*/ */
@ContentChild(ParticipantPanelAfterLocalParticipantDirective) @ContentChild(ParticipantPanelAfterLocalParticipantDirective)
externalParticipantPanelAfterLocalParticipant: ParticipantPanelAfterLocalParticipantDirective; set externalParticipantPanelAfterLocalParticipant(value: ParticipantPanelAfterLocalParticipantDirective) {
this._externalParticipantPanelAfterLocalParticipant = value;
this.setupTemplates();
}
/** /**
* @internal * @internal
*/ */
@ContentChild(LayoutAdditionalElementsDirective) externalLayoutAdditionalElements: LayoutAdditionalElementsDirective; get externalParticipantPanelAfterLocalParticipant(): ParticipantPanelAfterLocalParticipantDirective | undefined {
return this._externalParticipantPanelAfterLocalParticipant;
}
private _externalLayoutAdditionalElements?: LayoutAdditionalElementsDirective;
/**
* @internal
*/
@ContentChild(LayoutAdditionalElementsDirective)
set externalLayoutAdditionalElements(value: LayoutAdditionalElementsDirective) {
this._externalLayoutAdditionalElements = value;
this.setupTemplates();
}
/**
* @internal
*/
get externalLayoutAdditionalElements(): LayoutAdditionalElementsDirective | undefined {
return this._externalLayoutAdditionalElements;
}
/** /**
* @internal * @internal
@ -589,37 +781,51 @@ export class VideoconferenceComponent implements OnDestroy, AfterViewInit {
* Applies the template configuration to component properties * Applies the template configuration to component properties
*/ */
private applyTemplateConfiguration(): void { private applyTemplateConfiguration(): void {
this.openviduAngularToolbarTemplate = this.templateConfig.toolbarTemplate; const assignIfChanged = <K extends keyof this>(prop: K, value: this[K]) => {
this.openviduAngularPanelTemplate = this.templateConfig.panelTemplate; if (this[prop] !== value) {
this.openviduAngularChatPanelTemplate = this.templateConfig.chatPanelTemplate; this[prop] = value;
this.openviduAngularParticipantsPanelTemplate = this.templateConfig.participantsPanelTemplate; }
this.openviduAngularActivitiesPanelTemplate = this.templateConfig.activitiesPanelTemplate; };
this.openviduAngularParticipantPanelItemTemplate = this.templateConfig.participantPanelItemTemplate;
this.openviduAngularLayoutTemplate = this.templateConfig.layoutTemplate; assignIfChanged('openviduAngularToolbarTemplate', this.templateConfig.toolbarTemplate);
this.openviduAngularStreamTemplate = this.templateConfig.streamTemplate; assignIfChanged('openviduAngularPanelTemplate', this.templateConfig.panelTemplate);
assignIfChanged('openviduAngularChatPanelTemplate', this.templateConfig.chatPanelTemplate);
assignIfChanged('openviduAngularParticipantsPanelTemplate', this.templateConfig.participantsPanelTemplate);
assignIfChanged('openviduAngularActivitiesPanelTemplate', this.templateConfig.activitiesPanelTemplate);
assignIfChanged('openviduAngularParticipantPanelItemTemplate', this.templateConfig.participantPanelItemTemplate);
assignIfChanged('openviduAngularLayoutTemplate', this.templateConfig.layoutTemplate);
assignIfChanged('openviduAngularStreamTemplate', this.templateConfig.streamTemplate);
// Optional templates // Optional templates
if (this.templateConfig.toolbarAdditionalButtonsTemplate) { if (this.templateConfig.toolbarAdditionalButtonsTemplate) {
this.openviduAngularToolbarAdditionalButtonsTemplate = this.templateConfig.toolbarAdditionalButtonsTemplate; assignIfChanged('openviduAngularToolbarAdditionalButtonsTemplate', this.templateConfig.toolbarAdditionalButtonsTemplate);
} }
if (this.templateConfig.toolbarAdditionalPanelButtonsTemplate) { if (this.templateConfig.toolbarAdditionalPanelButtonsTemplate) {
this.openviduAngularToolbarAdditionalPanelButtonsTemplate = this.templateConfig.toolbarAdditionalPanelButtonsTemplate; assignIfChanged(
'openviduAngularToolbarAdditionalPanelButtonsTemplate',
this.templateConfig.toolbarAdditionalPanelButtonsTemplate
);
} }
if (this.templateConfig.additionalPanelsTemplate) { if (this.templateConfig.additionalPanelsTemplate) {
this.openviduAngularAdditionalPanelsTemplate = this.templateConfig.additionalPanelsTemplate; assignIfChanged('openviduAngularAdditionalPanelsTemplate', this.templateConfig.additionalPanelsTemplate);
} }
if (this.templateConfig.participantPanelAfterLocalParticipantTemplate) { if (this.templateConfig.participantPanelAfterLocalParticipantTemplate) {
this.openviduAngularParticipantPanelAfterLocalParticipantTemplate = assignIfChanged(
this.templateConfig.participantPanelAfterLocalParticipantTemplate; 'openviduAngularParticipantPanelAfterLocalParticipantTemplate',
this.templateConfig.participantPanelAfterLocalParticipantTemplate
);
} }
if (this.templateConfig.participantPanelItemElementsTemplate) { if (this.templateConfig.participantPanelItemElementsTemplate) {
this.openviduAngularParticipantPanelItemElementsTemplate = this.templateConfig.participantPanelItemElementsTemplate; assignIfChanged(
'openviduAngularParticipantPanelItemElementsTemplate',
this.templateConfig.participantPanelItemElementsTemplate
);
} }
if (this.templateConfig.preJoinTemplate) { if (this.templateConfig.preJoinTemplate) {
this.openviduAngularPreJoinTemplate = this.templateConfig.preJoinTemplate; assignIfChanged('openviduAngularPreJoinTemplate', this.templateConfig.preJoinTemplate);
} }
if (this.templateConfig.layoutAdditionalElementsTemplate) { if (this.templateConfig.layoutAdditionalElementsTemplate) {
this.ovLayoutAdditionalElementsTemplate = this.templateConfig.layoutAdditionalElementsTemplate; assignIfChanged('ovLayoutAdditionalElementsTemplate', this.templateConfig.layoutAdditionalElementsTemplate);
} }
} }