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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user