Trying to improve the hosted file manage.

src/routes/hosted_files/+page.svelte

@@ -12,9 +12,14 @@ import type { key_val } from '$lib/ae_stores';
 
 import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte';
 import Comp_hosted_files_clip_video from '$lib/ae_core/ae_comp__hosted_files_clip_video.svelte';
+import Comp_hosted_files_clip_video_li from '$lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte';
+
+import Element_manage_hosted_file_li_wrap from '$lib/element_manage_hosted_file_li_all.svelte';
 
 let log_lvl = 1;
 
+let ae_promises: key_val = {};
+
 // export let container_class_li = [];
 
 let file_uploads_post_promise;
@@ -31,9 +36,53 @@ let hosted_file_upload: key_val = {
     // link_to_id: ae_loc.account_id,
     hosted_file_id_li: [],
     hosted_file_obj_li: [],
+    clip_complete: false,
     upload_complete: false,
+    submit_status: null,
 };
 
+let hosted_file_clip: key_val = {
+    video_clip_file_kv: {},
+    clip_complete: false,
+    submit_status: null,
+};
+
+if (!$ae_loc.files) {
+    $ae_loc.files = {};
+    $ae_loc.files.processed_file_kv = {};
+    $ae_loc.files.uploaded_file_kv = {};
+    $ae_loc.files.video_clip_file_kv = {};
+    // $ae_loc.files.uploaded_file_list = [];
+    // $ae_loc.files.video_clip_file_list = [];
+}
+if (!$ae_loc.files.processed_file_kv) {
+    $ae_loc.files.processed_file_kv = {};
+}
+
+$: if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_li) {
+    // Append this list to the $ae_loc.files.uploaded_file_li list
+    $ae_loc.files.uploaded_file_li = [
+        ...$ae_loc.files.uploaded_file_li,
+        ...$ae_sess.files.uploaded_file_li
+    ];
+}
+
+$: if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_kv) {
+    // Add this key-value pair to the $ae_loc.files.uploaded_file_kv object
+    $ae_loc.files.uploaded_file_kv = {
+        ...$ae_loc.files.uploaded_file_kv,
+        ...$ae_sess.files.uploaded_file_kv
+    };
+}
+
+$: if ($ae_sess.files.clip_complete && $ae_sess.files.video_clip_file_kv) {
+    // Add this key-value pair to the $ae_loc.files.video_clip_file_kv object
+    $ae_loc.files.video_clip_file_kv = {
+        ...$ae_loc.files.video_clip_file_kv,
+        ...$ae_sess.files.video_clip_file_kv
+    };
+}
+
 onMount(() => {
     console.log('Hosted Files: AV Utilities +page.svelte');
 });
@@ -170,7 +219,7 @@ function handle_submit_form(event) {
 
 
 <section
-    class="ae__hosted_files__av_util container space-y-4"
+    class="ae__hosted_files__av_util container space-y-4 pb-20"
     >
 
 <div class="border border-gray-200 p-2 rounded-lg">
@@ -184,7 +233,8 @@ function handle_submit_form(event) {
         link_to_id={$ae_loc.account_id}
         bind:hosted_file_id_li={hosted_file_upload.hosted_file_id_li}
         bind:hosted_file_obj_li={hosted_file_upload.hosted_file_obj_li}
-        bind:upload_complete={hosted_file_upload.upload_complete}
+        bind:hosted_file_obj_kv={$ae_sess.files.uploaded_file_kv}
+        bind:upload_complete={$ae_sess.files.upload_complete}
         log_lvl={log_lvl}
         >
         <span slot="label">
@@ -199,22 +249,80 @@ function handle_submit_form(event) {
         </span>
     </Comp_hosted_files_upload>
 
+
     <h2 class="h2">Step 2: Clip Video</h2>
-    {#if hosted_file_upload.upload_complete}
-    <Comp_hosted_files_clip_video
-        class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
-        link_to_type="account"
-        link_to_id={$ae_loc.account_id}
-        bind:hosted_file_id_li={hosted_file_upload.hosted_file_id_li}
-        bind:hosted_file_obj_li={hosted_file_upload.hosted_file_obj_li}
-        bind:upload_complete={hosted_file_upload.upload_complete}
-        log_lvl={log_lvl}
-        >
-    </Comp_hosted_files_clip_video>
+    {#if $ae_loc.files.uploaded_file_kv && Object.entries($ae_loc.files.uploaded_file_kv).length > 0}
+        <button
+            type="button"
+            onclick={() => {
+                $ae_loc.files.uploaded_file_kv = {};
+            }}
+            class="btn btn-sm variant-ghost-warning hover:variant-filled-warning float-right"
+            >
+            <span class="fas fa-broom"></span>
+            Clear Upload History
+        </button>
+        <Comp_hosted_files_clip_video
+            class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
+            link_to_type="account"
+            link_to_id={$ae_loc.account_id}
+            bind:hosted_file_id_li={hosted_file_clip.hosted_file_id_li}
+            bind:hosted_file_obj_li={hosted_file_clip.hosted_file_obj_li}
+            bind:hosted_file_obj_kv={$ae_loc.files.uploaded_file_kv}
+            bind:video_clip_file_kv={$ae_loc.files.video_clip_file_kv}
+            bind:clip_complete={$ae_sess.files.clip_complete}
+            bind:submit_status={hosted_file_clip.submit_status}
+            log_lvl={log_lvl}
+            >
+        </Comp_hosted_files_clip_video>
     {:else}
-        <p>Upload a video file to clip.</p>
+        <p>Upload a video file to clip first.</p>
     {/if}
 
+
+    <h2 class="h2">Step 3: Download Video Clips</h2>
+    {#if $ae_loc.files.video_clip_file_kv && Object.entries($ae_loc.files.video_clip_file_kv).length > 0}
+        <button
+            type="button"
+            onclick={() => {
+                $ae_loc.files.video_clip_file_kv = {};
+            }}
+            class="btn btn-sm variant-ghost-warning hover:variant-filled-warning float-right"
+            >
+            <span class="fas fa-broom"></span>
+            Clear Clip History
+        </button>
+        <Comp_hosted_files_clip_video_li
+            class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
+            link_to_type="account"
+            link_to_id={$ae_loc.account_id}
+            bind:video_clip_file_kv={$ae_loc.files.video_clip_file_kv}
+            log_lvl={log_lvl}
+            >
+        </Comp_hosted_files_clip_video_li>
+    {:else}
+        <p>Clip a video file first.</p>
+    {/if}
+
+
+    <!-- <hr /> -->
+
+    <!-- {$ae_sess.files?.uploaded_file_li?.length}&times; Files Upload History
+    History:
+    {#each Object.entries($ae_loc.files.uploaded_file_kv) as [hosted_file_id, hosted_file_obj]}
+        <div>
+            <span>{hosted_file_obj.hosted_file_id_random}</span>
+            <span>{hosted_file_obj.filename}</span>
+            <span>{hosted_file_obj.extension}</span>
+            <button
+                type="button"
+                class="btn btn-sm btn-primary"
+                >
+                Clip Video
+            </button>
+        </div>
+    {/each} -->
+
     <!-- <form on:submit|preventDefault={handle_submit_form_clip} class="av_util_mp4_clip form space-y-4"> -->
 
         <!-- <label class="label">Start time (HH:MM:SS) <input type="text" name="start_time" value="00:00:00" placeholder="HH:MM:SS (00:01:30)" class="input w-32" /></label>
@@ -251,11 +359,12 @@ function handle_submit_form(event) {
 </div>
 
 
+{#if 1===2}
 
 <div class="border border-gray-200 p-2 rounded-lg hidden">
     <h2 class="h2">Convert mp3 to mp4</h2>
     <p>This AV utility will take an mp3 audio file and a static image template and create a mp4 video file. This process may take a few seconds to a handful of minutes. Please be patient while it is processing.</p>
-    <form on:submit|preventDefault={handle_submit_form} class="av_util_mp3_to_mp4 space-y-4">
+    <form onsubmit={handle_submit_form} class="av_util_mp3_to_mp4 space-y-4">
 
         <input type="text" name="title_part_1" value="Title Part 1" placeholder="Title Part 1" class="input" />
         <input type="text" name="title_part_2" value="Title Part 2" placeholder="Title Part 2" class="input" />
@@ -297,8 +406,22 @@ function handle_submit_form(event) {
     {/await}
 </div>
 
+{/if}
 
 
+
+<!-- Show files for this account -->
+<Element_manage_hosted_file_li_wrap
+    link_to_type={'account'}
+    link_to_id={$ae_loc?.account_id}
+    allow_basic={true}
+    allow_moderator={true}
+    container_class_li={''}
+    />
+
+
+The end
+
 </section>