Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(idaa): implement jitsi report streaming and conference lifecycle improvements

Browse Source 
- Refactor Jitsi reports to use SvelteKit streaming with a skeleton loader.
- Add conference lifecycle event listeners (left, close) to video conference page.
- Implement manual Novi data re-sync and improve initialization robustness.
- Fix skeleton visibility by using standard Tailwind colors.
This commit is contained in:
Scott Idem
2026-01-30 10:16:37 -05:00
parent c626a0f9df
commit 8c99f5abed
3 changed files with 150 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/routes/idaa/(idaa)/video_conferences/+page.svelte
View File

@@ -117,7 +117,7 @@
api.on('videoConferenceJoined', async (jitsi_data: { id: string; displayName: string; roomName: string }) => {
// Map Jitsi's camelCase to our internal snake_case
const { id: participant_id, displayName: participant_name, roomName: jitsi_room_name } = jitsi_data;
console.log('Jitsi Event: videoConferenceJoined', jitsi_data);
meeting_start_time = new Date();
if (jitsi_meeting_id === null) jitsi_meeting_id = `${jitsi_room_name}-${Date.now()}`;
@@ -215,17 +215,29 @@
});
// --- Discrete Event Logging ---
// NOTE: This does not seem to be triggered.
api.on('raiseHandUpdated', (participant: { id:string; raisesHand: boolean }) => {
if (participant.raisesHand) {
const p_info = meeting_participants.get(participant.id);
console.log('Jitsi Event: raiseHandUpdated', p_info);
create_discrete_activity_log('jitsi_meeting_raise_hand', 'raiseHandUpdated', {
attendee_id: p_info.id,
full_name: p_info.displayName,
});
if (p_info) {
console.log('Jitsi Event: raiseHandUpdated', p_info);
create_discrete_activity_log('jitsi_meeting_raise_hand', 'raiseHandUpdated', {
attendee_id: p_info.id,
full_name: p_info.displayName,
});
}
}
});
api.on('videoConferenceLeft', () => {
console.log('Jitsi Event: videoConferenceLeft');
if (duration_timer_id) clearInterval(duration_timer_id);
// meeting_duration = '00:00:00';
});
api.on('readyToClose', () => {
console.log('Jitsi Event: readyToClose');
show_jitsi_container = false;
});
}
async function handle_profile_update() {
@@ -277,7 +289,7 @@
settings: {
startMuted: data.params.start_muted === 'true',
startHidden: data.params.start_hidden === 'true',
reactionsMuted: data.params.reactions_muted === 'true'
reactionsMuted: disable_reaction_sound
},
config: {
'prejoinConfig.enabled': false
@@ -301,19 +313,13 @@
}
}
onMount(async () => {
if (log_lvl) {
console.log('Jitsi: onMount - fetching user data and initializing Jitsi...');
}
async function fetch_novi_data() {
const url_params = data.params;
if (log_lvl > 1) {
console.log('Jitsi: url_params:', url_params);
}
// --- Start with fallback data from URL ---
user_id = url_params.uuid; // Novi Customer GUID
display_name = url_params.full_name ?? 'Guest'; // May be overridden
email = (url_params.email ?? 'guest@example.com').replace(/\s+/g, '+'); // May be overridden
is_moderator = url_params.moderator === 'true'; // URL fallback
room_name = url_params.room ?? 'Default-Room';
domain = url_params.domain ?? 'jitsi.dgrzone.com';
@@ -370,12 +376,26 @@
console.log(`Jitsi: User ${user_id} is not a moderator.`);
}
} else {
console.warn('Jitsi: Novi API not configured. Skipping user details/moderator check.');
console.warn('Jitsi: Novi API not configured. Using URL fallback for user details/moderator check.');
}
// Set initial value for the profile editor inputs
name_input = display_name ?? '';
email_input = email ?? '';
}
async function handle_novi_resync() {
console.log('Jitsi: Manually re-syncing Novi Data...');
await fetch_novi_data();
await init_jitsi();
}
onMount(async () => {
if (log_lvl) {
console.log('Jitsi: onMount - fetching user data and initializing Jitsi...');
}
await fetch_novi_data();
// --- All data fetched, now initialize Jitsi ---
await init_jitsi();
@@ -538,6 +558,17 @@
jitsi_api = null;
}
// --- Check for Jitsi API script ---
// @ts-ignore
if (typeof JitsiMeetExternalAPI === 'undefined') {
console.error('Jitsi: JitsiMeetExternalAPI script not loaded yet.');
const container = document.getElementById(jitsi_container_id);
if (container) {
container.innerHTML = '<h1>Jitsi API script not loaded. Please refresh the page.</h1>';
}
return;
}
console.log('Jitsi: Initializing Jitsi meeting interface...');
// These variables are now expected to be set in the component's state
@@ -869,10 +900,7 @@
<button
class="mt-2 px-2 py-1 bg-blue-200 text-white rounded hover:bg-blue-400"
onclick={() => {
// Placeholder for function calls to update Novi data
console.log('Re-sync Novi Data button clicked. Implement as needed.');
}}
onclick={handle_novi_resync}
title="Re-synchronize Novi data"
>
<span class="fas fa-sync" aria-hidden="true"></span>
@@ -907,9 +935,9 @@
}
.jitsi-tools {
z-index: 1000;
z-index: 10;
position: fixed;
bottom: 6em;
bottom: 10em;
right: 20px;
/* background-color: rgba(255, 255, 255, 0.8); */
padding: 10px;

169
src/routes/idaa/jitsi_reports/+page.svelte
View File

@@ -20,86 +20,101 @@
<div class="p-4 space-y-4">
<h1 class="h1">Jitsi Meeting Reports</h1>
{#if data.meetings && data.meetings.length > 0}
<div class="space-y-2">
{#each data.meetings as meeting (meeting.meeting_id)}
<div class="card card-hover">
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<header class="card-header p-2 cursor-pointer" onclick={() => toggle_accordion(meeting.meeting_id)}>
<div class="flex justify-between items-center w-full">
<div class="flex-1">
<!-- NOTE: Normally I would the "h3" class, but Novi classes make things look odd. -->
<h3 class="text-base">{meeting.room_name}</h3>
<p class="text-sm text-gray-500">{new Date(meeting.start_time).toLocaleString()}</p>
{#await data.streamed.meetings}
<div class="space-y-4 animate-pulse">
<div class="h-12 w-full bg-gray-200 dark:bg-gray-700 rounded"></div>
<div class="h-12 w-full bg-gray-200 dark:bg-gray-700 rounded"></div>
<div class="h-12 w-full bg-gray-200 dark:bg-gray-700 rounded"></div>
<div class="h-12 w-full bg-gray-200 dark:bg-gray-700 rounded"></div>
</div>
{:then meetings}
{#if meetings && meetings.length > 0}
<div class="space-y-2">
{#each meetings as meeting (meeting.meeting_id)}
<div class="card card-hover">
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<header class="card-header p-2 cursor-pointer" onclick={() => toggle_accordion(meeting.meeting_id)}>
<div class="flex justify-between items-center w-full">
<div class="flex-1">
<!-- NOTE: Normally I would the "h3" class, but Novi classes make things look odd. -->
<h3 class="text-base">{meeting.room_name}</h3>
<p class="text-sm text-gray-500">{new Date(meeting.start_time).toLocaleString()}</p>
</div>
<div class="flex-none flex items-center space-x-4 text-sm mr-4">
<span>Duration: {meeting.final_duration}</span>
<span>Participants: {meeting.final_participant_count}</span>
</div>
<div class="flex-none">
<span class="transition-transform duration-200" class:rotate-180={open_accordions[meeting.meeting_id]}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</span>
</div>
</div>
<div class="flex-none flex items-center space-x-4 text-sm mr-4">
<span>Duration: {meeting.final_duration}</span>
<span>Participants: {meeting.final_participant_count}</span>
</div>
<div class="flex-none">
<span class="transition-transform duration-200" class:rotate-180={open_accordions[meeting.meeting_id]}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</span>
</div>
</div>
</header>
{#if open_accordions[meeting.meeting_id]}
<div class="p-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<!-- NOTE: Normally I would the "h4" class, but Novi classes make things look odd. -->
<h4 class="text-base">Event Timeline</h4>
{#if meeting.events && meeting.events.length > 0}
<ul class="list-disc list-inside space-y-2 mt-2">
{#each meeting.events as event}
<li>
<span class="font-mono text-xs">[{new Date(event.timestamp).toLocaleTimeString()}]</span>
<span class="font-semibold">{ae_util.to_title_case(event.action.replace('jitsi_meeting_', ''))}</span>
{#if event.details.full_name}
- by {event.details.full_name}
{/if}
</li>
{/each}
</ul>
{:else}
<p class="text-gray-500 italic mt-2">No discrete events recorded.</p>
{/if}
</div>
<div>
<!-- NOTE: Normally I would the "h4" class, but Novi classes make things look odd. -->
<h4 class="text-base">Final Participants</h4>
{#if meeting.final_participants && meeting.final_participants.length > 0}
<div class="table-container mt-2">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
{#each meeting.final_participants as participant}
</header>
{#if open_accordions[meeting.meeting_id]}
<div class="p-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<!-- NOTE: Normally I would the "h4" class, but Novi classes make things look odd. -->
<h4 class="text-base">Event Timeline</h4>
{#if meeting.events && meeting.events.length > 0}
<ul class="list-disc list-inside space-y-2 mt-2">
{#each meeting.events as event}
<li>
<span class="font-mono text-xs">[{new Date(event.timestamp).toLocaleTimeString()}]</span>
<span class="font-semibold">{ae_util.to_title_case(event.action.replace('jitsi_meeting_', ''))}</span>
{#if event.details.full_name}
- by {event.details.full_name}
{/if}
</li>
{/each}
</ul>
{:else}
<p class="text-gray-500 italic mt-2">No discrete events recorded.</p>
{/if}
</div>
<div>
<!-- NOTE: Normally I would the "h4" class, but Novi classes make things look odd. -->
<h4 class="text-base">Final Participants</h4>
{#if meeting.final_participants && meeting.final_participants.length > 0}
<div class="table-container mt-2">
<table class="table table-hover">
<thead>
<tr>
<td>{participant.displayName}</td>
<td>{ae_util.to_title_case(participant.role)}</td>
<th>Name</th>
<th>Role</th>
</tr>
{/each}
</tbody>
</table>
</div>
{:else}
<p class="text-gray-500 italic mt-2">No participant data available.</p>
{/if}
</thead>
<tbody>
{#each meeting.final_participants as participant}
<tr>
<td>{participant.displayName}</td>
<td>{ae_util.to_title_case(participant.role)}</td>
</tr>
{/each}
</tbody>
</table>
</div>
{:else}
<p class="text-gray-500 italic mt-2">No participant data available.</p>
{/if}
</div>
</div>
</div>
{/if}
</div>
{/each}
{/if}
</div>
{/each}
</div>
{:else}
<div class="card p-4 text-center">
<h3 class="h3">No Meeting Reports Found</h3>
<p>There are no Jitsi activity logs to display.</p>
</div>
{/if}
{:catch error}
<div class="card p-4 bg-red-100 text-red-900 border-l-4 border-red-500">
<h3 class="h3 font-bold">Error Loading Reports</h3>
<p>An error occurred while fetching the meeting reports:</p>
<pre class="mt-2 text-xs overflow-auto">{error.message}</pre>
</div>
{:else}
<div class="card p-4 text-center">
<h3 class="h3">No Meeting Reports Found</h3>
<p>There are no Jitsi activity logs to display.</p>
</div>
{/if}
{/await}
</div>

10
src/routes/idaa/jitsi_reports/+page.ts
View File

@@ -12,17 +12,21 @@ export const load: PageLoad = async ({ fetch }) => {
if (!api_cfg || !account_id) {
console.error('API config or Account ID not available for loading Jitsi reports.');
return {
meetings: []
streamed: {
meetings: Promise.resolve([])
}
};
}
const meetings = await load_jitsi_report({
const meetings_promise = load_jitsi_report({
api_cfg,
account_id,
log_lvl: 1
});
return {
meetings
streamed: {
meetings: meetings_promise
}
};
};