feat: add hide_ae_menu toggle to Jitsi URL builder advanced panel
Adds ae_hide_menu=true query param option to suppress the AE navigation chrome when embedding the Jitsi video conference page in Novi or other host pages that provide their own navigation. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
@@ -5,9 +5,18 @@
|
||||
|
||||
// --- Environment presets ---
|
||||
const BASE_URL_OPTIONS = [
|
||||
{ label: 'Production', value: 'https://sk-idaa.oneskyit.com/idaa/video_conferences' },
|
||||
{ label: 'Dev / Staging', value: 'https://dev-idaa.oneskyit.com/idaa/video_conferences' },
|
||||
{ label: 'Local', value: 'http://idaa.localhost:5173/idaa/video_conferences' },
|
||||
{
|
||||
label: 'Production',
|
||||
value: 'https://sk-idaa.oneskyit.com/idaa/video_conferences'
|
||||
},
|
||||
{
|
||||
label: 'Dev / Staging',
|
||||
value: 'https://dev-idaa.oneskyit.com/idaa/video_conferences'
|
||||
},
|
||||
{
|
||||
label: 'Local',
|
||||
value: 'http://idaa.localhost:5173/idaa/video_conferences'
|
||||
},
|
||||
{ label: 'Custom…', value: 'custom' }
|
||||
];
|
||||
|
||||
@@ -48,11 +57,13 @@
|
||||
p.set('key', site_key.trim() || 'restricted-access');
|
||||
p.set('room', room_name.trim());
|
||||
if (is_moderator) p.set('moderator', 'true');
|
||||
if (domain.trim() && domain.trim() !== 'jitsi.dgrzone.com') p.set('domain', domain.trim());
|
||||
if (domain.trim() && domain.trim() !== 'jitsi.dgrzone.com')
|
||||
p.set('domain', domain.trim());
|
||||
if (start_muted) p.set('start_muted', 'true');
|
||||
if (start_hidden) p.set('start_hidden', 'true');
|
||||
if (disable_incoming_msg) p.set('incoming_msg_sound', 'true');
|
||||
if (disable_participant_joined) p.set('participant_joined_sound', 'true');
|
||||
if (disable_participant_joined)
|
||||
p.set('participant_joined_sound', 'true');
|
||||
if (disable_participant_left) p.set('participant_left_sound', 'true');
|
||||
if (disable_reaction) p.set('reaction_sound', 'true');
|
||||
if (disable_raise_hand) p.set('raise_hand_sound', 'true');
|
||||
@@ -74,7 +85,9 @@
|
||||
></iframe>
|
||||
</p>`);
|
||||
|
||||
let output = $derived(output_mode === 'iframe' ? iframe_snippet : built_url);
|
||||
let output = $derived(
|
||||
output_mode === 'iframe' ? iframe_snippet : built_url
|
||||
);
|
||||
|
||||
function copy_output() {
|
||||
if (!output) return;
|
||||
@@ -86,11 +99,13 @@
|
||||
</script>
|
||||
|
||||
<div class="space-y-3 text-sm">
|
||||
|
||||
<!-- Environment + Room (always visible) -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label for="jub_base_url" class="block text-xs uppercase tracking-wide opacity-40 mb-1">
|
||||
<label
|
||||
for="jub_base_url"
|
||||
class="block text-xs uppercase tracking-wide opacity-40 mb-1"
|
||||
>
|
||||
Environment
|
||||
</label>
|
||||
<select
|
||||
@@ -112,7 +127,10 @@
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<label for="jub_room" class="block text-xs uppercase tracking-wide opacity-40 mb-1">
|
||||
<label
|
||||
for="jub_room"
|
||||
class="block text-xs uppercase tracking-wide opacity-40 mb-1"
|
||||
>
|
||||
Room Name <span class="text-error-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
@@ -128,7 +146,10 @@
|
||||
<!-- UUID + Key -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label for="jub_uuid" class="block text-xs uppercase tracking-wide opacity-40 mb-1">
|
||||
<label
|
||||
for="jub_uuid"
|
||||
class="block text-xs uppercase tracking-wide opacity-40 mb-1"
|
||||
>
|
||||
Novi UUID <span class="opacity-60">(blank = guest)</span>
|
||||
</label>
|
||||
<input
|
||||
@@ -140,7 +161,10 @@
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="jub_key" class="block text-xs uppercase tracking-wide opacity-40 mb-1">
|
||||
<label
|
||||
for="jub_key"
|
||||
class="block text-xs uppercase tracking-wide opacity-40 mb-1"
|
||||
>
|
||||
Site Key
|
||||
</label>
|
||||
<input
|
||||
@@ -154,9 +178,15 @@
|
||||
|
||||
<!-- Moderator toggle -->
|
||||
<label class="flex items-center gap-2 cursor-pointer w-fit">
|
||||
<input type="checkbox" bind:checked={is_moderator} class="checkbox checkbox-sm" />
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={is_moderator}
|
||||
class="checkbox checkbox-sm"
|
||||
/>
|
||||
<span class="text-sm">Moderator</span>
|
||||
<span class="text-xs opacity-40">(requests JWT, enables lobby + activity logging)</span>
|
||||
<span class="text-xs opacity-40"
|
||||
>(requests JWT, enables lobby + activity logging)</span
|
||||
>
|
||||
</label>
|
||||
|
||||
<!-- Advanced toggle -->
|
||||
@@ -165,15 +195,23 @@
|
||||
onclick={() => (show_advanced = !show_advanced)}
|
||||
class="flex items-center gap-1 text-xs opacity-60 hover:opacity-100 transition-opacity"
|
||||
>
|
||||
<span class="fas {show_advanced ? 'fa-chevron-up' : 'fa-chevron-down'}" aria-hidden="true"></span>
|
||||
<span
|
||||
class="fas {show_advanced ? 'fa-chevron-up' : 'fa-chevron-down'}"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
{show_advanced ? 'Hide' : 'Show'} advanced options
|
||||
</button>
|
||||
|
||||
{#if show_advanced}
|
||||
<div class="border border-surface-200-800 rounded-xl p-3 space-y-3 bg-surface-100-900">
|
||||
<div
|
||||
class="border border-surface-200-800 rounded-xl p-3 space-y-3 bg-surface-100-900"
|
||||
>
|
||||
<!-- Domain -->
|
||||
<div>
|
||||
<label for="jub_domain" class="block text-xs uppercase tracking-wide opacity-40 mb-1">
|
||||
<label
|
||||
for="jub_domain"
|
||||
class="block text-xs uppercase tracking-wide opacity-40 mb-1"
|
||||
>
|
||||
Jitsi Domain
|
||||
</label>
|
||||
<input
|
||||
@@ -184,22 +222,36 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- AE menu toggle -->
|
||||
<div>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" bind:checked={hide_ae_menu} class="checkbox checkbox-sm" />
|
||||
<span class="text-xs">Hide AE system menu (for embed)</span>
|
||||
<!-- AE menu — hides the AE nav chrome; useful when embedding in Novi or pages with their own navigation -->
|
||||
<label class="flex items-center gap-2 cursor-pointer w-fit">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={hide_ae_menu}
|
||||
class="checkbox checkbox-sm"
|
||||
/>
|
||||
<span class="text-xs"
|
||||
>Hide AE system menu <span class="opacity-40"
|
||||
>(ae_hide_menu=true)</span
|
||||
></span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Start options -->
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" bind:checked={start_muted} class="checkbox checkbox-sm" />
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={start_muted}
|
||||
class="checkbox checkbox-sm"
|
||||
/>
|
||||
<span class="text-xs">Start muted</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" bind:checked={start_hidden} class="checkbox checkbox-sm" />
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={start_hidden}
|
||||
class="checkbox checkbox-sm"
|
||||
/>
|
||||
<span class="text-xs">Start hidden (video off)</span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -211,30 +263,62 @@
|
||||
onclick={() => (show_sound = !show_sound)}
|
||||
class="flex items-center gap-1 text-xs opacity-60 hover:opacity-100 transition-opacity"
|
||||
>
|
||||
<span class="fas {show_sound ? 'fa-chevron-up' : 'fa-chevron-down'}" aria-hidden="true"></span>
|
||||
<span
|
||||
class="fas {show_sound
|
||||
? 'fa-chevron-up'
|
||||
: 'fa-chevron-down'}"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
{show_sound ? 'Hide' : 'Show'} sound settings
|
||||
</button>
|
||||
{#if show_sound}
|
||||
<div class="flex flex-wrap gap-4 mt-2">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" bind:checked={disable_incoming_msg} class="checkbox checkbox-sm" />
|
||||
<span class="text-xs">Disable incoming msg sound</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={disable_incoming_msg}
|
||||
class="checkbox checkbox-sm"
|
||||
/>
|
||||
<span class="text-xs"
|
||||
>Disable incoming msg sound</span
|
||||
>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" bind:checked={disable_participant_joined} class="checkbox checkbox-sm" />
|
||||
<span class="text-xs">Disable participant joined sound</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={disable_participant_joined}
|
||||
class="checkbox checkbox-sm"
|
||||
/>
|
||||
<span class="text-xs"
|
||||
>Disable participant joined sound</span
|
||||
>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" bind:checked={disable_participant_left} class="checkbox checkbox-sm" />
|
||||
<span class="text-xs">Disable participant left sound</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={disable_participant_left}
|
||||
class="checkbox checkbox-sm"
|
||||
/>
|
||||
<span class="text-xs"
|
||||
>Disable participant left sound</span
|
||||
>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" bind:checked={disable_reaction} class="checkbox checkbox-sm" />
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={disable_reaction}
|
||||
class="checkbox checkbox-sm"
|
||||
/>
|
||||
<span class="text-xs">Disable reaction sound</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" bind:checked={disable_raise_hand} class="checkbox checkbox-sm" />
|
||||
<span class="text-xs">Disable raise hand sound</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={disable_raise_hand}
|
||||
class="checkbox checkbox-sm"
|
||||
/>
|
||||
<span class="text-xs">Disable raise hand sound</span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -249,7 +333,9 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (output_mode = 'url')}
|
||||
class="btn btn-sm {output_mode === 'url' ? 'preset-tonal-primary' : 'preset-tonal-surface border border-surface-200-800'}"
|
||||
class="btn btn-sm {output_mode === 'url'
|
||||
? 'preset-tonal-primary'
|
||||
: 'preset-tonal-surface border border-surface-200-800'}"
|
||||
>
|
||||
<span class="fas fa-link mr-1" aria-hidden="true"></span>
|
||||
URL
|
||||
@@ -257,7 +343,9 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (output_mode = 'iframe')}
|
||||
class="btn btn-sm {output_mode === 'iframe' ? 'preset-tonal-primary' : 'preset-tonal-surface border border-surface-200-800'}"
|
||||
class="btn btn-sm {output_mode === 'iframe'
|
||||
? 'preset-tonal-primary'
|
||||
: 'preset-tonal-surface border border-surface-200-800'}"
|
||||
>
|
||||
<span class="fas fa-code mr-1" aria-hidden="true"></span>
|
||||
iframe HTML
|
||||
@@ -278,9 +366,14 @@
|
||||
type="button"
|
||||
onclick={copy_output}
|
||||
title="Copy to clipboard"
|
||||
class="btn btn-sm shrink-0 self-start {copied ? 'preset-tonal-success' : 'preset-tonal-primary'} transition-colors"
|
||||
class="btn btn-sm shrink-0 self-start {copied
|
||||
? 'preset-tonal-success'
|
||||
: 'preset-tonal-primary'} transition-colors"
|
||||
>
|
||||
<span class="fas {copied ? 'fa-check' : 'fa-copy'}" aria-hidden="true"></span>
|
||||
<span
|
||||
class="fas {copied ? 'fa-check' : 'fa-copy'}"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</button>
|
||||
</div>
|
||||
{#if output_mode === 'url'}
|
||||
@@ -290,13 +383,15 @@
|
||||
rel="noopener noreferrer"
|
||||
class="text-xs text-primary-600 dark:text-primary-400 hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
<span class="fas fa-external-link-alt" aria-hidden="true"></span>
|
||||
<span class="fas fa-external-link-alt" aria-hidden="true"
|
||||
></span>
|
||||
Open in new tab
|
||||
</a>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="text-xs opacity-40 italic">Fill in Room Name to generate a URL.</p>
|
||||
<p class="text-xs opacity-40 italic">
|
||||
Fill in Room Name to generate a URL.
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user