feat(hosted-files): enhance download component with style variants and robust progress states
- refactor(ae_comp__hosted_files_download_button): add 'variant' (tonal, filled, outline, ghost) and 'color' props. - fix(ae_comp__hosted_files_download_button): ensure Tailwind bundles variant classes using a literal lookup map. - fix(ae_comp__hosted_files_download_button): prevent premature "Failed to download" message during initialization. - feat(testing): add comprehensive Hosted Files testing dashboard at /testing/hosted_files with large file progress trials. - chore: remove legacy v1 download button component.
This commit is contained in:
Scott Idem
217
src/routes/testing/hosted_files/+page.svelte
Normal file
217
src/routes/testing/hosted_files/+page.svelte
Normal file
@@ -0,0 +1,217 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { load_ae_obj_id__hosted_file } from '$lib/ae_core/core__hosted_files';
|
||||
import AE_Comp_Hosted_Files_Download_Button from '$lib/ae_core/ae_comp__hosted_files_download_button.svelte';
|
||||
import * as Lucide from 'lucide-svelte';
|
||||
|
||||
let hosted_files: any[] = $state([]);
|
||||
let large_file_obj: any = $state(null);
|
||||
let loading = $state(true);
|
||||
|
||||
const LARGE_FILE_ID = 'sPw1he_RGCW';
|
||||
const test_ids = [
|
||||
'QpyZNtEb2LQBmNJPQU_aOA', // small.mp4
|
||||
'ZmMTrrqx8nTTY0Cj0wvA3Q', // Test PowerPoint video.pptx
|
||||
'e7NcV-275YPLQLoFMWuUZw', // Test PDF.pdf
|
||||
'INVALID_ID_TEST'
|
||||
];
|
||||
|
||||
onMount(async () => {
|
||||
// Load the large file specifically first
|
||||
large_file_obj = await load_ae_obj_id__hosted_file({
|
||||
api_cfg: $ae_api,
|
||||
hosted_file_id: LARGE_FILE_ID,
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
// Fallback for large file if API doesn't have it (for UI testing)
|
||||
if (!large_file_obj) {
|
||||
large_file_obj = {
|
||||
id: LARGE_FILE_ID,
|
||||
hosted_file_id: LARGE_FILE_ID,
|
||||
filename: 'Large_Test_File_Fallback.zip',
|
||||
extension: 'zip',
|
||||
hash_sha256: 'pending...'
|
||||
};
|
||||
}
|
||||
|
||||
const promises = test_ids.map(id =>
|
||||
load_ae_obj_id__hosted_file({
|
||||
api_cfg: $ae_api,
|
||||
hosted_file_id: id,
|
||||
log_lvl: 1
|
||||
})
|
||||
);
|
||||
|
||||
const results = await Promise.all(promises);
|
||||
hosted_files = results.filter((f: any) => f !== null) as any[];
|
||||
|
||||
// Add a fake object for the invalid ID test
|
||||
hosted_files.push({
|
||||
id: 'INVALID_ID_TEST',
|
||||
hosted_file_id: 'INVALID_ID_TEST',
|
||||
filename: 'non_existent_file.txt',
|
||||
extension: 'txt',
|
||||
hash_sha256: '0000000000'
|
||||
});
|
||||
|
||||
loading = false;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<!-- 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">
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<!-- Dedicated Large File Section -->
|
||||
<div class="card p-6 variant-soft-primary border-2 border-primary-500 shadow-xl space-y-4">
|
||||
<header class="flex justify-between items-center border-b border-primary-500/30 pb-2">
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<p class="text-sm opacity-80 italic">
|
||||
Use this file to verify the <strong>percentage counter</strong> and <strong>loading spinner</strong>.
|
||||
This file is ~100MB+, which should provide ample time to observe the progress state.
|
||||
</p>
|
||||
|
||||
{#if large_file_obj}
|
||||
<div class="bg-black/20 p-4 rounded-container border border-primary-500/20 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="p-3 bg-primary-500/20 rounded-lg">
|
||||
<Lucide.FileArchive size={32} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-lg">{large_file_obj.filename}</h3>
|
||||
<p class="text-xs font-mono opacity-50">ID: {LARGE_FILE_ID}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-auto">
|
||||
<AE_Comp_Hosted_Files_Download_Button
|
||||
hosted_file_id={LARGE_FILE_ID}
|
||||
hosted_file_obj={large_file_obj}
|
||||
variant="filled"
|
||||
color="primary"
|
||||
classes="w-full md:min-w-64 py-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="card p-6 variant-soft-surface space-y-4 border border-gray-500 shadow-lg">
|
||||
<h2 class="h2">Style & Variant Trials</h2>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex items-center gap-2 py-10 justify-center">
|
||||
<Lucide.Loader2 class="animate-spin" />
|
||||
<span>Loading test metadata gallery...</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{#each hosted_files as file}
|
||||
<div class="card p-4 variant-soft-secondary space-y-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="font-bold">{file.filename}</h3>
|
||||
<p class="text-xs opacity-60 font-mono">ID: {file.id}</p>
|
||||
</div>
|
||||
<span class="badge variant-filled-primary uppercase">{file.extension}</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-50 uppercase font-bold">Variant: Tonal</p>
|
||||
<AE_Comp_Hosted_Files_Download_Button
|
||||
hosted_file_id={file.id}
|
||||
hosted_file_obj={file}
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
classes="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-50 uppercase font-bold">Variant: Filled</p>
|
||||
<AE_Comp_Hosted_Files_Download_Button
|
||||
hosted_file_id={file.id}
|
||||
hosted_file_obj={file}
|
||||
variant="filled"
|
||||
color="secondary"
|
||||
classes="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-50 uppercase font-bold">Variant: Outline</p>
|
||||
<AE_Comp_Hosted_Files_Download_Button
|
||||
hosted_file_id={file.id}
|
||||
hosted_file_obj={file}
|
||||
variant="outline"
|
||||
color="tertiary"
|
||||
classes="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] opacity-50 uppercase font-bold">Variant: Ghost</p>
|
||||
<AE_Comp_Hosted_Files_Download_Button
|
||||
hosted_file_id={file.id}
|
||||
hosted_file_obj={file}
|
||||
variant="ghost"
|
||||
color="surface"
|
||||
classes="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-2 border-t border-surface-500/20">
|
||||
<p class="text-[10px] opacity-50 uppercase font-bold">Custom Label Snippet:</p>
|
||||
<AE_Comp_Hosted_Files_Download_Button
|
||||
hosted_file_id={file.id}
|
||||
hosted_file_obj={file}
|
||||
variant="tonal"
|
||||
color="success"
|
||||
classes="w-full mt-1"
|
||||
>
|
||||
{#snippet label()}
|
||||
<Lucide.FileArchive size={16} class="mr-2" />
|
||||
<span>Download Source</span>
|
||||
{/snippet}
|
||||
</AE_Comp_Hosted_Files_Download_Button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="card p-6 variant-soft-warning border border-warning-500 shadow-lg">
|
||||
<h3 class="h3 font-bold text-warning-700 dark:text-warning-500 flex items-center gap-2">
|
||||
<Lucide.AlertTriangle size={20} /> Edge Case: Missing Metadata
|
||||
</h3>
|
||||
<p class="text-sm opacity-80 mt-2">
|
||||
Testing the component when <code>hosted_file_id</code> or <code>hosted_file_obj</code> is missing.
|
||||
</p>
|
||||
<div class="flex gap-4 mt-4">
|
||||
<AE_Comp_Hosted_Files_Download_Button
|
||||
hosted_file_id={null}
|
||||
hosted_file_obj={null}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user