diff --git a/frontend/webcomponent/src/components/OpenViduMeet.ts b/frontend/webcomponent/src/components/OpenViduMeet.ts index 2a8e394..c309abf 100644 --- a/frontend/webcomponent/src/components/OpenViduMeet.ts +++ b/frontend/webcomponent/src/components/OpenViduMeet.ts @@ -61,8 +61,17 @@ export class OpenViduMeet extends HTMLElement { } connectedCallback() { - this.render(); + // Send initialization message to the iframe + // after READY event from the iframe is received + this.once(WebComponentEvent.READY, () => { + const message: InboundCommandMessage = { + command: WebComponentCommand.INITIALIZE, + payload: { domain: window.location.origin } + }; + this.commandsManager.sendMessage(message); + }); this.eventsManager.listen(); + this.render(); this.updateIframeSrc(); } @@ -119,11 +128,6 @@ export class OpenViduMeet extends HTMLElement { // Set up load handlers this.iframe.onload = (event: Event) => { - const message: InboundCommandMessage = { - command: WebComponentCommand.INITIALIZE, - payload: { domain: window.location.origin } - }; - this.commandsManager.sendMessage(message); this.iframeLoaded = true; clearTimeout(this.loadTimeout); this.loadTimeout = null; diff --git a/frontend/webcomponent/src/models/command.model.ts b/frontend/webcomponent/src/models/command.model.ts index b4393f0..f0d6e04 100644 --- a/frontend/webcomponent/src/models/command.model.ts +++ b/frontend/webcomponent/src/models/command.model.ts @@ -4,6 +4,7 @@ export enum WebComponentCommand { /** * Initializes the WebComponent with the given configuration. + * This command is sent from the webcomponent to the iframe for intialice the domain. * @private */ INITIALIZE = 'INITIALIZE', diff --git a/frontend/webcomponent/src/models/event.model.ts b/frontend/webcomponent/src/models/event.model.ts index 7b724d5..0917c48 100644 --- a/frontend/webcomponent/src/models/event.model.ts +++ b/frontend/webcomponent/src/models/event.model.ts @@ -3,6 +3,11 @@ * @category Communication */ export enum WebComponentEvent { + /** + * Event emitted when application is ready to receive commands. + * @private + */ + READY = 'READY', /** * Event emitted when the local participant joins the room. */ @@ -23,6 +28,11 @@ export enum WebComponentEvent { * @category Communication */ export interface EventPayloads { + /** + * Payload for the {@link WebComponentEvent.READY} event. + * @private + */ + [WebComponentEvent.READY]: {}; [WebComponentEvent.JOIN]: { roomId: string; participantName: string;