From c96e59c6605a331ded659ade45c8f56cc96b0965 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 18 Mar 2025 15:01:30 -0400
Subject: [PATCH] Getting ready to make the new hosted file management and
 tools live on dev. Then on prod...

---
 .../ae_comp__hosted_files_clip_video.svelte   | 21 +++--
 src/lib/ae_core/core__hosted_files.ts         | 23 ++++++
 src/lib/ae_stores.ts                          |  1 +
 src/lib/element_manage_hosted_file_li.svelte  | 82 ++++++++++++-------
 .../element_manage_hosted_file_li_all.svelte  |  9 +-
 src/routes/hosted_files/+layout.ts            | 10 ++-
 src/routes/hosted_files/+page.svelte          | 59 ++++++++++---
 7 files changed, 155 insertions(+), 50 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 1195e417..7ad7dfdd 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
@@ -122,6 +122,7 @@ function handle_clip_video(event) {
         api_cfg: $ae_api,
         endpoint: endpoint,
         params: params,
+        timeout: 300000, // 5 minutes
         // return_blob: true,
         // filename: event.target.new_filename.value,
         // auto_download: false,
@@ -160,12 +161,19 @@ function handle_clip_video(event) {
 </script>
 
 
-<div>
+<section
+    class="{class_li_default} {class_li}"
+    >
 
 <!-- <h3 class="h3">{hosted_file_obj_li.length}&times; files uploaded</h3>
 {#each hosted_file_obj_li as hosted_file_obj, i} -->
 
-<h3 class="h3">{Object.entries(hosted_file_obj_kv).length}&times; files uploaded</h3>
+<h3
+    class="h3"
+    >
+    {Object.entries(hosted_file_obj_kv).length}&times; files uploaded
+</h3>
+
 {#each Object.entries(hosted_file_obj_kv) as [hosted_file_id, hosted_file_obj]}
 <div class="border border-gray-300 rounded-lg p-2 m-2">
     <!-- {#if $ae_sess.files[hosted_file_id].upload_complete}
@@ -187,12 +195,11 @@ function handle_clip_video(event) {
                 // 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}`}
+            class="btn btn-sm variant-soft-warning hover:variant-filled-warning"
+            title={`Remove this file from list of videos:\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>
+            <span class="">Remove</span>
         </button>
 
         <!-- Download the file -->
@@ -367,4 +374,4 @@ function handle_clip_video(event) {
     {/if}
 {/await} -->
 
-</div>
\ No newline at end of file
+</section>
\ No newline at end of file
diff --git a/src/lib/ae_core/core__hosted_files.ts b/src/lib/ae_core/core__hosted_files.ts
index 1eec7abc..97e6e6b8 100644
--- a/src/lib/ae_core/core__hosted_files.ts
+++ b/src/lib/ae_core/core__hosted_files.ts
@@ -154,6 +154,7 @@ export async function delete_ae_obj_id__hosted_file(
             rm_orphan = false,
             fake_delete = false, // Fake the delete result to "true"
             params = {},
+            try_cache = true,
             log_lvl = 0
         }: {
             api_cfg: any,
@@ -163,6 +164,7 @@ export async function delete_ae_obj_id__hosted_file(
             rm_orphan?: boolean,
             fake_delete?: boolean,
             params?: key_val,
+            try_cache?: boolean,
             log_lvl?: number
         }
     ) {
@@ -191,8 +193,29 @@ export async function delete_ae_obj_id__hosted_file(
         params: params,
         // return_meta: return_meta,
         log_lvl: log_lvl
+    })
+    .then(function (hosted_file_obj_li_get_result) {
+        if (hosted_file_obj_li_get_result) {
+            if (try_cache) {
+                if (log_lvl) {
+                    console.log(`Attempting to remove IDB entry for hosted_file_id=${hosted_file_id}`);
+                }
+                db_core.file.delete(hosted_file_id); // Delete from the DB no matter what.
+            }
+            return hosted_file_obj_li_get_result;
+        } else {
+            console.log('No results returned.');
+            return [];
+        }
+    })
+    .catch(function (error) {
+        console.log('No results returned or failed.', error);
     });
 
+    if (log_lvl) {
+        console.log('ae_promises.delete__hosted_file_obj:', ae_promises.delete__hosted_file_obj);
+    }
+
     return ae_promises.delete__hosted_file_obj;
 }
 
diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts
index 19dc7c31..5329ac13 100644
--- a/src/lib/ae_stores.ts
+++ b/src/lib/ae_stores.ts
@@ -116,6 +116,7 @@ export let ae_app_local_data_struct: key_val = {
         processed_file_kv: {},
         uploaded_file_kv: {},
         video_clip_file_kv: {},
+        add_to_use_files_method: 'upload', // upload, select
     },
 
     'ds': {},
diff --git a/src/lib/element_manage_hosted_file_li.svelte b/src/lib/element_manage_hosted_file_li.svelte
index d574d7be..831a0cec 100644
--- a/src/lib/element_manage_hosted_file_li.svelte
+++ b/src/lib/element_manage_hosted_file_li.svelte
@@ -18,21 +18,27 @@ import { core_func } from '$lib/ae_core/ae_core_functions';
 
 interface Props {
     log_lvl?: number;
-    container_class_li?: string|Array<string>;
+    class_li_default?: string;
+    class_li?: 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'
+    max_file_count?: number;
+    file_type?: string; // 'image', 'video', 'audio', 'document', 'other'
 }
 
 let {
     log_lvl = 0,
-    container_class_li = [],
+    class_li_default = 'flex flex-col gap-1 items-center justify-center w-full max-w-2xl mx-auto my-1 max-h-96 overflow-auto',
+    class_li = '',
     lq__hosted_file_obj_li = $bindable([]),
     link_to_type,
     link_to_id,
-    display_mode = 'default'
+    display_mode = 'default',
+    max_file_count = 19,
+    file_type = 'all'
 }: Props = $props();
 
 // export let show_convert_btn: null|boolean = null;
@@ -47,8 +53,25 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
 </script>
 
 
+<section
+    class="{class_li_default} {class_li}"
+    >
+
+<h3
+    class="h3"
+    class:hidden={!$lq__hosted_file_obj_li?.length || display_mode != 'default'}
+    >
+    Manage Files:
+    <span class="font-bold bg-success-100 px-4 border rounded-lg border-success-200"
+        title="Files for {link_to_type ?? '-- not set --'}: {link_to_id ?? '-- not set --'} (files: {$lq__hosted_file_obj_li?.length ?? 'None'})"
+        >
+        <span class="fas fa-folder-open mx-1"></span>
+        {@html $lq__hosted_file_obj_li ? `${$lq__hosted_file_obj_li.length}&times;` : '-- none --'}
+    </span>
+</h3>
+
 <div
-    class="float-right flex flex-row items-center"
+    class="flex flex-row flex-wrap items-center justify-center gap-1"
     >
     <button
         type="button"
@@ -57,16 +80,19 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
 
             db_core.file.clear();
 
-            let params = {
-                qry__enabled: 'all',
-                qry__hidden: 'all',
-            }
+            // let params = {
+            //     qry__enabled: 'all',
+            //     qry__hidden: 'all',
+            // }
 
             core_func.load_ae_obj_li__hosted_file({
                 api_cfg: $ae_api,
                 for_obj_type: link_to_type,
                 for_obj_id: link_to_id,
-                params: params,
+                enabled: 'enabled',
+                hidden: 'not_hidden',
+                limit: 250,
+                // params: params,
                 try_cache: true
             });
 
@@ -103,30 +129,14 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
 </div>
 
 
-<section class="svelte_component event_file_uploaded_manage {container_class_li}"
-    class:text-sm={display_mode != 'default'}
-    >
 
 
-<h3
-    class="h6"
-    class:hidden={!$lq__hosted_file_obj_li?.length || display_mode != 'default'}
-    >
-    Manage Files:
-    <span class="font-bold bg-success-100 px-4 border rounded-lg border-success-200"
-        title="Files for {link_to_type ?? '-- not set --'}: {link_to_id ?? '-- not set --'} (files: {$lq__hosted_file_obj_li?.length ?? 'None'})"
-        >
-        <span class="fas fa-folder-open mx-1"></span>
-        {@html $lq__hosted_file_obj_li ? `${$lq__hosted_file_obj_li.length}&times;` : '-- none --'}
-    </span>
-</h3>
-
 {#if $lq__hosted_file_obj_li && $lq__hosted_file_obj_li.length}
 <div class="overflow-auto w-full">
 
 
 <ol class="list-decimal list-inside">
-{#each [...$lq__hosted_file_obj_li].reverse() as hosted_file_obj}
+{#each [...$lq__hosted_file_obj_li].reverse().slice(0, max_file_count) as hosted_file_obj}
     <li>
         <button
             type="button"
@@ -157,9 +167,17 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
             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;
+                if (!confirm(`Are you sure you want to delete this hosted file?\n${hosted_file_obj.filename} [${hosted_file_obj.hosted_file_id_random}]`)) {return false;}
 
+                ae_promises.delete__hosted_file_obj = core_func.delete_ae_obj_id__hosted_file({
+                    api_cfg: $ae_api,
+                    hosted_file_id: hosted_file_obj.hosted_file_id_random,
+                    link_to_type: link_to_type,
+                    link_to_id: link_to_id,
+                    rm_orphan: true,
+                    fake_delete: false,
+                    log_lvl: 1
+                })
             }}
             class:hidden={!$ae_loc.administrator_access}
             class="btn btn-sm variant-soft-secondary hover:variant-filled-secondary"
@@ -201,6 +219,14 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
          <span class="text-xs text-gray-500">
             {ae_util.format_bytes(hosted_file_obj.size)}
         </span>
+
+        <span
+            class:hidden={!$ae_loc.edit_mode}
+            class="text-xs text-gray-500"
+            >
+            {hosted_file_obj.hash_sha256?.slice(0, 6)}...
+        </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 12885f95..99dbd429 100644
--- a/src/lib/element_manage_hosted_file_li_all.svelte
+++ b/src/lib/element_manage_hosted_file_li_all.svelte
@@ -18,7 +18,8 @@ import { db_core } from "$lib/ae_core/db_core";
 
 interface Props {
     // import { events_func } from '$lib/ae_events_functions';
-    container_class_li?: string|Array<string>;
+    class_li_default?: string; // |Array<string>;
+    class_li?: string; // |Array<string>;
     link_to_type: string;
     link_to_id: string;
     allow_basic?: boolean; // Not used yet
@@ -27,7 +28,8 @@ interface Props {
 }
 
 let {
-    container_class_li = [],
+    class_li_default,
+    class_li,
     link_to_type,
     link_to_id,
     allow_basic = false,
@@ -90,7 +92,8 @@ let lq__hosted_file_obj_li = $derived(liveQuery(async () => {
         link_to_type={link_to_type}
         link_to_id={link_to_id}
         lq__hosted_file_obj_li={lq__hosted_file_obj_li}
-        container_class_li={container_class_li}
+        class_li_default={class_li_default}
+        class_li={class_li}
         display_mode={display_mode}
         />
         <!-- allow_basic={allow_basic} -->
diff --git a/src/routes/hosted_files/+layout.ts b/src/routes/hosted_files/+layout.ts
index 9623c3b6..ff2bfefc 100644
--- a/src/routes/hosted_files/+layout.ts
+++ b/src/routes/hosted_files/+layout.ts
@@ -5,7 +5,7 @@ import { error } from '@sveltejs/kit';
 import { browser } from '$app/environment';
 import { core_func } from '$lib/ae_core/ae_core_functions';
 
-export async function load({ params, parent }) { // route
+export async function load({ params, parent, url }) { // route
     let log_lvl: number = 0;
 
     let data = await parent();
@@ -24,6 +24,12 @@ export async function load({ params, parent }) { // route
 
     // ae_acct.slct.account_id = account_id;
 
+    let qry_limit = url.searchParams.get('limit') ?? 19;
+    if (!qry_limit) {
+        console.log(`qry_limit +page.ts: The qry_limit was not found in the params!!!`);
+    }
+    ae_acct.slct.qry_limit = qry_limit;
+
     if (browser) {
         let load_hosted_file_obj_li = core_func.load_ae_obj_li__hosted_file({
             api_cfg: ae_acct.api,
@@ -31,7 +37,7 @@ export async function load({ params, parent }) { // route
             for_obj_id: account_id,
             enabled: 'enabled',
             hidden: 'not_hidden',
-            limit: 99,
+            limit: qry_limit,
             order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC', 'title': 'ASC'},
             try_cache: true,
             log_lvl: log_lvl
diff --git a/src/routes/hosted_files/+page.svelte b/src/routes/hosted_files/+page.svelte
index 35112d24..396d930c 100644
--- a/src/routes/hosted_files/+page.svelte
+++ b/src/routes/hosted_files/+page.svelte
@@ -16,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;
@@ -121,10 +122,30 @@ onMount(() => {
     >
 
 <div class="border border-gray-200 p-2 rounded-lg">
-    <h1 class="h1">Clip a Video</h1>
-    <p>This AV utility will take an mp4 video file and create a clipped mp4 video file. This process may take a few seconds to a handful of minutes. Re-encoding will take longer. Please be patient while it is processing.</p>
+    <h1 class="h1">Clip and Scale Video Files</h1>
+    <p>This AV utility will take an mp4 video file and create a clipped mp4 video file. By default, videos will be scaled down to 1920x1080. This process takes at least 30 seconds, but it can easily take a handful of minutes. The scaling option requires that the video be re-encoded. Please be patient while it is processing.</p>
 
-    <h2 class="h2">Step 1: Upload Video File</h2>
+    <h2 class="h2">
+        Step 1: Upload Video File or Select from Hosted Files
+
+        <button
+            type="button"
+            class="btn btn-sm variant-ghost-warning hover:variant-filled-warning float-right"
+            title="Toggle between Upload and Select from Hosted Files"
+            onclick={() => {
+                if ($ae_sess.files.add_to_use_files_method == 'upload') {
+                    $ae_sess.files.add_to_use_files_method = 'select';
+                } else {
+                    $ae_sess.files.add_to_use_files_method = 'upload';
+                }
+            }}
+            >
+            <span class="fas fa-exchange-alt m-1"></span>
+            Upload/Select
+        </button>
+    </h2>
+
+    <div class:hidden={$ae_sess.files.add_to_use_files_method == 'upload'}>
     <Comp_hosted_files_upload
         class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
         link_to_type="account"
@@ -148,10 +169,23 @@ onMount(() => {
             </span>
         {/snippet}
     </Comp_hosted_files_upload>
+    </div>
 
+    <div class:hidden={$ae_sess.files.add_to_use_files_method == 'select'}>
+    <Element_manage_hosted_file_li_wrap
+        link_to_type={'account'}
+        link_to_id={$ae_loc?.account_id}
+        allow_basic={true}
+        allow_moderator={true}
+        class_li={''}
+    />
+    </div>
+
+    <hr />
+
+    <h2 class="h2">
+        Step 2: Clip Video
 
-    <h2 class="h2">Step 2: Clip Video</h2>
-    {#if $ae_loc.files.uploaded_file_kv && Object.entries($ae_loc.files.uploaded_file_kv).length > 0}
         <button
             type="button"
             onclick={() => {
@@ -162,6 +196,8 @@ onMount(() => {
             <span class="fas fa-broom m-1"></span>
             Clear Upload History
         </button>
+    </h2>
+    {#if $ae_loc.files.uploaded_file_kv && Object.entries($ae_loc.files.uploaded_file_kv).length > 0}
         <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"
@@ -178,8 +214,9 @@ onMount(() => {
     {/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}
+    <h2 class="h2">
+        Step 3: Download Recently Processed Video Clips
+
         <button
             type="button"
             onclick={() => {
@@ -190,6 +227,8 @@ onMount(() => {
             <span class="fas fa-broom m-1"></span>
             Clear Clip History
         </button>
+    </h2>
+    {#if $ae_loc.files.video_clip_file_kv && Object.entries($ae_loc.files.video_clip_file_kv).length > 0}
         <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"
@@ -308,15 +347,15 @@ onMount(() => {
 
 
 
-<h2 class="h2">Step X: Manage Files</h2>
+<!-- <h2 class="h2">Step X: Manage Hosted Files</h2> -->
 <!-- Show files for this account -->
-<Element_manage_hosted_file_li_wrap
+<!-- <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={''}
-    />
+    /> -->