frontend: refactor WebComponentManagerService to improve initialization and closing logic

This commit is contained in:
juancarmore 2025-07-19 00:22:23 +02:00
parent fe29e0dba6
commit b57f2d2eec

View File

@ -1,5 +1,5 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { AppDataService, MeetingService, ParticipantTokenService, RoomService } from '@lib/services'; import { MeetingService, ParticipantTokenService, RoomService } from '@lib/services';
import { import {
WebComponentCommand, WebComponentCommand,
WebComponentEvent, WebComponentEvent,
@ -17,14 +17,15 @@ import { LoggerService, OpenViduService } from 'openvidu-components-angular';
providedIn: 'root' providedIn: 'root'
}) })
export class WebComponentManagerService { export class WebComponentManagerService {
protected isInitialized = false;
protected parentDomain: string = ''; protected parentDomain: string = '';
protected isListenerStarted = false;
protected boundHandleMessage: (event: MessageEvent) => Promise<void>; protected boundHandleMessage: (event: MessageEvent) => Promise<void>;
protected log; protected log;
constructor( constructor(
protected loggerService: LoggerService, protected loggerService: LoggerService,
protected appDataService: AppDataService,
protected participantService: ParticipantTokenService, protected participantService: ParticipantTokenService,
protected openviduService: OpenViduService, protected openviduService: OpenViduService,
protected roomService: RoomService, protected roomService: RoomService,
@ -34,13 +35,14 @@ export class WebComponentManagerService {
this.boundHandleMessage = this.handleMessage.bind(this); this.boundHandleMessage = this.handleMessage.bind(this);
} }
startCommandsListener(): void { initialize() {
if (this.isListenerStarted) return; if (this.isInitialized) return;
this.isListenerStarted = true; this.log.d('Initializing service...');
// Listen for messages from the iframe this.isInitialized = true;
window.addEventListener('message', this.boundHandleMessage); this.startCommandsListener();
// Send ready message to parent
// Send READY event to parent
this.sendMessageToParent( this.sendMessageToParent(
{ {
event: WebComponentEvent.READY, event: WebComponentEvent.READY,
@ -48,18 +50,36 @@ export class WebComponentManagerService {
}, },
'*' '*'
); );
}
close() {
if (!this.isInitialized) return;
this.log.d('Closing service...');
this.stopCommandsListener();
// Send CLOSED event to parent
this.sendMessageToParent({
event: WebComponentEvent.CLOSED,
payload: {}
});
this.isInitialized = false;
}
protected startCommandsListener() {
// Listen for messages from the iframe
window.addEventListener('message', this.boundHandleMessage);
this.log.d('Started commands listener'); this.log.d('Started commands listener');
} }
stopCommandsListener(): void { protected stopCommandsListener() {
if (!this.isListenerStarted) return;
this.isListenerStarted = false;
window.removeEventListener('message', this.boundHandleMessage); window.removeEventListener('message', this.boundHandleMessage);
this.log.d('Stopped commands listener'); this.log.d('Stopped commands listener');
} }
sendMessageToParent(event: WebComponentOutboundEventMessage, targetOrigin: string = this.parentDomain) { sendMessageToParent(event: WebComponentOutboundEventMessage, targetOrigin: string = this.parentDomain) {
if (!this.appDataService.isEmbeddedMode()) return; if (!this.isInitialized) return;
this.log.d('Sending message to parent:', event); this.log.d('Sending message to parent:', event);
window.parent.postMessage(event, targetOrigin); window.parent.postMessage(event, targetOrigin);
} }
@ -85,9 +105,9 @@ export class WebComponentManagerService {
return; return;
} }
// Check if the room is connected before processing command // Check if participant is connected to room before processing command
if (!this.openviduService.isRoomConnected()) { if (!this.openviduService.isRoomConnected()) {
this.log.w('Received command but room is not connected'); this.log.w('Received command but participant is not connected to the room');
return; return;
} }