feat(hosted-files): introduce direct download mode and automate filename shortening

- Add 'show_direct_download' prop to support native browser downloads via V3 Action paths (/v3/action/...).
- Integrate 'shorten_filename' logic directly into the component via 'max_filename' prop.
- Refactor internal UI to snippets for consistent rendering across button and anchor modes.
- Update 'ae_HostedFile' type with new SQL view fields: 'filename_no_ext' and 'filename_w_ext'.
- Add direct download toggle and edit mode indicator to testing dashboard.
- Simplify 'ae_comp__event_file_obj_tbl' by removing manual snippets in favor of standardized component logic.
This commit is contained in:
Scott Idem
2026-02-03 15:20:32 -05:00
parent 671247e783
commit 6634c9aef0
4 changed files with 168 additions and 119 deletions

View File

@@ -9,6 +9,9 @@
let large_file_obj: any = $state(null);
let loading = $state(true);
// Testing Toggles
let test_direct_download = $state(false);
const LARGE_FILE_ID = 'sPw1he_RGCW';
const test_ids = [
'QpyZNtEb2LQBmNJPQU_aOA', // small.mp4
@@ -64,13 +67,32 @@
<!-- Outer wrapper to enable scrolling if parent is overflow-hidden -->
<div class="h-full w-full overflow-y-auto overflow-x-hidden bg-transparent">
<div class="container mx-auto p-4 space-y-8 pb-20">
<header class="flex justify-between items-center bg-surface-50-900-token p-6 rounded-container shadow-xl border border-gray-500">
<header class="flex flex-col md:flex-row justify-between items-start md:items-center bg-surface-50-900-token p-6 rounded-container shadow-xl border border-gray-500 gap-4">
<div class="space-y-1">
<h1 class="h1 flex items-center gap-3">
<Lucide.Download class="text-primary-500" /> Hosted Files Testing
</h1>
<p class="opacity-60 text-sm">Testing the AE_Comp_Hosted_Files_Download_Button component</p>
</div>
<div class="flex flex-wrap gap-3 items-center bg-black/20 p-3 rounded-lg border border-white/10">
<div class="flex items-center gap-2 pr-3 border-r border-white/10">
<span class="text-[10px] font-bold uppercase opacity-50">Edit Mode</span>
<span class="badge {$ae_loc.edit_mode ? 'variant-filled-success' : 'variant-filled-surface'}">
{$ae_loc.edit_mode ? 'ON' : 'OFF'}
</span>
</div>
<div class="flex items-center gap-3">
<span class="text-[10px] font-bold uppercase opacity-50">Direct Download</span>
<button
class="btn btn-sm {test_direct_download ? 'variant-filled-primary' : 'variant-soft-surface'}"
onclick={() => test_direct_download = !test_direct_download}
>
{test_direct_download ? 'Anchor Mode (<a>)' : 'Action Mode (<button>)'}
</button>
</div>
</div>
</header>
<!-- Dedicated Large File Section -->
@@ -79,7 +101,12 @@
<h2 class="h2 flex items-center gap-2">
<Lucide.Zap class="text-warning-500" /> Large File Progress Test
</h2>
<span class="badge variant-filled-warning animate-pulse">Testing Percentage</span>
<div class="flex gap-2">
<span class="badge variant-filled-warning animate-pulse">Testing Percentage</span>
{#if test_direct_download}
<span class="badge variant-filled-secondary">Direct Link</span>
{/if}
</div>
</header>
<p class="text-sm opacity-80 italic">
@@ -103,6 +130,7 @@
<AE_Comp_Hosted_Files_Download_Button
hosted_file_id={LARGE_FILE_ID}
hosted_file_obj={large_file_obj}
show_direct_download={test_direct_download}
variant="filled"
color="primary"
classes="w-full md:min-w-64 py-4"
@@ -138,6 +166,7 @@
<AE_Comp_Hosted_Files_Download_Button
hosted_file_id={file.id}
hosted_file_obj={file}
show_direct_download={test_direct_download}
variant="tonal"
color="primary"
classes="w-full"
@@ -149,6 +178,7 @@
<AE_Comp_Hosted_Files_Download_Button
hosted_file_id={file.id}
hosted_file_obj={file}
show_direct_download={test_direct_download}
variant="filled"
color="secondary"
classes="w-full"
@@ -160,6 +190,7 @@
<AE_Comp_Hosted_Files_Download_Button
hosted_file_id={file.id}
hosted_file_obj={file}
show_direct_download={test_direct_download}
variant="outline"
color="tertiary"
classes="w-full"
@@ -171,6 +202,7 @@
<AE_Comp_Hosted_Files_Download_Button
hosted_file_id={file.id}
hosted_file_obj={file}
show_direct_download={test_direct_download}
variant="ghost"
color="surface"
classes="w-full"
@@ -183,6 +215,7 @@
<AE_Comp_Hosted_Files_Download_Button
hosted_file_id={file.id}
hosted_file_obj={file}
show_direct_download={test_direct_download}
variant="tonal"
color="success"
classes="w-full mt-1"