-
+
+
+
+
+
@@ -37,9 +45,11 @@
-->
-
+
+
+
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
index 8aa833f4..aced0154 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/session/session.component.ts
@@ -1,4 +1,15 @@
-import { Component, ContentChild, EventEmitter, HostListener, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
+import {
+ Component,
+ ContentChild,
+ EventEmitter,
+ HostListener,
+ Input,
+ OnInit,
+ Output,
+ TemplateRef,
+ ViewChild,
+ ViewContainerRef
+} from '@angular/core';
import { Subscriber, Session, StreamEvent, StreamPropertyChangedEvent, SessionDisconnectedEvent, ConnectionEvent } from 'openvidu-browser';
import { VideoType } from '../../models/video-type.model';
@@ -8,7 +19,6 @@ import { ChatService } from '../../services/chat/chat.service';
import { LoggerService } from '../../services/logger/logger.service';
import { WebrtcService } from '../../services/webrtc/webrtc.service';
import { TokenService } from '../../services/token/token.service';
-import { PlatformService } from '../../services/platform/platform.service';
import { ActionService } from '../../services/action/action.service';
import { Signal } from '../../models/signal.model';
import { ParticipantService } from '../../services/participant/participant.service';
@@ -18,6 +28,11 @@ import { LayoutService } from '../../services/layout/layout.service';
import { Subscription, skip } from 'rxjs';
import { MenuType } from '../../models/menu.model';
import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.service';
+import { ToolbarComponent } from '../toolbar/toolbar.component';
+import { LibraryConfigService } from '../../services/library-config/library-config.service';
+import { LayoutComponent } from '../layout/layout.component';
+import { PanelComponent } from '../panel/panel.component';
+import { LibraryComponents } from '../../config/lib.config';
@Component({
selector: 'ov-session',
@@ -25,14 +40,14 @@ import { SidenavMenuService } from '../../services/sidenav-menu/sidenav-menu.ser
styleUrls: ['./session.component.css']
})
export class SessionComponent implements OnInit {
- @ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef;
+ // @ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef;
@ContentChild('customPanelContent', { read: TemplateRef }) customPanelContentTemplate: TemplateRef;
@ContentChild('customLayoutElement', { read: TemplateRef }) customLayoutElementTemplate: TemplateRef;
@Input() tokens: { webcam: string; screen: string };
- @Output() _session = new EventEmitter();
- @Output() _publisher = new EventEmitter();
- @Output() _error = new EventEmitter();
+ // @Output() _session = new EventEmitter();
+ // @Output() _publisher = new EventEmitter();
+ // @Output() _error = new EventEmitter();
session: Session;
sessionScreen: Session;
@@ -40,8 +55,7 @@ export class SessionComponent implements OnInit {
sideMenu: MatSidenav;
sidenavMode: SidenavMode = SidenavMode.SIDE;
- isParticipantsPanelOpened: boolean;
- isChatPanelOpened: boolean;
+
protected readonly SIDENAV_WIDTH_LIMIT_MODE = 790;
protected menuSubscription: Subscription;
@@ -51,6 +65,10 @@ export class SessionComponent implements OnInit {
protected log: ILogger;
+ _toolbar: ViewContainerRef;
+ _layout: ViewContainerRef;
+ _panel: ViewContainerRef;
+
constructor(
protected actionService: ActionService,
protected webrtcService: WebrtcService,
@@ -60,12 +78,63 @@ export class SessionComponent implements OnInit {
protected tokenService: TokenService,
protected layoutService: LayoutService,
protected menuService: SidenavMenuService,
-
- protected platformService: PlatformService
+ protected libraryConfigSrv: LibraryConfigService
) {
this.log = this.loggerSrv.get('SessionComponent');
}
+ @ViewChild('toolbar', { static: false, read: ViewContainerRef })
+ set toolbar(reference: ViewContainerRef) {
+ setTimeout(() => {
+ this._toolbar = reference;
+
+ if (this._toolbar) {
+ let component = ToolbarComponent;
+ // Inject the custom component if exists
+ if (this.libraryConfigSrv.isCustomComponentDefined(LibraryComponents.TOOLBAR)) {
+ component = this.libraryConfigSrv.getCustomComponent(LibraryComponents.TOOLBAR);
+ }
+ this._toolbar?.clear();
+ this._toolbar.createComponent(component);
+ }
+ }, 0);
+ }
+
+ @ViewChild('layout', { static: false, read: ViewContainerRef })
+ set layout(reference: ViewContainerRef) {
+ setTimeout(() => {
+ this._layout = reference;
+
+ if (this._layout) {
+ let component = LayoutComponent;
+ // Inject the custom component if exists
+ if (this.libraryConfigSrv.isCustomComponentDefined(LibraryComponents.LAYOUT)) {
+ component = this.libraryConfigSrv.getCustomComponent(LibraryComponents.LAYOUT);
+ }
+ this._layout?.clear();
+ this._layout.createComponent(component);
+ this.layoutService.initialize();
+ }
+ }, 0);
+ }
+
+ @ViewChild('panel', { static: false, read: ViewContainerRef })
+ set panel(reference: ViewContainerRef) {
+ setTimeout(() => {
+ this._panel = reference;
+
+ if (this._panel) {
+ let component = PanelComponent;
+ // Inject the custom component if exists
+ // if (this.libraryConfigSrv.isCustomComponentDefined(LibraryComponents.PANEL)) {
+ // component = this.libraryConfigSrv.getCustomComponent(LibraryComponents.PANEL);
+ // }
+ this._panel?.clear();
+ this._panel.createComponent(component);
+ }
+ }, 0);
+ }
+
@HostListener('window:beforeunload')
beforeunloadHandler() {
this.leaveSession();
@@ -87,8 +156,6 @@ export class SessionComponent implements OnInit {
}
async ngOnInit() {
- this.layoutService.initialize();
-
if (this.webrtcService.getWebcamSession() === null) {
this.webrtcService.initialize();
await this.webrtcService.initDefaultPublisher(undefined);
@@ -113,7 +180,7 @@ export class SessionComponent implements OnInit {
// this.webrtcService.publishVideo(this.localUserService.getMyCameraPublisher(), false);
// }
- this._session.emit(this.session);
+ // this._session.emit(this.session);
}
ngOnDestroy() {
@@ -124,8 +191,6 @@ export class SessionComponent implements OnInit {
this.session = null;
this.sessionScreen = null;
this.layoutService.clear();
- this.isChatPanelOpened = false;
- this.isParticipantsPanelOpened = false;
if (this.menuSubscription) this.menuSubscription.unsubscribe();
if (this.layoutWidthSubscription) this.layoutWidthSubscription.unsubscribe();
}
@@ -152,11 +217,7 @@ export class SessionComponent implements OnInit {
});
this.menuSubscription = this.menuService.menuOpenedObs.pipe(skip(1)).subscribe((ev: { opened: boolean; type?: MenuType }) => {
- if (this.sideMenu) {
- this.isChatPanelOpened = ev.opened && ev.type === MenuType.CHAT;
- this.isParticipantsPanelOpened = ev.opened && ev.type === MenuType.PARTICIPANTS;
- ev.opened ? this.sideMenu.open() : this.sideMenu.close();
- }
+ this.sideMenu && ev.opened ? this.sideMenu.open() : this.sideMenu.close();
});
}
@@ -181,7 +242,7 @@ export class SessionComponent implements OnInit {
await this.webrtcService.publish(this.participantService.getMyCameraPublisher());
}
} catch (error) {
- this._error.emit({ error: error.error, messgae: error.message, code: error.code, status: error.status });
+ // this._error.emit({ error: error.error, messgae: error.message, code: error.code, status: error.status });
this.log.e('There was an error connecting to the session:', error.code, error.message);
this.actionService.openDialog('There was an error connecting to the session:', error?.error || error?.message);
}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
index 1e4dac9f..1cfa1afe 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/stream/stream.component.ts
@@ -52,16 +52,10 @@ export class StreamComponent implements OnInit {
// this.isFullscreenEnabled = !this.isFullscreenEnabled;
// }
- // Has been mandatory fullscreen Input because of Input user did not fire changing
- // the fullscreen user property in publisherStartSpeaking event in SessionComponent
- @Input()
- set videoEnlarged(enlarged: boolean) {
- this.checkVideoSizeBigIcon(enlarged);
- }
-
@Input()
set participant(participant: StreamModel) {
this._participant = participant;
+ this.checkVideoSizeBigIcon(this._participant.videoEnlarged);
this.nicknameFormControl = new FormControl(this._participant.nickname, [Validators.maxLength(25), Validators.required]);
}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
index 4c7809f9..60df9c8b 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.css
@@ -1,5 +1,5 @@
#toolbar {
- height: 100%;
+ /* height: 100%; */
background-color: transparent;
color: var(--ov-light-color);
}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
index 6d8d0372..52502895 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.ts
@@ -1,4 +1,15 @@
-import { Component, ContentChild, EventEmitter, HostListener, OnDestroy, OnInit, Output, TemplateRef } from '@angular/core';
+import {
+ AfterViewInit,
+ Component,
+ ContentChild,
+ EventEmitter,
+ HostListener,
+ OnDestroy,
+ OnInit,
+ Output,
+ TemplateRef,
+ ViewChild
+} from '@angular/core';
import { skip, Subscription } from 'rxjs';
import { TokenService } from '../../services/token/token.service';
import { ChatService } from '../../services/chat/chat.service';
@@ -103,10 +114,8 @@ export class ToolbarComponent implements OnInit, OnDestroy {
this.subscribeToUserMediaProperties();
this.subscribeToReconnection();
- if(!this.libraryConfigSrv.isUsingProLibrary()){
- this.subscribeToMenuToggling();
- this.subscribeToChatMessages();
- }
+ this.subscribeToMenuToggling();
+ this.subscribeToChatMessages();
}
toggleMicrophone() {
@@ -268,7 +277,7 @@ export class ToolbarComponent implements OnInit, OnDestroy {
});
}
protected subscribeToMenuToggling() {
- this.menuTogglingSubscription = this.menuService.menuOpenedObs.subscribe((ev: {opened: boolean, type?: MenuType}) => {
+ this.menuTogglingSubscription = this.menuService.menuOpenedObs.subscribe((ev: { opened: boolean; type?: MenuType }) => {
this.isChatOpened = ev.opened && ev.type === MenuType.CHAT;
this.isParticipantsOpened = ev.opened && ev.type === MenuType.PARTICIPANTS;
if (this.isChatOpened) {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
index 20e6bc43..655bfc34 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.html
@@ -1,6 +1,6 @@
-
+
@@ -10,21 +10,23 @@
error
- {{errorMessage}}
+ {{ errorMessage }}
-
-
+
+
+
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
index f51d6949..ec918c9c 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/videoconference/videoconference.component.ts
@@ -1,17 +1,31 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { RestService } from '../../services/rest/rest.service';
+import {
+ Component,
+ Input,
+ OnInit,
+ Output,
+ EventEmitter,
+ ViewChild,
+ ChangeDetectorRef,
+ AfterViewInit,
+ ViewContainerRef
+} from '@angular/core';
+import { LibraryConfigService } from '../../services/library-config/library-config.service';
+import { ToolbarComponent } from '../toolbar/toolbar.component';
@Component({
selector: 'ov-videoconference',
templateUrl: './videoconference.component.html',
styleUrls: ['./videoconference.component.css']
})
-export class VideoconferenceComponent implements OnInit {
+export class VideoconferenceComponent implements OnInit, AfterViewInit {
@Input() sessionName: string;
@Input() userName: string;
@Input() openviduServerUrl: string;
@Input() openviduSecret: string;
- @Input() tokens: { webcam: string; screen: string };
+ // @Input() tokens: { webcam: string; screen: string };
+
+ @Output() onJoinClicked = new EventEmitter
();
+ @Output() onCloseClicked = new EventEmitter();
joinSessionClicked: boolean = false;
closeClicked: boolean = false;
@@ -20,42 +34,91 @@ export class VideoconferenceComponent implements OnInit {
error: boolean = false;
errorMessage: string = '';
- constructor(private restService: RestService) {}
+ _toolbar: ViewContainerRef;
- ngOnInit() {}
+ constructor(protected libraryConfigSrv: LibraryConfigService, private cd: ChangeDetectorRef) {}
- async onJoinClicked() {
- if (!this.tokens || (!this.tokens?.webcam && !this.tokens?.screen)) {
- //No tokens received
+ // @ViewChild('toolbar', { static: false, read: ViewContainerRef })
+ // set toolbar(reference: ViewContainerRef) {
+ // setTimeout(() => {
+ // console.log('setting ref', reference);
+ // this._toolbar = reference;
- if (!!this.sessionName && !!this.openviduServerUrl && !!this.openviduSecret) {
- // Generate tokens
- this._tokens = {
- webcam: await this.restService.getToken(this.sessionName, this.openviduServerUrl, this.openviduSecret),
- screen: await this.restService.getToken(this.sessionName, this.openviduServerUrl, this.openviduSecret)
- };
- } else {
- // No tokens received and can't generate them
- this.error = true;
- this.errorMessage = `Cannot access to OpenVidu Server with url '${this.openviduServerUrl}' to genere tokens for session '${this.sessionName}'`;
- throw this.errorMessage;
- }
- } else if (!this.tokens?.webcam || !this.tokens?.screen) {
+ // if (this._toolbar) {
+ // let component = ToolbarComponent;
+ // if (this.libraryConfigSrv.isCustomComponentDefined('ov-toolbar')) {
+ // component = this.libraryConfigSrv.getToolbarComponent();
+ // }
+ // this._toolbar?.clear();
+ // this._toolbar.createComponent(component);
+ // }
+ // }, 100);
+ // }
+
+ ngAfterViewInit() {
+ // if(this.customToolbar && this.libraryConfigSrv.isCustomComponentDefined('ov-toolbar')){
+ // const viewContainerRef = this.customToolbar.viewContainerRef;
+ // viewContainerRef.clear();
+ // const componentRef = viewContainerRef.createComponent(this.libraryConfigSrv.getToolbarComponent());
+ // } else {
+ // this.customToolbar.viewContainerRef.clear();
+ // const viewContainerRef = this.toolbar.viewContainerRef;
+ // viewContainerRef.clear();
+ // viewContainerRef.createComponent(ToolbarComponent);
+ // }
+ }
+
+ ngOnInit() {
+ }
+
+ @Input('tokens')
+ set tokens(tokens: { webcam: string; screen: string }) {
+ if (!!tokens?.webcam || !!this.tokens?.screen) {
// 1 token received
- const aditionalToken = await this.restService.getToken(this.sessionName, this.openviduServerUrl, this.openviduSecret);
- this._tokens = {
- webcam: !!this.tokens.webcam ? this.tokens.webcam : aditionalToken,
- screen: !!this.tokens.screen ? this.tokens.screen : aditionalToken
- };
+ this.cd.detectChanges();
+ // this.cd.markForCheck();
+ this._tokens = tokens;
+ this.joinSessionClicked = true;
+ this.isSessionAlive = true;
} else {
- // 2 tokens received.
- this._tokens = {
- webcam: this.tokens.webcam,
- screen: this.tokens.screen
- };
+ //No tokens received
+ throw new Error('No tokens received');
}
- this.joinSessionClicked = true;
- this.isSessionAlive = true;
+ }
+
+ async _onJoinClicked() {
+ this.onJoinClicked.emit();
+ // if (!this.tokens || (!this.tokens?.webcam && !this.tokens?.screen)) {
+ // //No tokens received
+
+ // if (!!this.sessionName && !!this.openviduServerUrl && !!this.openviduSecret) {
+ // // Generate tokens
+ // this._tokens = {
+ // webcam: await this.restService.getToken(this.sessionName, this.openviduServerUrl, this.openviduSecret),
+ // screen: await this.restService.getToken(this.sessionName, this.openviduServerUrl, this.openviduSecret)
+ // };
+ // } else {
+ // // No tokens received and can't generate them
+ // this.error = true;
+ // this.errorMessage = `Cannot access to OpenVidu Server with url '${this.openviduServerUrl}' to genere tokens for session '${this.sessionName}'`;
+ // throw this.errorMessage;
+ // }
+ // } else if (!this.tokens?.webcam || !this.tokens?.screen) {
+ // // 1 token received
+ // const aditionalToken = await this.restService.getToken(this.sessionName, this.openviduServerUrl, this.openviduSecret);
+ // this._tokens = {
+ // webcam: !!this.tokens.webcam ? this.tokens.webcam : aditionalToken,
+ // screen: !!this.tokens.screen ? this.tokens.screen : aditionalToken
+ // };
+ // } else {
+ // // 2 tokens received.
+ // this._tokens = {
+ // webcam: this.tokens.webcam,
+ // screen: this.tokens.screen
+ // };
+ // }
+ // this.joinSessionClicked = true;
+ // this.isSessionAlive = true;
}
onLeaveSessionClicked() {
this.isSessionAlive = false;
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/config/lib.config.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/config/lib.config.ts
index 5c9f3fdc..084f1b8d 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/config/lib.config.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/config/lib.config.ts
@@ -1,6 +1,19 @@
+import { Type } from '@angular/core';
+
export interface LibConfig {
environment: {
production: boolean;
- useProdLibrary?: boolean
+ useProdLibrary?: boolean;
+ customComponents?: { LibraryComponents: Type };
};
}
+
+
+export enum LibraryComponents {
+ TOOLBAR = 'ov-toolbar',
+ LAYOUT = 'ov-layout',
+ PANEL = 'ov-panel',
+ CHAT_PANEL = 'ov-chat-panel',
+ PARTICIPANTS_PANEL = 'ov-participants-panel',
+ STREAM = "ov-stream"
+}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
index 6885fe47..4cfb4445 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/openvidu-angular.module.ts
@@ -29,7 +29,7 @@ import { HttpClientModule } from '@angular/common/http';
import { UserSettingsComponent } from './components/user-settings/user-settings.component';
import { ToolbarComponent } from './components/toolbar/toolbar.component';
import { VideoComponent } from './components/video/video.component';
-import { ChatPanelComponent } from './components/chat-panel/chat-panel.component';
+import { ChatPanelComponent } from './components/panel/chat-panel/chat-panel.component';
import { SessionComponent } from './components/session/session.component';
import { LayoutComponent } from './components/layout/layout.component';
import { StreamComponent } from './components/stream/stream.component';
@@ -54,9 +54,14 @@ import { DocumentService } from './services/document/document.service';
import { LayoutService } from './services/layout/layout.service';
import { SidenavMenuService } from './services/sidenav-menu/sidenav-menu.service';
import { ParticipantService } from './services/participant/participant.service';
-import { ParticipantItemComponent } from './components/participants-panel/participant-item/participant-item.component';
-import { ParticipantsPanelComponent } from './components/participants-panel/participants-panel/participants-panel.component';
+import { ParticipantItemComponent } from './components/panel/participants-panel/participant-item/participant-item.component';
+import { ParticipantsPanelComponent } from './components/panel/participants-panel/participants-panel/participants-panel.component';
import { VideoconferenceComponent } from './components/videoconference/videoconference.component';
+import { PanelComponent } from './components/panel/panel.component';
+
+// Used for loading dynamic components because of Inputs and Outputs are not supported in the official Angular way
+// https://github.com/angular/angular/issues/15360
+import { DynamicIoModule } from 'ng-dynamic-component';
@NgModule({
declarations: [
@@ -75,7 +80,8 @@ import { VideoconferenceComponent } from './components/videoconference/videoconf
NicknamePipe,
ParticipantItemComponent,
ParticipantsPanelComponent,
- VideoconferenceComponent
+ VideoconferenceComponent,
+ PanelComponent,
],
imports: [
CommonModule,
@@ -102,7 +108,8 @@ import { VideoconferenceComponent } from './components/videoconference/videoconf
FlexLayoutModule,
MatMenuModule,
MatDividerModule,
- MatListModule
+ MatListModule,
+ DynamicIoModule
],
providers: [
ActionService,
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/library-config/library-config.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/library-config/library-config.service.ts
index 51c28a4b..d6b81fae 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/library-config/library-config.service.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/library-config/library-config.service.ts
@@ -5,12 +5,12 @@ import { LibConfig } from '../../config/lib.config';
@Injectable()
export class LibraryConfigService {
+
private configuration: LibConfig;
constructor(@Inject('LIB_CONFIG') config: LibConfig) {
this.configuration = config;
console.log(this.configuration);
- this.isUsingProLibrary() ? console.log('Using PRO library') : console.log('Using CE library');
if(this.isProduction()) console.log('Production Mode');
// console.log(version)
}
@@ -22,7 +22,11 @@ export class LibraryConfigService {
return this.configuration?.environment?.production;
}
- isUsingProLibrary(): boolean {
- return !!this.configuration?.environment?.useProdLibrary;
+ isCustomComponentDefined(component: string): boolean {
+ return !!this.configuration?.environment?.customComponents && !!this.configuration.environment.customComponents[component];
+ }
+
+ getCustomComponent(component: string){
+ return this.configuration.environment.customComponents[component];
}
}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
index 143daa78..d7fef6a0 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/public-api.ts
@@ -24,8 +24,8 @@ export * from './lib/services/storage/storage.service';
export * from './lib/components/videoconference/videoconference.component';
export * from './lib/components/user-settings/user-settings.component';
export * from './lib/components/toolbar/toolbar.component';
-export * from './lib/components/chat-panel/chat-panel.component';
-export * from './lib/components/participants-panel/participants-panel/participants-panel.component';
+export * from './lib/components/panel/chat-panel/chat-panel.component';
+export * from './lib/components/panel/participants-panel/participants-panel/participants-panel.component';
export * from './lib/components/session/session.component';
export * from './lib/components/layout/layout.component';
export * from './lib/components/stream/stream.component';