Saving my work while we working on making the Jitsi integration better.

src/routes/idaa/(idaa)/video_conferences/+page.svelte

@@ -22,6 +22,12 @@
 	let jitsi_api: any = null;
 	const jitsi_container_id = 'jitsi_meet_external_api_container';
 
+	let disable_incoming_msg_sound: boolean = $state(true);
+	let disable_participant_joined_sound: boolean = $state(false); // NOTE: Disable by default
+	let disable_participant_left_sound: boolean = $state(false);
+	let disable_reaction_sound: boolean = $state(true); // NOTE: Disable by default
+	let disable_raise_hand_sound: boolean = $state(true); // NOTE: Disable by default
+
 	let name_input: string = $state('');
 
 	async function handle_name_update() {
@@ -99,6 +105,13 @@
 		room_name = url_params.room ?? 'Default-Room';
 		domain = url_params.domain ?? 'jitsi.dgrzone.com';
 
+		// Initialize sound settings from URL params
+		disable_incoming_msg_sound = url_params.incoming_msg_sound === 'true';
+		disable_participant_joined_sound = url_params.participant_joined_sound === 'true';
+		disable_participant_left_sound = url_params.participant_left_sound === 'true';
+		disable_reaction_sound = url_params.reaction_sound === 'true';
+		disable_raise_hand_sound = url_params.raise_hand_sound === 'true';
+
 		console.log(
 			`Jitsi: Initial data: user_id: ${user_id}, display_name: ${display_name}, email: ${email}, room_name: ${room_name}, domain: ${domain}`
 		);
@@ -321,11 +334,11 @@
 		}
 
 		const disabled_sounds = [
-			url_params.incoming_msg_sound === 'true' ? 'INCOMING_MSG_SOUND' : null,
+			disable_incoming_msg_sound ? 'INCOMING_MSG_SOUND' : null,
-			url_params.participant_joined_sound === 'true' ? 'PARTICIPANT_JOINED_SOUND' : null,
+			disable_participant_joined_sound ? 'PARTICIPANT_JOINED_SOUND' : null,
-			url_params.participant_left_sound === 'true' ? 'PARTICIPANT_LEFT_SOUND' : null,
+			disable_participant_left_sound ? 'PARTICIPANT_LEFT_SOUND' : null,
-			url_params.reaction_sound === 'true' ? 'REACTION_SOUND' : null,
+			disable_reaction_sound ? 'REACTION_SOUND' : null,
-			url_params.raise_hand_sound === 'true' ? 'RAISE_HAND_SOUND' : null
+			disable_raise_hand_sound ? 'RAISE_HAND_SOUND' : null
 		].filter((sound) => sound);
 
 		const options = {
@@ -366,15 +379,16 @@
 {/if}
 
 
-<div class="jitsi-tools text-sm max-w-xl outline">
 {#if show_jitsi_tools}
+<div class="jitsi-tools text-sm max-w-xl outline">
+{#if expand_jitsi_tools}
 	<!-- 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="px-2 py-1 bg-red-200 text-white rounded hover:bg-red-400"
-			onclick={() => (show_jitsi_tools = false)}
+			onclick={() => (expand_jitsi_tools = false)}
 		>
 			<span class="fas fa-times" aria-hidden="true"></span>
 			<span class="sr-only">Close Jitsi Tools</span>
@@ -402,7 +416,7 @@
 		/>
 		<button
 			onclick={handle_name_update}
-			class="px-2 py-1 bg-green-500 text-white rounded hover:bg-green-600"
+			class="px-2 py-1 bg-green-200 text-white rounded hover:bg-green-400"
 		>
 			<span class="fas fa-user-edit" aria-hidden="true"></span>
 			Update
@@ -419,59 +433,136 @@
 			"
 		>
 	<strong>Jitsi Sound Settings:</strong>
-	<label>
+
-		<input type="checkbox" id="incoming_msg_sound_checkbox" checked disabled />
+	<!-- WARNING: Fully disables the Play sound on option in the Jitsi > Settings > Notifications tab. -->
-		Disable Incoming Message Sound
+	<label class="flex items-center space-x-2 mt-1">
+		<input
+			type="checkbox"
+			bind:checked={disable_incoming_msg_sound}
+			disabled={!is_moderator}
+			onchange={init_jitsi}
+		/>
+		<span>Disable Incoming Message Sound</span>
 	</label>
 
-	<label>
+	<label class="flex items-center space-x-2 mt-1">
-		<input type="checkbox" id="participant_joined_sound_checkbox" disabled />
+		<input
-		Disable Participant Joined Sound
+			type="checkbox"
+			bind:checked={disable_participant_joined_sound}
+			disabled={!is_moderator}
+			onchange={init_jitsi}
+		/>
+		<span>Disable Participant Joined Sound</span>
 	</label>
 
-	<label>
+	<label class="flex items-center space-x-2 mt-1">
-		<input type="checkbox" id="participant_left_sound_checkbox" disabled />
+		<input
-		Disable Participant Left Sound
+			type="checkbox"
+			bind:checked={disable_participant_left_sound}
+			disabled={!is_moderator}
+			onchange={init_jitsi}
+		/>
+		<span>Disable Participant Left Sound</span>
 	</label>
 
-	<label>
+	<!-- FUTURE: Under Notifications: Talk while muted -->
-		<input type="checkbox" id="reaction_sound_checkbox" checked disabled />
+
-		Disable Reaction Sound
+	<!-- FUTURE: Under Notifications: Participant entered lobby -->
+
+	<!--
+	FUTURE: Under Moderator:
+	"Everyone starts muted"
+	"Everyone starts hidden"
+	"Everyone follows me"
+	"Recorder follows me"
+	-->
+
+	<!-- WARNING: This does not seem to work. It should be unchecking Moderator options under Jitsi > Settings > Moderator tab. -->
+	<!-- NOTE: This does not seem to work as expected. It does not seem to do anything at all? -->
+	<label class="flex items-center space-x-2 mt-1">
+		<input
+			type="checkbox"
+			bind:checked={disable_reaction_sound}
+			disabled={!is_moderator}
+			onchange={init_jitsi}
+		/>
+		<!-- Full text from Jitsi Settings popup: "Mute reaction sounds for everyone" -->
+		<span>Disable Reaction Sound</span>
 	</label>
-	<label>
+
-		<input type="checkbox" id="raise_hand_sound_checkbox" checked disabled />
+	<!-- WARNING: What does this correspond to in the Jitsi settings? -->
-		Disable Raise Hand Sound
+	<!-- NOTE: This does not seem to work as expected. It does not seem to do anything at all? -->
+	<label class="flex items-center space-x-2 mt-1">
+		<input
+			type="checkbox"
+			bind:checked={disable_raise_hand_sound}
+			disabled={!is_moderator}
+			onchange={init_jitsi}
+		/>
+		<span>Disable Raise Hand Sound</span>
 	</label>
 	</div>
 
+	<div class="mt-2 pt-2 border-t-2 border-dashed border-gray-400">
+
 	<button
-		class="mt-2 px-2 py-1 bg-orange-500 text-white rounded hover:bg-orange-600"
+		class="mt-2 px-2 py-1 bg-orange-200 text-white rounded hover:bg-orange-400"
 		onclick={() => init_jitsi()}
 	>
+		<span class="fas fa-redo" aria-hidden="true"></span>
 		Re-initialize Jitsi
 	</button>
 
 	<button
-		class="mt-2 px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"
+		onclick={() => jitsi_api && jitsi_api.executeCommand('endMeeting')}
+		class="mt-2 px-2 py-1 bg-red-200 text-white rounded hover:bg-red-400"
+	>
+		<span class="fas fa-phone-slash" aria-hidden="true"></span>
+		End Meeting for *All*
+	</button>
+
+	<button
+		onclick={() => (show_jitsi_container = !show_jitsi_container)}
+		class="mt-2 px-2 py-1 bg-gray-200 text-white rounded hover:bg-gray-400"
+	>
+	{#if show_jitsi_container}
+		<span class="fas fa-video-slash" aria-hidden="true"></span>
+		Hide
+		{:else}
+		<span class="fas fa-video" aria-hidden="true"></span>
+		Show
+		{/if}
+		Jitsi Meeting
+		<span class="sr-only">Container</span>
+	</button>
+
+	<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.');
 		}}
 	>
+		<span class="fas fa-sync" aria-hidden="true"></span>
 		Re-sync Novi Data
 	</button>
 
+	</div>
+
 {:else}
 	<button
 		class="px-2 py-1 bg-red-200 text-white rounded hover:bg-red-400"
-		onclick={() => (show_jitsi_tools = true)}
+		onclick={() => (expand_jitsi_tools = true)}
 		aria-label="Open Jitsi Tools"
+		title="Open Jitsi tools and settings for IDAA Jitsi meetings"
 	>
 		<span class="fas fa-tools" aria-hidden="true"></span>
 		<span class="sr-only">Open Jitsi Tools</span>
 	</button>
 {/if}
 </div>
+{/if}
+
 
 <style>
 	.jitsi-container {