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

Cleaning things up a little.

Browse Source
This commit is contained in:
Scott Idem
2025-12-15 14:47:38 -05:00
parent e09805ec50
commit 44364186ed
1 changed files with 117 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,6 +22,18 @@
let jitsi_api: any = null;
const jitsi_container_id = 'jitsi_meet_external_api_container';
let name_input: string = $state('');
async function handle_name_update() {
if (name_input && name_input.trim() !== '' && name_input !== display_name) {
console.log(`Jitsi: User updating name from "${display_name}" to "${name_input}"`);
display_name = name_input.trim();
await init_jitsi();
} else {
console.log('Jitsi: Name update skipped. New name is same as old or empty.');
}
}
async function get_jitsi_jwt(
display_name: string,
email: string,
@@ -134,6 +146,9 @@
console.warn('Jitsi: Novi API not configured. Skipping user details/moderator check.');
}
// Set initial value for the name input
name_input = display_name;
// --- All data fetched, now initialize Jitsi ---
await init_jitsi();
});
@@ -350,70 +365,113 @@
<div id="{jitsi_container_id}" class="jitsi-container"></div>
{/if}
<div class="jitsi-tools text-sm max-w-xl outline">
{#if show_jitsi_tools}
<div class="jitsi-tools text-sm max-w-xl">
<h1 class="text-base">Jitsi Tools and Settings</h1>
<ul>
{#if display_name && email}
<li class="z-50 bg-amber-50">{display_name} ({email})</li>
{/if}
<li>Room: {room_name}</li>
<li>Domain: {domain}</li>
<li>User ID: {user_id}</li>
<li>Moderator: {is_moderator ? 'Yes' : 'No'}</li>
</ul>
<!-- margin-top: 1.5em; border-top: 2px dashed #ccc; padding: 1em; background-color: pink; -->
<div
class="
mt-2 pt-2 border-t-2 border-dashed border-gray-400
flex flex-col lg:flex-row gap-05
"
>
<strong>Jitsi Sound Settings:</strong>
<label>
<input type="checkbox" id="incoming_msg_sound_checkbox" checked disabled />
Disable Incoming Message Sound
</label>
<label>
<input type="checkbox" id="participant_joined_sound_checkbox" disabled />
Disable Participant Joined Sound
</label>
<label>
<input type="checkbox" id="participant_left_sound_checkbox" disabled />
Disable Participant Left Sound
</label>
<label>
<input type="checkbox" id="reaction_sound_checkbox" checked disabled />
Disable Reaction Sound
</label>
<label>
<input type="checkbox" id="raise_hand_sound_checkbox" checked disabled />
Disable Raise Hand Sound
</label>
</div>
<!-- NOTE: This is a <div> instead of <header> to work with IDAA's Novi styles. -->
<div class="flex flex-row gap-1 items-center justify-between w-full">
<!-- NOTE: This is a <div> instead of <h1> to work with IDAA's Novi styles. -->
<div class="text-lg w-fit">IDAA Jitsi</div>
<button
class="mt-2 px-2 py-1 bg-orange-500 text-white rounded hover:bg-orange-600"
onclick={() => init_jitsi()}
class="px-2 py-1 bg-red-200 text-white rounded hover:bg-red-400"
onclick={() => (show_jitsi_tools = false)}
>
Re-initialize Jitsi
</button>
<button
class="mt-2 px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"
onclick={() => {
// Placeholder for function calls to update Novi data
console.log('Re-sync Novi Data button clicked. Implement as needed.');
}}
>
Re-sync Novi Data
<span class="fas fa-times" aria-hidden="true"></span>
<span class="sr-only">Close Jitsi Tools</span>
</button>
</div>
<ul>
{#if display_name && email}
<li class="bg-amber-50">{display_name} ({email})</li>
{/if}
<li>Room: <span class="text-sm font-mono">{room_name}</span></li>
<li>Domain: <span class="text-sm font-mono">{domain}</span></li>
<li>User ID: <span class="text-sm font-mono">{user_id}</span></li>
<li>Moderator: {is_moderator ? 'Yes' : 'No'}</li>
</ul>
<div class="mt-2 pt-2 border-t-2 border-dashed border-gray-400">
<label for="display_name_input" class="block font-bold">Change Name:</label>
<span class="w-full flex flex-row items-center justify-between gap-1">
<input
type="text"
id="display_name_input"
bind:value={name_input}
class="border rounded px-2 py-1 w-full"
placeholder="Enter new display name"
/>
<button
onclick={handle_name_update}
class="px-2 py-1 bg-green-500 text-white rounded hover:bg-green-600"
>
<span class="fas fa-user-edit" aria-hidden="true"></span>
Update
<span class="sr-only"> Display Name</span>
</button>
</span>
</div>
<!-- margin-top: 1.5em; border-top: 2px dashed #ccc; padding: 1em; background-color: pink; -->
<div
class="
mt-2 pt-2 border-t-2 border-dashed border-gray-400
flex flex-col lg:flex-row gap-05
"
>
<strong>Jitsi Sound Settings:</strong>
<label>
<input type="checkbox" id="incoming_msg_sound_checkbox" checked disabled />
Disable Incoming Message Sound
</label>
<label>
<input type="checkbox" id="participant_joined_sound_checkbox" disabled />
Disable Participant Joined Sound
</label>
<label>
<input type="checkbox" id="participant_left_sound_checkbox" disabled />
Disable Participant Left Sound
</label>
<label>
<input type="checkbox" id="reaction_sound_checkbox" checked disabled />
Disable Reaction Sound
</label>
<label>
<input type="checkbox" id="raise_hand_sound_checkbox" checked disabled />
Disable Raise Hand Sound
</label>
</div>
<button
class="mt-2 px-2 py-1 bg-orange-500 text-white rounded hover:bg-orange-600"
onclick={() => init_jitsi()}
>
Re-initialize Jitsi
</button>
<button
class="mt-2 px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"
onclick={() => {
// Placeholder for function calls to update Novi data
console.log('Re-sync Novi Data button clicked. Implement as needed.');
}}
>
Re-sync Novi Data
</button>
{:else}
<button
class="px-2 py-1 bg-red-200 text-white rounded hover:bg-red-400"
onclick={() => (show_jitsi_tools = true)}
aria-label="Open Jitsi Tools"
>
<span class="fas fa-tools" aria-hidden="true"></span>
<span class="sr-only">Open Jitsi Tools</span>
</button>
{/if}
</div>
<style>
.jitsi-container {
@@ -428,7 +486,7 @@
.jitsi-tools {
z-index: 1000;
position: fixed;
bottom: 20px;
bottom: 6em;
right: 20px;
background-color: rgba(255, 255, 255, 0.8);
padding: 10px;