From c8cfb6598ec96809b1e0f63e98015003323a3d15 Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Mon, 24 Nov 2025 17:52:22 +0100 Subject: [PATCH] frontend: add meeting settings panel and more options buttons for layout configuration --- .../src/lib/customization/components/index.ts | 2 + .../meeting-layout.component.spec.ts | 10 +- .../meeting-layout.component.ts | 4 +- .../meeting-settings-panel.component.html | 57 +++++++ .../meeting-settings-panel.component.scss | 154 ++++++++++++++++++ .../meeting-settings-panel.component.spec.ts | 23 +++ .../meeting-settings-panel.component.ts | 79 +++++++++ ...oolbar-more-options-buttons.component.html | 10 ++ ...oolbar-more-options-buttons.component.scss | 0 ...bar-more-options-buttons.component.spec.ts | 23 +++ ...-toolbar-more-options-buttons.component.ts | 53 ++++++ .../src/lib/models/layout.model.ts | 6 +- .../lib/pages/meeting/meeting.component.html | 9 + .../src/lib/services/layout.service.ts | 6 +- .../app-ce-meeting.component.html | 3 + .../app-ce-meeting.component.ts | 8 +- 16 files changed, 432 insertions(+), 15 deletions(-) create mode 100644 meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.html create mode 100644 meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.scss create mode 100644 meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.spec.ts create mode 100644 meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.ts create mode 100644 meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.html create mode 100644 meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.scss create mode 100644 meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.spec.ts create mode 100644 meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.ts diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/index.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/index.ts index ac592add..be3bb0bd 100644 --- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/index.ts +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/index.ts @@ -2,3 +2,5 @@ export * from './meeting-toolbar-buttons/meeting-toolbar-buttons.component'; export * from './meeting-share-link-panel/meeting-share-link-panel.component'; export * from './meeting-participant-panel-item/meeting-participant-panel-item.component'; export * from './meeting-layout/meeting-layout.component'; +export * from './meeting-settings-panel/meeting-settings-panel.component'; +export * from './meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component'; diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.spec.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.spec.ts index 115b32f3..5b489c0c 100644 --- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.spec.ts +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.spec.ts @@ -92,7 +92,7 @@ describe('MeetingLayoutComponent', () => { describe('Default Layout Mode', () => { beforeEach(() => { fixture.detectChanges(); - layoutModeSubject.next(MeetLayoutMode.DEFAULT); + layoutModeSubject.next(MeetLayoutMode.MOSAIC); }); it('should show all remote participants in DEFAULT mode', () => { @@ -121,7 +121,7 @@ describe('MeetingLayoutComponent', () => { describe('Last Speakers Layout Mode', () => { beforeEach(() => { fixture.detectChanges(); - layoutModeSubject.next(MeetLayoutMode.LAST_SPEAKERS); + layoutModeSubject.next(MeetLayoutMode.SMART_MOSAIC); fixture.detectChanges(); }); @@ -238,7 +238,7 @@ describe('MeetingLayoutComponent', () => { describe('Participant Cleanup', () => { it('should remove disconnected participants from active speakers', () => { fixture.detectChanges(); - layoutModeSubject.next(MeetLayoutMode.LAST_SPEAKERS); + layoutModeSubject.next(MeetLayoutMode.SMART_MOSAIC); fixture.detectChanges(); const mockParticipants = createMockParticipants(5); @@ -274,7 +274,7 @@ describe('MeetingLayoutComponent', () => { describe('Performance Optimizations', () => { it('should not process events in DEFAULT mode', () => { fixture.detectChanges(); - layoutModeSubject.next(MeetLayoutMode.DEFAULT); + layoutModeSubject.next(MeetLayoutMode.MOSAIC); fixture.detectChanges(); const mockParticipants = createMockParticipants(5); @@ -294,7 +294,7 @@ describe('MeetingLayoutComponent', () => { it('should not process empty speaker arrays', () => { fixture.detectChanges(); - layoutModeSubject.next(MeetLayoutMode.LAST_SPEAKERS); + layoutModeSubject.next(MeetLayoutMode.SMART_MOSAIC); fixture.detectChanges(); const mockParticipants = createMockParticipants(5); diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.ts index f479b4c4..362ebbc7 100644 --- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.ts +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.ts @@ -52,7 +52,7 @@ export class MeetingLayoutComponent { private readonly remoteParticipants = computed(() => this.meetingContextService.remoteParticipants()); private readonly layoutMode = toSignal(this.layoutService.layoutMode$, { - initialValue: MeetLayoutMode.LAST_SPEAKERS + initialValue: MeetLayoutMode.SMART_MOSAIC }); /** @@ -64,7 +64,7 @@ export class MeetingLayoutComponent { /** * Computed signal that determines if last speakers layout is enabled */ - private readonly isLastSpeakersLayoutEnabled = computed(() => this.layoutMode() === MeetLayoutMode.LAST_SPEAKERS); + private readonly isLastSpeakersLayoutEnabled = computed(() => this.layoutMode() === MeetLayoutMode.SMART_MOSAIC); /** * Computed signal that provides the filtered list of participants to display. diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.html new file mode 100644 index 00000000..b5cbbecb --- /dev/null +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.html @@ -0,0 +1,57 @@ + +
+
+ browse +

Layout settings

+
+ + +
+ + +
+ Mosaic + Shows all participants in a unified grid +
+ + + +
+ Smart Mosaic + Shows a limited number of active participants +
+ + +
+ + + @if (isSmartMode()) { +
+ Number of visible participants +

Choose how many remote participants are shown in the grid

+
+ + + + {{ participantCount() }} +
+
+ } +
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.scss new file mode 100644 index 00000000..3b997336 --- /dev/null +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.scss @@ -0,0 +1,154 @@ +.layout-section { + padding: 0; + margin: 0; + + .section-header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 10px; + padding: 0 4px; + + .section-icon { + color: var(--ov-text-surface-color); + font-size: 24px; + width: 24px; + height: 24px; + } + + .section-title { + margin: 0; + font-size: 16px; + font-weight: 500; + color: var(--ov-text-surface-color); + } + } + + .layout-mode-container { + .input-label { + display: block; + font-size: 14px; + font-weight: 500; + color: var(--ov-text-surface-color); + margin-bottom: 12px; + padding: 0 4px; + } + + .layout-radio-group { + display: flex; + flex-direction: column; + + .layout-radio-option { + padding: 12px; + border-radius: 8px; + transition: all 0.2s ease; + margin: 0; + + .radio-content { + display: flex; + flex-direction: column; + gap: 4px; + margin-left: 8px; + + .radio-label { + font-size: 14px; + font-weight: 500; + color: var(--ov-text-surface-color); + } + + .radio-description { + font-size: 12px; + color: var(--ov-text-secondary-color); + line-height: 1.4; + } + } + } + } + } + + .participant-count-container { + padding: 16px; + border-radius: var(--ov-surface-radius); + border: 1px solid var(--ov-border-color); + + .input-label { + display: block; + font-size: 14px; + font-weight: 500; + color: var(--ov-text-surface-color); + margin-bottom: 16px; + } + + .slider-container { + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 8px; + + .participant-slider { + flex: 1; + --mdc-slider-active-track-color: var(--ov-accent-action-color); + --mdc-slider-active-track-shape: 9999px; + --mdc-slider-disabled-active-track-color: var(--ov-accent-action-color); + --mdc-slider-disabled-handle-color: var(--ov-accent-action-color); + --mdc-slider-disabled-inactive-track-color: rgba(var(--ov-accent-action-color), 0.2); + --mdc-slider-focus-handle-color: var(--ov-accent-action-color); + --mdc-slider-handle-color: var(--ov-accent-action-color); + --mdc-slider-hover-handle-color: var(--ov-accent-action-color); + --mdc-slider-inactive-track-color: rgba(var(--ov-accent-action-color), 0.2); + --mdc-slider-inactive-track-shape: 9999px; + --mdc-slider-label-container-color: var(--ov-accent-action-color); + --mdc-slider-with-overlap-handle-outline-color: var(--ov-accent-action-color); + --mdc-slider-with-tick-marks-active-container-color: white; + --mdc-slider-with-tick-marks-disabled-container-color: white; + --mdc-slider-with-tick-marks-inactive-container-color: rgba(var(--ov-accent-action-color), 0.5); + } + + .participant-count-value { + min-width: 32px; + text-align: center; + font-size: 16px; + font-weight: 600; + color: var(--ov-text-surface-color); + padding: 6px 10px; + background-color: var(--ov-accent-action-color); + border-radius: var(--ov-surface-radius); + } + } + + .helper-text { + margin: 0; + font-size: 12px; + color: var(--ov-text-secondary-color); + line-height: 1.4; + } + } +} + +// Responsive adjustments +@media (max-width: 768px) { + .layout-section { + .participant-count-container { + padding: 12px; + + .slider-container { + .participant-count-value { + min-width: 28px; + font-size: 14px; + padding: 4px 8px; + } + } + } + } +} + +// Custom radio button styles for this component +.layout-radio-option { + ::ng-deep .mdc-radio { + &:hover { + .mdc-radio__outer-circle { + border-color: none; + } + } + } +} diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.spec.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.spec.ts new file mode 100644 index 00000000..48cf8846 --- /dev/null +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MeetingSettingsPanelComponent } from './meeting-settings-panel.component'; + +describe('MeetingSettingsPanelComponent', () => { + let component: MeetingSettingsPanelComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MeetingSettingsPanelComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MeetingSettingsPanelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.ts new file mode 100644 index 00000000..c24a40a3 --- /dev/null +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.ts @@ -0,0 +1,79 @@ +import { Component, computed, signal } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatIconModule } from '@angular/material/icon'; +import { MatListModule } from '@angular/material/list'; +import { MatRadioModule } from '@angular/material/radio'; +import { MatSliderModule } from '@angular/material/slider'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatSelectModule } from '@angular/material/select'; +import { FormsModule } from '@angular/forms'; +import { MeetLayoutMode } from '../../../models/layout.model'; + +/** + * Component for additional settings in the Settings Panel. + * This component allows users to configure grid layout preferences including: + * - Layout mode (Mosaic or Mosaic Smart) + * - Number of participants to display in Smart mode + */ +@Component({ + selector: 'ov-meeting-settings-panel', + imports: [ + CommonModule, + MatIconModule, + MatListModule, + MatRadioModule, + MatSliderModule, + MatFormFieldModule, + MatSelectModule, + FormsModule + ], + templateUrl: './meeting-settings-panel.component.html', + styleUrl: './meeting-settings-panel.component.scss' +}) +export class MeetingSettingsPanelComponent { + /** + * Expose LayoutMode enum to template + */ + readonly LayoutMode = MeetLayoutMode; + + /** + * Current selected layout mode + */ + layoutMode = signal(MeetLayoutMode.MOSAIC); + + /** + * Number of participants to display in Smart mode + * Range: 1-20 + */ + participantCount = signal(6); + + /** + * Computed property to check if Smart mode is active + */ + isSmartMode = computed(() => this.layoutMode() === MeetLayoutMode.SMART_MOSAIC); + + /** + * Handler for layout mode change + */ + onLayoutModeChange(mode: MeetLayoutMode): void { + this.layoutMode.set(mode); + console.log('Layout mode changed to:', mode); + // TODO: Integrate with layout service when available + } + + /** + * Handler for participant count change + */ + onParticipantCountChange(count: number): void { + this.participantCount.set(count); + console.log('Participant count changed to:', count); + // TODO: Integrate with layout service when available + } + + /** + * Format label for the participant count slider + */ + formatLabel(value: number): string { + return `${value}`; + } +} diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.html new file mode 100644 index 00000000..a19984a7 --- /dev/null +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.html @@ -0,0 +1,10 @@ + + diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.spec.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.spec.ts new file mode 100644 index 00000000..fb72dc6f --- /dev/null +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MeetingToolbarMoreOptionsButtonsComponent } from './meeting-toolbar-more-options-buttons.component'; + +describe('MeetingToolbarMoreOptionsButtonsComponent', () => { + let component: MeetingToolbarMoreOptionsButtonsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MeetingToolbarMoreOptionsButtonsComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MeetingToolbarMoreOptionsButtonsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.ts new file mode 100644 index 00000000..5542bfc8 --- /dev/null +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.ts @@ -0,0 +1,53 @@ +import { Component, computed, inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { PanelService, ViewportService, PanelType } from 'openvidu-components-angular'; + +/** + * Component for additional menu items in the toolbar's "More Options" menu. + * This component handles custom actions like opening the settings panel for grid layout changes. + * It follows the responsive pattern from openvidu-components-angular, adapting to mobile/tablet/desktop views. + */ +@Component({ + selector: 'ov-meeting-toolbar-more-options-buttons', + imports: [ + CommonModule, + MatIconModule, + MatButtonModule, + MatMenuModule, + MatTooltipModule + ], + templateUrl: './meeting-toolbar-more-options-buttons.component.html', + styleUrl: './meeting-toolbar-more-options-buttons.component.scss' +}) +export class MeetingToolbarMoreOptionsButtonsComponent { + /** + * Viewport service for responsive behavior detection + * Injected from openvidu-components-angular + */ + private viewportService = inject(ViewportService); + + /** + * Panel service for opening/closing panels + * Injected from openvidu-components-angular + */ + private panelService = inject(PanelService); + + /** + * Computed properties for responsive button behavior + * These follow the same pattern as toolbar-media-buttons component + */ + readonly isMobileView = computed(() => this.viewportService.isMobile()); + readonly isTabletView = computed(() => this.viewportService.isTablet()); + readonly isDesktopView = computed(() => this.viewportService.isDesktop()); + + /** + * Opens the settings panel to allow users to change grid layout + */ + onOpenSettings(): void { + this.panelService.togglePanel(PanelType.SETTINGS); + } +} diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/models/layout.model.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/models/layout.model.ts index 5a65ce35..c708d89c 100644 --- a/meet-ce/frontend/projects/shared-meet-components/src/lib/models/layout.model.ts +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/models/layout.model.ts @@ -2,11 +2,11 @@ export enum MeetLayoutMode { /** * Default layout mode shows all participants in a grid */ - DEFAULT = 'DEFAULT', + MOSAIC = 'MOSAIC', /** - * The layout mode that shows the last (x) speakers in a grid. + * The layout mode that shows the last (N) speakers in a grid. * Optimized for large meetings. */ - LAST_SPEAKERS = 'LAST_SPEAKERS' + SMART_MOSAIC = 'SMART_MOSAIC' } diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html index 280228ec..49cd5d58 100644 --- a/meet-ce/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html @@ -60,6 +60,11 @@ + + + + +
@@ -74,6 +79,10 @@
+ + + + diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/services/layout.service.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/services/layout.service.ts index ddc43ea6..273948b5 100644 --- a/meet-ce/frontend/projects/shared-meet-components/src/lib/services/layout.service.ts +++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/services/layout.service.ts @@ -8,7 +8,7 @@ import { MeetStorageService } from './storage.service'; providedIn: 'root' }) export class MeetLayoutService extends LayoutService { - private layoutMode: MeetLayoutMode = MeetLayoutMode.DEFAULT; + private layoutMode: MeetLayoutMode = MeetLayoutMode.MOSAIC; layoutModeSubject: Subject = new Subject(); layoutMode$: Observable = this.layoutModeSubject.asObservable(); @@ -35,7 +35,7 @@ export class MeetLayoutService extends LayoutService { if (layoutMode && Object.values(MeetLayoutMode).includes(layoutMode)) { this.layoutMode = layoutMode; } else { - this.layoutMode = MeetLayoutMode.DEFAULT; + this.layoutMode = MeetLayoutMode.MOSAIC; } } @@ -45,7 +45,7 @@ export class MeetLayoutService extends LayoutService { * @returns {boolean} `true` if the layout mode is set to `LAST_SPEAKERS`, otherwise `false`. */ isLastSpeakersLayoutEnabled(): boolean { - return this.layoutMode === MeetLayoutMode.LAST_SPEAKERS; + return this.layoutMode === MeetLayoutMode.SMART_MOSAIC; } setLayoutMode(layoutMode: MeetLayoutMode) { diff --git a/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.html b/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.html index dea98532..034a69e0 100644 --- a/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.html +++ b/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.html @@ -1,6 +1,9 @@ + + + diff --git a/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.ts b/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.ts index bf49e764..3f43a6b5 100644 --- a/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.ts +++ b/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.ts @@ -4,7 +4,9 @@ import { MeetingLayoutComponent, MeetingParticipantPanelItemComponent, MeetingShareLinkPanelComponent, - MeetingToolbarButtonsComponent + MeetingToolbarButtonsComponent, + MeetingSettingsPanelComponent, + MeetingToolbarMoreOptionsButtonsComponent } from '@openvidu-meet/shared-components'; @Component({ @@ -14,7 +16,9 @@ import { MeetingToolbarButtonsComponent, MeetingShareLinkPanelComponent, MeetingParticipantPanelItemComponent, - MeetingLayoutComponent + MeetingLayoutComponent, + MeetingToolbarMoreOptionsButtonsComponent, + MeetingSettingsPanelComponent ], templateUrl: './app-ce-meeting.component.html', styleUrl: './app-ce-meeting.component.scss'