webcomponent: send initialization message to iframe on READY event and update command documentation

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;

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',

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;