From 39d0a210f310d54e423aa111f0bcd1adcccf3783 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Mon, 17 Mar 2025 19:38:38 -0400
Subject: [PATCH] Lots of work on file management and video processing
 (ffmpeg).

---
 .../ae_comp__hosted_files_clip_video.svelte   | 135 ++++++++---
 ...ae_comp__hosted_files_clip_video_li.svelte |  26 +-
 .../ae_comp__hosted_files_upload.svelte       |  42 ++--
 src/lib/ae_stores.ts                          |   1 +
 src/lib/ae_utils/ae_utils__datetime_format.ts |   6 +
 src/lib/element_manage_hosted_file_li.svelte  | 111 +++++++--
 .../element_manage_hosted_file_li_all.svelte  |  29 ++-
 src/routes/hosted_files/+layout.ts            |  14 +-
 src/routes/hosted_files/+page.svelte          | 228 +++++-------------
 9 files changed, 334 insertions(+), 258 deletions(-)

diff --git a/src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte b/src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte
index 14663912..1195e417 100644
--- a/src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte
+++ b/src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-export let log_lvl: number = 0;
+import { preventDefault } from 'svelte/legacy';
 
 // Imports
 // Import components and elements
@@ -13,34 +13,53 @@ import { ae_util } from '$lib/ae_utils/ae_utils';
 import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
 
 // Exports
-// Expecting these for link_to_type: 'event', 'event_location', 'archive_content', etc
-export let link_to_type: string;
-export let link_to_id: string;
+
 
 // export let input_name = 'file_list';
 // export let multiple: boolean = true;
 // export let required: boolean = true;
-// export let accept: string = 'audio/*, image/*, video/*, .bak, .cfg, .css, .csv, .doc, .docx, .gz, .htm, .html, .ini, .iso, .j2, .json, .key, .keynote, .md, .pdf, .ppt, .pptx, .rar, .rtf, .sql, .svelte, ttf, .txt, .xls, .xlsx, .xz, .zip, .bin, .dmg, .exe, .js, .msi, .php, .py, .sh';
 
-export let class_li_default: string = 'flex flex-col gap-1 items-center justify-center w-full max-w-2xl mx-auto my-1';
-export let class_li: string = '';
+
 // export let input_class_li: string[] = ['file_drop_area'];
-// export let table_class_li: string[] = ['table', 'table-sm', 'table-striped', 'table-hover' , 'text-sm'];
 
-export let clip_complete: boolean = false;
-// export let upload_complete: boolean = false;
-export let submit_status: null|string = null;
 
-export let hosted_file_id_li: string[] = [];
-export let hosted_file_obj_li: any[] = [];
-export let hosted_file_obj_kv: key_val = {};
-export let video_clip_file_kv: key_val = {};
+interface Props {
+    log_lvl?: number;
+    // Expecting these for link_to_type: 'event', 'event_location', 'archive_content', etc
+    link_to_type: string;
+    link_to_id: string;
+    // export let accept: string = 'audio/*, image/*, video/*, .bak, .cfg, .css, .csv, .doc, .docx, .gz, .htm, .html, .ini, .iso, .j2, .json, .key, .keynote, .md, .pdf, .ppt, .pptx, .rar, .rtf, .sql, .svelte, ttf, .txt, .xls, .xlsx, .xz, .zip, .bin, .dmg, .exe, .js, .msi, .php, .py, .sh';
+    class_li_default?: string;
+    class_li?: string;
+    // export let table_class_li: string[] = ['table', 'table-sm', 'table-striped', 'table-hover' , 'text-sm'];
+    clip_complete?: boolean;
+    // export let upload_complete: boolean = false;
+    submit_status?: null|string;
+    // hosted_file_id_li?: string[];
+    // hosted_file_obj_li?: any[];
+    hosted_file_obj_kv?: key_val;
+    video_clip_file_kv?: key_val;
+}
+
+let {
+    log_lvl = $bindable(0),
+    link_to_type = $bindable(),
+    link_to_id = $bindable(),
+    class_li_default = 'flex flex-col gap-1 items-center justify-center w-full max-w-2xl mx-auto my-1',
+    class_li = $bindable(''),
+    clip_complete = $bindable(false),
+    submit_status = $bindable(null),
+    // hosted_file_id_li = [],
+    // hosted_file_obj_li = [],
+    hosted_file_obj_kv = $bindable({}),
+    video_clip_file_kv = $bindable({})
+}: Props = $props();
 
 
 // Local Variables
 let task_id = link_to_id;
 // let input_file_list: any = null;
-let ae_promises: key_val = {};
+let ae_promises: key_val = $state({});
 // let ae_promises_clipping: key_val = {};
 // let ae_triggers: key_val = {};
 
@@ -79,6 +98,7 @@ function handle_clip_video(event) {
     $ae_loc.files.processed_file_kv[hosted_file_id].start_time = event.target.start_time.value;
     $ae_loc.files.processed_file_kv[hosted_file_id].end_time = event.target.end_time.value;
     $ae_loc.files.processed_file_kv[hosted_file_id].reencode = event.target.reencode.value;
+    $ae_loc.files.processed_file_kv[hosted_file_id].scale_down = event.target.scale_down.value;
     $ae_loc.files.processed_file_kv[hosted_file_id].new_filename = event.target.new_filename.value;
     $ae_loc.files.processed_file_kv[hosted_file_id].clip_complete = false;
 
@@ -93,6 +113,7 @@ function handle_clip_video(event) {
         start_time: event.target.start_time.value,
         end_time: event.target.end_time.value,
         reencode: event.target.reencode.value,
+        scale_down: event.target.scale_down.value,
     };
 
     ae_promises[hosted_file_id] = {};
@@ -151,7 +172,30 @@ function handle_clip_video(event) {
         <a href="/hosted_file/{hosted_file_id}/download?x_no_account_id_token=direct-download" download={$ae_sess.files[hosted_file_id].new_filename} class="ae_btn btn_lg btn_primary"><span class="fas fa-download"></span> Ready to Download</a>
     {/if} -->
 
-    <div class="flex flex-row gap-1 justify-center items-center w-full">
+    <div class="flex flex-row flex-wrap gap-1 justify-center items-center w-full">
+        <!-- Remove from uploaded file kv list -->
+        <button
+            type="button"
+            onclick={() => {
+                // This (uploaded_file_kv) is referenced by other AE components. Currently it is only used with the manage hosted file list and clip video components.
+                console.log(`Removed hosted file ID: ${hosted_file_id}`, $ae_loc.files.uploaded_file_kv);
+                // delete $ae_sess.files.uploaded_file_kv[hosted_file_id];
+                delete $ae_loc.files.uploaded_file_kv[hosted_file_id];
+                $ae_loc.files.uploaded_file_kv = {...$ae_loc.files.uploaded_file_kv};
+                delete hosted_file_obj_kv[hosted_file_id];
+                hosted_file_obj_kv = {...hosted_file_obj_kv};
+                // delete $ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id];
+                console.log(`Removed hosted file ID: ${hosted_file_obj.hosted_file_id}`, $ae_loc.files.uploaded_file_kv);
+            }}
+            class:hidden={!$ae_loc.edit_mode}
+            class="btn btn-sm variant-soft-danger hover:variant-filled-danger"
+            title={`Remove this file:\n${hosted_file_obj.filename}\n[API] SHA256: ${hosted_file_obj?.hash_sha256?.slice(0, 10)}... Hosted ID: ${hosted_file_obj.hosted_file_id_random}`}
+            >
+            <span class="fas fa-minus-circle m-1"></span>
+            <span class="hidden">Remove</span>
+        </button>
+
+        <!-- Download the file -->
         <button
             type="button"
             disabled={!$ae_loc.trusted_access}
@@ -167,19 +211,23 @@ function handle_clip_video(event) {
 
                 // window.postMessage({ type: 'download_event_file', hosted_file_id: idaa_archive_content_obj.hosted_file_id, filename: idaa_archive_content_obj.filename, auto_download: true }, '*');
             }}
-            class="novi_btn btn btn-sm lg:btn-md variant-soft-primary hover:variant-filled-primary min-w-72 lg:min-w-96"
             class:hidden={!$ae_loc.edit_mode}
+            class="novi_btn btn btn-sm lg:btn-md variant-soft-primary hover:variant-filled-primary min-w-72 lg:min-w-96"
             title={`Download this file:\n${hosted_file_obj.filename}\n[API] SHA256: ${hosted_file_obj?.hash_sha256?.slice(0, 10)}... Hosted ID: ${hosted_file_obj.hosted_file_id_random}`}
             >
-            {#await $ae_sess.api_download_kv[hosted_file_id]}
+            {#await ae_promises[hosted_file_id]}
                 <span class="fas fa-spinner fa-spin mx-1"></span>
-                <span class="">
-                    Downloading
-                    {#if $ae_sess.api_download_kv[hosted_file_id]}
-                        {$ae_sess.api_download_kv[hosted_file_id].percent_completed}%
-                    {/if}
-                    :
-                </span>
+                {#if submit_status == 'clipping'}
+                    <span class="">Clipping</span>
+                {:else}
+                    <span class="">
+                        Downloading
+                        {#if $ae_sess.api_download_kv[hosted_file_id]}
+                            {$ae_sess.api_download_kv[hosted_file_id].percent_completed}%
+                        {/if}
+                        :
+                    </span>
+                {/if}
             {:then}
                 <span class="fas fa-{ae_util.file_extension_icon(hosted_file_obj?.file_extension)}"></span>
             {/await}
@@ -203,7 +251,7 @@ function handle_clip_video(event) {
     </div>
 
     <form
-        onsubmit={handle_clip_video}
+        onsubmit={preventDefault(handle_clip_video)}
         class="{class_li_default} {class_li}"
         >
         <!-- {$ae_sess?.files[hosted_file_obj?.hosted_file_id_random ?? 'obj'].submit_status ?? 'not set'} -->
@@ -249,6 +297,22 @@ function handle_clip_video(event) {
                     False
                 </label>
             </span>
+
+            <span class="flex flex-col gap-1 items-center justify-center"
+                title="Scale the video file down to 1920x1080? This does cause some minor quality loss. Re-encoding is useful if the audio or video seems to be chopped off at the beginning or end of the clip. It can also help with partially corrupted files."
+                >
+                <span class="text-xs font-bold">
+                    Scale down?
+                </span>
+                <label class="inline-block">
+                    <input type="radio" name="scale_down" value="true" class="radio" checked />
+                    True
+                </label>
+                <label class="inline-block">
+                    <input type="radio" name="scale_down" value="false" class="radio" />
+                    False
+                </label>
+            </span>
         </div>
 
         <button
@@ -256,17 +320,20 @@ function handle_clip_video(event) {
             class="btn btn-lg btn-primary variant-ghost-primary"
             disabled={submit_status == 'clipping'}
             >
-            {#await ae_promises[hosted_file_id]}
+            <!-- {#await ae_promises[hosted_file_id]} -->
+            {#if $ae_loc.files.processed_file_kv[hosted_file_id] && $ae_loc.files.processed_file_kv[hosted_file_id].submit_status == 'clipping'}
                 <span class="fas fa-spinner fa-spin m-1"></span>
                 <span class="highlight">Clipping...</span>
-            {:then}
-                {#if ae_promises[hosted_file_id]}
-                <span class="fas fa-check m-1"></span>
+            {:else}
+                <!-- {#if ae_promises[hosted_file_id]} -->
+                 {#if $ae_loc.files.processed_file_kv[hosted_file_id] && $ae_loc.files.processed_file_kv[hosted_file_id].submit_status == 'clipped'}
+                    <span class="fas fa-check m-1"></span>
+                    Clipped
                 {:else}
-                <span class="fas fa-cut m-1"></span>
-                Clip Video
+                    <span class="fas fa-cut m-1"></span>
+                    Clip Video
                 {/if}
-            {/await}
+            {/if}
             <!-- <span class="fas fa-cut m-1"></span>
             Clip Video -->
         </button>
diff --git a/src/lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte b/src/lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte
index 0115e3bc..50fceb93 100644
--- a/src/lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte
+++ b/src/lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-export let log_lvl: number = 0;
 
 // Imports
 // Import components and elements
@@ -15,16 +14,27 @@ import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$
 
 // export let hosted_file_id_li: string[] = [];
 // export let hosted_file_obj_li: any[] = [];
-// export let hosted_file_obj_kv: key_val = {};
-export let video_clip_file_kv: key_val = {};
 
-export let class_li_default: string = 'flex flex-row flex-wrap gap-2 items-center justify-center w-full max-w-2xl p-2 mx-auto my-1 border border-gray-300 rounded-lg';
-export let class_li: string = '';
+interface Props {
+    log_lvl?: number;
+    // export let hosted_file_obj_kv: key_val = {};
+    video_clip_file_kv?: key_val;
+    class_li_default?: string;
+    class_li?: string;
+    link_to_type: string;
+    link_to_id: string;
+}
 
-export let link_to_type: string;
-export let link_to_id: string;
+let {
+    log_lvl = 0,
+    video_clip_file_kv = $bindable({}),
+    class_li_default = 'flex flex-row flex-wrap gap-2 items-center justify-center w-full max-w-2xl p-2 mx-auto my-1 border border-gray-300 rounded-lg',
+    class_li = '',
+    link_to_type,
+    link_to_id
+}: Props = $props();
 
-let ae_promises: key_val = {};
+let ae_promises: key_val = $state({});
 
 </script>
 
diff --git a/src/lib/ae_core/ae_comp__hosted_files_upload.svelte b/src/lib/ae_core/ae_comp__hosted_files_upload.svelte
index 170355b1..1a13836b 100644
--- a/src/lib/ae_core/ae_comp__hosted_files_upload.svelte
+++ b/src/lib/ae_core/ae_comp__hosted_files_upload.svelte
@@ -43,9 +43,13 @@ let ae_triggers: key_val = {};
 let input_element_id = 'ae_comp__hosted_files_upload__input';
 
 // Functions and Logic
-async function handle_submit_form_files(event) {
+async function handle_submit_form_files(event: SubmitEvent) {
     console.log('*** handle_submit_form() ***');
 
+    if (!event) {
+        return;
+    }
+
     $ae_sess.files.disable_submit__hosted_file_obj = true;
     $ae_sess.files.submit_status = 'saving';
     submit_status = 'saving';
@@ -57,7 +61,8 @@ async function handle_submit_form_files(event) {
 
     let hosted_file_results;
 
-    if (event.target[input_element_id].files.length > 0) {
+    const target = event.target as HTMLFormElement;
+    if (target && target[input_element_id] && (target[input_element_id] as HTMLInputElement)?.files && (target[input_element_id] as HTMLInputElement).files.length > 0) {
         task_id = link_to_id; // Ideally this should be the file hash, but we may be uploading multiple files at once. This should be done with a loop instead?
 
         // Loop through each file and upload them individually in event.target[input_element_id].files
@@ -68,7 +73,11 @@ async function handle_submit_form_files(event) {
 
             task_id = $ae_sess.files.processed_file_list[i].hash_sha256;
 
-            hosted_file_results = await handle_input_upload_files([tmp_file], task_id);
+            // hosted_file_results = await handle_input_upload_files([tmp_file], task_id);
+            hosted_file_results = await handle_input_upload_files({
+                    input_upload_files: [tmp_file],
+                    task_id: task_id
+                });
 
             if (hosted_file_results) {
                 console.log(`hosted_file_results:`, hosted_file_results);
@@ -78,7 +87,7 @@ async function handle_submit_form_files(event) {
         }
         // hosted_file_results = await handle_input_upload_files(event.target[input_element_id].files, task_id);
         $ae_sess.files.processed_file_list = [];
-        $ae_sess = $ae_sess;
+        $ae_sess = $ae_sess; // Is this needed? 2025-03-17
         event.target.reset();
         // await tick();
 
@@ -87,21 +96,6 @@ async function handle_submit_form_files(event) {
         } else if (log_lvl > 1) {
             console.log('hosted_file_results:', hosted_file_results);
         }
-
-        // db_events.files.clear();
-
-        // let params = {
-        //     qry__enabled: 'all',
-        //     qry__hidden: 'all',
-        // }
-
-        // events_func.load_ae_obj_li__event_file({
-        //     api_cfg: $ae_api,
-        //     for_obj_type: link_to_type,
-        //     for_obj_id: link_to_id,
-        //     params: params,
-        //     try_cache: true
-        // });
     }
 
     $ae_sess.files.disable_submit__hosted_file_obj = false;
@@ -111,7 +105,15 @@ async function handle_submit_form_files(event) {
 }
 
 
-async function handle_input_upload_files(input_upload_files, task_id) {
+async function handle_input_upload_files(
+        {
+            input_upload_files,
+            task_id
+        } : {
+            input_upload_files: any[],
+            task_id: string
+        }
+    ) {
     console.log('*** handle_input_upload_files() ***');
 
     const form_data = new FormData();
diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts
index 0d486693..19dc7c31 100644
--- a/src/lib/ae_stores.ts
+++ b/src/lib/ae_stores.ts
@@ -227,6 +227,7 @@ export let ae_app_session_data_struct: key_val = {
         // uploaded_file_list: [],
         video_clip_file_list: [],
         submit_status: null, // 'saving', 'created', 'updated', 'saved'
+        clip_complete: null,
     },
 
     'hub': {
diff --git a/src/lib/ae_utils/ae_utils__datetime_format.ts b/src/lib/ae_utils/ae_utils__datetime_format.ts
index da290a56..df088de1 100644
--- a/src/lib/ae_utils/ae_utils__datetime_format.ts
+++ b/src/lib/ae_utils/ae_utils__datetime_format.ts
@@ -92,6 +92,12 @@ export let iso_datetime_formatter = function iso_datetime_formatter(
         case 'datetime_12_long':
             datetime_string = dayjs(raw_datetime).format('MMMM D, YYYY hh:mm A');
             break;
+        case 'datetime_medium_sec':
+            datetime_string = dayjs(raw_datetime).format('MMM D, YYYY H:mm:ss');
+            break;
+        case 'datetime_12_medium_sec':
+            datetime_string = dayjs(raw_datetime).format('MMM D, YYYY h:mm:ss A');
+            break;
         case 'datetime_short_month':
             datetime_string = dayjs(raw_datetime).format('MMM D hh:mm A');
             break;
diff --git a/src/lib/element_manage_hosted_file_li.svelte b/src/lib/element_manage_hosted_file_li.svelte
index de802647..d574d7be 100644
--- a/src/lib/element_manage_hosted_file_li.svelte
+++ b/src/lib/element_manage_hosted_file_li.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-export let log_lvl: number = 0;
 // import { onMount } from 'svelte';
 // import { clipboard } from '@skeletonlabs/skeleton';
 // import { liveQuery } from "dexie";
@@ -15,19 +14,32 @@ import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_st
 import { db_core } from "$lib/ae_core/db_core";
 import { core_func } from '$lib/ae_core/ae_core_functions';
 
-export let container_class_li: string|Array<string> = [];
-export let lq__hosted_file_obj_li: any;
-export let link_to_type: string;
-export let link_to_id: string;
 // export let allow_basic: boolean = false;
-// export let allow_moderator: boolean = false;
-export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
+
+interface Props {
+    log_lvl?: number;
+    container_class_li?: string|Array<string>;
+    lq__hosted_file_obj_li: any;
+    link_to_type: string;
+    link_to_id: string;
+    // export let allow_moderator: boolean = false;
+    display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
+}
+
+let {
+    log_lvl = 0,
+    container_class_li = [],
+    lq__hosted_file_obj_li = $bindable([]),
+    link_to_type,
+    link_to_id,
+    display_mode = 'default'
+}: Props = $props();
 
 // export let show_convert_btn: null|boolean = null;
 
 // let ae_placeholder_li: key_val = {};
 let ae_promises: key_val = {};
-let ae_tmp: key_val = {};
+let ae_tmp: key_val = $state({});
 ae_tmp.show__file_li = true;
 ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
 // let ae_triggers: key_val = {};
@@ -40,7 +52,7 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
     >
     <button
         type="button"
-        on:click={() => {
+        onclick={() => {
             console.log('*** Refresh button clicked ***');
 
             db_core.file.clear();
@@ -75,7 +87,7 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
 
     <button
         type="button"
-        on:click={() => {
+        onclick={() => {
             console.log('*** Show Alt Download button clicked ***');
             ae_tmp.show__direct_download = !ae_tmp.show__direct_download;
         }}
@@ -113,13 +125,82 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
 <div class="overflow-auto w-full">
 
 
-<ol>
-{#each $lq__hosted_file_obj_li as hosted_file_obj}
+<ol class="list-decimal list-inside">
+{#each [...$lq__hosted_file_obj_li].reverse() as hosted_file_obj}
     <li>
-        <a href="" class="underline text-blue-500">
+        <button
+            type="button"
+            disabled={!$ae_loc.trusted_access}
+            onclick={() => {
+                // This (uploaded_file_kv) is referenced by other AE components. Currently it is only used for the video clipper. This should be a toggle of Add/Remove.
+                if ($ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id]) {
+                    delete $ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id];
+                    $ae_loc.files.uploaded_file_kv = {...$ae_loc.files.uploaded_file_kv};
+                } else {
+                    $ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id] = hosted_file_obj;
+                    lq__hosted_file_obj_li[hosted_file_obj.hosted_file_id] = hosted_file_obj;
+                }
+            }}
+            class="btn btn-sm variant-soft-secondary hover:variant-filled-secondary"
+            title="Add/Remove file to/from the locally stored uploaded file list. This is referenced by other AE components."
+            >
+            {#if $ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id]}
+                <span class="fas fa-minus-circle m-1"></span>
+                <span class="hidden">Remove</span>
+            {:else}
+                <span class="fas fa-plus-circle m-1"></span>
+                <span class="hidden">Add</span>
+            {/if}
+        </button>
+
+        <button
+            type="button"
+            disabled={!$ae_loc.administrator_access}
+            onclick={() => {
+                // This (uploaded_file_kv) is referenced by other AE components. Currently it is only used for the video clipper.
+                $ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id] = hosted_file_obj;
+
+            }}
+            class:hidden={!$ae_loc.administrator_access}
+            class="btn btn-sm variant-soft-secondary hover:variant-filled-secondary"
+            title="Delete a file from the host server."
+            >
+            <span class="fas fa-trash-alt m-1"></span>
+            <span class="hidden">Delete</span>
+        </button>
+
+        <button
+            type="button"
+            disabled={!$ae_loc.administrator_access}
+            class:hidden={!$ae_loc.administrator_access}
+            onclick={() => {
+                // This should show/hide the editable fields for the file. This might need to be in a little modal.
+            }}
+
+            class="btn btn-sm variant-soft-primary hover:variant-filled-primary"
+            title="Edit file details"
+            >
+            <span class="fas fa-edit m-1"></span>
+            <span class="hidden">Edit</span>
+        </button>
+
+        <span class="text-xs text-gray-500">
+            <span class="fas fa-calendar-day mx-1"></span>
+            <span class="hidden">Created on:</span>
+            {ae_util.iso_datetime_formatter(hosted_file_obj.created_on, 'datetime_medium_sec')}
+            {#if hosted_file_obj.updated_on}
+                <span class="fas fa-sync-alt mx-1"></span>
+                Updated on
+                {ae_util.iso_datetime_formatter(hosted_file_obj.updated_on, 'datetime_medium_sec')}
+            {/if}
+        </span>
+
+        <!-- <a href="" class="underline text-blue-500"> -->
             {hosted_file_obj.filename}
-        </a>
-    {ae_util.format_bytes(hosted_file_obj.size)}
+        <!-- </a> -->
+         <span class="text-xs text-gray-500">
+            {ae_util.format_bytes(hosted_file_obj.size)}
+        </span>
     </li>
 {/each}
 </ol>
diff --git a/src/lib/element_manage_hosted_file_li_all.svelte b/src/lib/element_manage_hosted_file_li_all.svelte
index d0df8eeb..12885f95 100644
--- a/src/lib/element_manage_hosted_file_li_all.svelte
+++ b/src/lib/element_manage_hosted_file_li_all.svelte
@@ -15,14 +15,25 @@ import Element_manage_hosted_file_li from '$lib/element_manage_hosted_file_li.sv
 // import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
 import { db_core } from "$lib/ae_core/db_core";
 // import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
-// import { events_func } from '$lib/ae_events_functions';
 
-export let container_class_li: string|Array<string> = [];
-export let link_to_type: string;
-export let link_to_id: string;
-export let allow_basic: boolean = false; // Not used yet
-export let allow_moderator: boolean = false; // Not used yet
-export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
+interface Props {
+    // import { events_func } from '$lib/ae_events_functions';
+    container_class_li?: string|Array<string>;
+    link_to_type: string;
+    link_to_id: string;
+    allow_basic?: boolean; // Not used yet
+    allow_moderator?: boolean; // Not used yet
+    display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
+}
+
+let {
+    container_class_li = [],
+    link_to_type,
+    link_to_id,
+    allow_basic = false,
+    allow_moderator = false,
+    display_mode = 'default'
+}: Props = $props();
 
 console.log(`HERE HERE HERE HERE: link_to_type: ${link_to_type} link_to_id: ${link_to_id}`);
 
@@ -40,7 +51,7 @@ let dq__where_eq_val: string = link_to_id;
 
 // This should include all files that are associated with an object (event, location, session, presenter, etc.)
 // I am not sure why, but doing reverse() and then sortBy() seems to sort in descending order.
-$: lq__hosted_file_obj_li = liveQuery(async () => {
+let lq__hosted_file_obj_li = $derived(liveQuery(async () => {
     // console.log(`dq__where_val: ${dq__where_val}`);
     // console.log(`dq__where_eq_val: ${dq__where_eq_val}`);
     let results = await db_core.file
@@ -53,7 +64,7 @@ $: lq__hosted_file_obj_li = liveQuery(async () => {
         // .toArray()
         ;
     return results;
-});
+}));
 </script>
 
 
diff --git a/src/routes/hosted_files/+layout.ts b/src/routes/hosted_files/+layout.ts
index d190b998..9623c3b6 100644
--- a/src/routes/hosted_files/+layout.ts
+++ b/src/routes/hosted_files/+layout.ts
@@ -15,14 +15,14 @@ export async function load({ params, parent }) { // route
     let ae_acct = data[account_id];
     // console.log(`ae_acct = `, ae_acct);
 
-    if (!account_id) {
-        console.log(`ae Core - [account_id] +page.ts: The account_id was not found!!!`);
-        error(404, {
-			message: 'Account ID not found'
-		});
-    }
+    // if (!account_id) {
+    //     console.log(`ae Core - [account_id] +page.ts: The account_id was not found!!!`);
+    //     error(404, {
+	// 		message: 'Account ID not found'
+	// 	});
+    // }
 
-    ae_acct.slct.account_id = account_id;
+    // ae_acct.slct.account_id = account_id;
 
     if (browser) {
         let load_hosted_file_obj_li = core_func.load_ae_obj_li__hosted_file({
diff --git a/src/routes/hosted_files/+page.svelte b/src/routes/hosted_files/+page.svelte
index 4759ec52..35112d24 100644
--- a/src/routes/hosted_files/+page.svelte
+++ b/src/routes/hosted_files/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-export let data;
+import { run } from 'svelte/legacy';
+
 // console.log(`ae_ Svelte Hosted Files +page data:`, data);
 
 import { onMount } from 'svelte';
@@ -15,6 +16,7 @@ import Comp_hosted_files_clip_video from '$lib/ae_core/ae_comp__hosted_files_cli
 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 { data } = $props();
 
 let log_lvl = 1;
 
@@ -31,7 +33,7 @@ let file_uploads_clip_post_promise;
 let download_clip_src;
 let download_clip_filename;
 
-let hosted_file_upload: key_val = {
+let hosted_file_upload: key_val = $state({
     // link_to_type: 'account',
     // link_to_id: ae_loc.account_id,
     hosted_file_id_li: [],
@@ -39,13 +41,13 @@ let hosted_file_upload: key_val = {
     clip_complete: false,
     upload_complete: false,
     submit_status: null,
-};
+});
 
-let hosted_file_clip: key_val = {
+let hosted_file_clip: key_val = $state({
     video_clip_file_kv: {},
     clip_complete: false,
     submit_status: null,
-};
+});
 
 if (!$ae_loc.files) {
     $ae_loc.files = {};
@@ -59,162 +61,58 @@ 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
-    ];
-}
+$effect(() => {
+    // 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.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
+        };
+        $ae_sess.files.upload_complete = false;
+    }
 
-$: 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
-    };
-}
+    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
+        };
+        $ae_sess.files.clip_complete = false;
+    }
+});
+
+// $effect(() => {
+//     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
+//     };
+//     }
+// });
+
+// $effect(() => {
+//     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');
 });
 
-
-function handle_submit_form(event) {
-//     console.log('*** handle_submit_form() ***');
-
-//     console.log(event.target.file_list);
-
-//     const form_data = new FormData();
-
-//     form_data.append('title_part_1', event.target.title_part_1.value);
-//     form_data.append('title_part_2', event.target.title_part_2.value);
-
-//     form_data.append('subtitle_part_1', event.target.subtitle_part_1.value);
-//     form_data.append('subtitle_part_2', event.target.subtitle_part_2.value);
-
-//     form_data.append('font_color', event.target.font_color.value);
-
-//     form_data.append(`file`, event.target.audio_file.files[0]);
-//     if (event.target.title_image.files.length > 0) {
-//         form_data.append(`title_image`, event.target.title_image.files[0]);
-//     }
-
-//     download_filename = `${event.target.title_part_1.value}_${event.target.title_part_2.value}_${event.target.subtitle_part_1.value}_${event.target.subtitle_part_2.value}.mp4`
-
-//     // for (let i = 0; i < event.target.file_list.files.length; i++) {
-//     //     form_data.append(`file_list`, event.target.event_file_upload_file_list.files[i]);
-//     // }
-
-//     let params = null;
-
-//     let endpoint = '/hosted_file/create_video';
-
-//     console.log(form_data);
-
-//     params = null;
-
-//     // Uncomment and the file_uploads_post_promise is not seen by the "await" below
-//     // file_uploads_post_promise = await api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, data:form_data});
-//     // Uncomment so that the file_uploads_post_promise is not seen by the "await" below
-//     file_uploads_post_promise = api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, form_data:form_data, return_blob: true, filename: 'test.mp4', auto_download: false})
-//     .then(function (result) {
-//         console.log(result);
-
-//         let file_blob = new Blob([result.data]);
-//         // console.log(file_blob);
-//         let file_obj_url = window.URL.createObjectURL(file_blob); // The img src
-//         // const url = window.URL.createObjectURL(new Blob([result.data]));
-//         download_src = file_obj_url;
-//         // download_filename = file_obj_url;
-
-//     });
-
-//     console.log(file_uploads_post_promise);
-
-//     // let file_blob = new Blob([file_uploads_post_promise.data]);
-//     // // console.log(file_blob);
-//     // let file_obj_url = URL.createObjectURL(file_blob); // The img src
-//     // download_src = file_obj_url;
-
-//     // dispatch(
-//     //     'event_file_obj_li_updated',
-//     //     {
-//     //         link_to_type: link_to_type,
-//     //         link_to_id: link_to_id,
-//     //     }
-//     // );
-
-//     return true;
-}
-
-
-// function handle_submit_form_clip(event) {
-//     console.log('*** handle_submit_form() ***');
-
-//     console.log(event.target.file_list);
-
-//     const form_data = new FormData();
-
-//     form_data.append('start_time', event.target.start_time.value);
-//     form_data.append('end_time', event.target.end_time.value);
-
-//     if (event.target.reencode.value == '1' || event.target.reencode.value == 'true') {
-//         form_data.append('reencode', 'true');
-//     } else {
-//         form_data.append('reencode', 'false');
-//     }
-//     // form_data.append('reencode', event.target.reencode.value);
-
-//     form_data.append(`video_file`, event.target.video_file.files[0]);
-
-//     download_filename = `clipped_file_test.mp4`
-
-//     // for (let i = 0; i < event.target.file_list.files.length; i++) {
-//     //     form_data.append(`file_list`, event.target.event_file_upload_file_list.files[i]);
-//     // }
-
-//     let params = null;
-
-//     let endpoint = '/hosted_file/clip_video';
-
-//     console.log(form_data);
-
-//     params = null;
-
-//     file_uploads_clip_post_promise = api.post_object({
-//         api_cfg: $ae_api, endpoint: endpoint,
-//         params: params,
-//         form_data:form_data,
-//         return_blob: true,
-//         filename: 'test.mp4',
-//         auto_download: false
-//     })
-//     .then(function (result) {
-//         console.log(result);
-
-//         let file_blob = new Blob([result.data]);
-//         // console.log(file_blob);
-//         let file_obj_url = window.URL.createObjectURL(file_blob); // The img src
-//         // const url = window.URL.createObjectURL(new Blob([result.data]));
-//         download_src = file_obj_url;
-//         // download_filename = file_obj_url;
-
-//     });
-
-//     console.log(file_uploads_clip_post_promise);
-
-//     return true;
-// }
-
 </script>
 
 
@@ -237,16 +135,18 @@ function handle_submit_form(event) {
         bind:upload_complete={$ae_sess.files.upload_complete}
         log_lvl={log_lvl}
         >
-        <span slot="label">
-            <div>
-                <span class="fas fa-upload"></span>
-                <strong class="bg-green-100 p-1">Upload video files</strong>
-            </div>
-            <span class="text-sm text-gray-600 dark:text-gray-400 italic">
-                <strong>Aether hosted files only</strong><br>
-                Recommended: video (mp4, mkv)<br>
+        {#snippet label()}
+            <span >
+                <div>
+                    <span class="fas fa-upload"></span>
+                    <strong class="bg-green-100 p-1">Upload video files</strong>
+                </div>
+                <span class="text-sm text-gray-600 dark:text-gray-400 italic">
+                    <strong>Aether hosted files only</strong><br>
+                    Recommended: video (mp4, mkv)<br>
+                </span>
             </span>
-        </span>
+        {/snippet}
     </Comp_hosted_files_upload>
 
 
@@ -266,8 +166,6 @@ function handle_submit_form(event) {
             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}