testapp: enhance webhook event handling

.gitignore

@@ -57,3 +57,5 @@ backend/src/typings/
 frontend/webcomponent/**/openvidu-meet.**.js
 testapp/public/js/app.js
 testapp/public/js/webcomponent.js
+frontend/webcomponent/test-results/.last-run.json
+frontend/webcomponent/test_localstorage_state.json

testapp/public/ts/webcomponent.ts

@@ -1,5 +1,13 @@
 const socket = (window as any).io();
 
+let meet: {
+	endMeeting: () => void;
+	leaveRoom: () => void;
+	on: (event: string, callback: (event: CustomEvent<any>) => void) => void;
+};
+let roomId: string | undefined;
+let showAllWebhooksCheckbox: HTMLInputElement | null;
+
 /**
  * Add a component event to the events log
  */
@@ -46,22 +54,42 @@ const clearWebhookEventsByRoom = (roomId: string): void => {
 	}
 };
 
+const shouldShowWebhook = (event: any): boolean => {
+	return showAllWebhooksCheckbox?.checked || event.data.roomId === roomId;
+};
 const listenWebhookServerEvents = () => {
 	socket.on('webhookEvent', (event: any) => {
 		console.log('Webhook received:', event);
-		const isMeetingEnded = event.event === 'meetingEnded';
+		const webhookRoomId = event.data.roomId;
-		const roomId = event.data.roomId;
+
-		if (roomId) {
+		if (webhookRoomId) {
-			saveWebhookEventToStorage(roomId, event);
+			saveWebhookEventToStorage(webhookRoomId, event);
+		}
+
+		if (!shouldShowWebhook(event)) {
+			console.log('Ignoring webhook event:', event);
+			return;
 		}
 
 		addWebhookEventElement(event);
 
 		// Clean up the previous events
-		if (isMeetingEnded) clearWebhookEventsByRoom(roomId);
+		const isMeetingEnded = event.event === 'meetingEnded';
+		if (isMeetingEnded) clearWebhookEventsByRoom(webhookRoomId);
 	});
 };
 
+const renderStoredWebhookEvents = (roomId: string) => {
+	const webhookLogList = document.getElementById('webhook-log-list');
+	if (webhookLogList) {
+		while (webhookLogList.firstChild) {
+			webhookLogList.removeChild(webhookLogList.firstChild);
+		}
+	}
+	const events = getWebhookEventsFromStorage(roomId);
+	events.forEach((event) => addWebhookEventElement(event));
+};
+
 const addWebhookEventElement = (event: any) => {
 	const webhookLogList = document.getElementById('webhook-log-list');
 	if (webhookLogList) {
@@ -167,11 +195,15 @@ const listenWebComponentEvents = () => {
 		console.log('LEFT event received:', event);
 		addEventToLog('LEFT', JSON.stringify(event));
 	});
+
+	meet.on('MEETING_ENDED', (event: CustomEvent<any>) => {
+		console.log('MEETING_ENDED event received:', event);
+		addEventToLog('MEETING_ENDED', JSON.stringify(event));
+	});
 };
 
+// Set up commands for the web component
 const setUpWebComponentCommands = () => {
-	const meet = document.querySelector('openvidu-meet') as any;
-
 	if (!meet) {
 		console.error('openvidu-meet component not found');
 		alert('openvidu-meet component not found in the DOM');
@@ -189,21 +221,29 @@ const setUpWebComponentCommands = () => {
 		?.addEventListener('click', () => meet.leaveRoom());
 
 	// Toggle chat button click handler
-	document
+	// document
-		.getElementById('toggle-chat-btn')
+	// 	.getElementById('toggle-chat-btn')
-		?.addEventListener('click', () => meet.toggleChat());
+	// 	?.addEventListener('click', () => meet.toggleChat());
 };
 
 document.addEventListener('DOMContentLoaded', () => {
-	const roomId = document.getElementById('room-id')?.textContent?.trim();
+	roomId = document.getElementById('room-id')?.textContent?.trim();
+	showAllWebhooksCheckbox = document.getElementById(
+		'show-all-webhooks'
+	) as HTMLInputElement;
+	meet = document.querySelector('openvidu-meet') as any;
+
 	if (!roomId) {
 		console.error('Room ID not found in the DOM');
 		alert('Room ID not found in the DOM');
 		return;
 	}
-	const events = getWebhookEventsFromStorage(roomId);
+	renderStoredWebhookEvents(roomId);
-	events.forEach((event) => addWebhookEventElement(event));
 	listenWebhookServerEvents();
 	listenWebComponentEvents();
 	setUpWebComponentCommands();
+
+	showAllWebhooksCheckbox?.addEventListener('change', () =>
+		renderStoredWebhookEvents(roomId)
+	);
 });

testapp/public/views/index.mustache

@@ -84,6 +84,30 @@
 											</button>
 										</form>
 									</li>
+									{{! ONLY RECORDINGS LINK }}
+									<li>
+										<form action="/join-room" method="post">
+											<input
+												type="hidden"
+												name="roomUrl"
+												value="{{ publisherRoomUrl + '?viewRecordings=true' }}"
+											/>
+											<input
+												type="hidden"
+												name="participantRole"
+												value="publisher"
+											/>
+											<input
+												type="hidden"
+												name="roomId"
+												value="{{ roomId }}"
+											/>
+
+											<button type="submit" id="join-as-publisher" class="dropdown-item">
+												View Recordings
+											</button>
+										</form>
+									</li>
 								</ul>
 							</div>
 						</li>

testapp/public/views/room.mustache

@@ -19,12 +19,13 @@
 			<div id="control-panel" class="d-flex flex-column">
 				<span>
 					<span id="participant-role" class="h5">
-						{{#isModerator}}<span class="badge bg-success">Moderator</span
+						{{#isModerator}}
-						>{{/isModerator}}
+						<span class="badge bg-success">Moderator</span>
-						{{^isModerator
+						{{/isModerator}}
 
-						}}<span class="badge bg-secondary">Participant</span
+						{{^isModerator}}
-						>{{/isModerator}}
+						<span class="badge bg-secondary">Participant</span>
+						{{/isModerator}}
 					</span>
 					<span id="room-id" class="text-muted">
 						{{ roomId }}
@@ -41,9 +42,9 @@
 					<button id="leave-room-btn" class="btn btn-warning">
 						Leave Room
 					</button>
-					<button id="toggle-chat-btn" class="btn btn-success">
+					<!-- <button id="toggle-chat-btn" class="btn btn-success">
 						Toggle Chat
-					</button>
+					</button> -->
 				</div>
 
 				<!-- Events -->
@@ -57,6 +58,17 @@
 				<!-- Webhooks Log -->
 				<div class="section">
 					<h5 class="title">Webhook</h5>
+					<div class="form-check mb-2">
+						<input
+							class="form-check-input"
+							type="checkbox"
+							value=""
+							id="show-all-webhooks"
+						/>
+						<label class="form-check-label" for="show-all-webhooks">
+							Show all
+						</label>
+					</div>
 					<ul id="webhook-log-list" class="log-list">
 						<!-- Webhooks will be added dynamically here -->
 					</ul>