Using the hosted file select method is 90% working. It still needs to create a new hosted_file_link record.

src/lib/element_manage_hosted_file_li.svelte

@@ -27,6 +27,9 @@ interface Props {
     display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
     max_file_count?: number;
     file_type?: string; // 'image', 'video', 'audio', 'document', 'other'
+    slct_hosted_file_kv?: key_val;
+    slct_hosted_file_id?: any;
+    slct_hosted_file_obj?: any;
 }
 
 let {
@@ -38,7 +41,10 @@ let {
     link_to_id,
     display_mode = 'default',
     max_file_count = 19,
-    file_type = 'all'
+    file_type = 'all',
+    slct_hosted_file_kv = $bindable({}),
+    slct_hosted_file_id = $bindable(null),
+    slct_hosted_file_obj = $bindable(null)
 }: Props = $props();
 
 // export let show_convert_btn: null|boolean = null;
@@ -146,9 +152,21 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
                 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};
+
+                    delete slct_hosted_file_kv[hosted_file_obj.hosted_file_id];
+                    slct_hosted_file_id = null;
+                    slct_hosted_file_obj = null;
                 } 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;
+
+                    slct_hosted_file_kv[hosted_file_obj.hosted_file_id] = hosted_file_obj;
+                    slct_hosted_file_id = hosted_file_obj.hosted_file_id;
+                    slct_hosted_file_obj = hosted_file_obj;
+                }
+                log_lvl = 1;
+                if (log_lvl) {
+                    console.log(`slct_hosted_file_kv:`, slct_hosted_file_kv);
                 }
             }}
             class="btn btn-sm variant-soft-secondary hover:variant-filled-secondary"

src/lib/element_manage_hosted_file_li_all.svelte

@@ -25,6 +25,9 @@ interface Props {
     allow_basic?: boolean; // Not used yet
     allow_moderator?: boolean; // Not used yet
     display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
+    slct_hosted_file_kv?: key_val;
+    slct_hosted_file_id?: any;
+    slct_hosted_file_obj?: any;
 }
 
 let {
@@ -34,7 +37,10 @@ let {
     link_to_id,
     allow_basic = false,
     allow_moderator = false,
-    display_mode = 'default'
+    display_mode = 'default',
+    slct_hosted_file_kv = $bindable({}),
+    slct_hosted_file_id = $bindable(null),
+    slct_hosted_file_obj = $bindable(null)
 }: Props = $props();
 
 console.log(`HERE HERE HERE HERE: link_to_type: ${link_to_type} link_to_id: ${link_to_id}`);
@@ -95,6 +101,9 @@ let lq__hosted_file_obj_li = $derived(liveQuery(async () => {
         class_li_default={class_li_default}
         class_li={class_li}
         display_mode={display_mode}
+        bind:slct_hosted_file_kv={slct_hosted_file_kv}
+        bind:slct_hosted_file_id={slct_hosted_file_id}
+        bind:slct_hosted_file_obj={slct_hosted_file_obj}
         />
         <!-- allow_basic={allow_basic} -->
         <!-- allow_moderator={allow_moderator} -->

src/routes/hosted_files/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-import { run } from 'svelte/legacy';
-
 // console.log(`ae_ Svelte Hosted Files +page data:`, data);
 
 import { onMount } from 'svelte';
@@ -11,9 +9,6 @@ import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 // import { ae_util } from '$lib/ae_utils/ae_utils';
 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';
 
@@ -29,27 +24,6 @@ let file_uploads_post_promise;
 let download_src;
 let download_filename;
 
-
-let file_uploads_clip_post_promise;
-let download_clip_src;
-let download_clip_filename;
-
-let hosted_file_upload: key_val = $state({
-    // link_to_type: 'account',
-    // 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 = $state({
-    video_clip_file_kv: {},
-    clip_complete: false,
-    submit_status: null,
-});
-
 if (!$ae_loc.files) {
     $ae_loc.files = {};
     $ae_loc.files.processed_file_kv = {};
@@ -122,59 +96,19 @@ onMount(() => {
     >
 
 <div class="border border-gray-200 p-2 rounded-lg">
-    <h1 class="h1">Clip and Scale Video Files</h1>
+    <h1 class="h1">&AElig; Hosted 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">
+    <h2 class="h2">Video Utilities</h2>
-        Step 1: Upload Video File or Select from Hosted Files
+    <p>Clip, scale, re-encode videos files (mp4).</p>
 
-        <button
+    <a href="hosted_files/video_util" class="btn variant-filled-primary">
-            type="button"
+        <span class="fas fa-video mx-1"></span>
-            class="btn btn-sm variant-ghost-warning hover:variant-filled-warning float-right"
+        Video Utilities
-            title="Toggle between Upload and Select from Hosted Files"
+    </a>
-            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"
-        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:hosted_file_obj_kv={$ae_sess.files.uploaded_file_kv}
-        bind:upload_complete={$ae_sess.files.upload_complete}
-        log_lvl={log_lvl}
-        >
-        {#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>
-        {/snippet}
-    </Comp_hosted_files_upload>
-    </div>
 
-    <div
+    <h2 class="h2">Manage Files</h2>
-        class:hidden={$ae_sess.files.add_to_use_files_method == 'select'}
+
-        class=""
-        >
     <Element_manage_hosted_file_li_wrap
         link_to_type={'account'}
         link_to_id={$ae_loc?.account_id}
@@ -182,120 +116,7 @@ onMount(() => {
         allow_moderator={true}
         class_li={''}
     />
-    </div>
 
-    <hr />
-
-    <h2 class="h2">
-        Step 2: Clip Video
-
-        <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 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"
-            link_to_id={$ae_loc.account_id}
-            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 first.</p>
-    {/if}
-
-
-    <h2 class="h2">
-        Step 3: Download Recently Processed Video Clips
-
-        <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 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"
-            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>
-        <label class="label">End time (HH:MM:SS) <input type="text" name="end_time" value="01:59:59" placeholder="HH:MM:SS (01:05:25)" class="input w-32" /></label>
-
-        <label class="label">Re-encode (true or false) <input type="text" name="reencode" value="false" placeholder="true" class="input w-32" /></label> -->
-
-
-
-        <!-- File type extension is limited to mp4 only -->
-        <!-- <label class="label">
-            <div>Video file (mp4)</div>
-            <input type="file" name="video_file" accept="video/*" class="input file w-96" />
-        </label> -->
-
-        <!-- <button type="submit" class="btn variant-filled-warning mx-1">
-            <span class="fas fa-upload mx-1"></span>
-            Submit
-        </button> -->
-
-    <!-- </form> -->
-
-    <!-- <hr /> -->
-
-    <!-- {#await file_uploads_clip_post_promise}
-        <p class="highlight">Converting... This may take a few minutes.</p>
-    {:then}
-        {#if file_uploads_clip_post_promise}
-        <a href={download_clip_src} download={download_clip_filename} class="ae_btn btn_lg btn_primary"><span class="fas fa-download"></span> Ready to Download</a>
-        {:else}
-        <p>Fill out the form and select the video file to clip.</p>
-        {/if}
-    {/await} -->
 </div>
 
 

src/routes/hosted_files/video_util/+page.svelte

@@ -0,0 +1,370 @@
+<script lang="ts">
+import { run } from 'svelte/legacy';
+
+// console.log(`ae_ Svelte Hosted Files +page data:`, data);
+
+import { onMount } from 'svelte';
+
+
+// import { api } from '$lib/api.js';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+// import { ae_util } from '$lib/ae_utils/ae_utils';
+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 { data } = $props();
+
+let log_lvl = 1;
+
+let ae_promises: key_val = {};
+
+// export let container_class_li = [];
+
+let file_uploads_post_promise;
+let download_src;
+let download_filename;
+
+
+let file_uploads_clip_post_promise;
+let download_clip_src;
+let download_clip_filename;
+
+let hosted_file_upload: key_val = $state({
+    // link_to_type: 'account',
+    // 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 = $state({
+    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 = {};
+}
+
+$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
+        };
+        $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
+        };
+        $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');
+});
+
+</script>
+
+
+<section
+    class="ae__hosted_files__av_util container space-y-4 pb-20"
+    >
+
+<div class="border border-gray-200 p-2 rounded-lg">
+    <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 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"
+        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:hosted_file_obj_kv={$ae_sess.files.uploaded_file_kv}
+        bind:upload_complete={$ae_sess.files.upload_complete}
+        log_lvl={log_lvl}
+        >
+        {#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>
+        {/snippet}
+    </Comp_hosted_files_upload>
+    </div>
+
+    <div
+        class:hidden={$ae_sess.files.add_to_use_files_method != 'select'}
+        class=""
+        >
+    <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
+
+        <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 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"
+            link_to_id={$ae_loc.account_id}
+            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 first.</p>
+    {/if}
+
+
+    <h2 class="h2">
+        Step 3: Download Recently Processed Video Clips
+
+        <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 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"
+            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>
+        <label class="label">End time (HH:MM:SS) <input type="text" name="end_time" value="01:59:59" placeholder="HH:MM:SS (01:05:25)" class="input w-32" /></label>
+
+        <label class="label">Re-encode (true or false) <input type="text" name="reencode" value="false" placeholder="true" class="input w-32" /></label> -->
+
+
+
+        <!-- File type extension is limited to mp4 only -->
+        <!-- <label class="label">
+            <div>Video file (mp4)</div>
+            <input type="file" name="video_file" accept="video/*" class="input file w-96" />
+        </label> -->
+
+        <!-- <button type="submit" class="btn variant-filled-warning mx-1">
+            <span class="fas fa-upload mx-1"></span>
+            Submit
+        </button> -->
+
+    <!-- </form> -->
+
+    <!-- <hr /> -->
+
+    <!-- {#await file_uploads_clip_post_promise}
+        <p class="highlight">Converting... This may take a few minutes.</p>
+    {:then}
+        {#if file_uploads_clip_post_promise}
+        <a href={download_clip_src} download={download_clip_filename} class="ae_btn btn_lg btn_primary"><span class="fas fa-download"></span> Ready to Download</a>
+        {:else}
+        <p>Fill out the form and select the video file to clip.</p>
+        {/if}
+    {/await} -->
+</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 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" />
+
+        <input type="text" name="subtitle_part_1" value="Sub-Title Part 1" placeholder="Sub-Title Part 1" class="input" />
+        <input type="text" name="subtitle_part_2" value="Sub-Title Part 2" placeholder="Sub-Title Part 2" class="input" />
+
+        <input type="text" name="font_color" value="black" placeholder="Font color" class="input w-32" />
+
+        <!-- File type extension is limited to mp3 only -->
+        <label class="label">
+            <div>Audio file (mp3)</div>
+            <input type="file" name="audio_file" accept="audio/*" class="input w-96" />
+        </label>
+
+        <!-- File type extension is limited to png only -->
+        <label class="label">
+            <div>Static image template (png)</div>
+            <input type="file" name="title_image" accept="image/*" class="input w-96" />
+        </label>
+
+        <button type="submit" class="btn variant-filled-warning mx-1">
+            <span class="fas fa-upload mx-1"></span>
+            Submit
+        </button>
+
+    </form>
+
+    <hr />
+
+    {#await file_uploads_post_promise}
+        <p class="highlight">Converting... This may take a few minutes.</p>
+    {:then}
+        {#if file_uploads_post_promise}
+        <a href={download_src} download={download_filename} class="ae_btn btn_lg btn_primary"><span class="fas fa-download"></span> Ready to Download</a>
+        {:else}
+        <p>Fill out the form and select the audio file and static image template file.</p>
+        {/if}
+    {/await}
+</div>
+
+{/if}
+
+
+
+<!-- <h2 class="h2">Step X: Manage Hosted Files</h2> -->
+<!-- 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={''}
+    /> -->
+
+
+
+</section>
+
+
+<style>
+
+</style>

src/routes/hosted_files/video_util/video_util.svelte

@@ -0,0 +1,302 @@
+<script lang="ts">
+
+// import { api } from '$lib/api.js';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+// import { ae_util } from '$lib/ae_utils/ae_utils';
+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;
+let download_src;
+let download_filename;
+
+
+let file_uploads_clip_post_promise;
+let download_clip_src;
+let download_clip_filename;
+
+let hosted_file_upload: key_val = $state({
+    // link_to_type: 'account',
+    // 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 = $state({
+    video_clip_file_kv: {},
+    clip_complete: false,
+    submit_status: null,
+});
+
+
+
+</script>
+
+
+
+<section
+    class="ae__hosted_files__av_util container space-y-4 pb-20"
+    >
+
+<div class="border border-gray-200 p-2 rounded-lg">
+    <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 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"
+        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:hosted_file_obj_kv={$ae_sess.files.uploaded_file_kv}
+        bind:upload_complete={$ae_sess.files.upload_complete}
+        log_lvl={log_lvl}
+        >
+        {#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>
+        {/snippet}
+    </Comp_hosted_files_upload>
+    </div>
+
+    <div
+        class:hidden={$ae_sess.files.add_to_use_files_method == 'select'}
+        class=""
+        >
+    <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
+
+        <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 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"
+            link_to_id={$ae_loc.account_id}
+            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 first.</p>
+    {/if}
+
+
+    <h2 class="h2">
+        Step 3: Download Recently Processed Video Clips
+
+        <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 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"
+            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>
+        <label class="label">End time (HH:MM:SS) <input type="text" name="end_time" value="01:59:59" placeholder="HH:MM:SS (01:05:25)" class="input w-32" /></label>
+
+        <label class="label">Re-encode (true or false) <input type="text" name="reencode" value="false" placeholder="true" class="input w-32" /></label> -->
+
+
+
+        <!-- File type extension is limited to mp4 only -->
+        <!-- <label class="label">
+            <div>Video file (mp4)</div>
+            <input type="file" name="video_file" accept="video/*" class="input file w-96" />
+        </label> -->
+
+        <!-- <button type="submit" class="btn variant-filled-warning mx-1">
+            <span class="fas fa-upload mx-1"></span>
+            Submit
+        </button> -->
+
+    <!-- </form> -->
+
+    <!-- <hr /> -->
+
+    <!-- {#await file_uploads_clip_post_promise}
+        <p class="highlight">Converting... This may take a few minutes.</p>
+    {:then}
+        {#if file_uploads_clip_post_promise}
+        <a href={download_clip_src} download={download_clip_filename} class="ae_btn btn_lg btn_primary"><span class="fas fa-download"></span> Ready to Download</a>
+        {:else}
+        <p>Fill out the form and select the video file to clip.</p>
+        {/if}
+    {/await} -->
+</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 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" />
+
+        <input type="text" name="subtitle_part_1" value="Sub-Title Part 1" placeholder="Sub-Title Part 1" class="input" />
+        <input type="text" name="subtitle_part_2" value="Sub-Title Part 2" placeholder="Sub-Title Part 2" class="input" />
+
+        <input type="text" name="font_color" value="black" placeholder="Font color" class="input w-32" />
+
+        <!-- File type extension is limited to mp3 only -->
+        <label class="label">
+            <div>Audio file (mp3)</div>
+            <input type="file" name="audio_file" accept="audio/*" class="input w-96" />
+        </label>
+
+        <!-- File type extension is limited to png only -->
+        <label class="label">
+            <div>Static image template (png)</div>
+            <input type="file" name="title_image" accept="image/*" class="input w-96" />
+        </label>
+
+        <button type="submit" class="btn variant-filled-warning mx-1">
+            <span class="fas fa-upload mx-1"></span>
+            Submit
+        </button>
+
+    </form>
+
+    <hr />
+
+    {#await file_uploads_post_promise}
+        <p class="highlight">Converting... This may take a few minutes.</p>
+    {:then}
+        {#if file_uploads_post_promise}
+        <a href={download_src} download={download_filename} class="ae_btn btn_lg btn_primary"><span class="fas fa-download"></span> Ready to Download</a>
+        {:else}
+        <p>Fill out the form and select the audio file and static image template file.</p>
+        {/if}
+    {/await}
+</div>
+
+{/if}
+
+
+
+<!-- <h2 class="h2">Step X: Manage Hosted Files</h2> -->
+<!-- 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={''}
+    /> -->
+
+
+
+</section>
+
+
+<style>
+
+</style>

src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-export let log_lvl: number = 0;
+import { run, preventDefault } from 'svelte/legacy';
+
 // *** Import Svelte core
 import { onMount } from 'svelte';
 import { fade } from 'svelte/transition';
@@ -14,17 +15,25 @@ import { archives_func } from '$lib/ae_archives/ae_archives_functions';
 
 import Tiptap_editor from '$lib/element_tiptap_editor.svelte';
 import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte';
+import Element_manage_hosted_file_li_wrap from '$lib/element_manage_hosted_file_li_all.svelte';
 
-export let lq__archive_content_obj: any;
+interface Props {
+    log_lvl?: number;
+    lq__archive_content_obj: any;
+}
+
+let { log_lvl = 0, lq__archive_content_obj }: Props = $props();
 
 let create_archive_content_obj_promise: any;
 let delete_archive_content_obj_promise: any;
 let update_archive_content_obj_promise: any;
 let upload__hosted_file_obj_promise: any;
-let prom_api__archive_content_obj: any;
+let prom_api__archive_content_obj: any = $state();
-let prom_api__archive_content_obj__hosted_file: any;
+let prom_api__archive_content_obj__hosted_file: any = $state();
 
-let disable_submit_btn = false;
+let disable_submit_btn = $state(false);
+
+let slct_hosted_file_kv: key_val = $state({});
 
 if ($idaa_slct.archive_content_id) {
     console.log(`Archive Content ID selected: ${$idaa_slct.archive_content_id}`);
@@ -58,7 +67,7 @@ if ($idaa_slct.archive_content_id) {
     console.log(`Archive Content Object started: ${$idaa_slct.archive_content_obj}`)
 }
 
-let lu_time_zone_list:any = localStorage.getItem('lu_time_zone_list') ? JSON.parse(localStorage.getItem('lu_time_zone_list')) : [];
+let lu_time_zone_list:any = $state(localStorage.getItem('lu_time_zone_list') ? JSON.parse(localStorage.getItem('lu_time_zone_list')) : []);
 $ae_loc.lu_time_zone_list = [];
 // $ae_loc.lu_time_zone_list = [];
 if (lu_time_zone_list && lu_time_zone_list.length > 0) {
@@ -105,8 +114,6 @@ onMount(() => {
 });
 
 
-
-
 async function handle_submit_form(event) {
     if (log_lvl > 1) {
         console.log('*** handle_submit_form() ***');
@@ -265,10 +272,6 @@ async function handle_submit_form(event) {
     }
 }
 
-$: if ($idaa_slct.archive_content_obj?.upload_complete && $idaa_slct.archive_content_obj?.hosted_file_id_li?.length && $idaa_slct.archive_content_obj.hosted_file_obj_li?.length) {
-    handle_hosted_files_uploaded($idaa_slct.archive_content_obj.hosted_file_id_li, $idaa_slct.archive_content_obj.hosted_file_obj_li);
-}
-
 
 async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_file_obj_li: any[]) {
     console.log(`*** handle_hosted_files_uploaded() *** ${hosted_file_id_li}`);
@@ -297,6 +300,44 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
     });
 }
 
+run(() => {
+    if ($idaa_slct.archive_content_obj?.upload_complete && $idaa_slct.archive_content_obj?.hosted_file_id_li?.length && $idaa_slct.archive_content_obj.hosted_file_obj_li?.length) {
+    handle_hosted_files_uploaded($idaa_slct.archive_content_obj.hosted_file_id_li, $idaa_slct.archive_content_obj.hosted_file_obj_li);
+}
+});
+
+let slct_hosted_file_id: any = $state(null);
+let slct_hosted_file_obj: any = $state(null);
+$effect(() => {
+    if (slct_hosted_file_id && slct_hosted_file_obj) {
+        console.log(`*** handle_hosted_file_selected() *** ${slct_hosted_file_id}`);
+        // We need to update the archive_content_obj with the new file (for now just the first one).
+        prom_api__archive_content_obj = archives_func.update_ae_obj__archive_content({
+            api_cfg: $ae_api,
+            archive_content_id: $idaa_slct.archive_content_id,
+            data_kv: {
+                hosted_file_id_random: slct_hosted_file_id,
+                // file_path: hosted_file_obj_li[0].file_path,
+                filename: slct_hosted_file_obj.filename,
+                file_extension: slct_hosted_file_obj.extension,
+                archive_content_type: 'hosted_file',
+                },
+            log_lvl: log_lvl
+            })
+        .then(function (archive_content_obj_update_result) {
+            // $idaa_slct.archive_content_obj = $lq__archive_content_obj;
+            $idaa_slct.archive_content_obj = archive_content_obj_update_result;
+        })
+        .catch(function (error) {
+            console.log('Something went wrong.');
+            console.log(error);
+            return false;
+        });
+
+        slct_hosted_file_id = null;
+        slct_hosted_file_obj = null;
+    }
+});
 </script>
 
 <section
@@ -305,7 +346,7 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
     >
     <!-- bind:clientHeight={ae_iframe_height} -->
 
-<form on:submit|preventDefault={handle_submit_form} class="space-y-2">
+<form onsubmit={preventDefault(handle_submit_form)} class="space-y-2">
 
     {#await prom_api__archive_content_obj}
         <div class="awaiting alert_msg_pulse" out:fade={{ duration: 2000 }}>Saving...</div>
@@ -402,6 +443,26 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
             No file uploaded yet.
 
             {#if $ae_loc.trusted_access}
+                <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>
+
+                <div
+                    class:hidden={$ae_sess.files.add_to_use_files_method != 'upload'}
+                    class="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="archive_content"
@@ -411,19 +472,38 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
                     bind:upload_complete={$idaa_slct.archive_content_obj.upload_complete}
                     log_lvl={log_lvl}
                     >
-                    <span slot="label">
+                    {#snippet label()}
-                        <div>
+                        <span >
-                            <span class="fas fa-upload"></span>
+                            <div>
-                            <strong class="bg-green-100 p-1">Upload archive files</strong>
+                                <span class="fas fa-upload"></span>
-                        </div>
+                                <strong class="bg-green-100 p-1">Upload archive files</strong>
-                        <span class="text-sm text-gray-600 dark:text-gray-400 italic">
+                            </div>
-                            <strong>Aether hosted files only</strong><br>
+                            <span class="text-sm text-gray-600 dark:text-gray-400 italic">
-                            Recommended: PowerPoint (pptx) or Keynote (key) or Adobe PDF<br>
+                                <strong>Aether hosted files only</strong><br>
-                            Media: audio (mp3, m4a) and video (mp4, mkv)<br>
+                                Recommended: PowerPoint (pptx) or Keynote (key) or Adobe PDF<br>
-                            Supplemental files: Word Doc, Excel, txt, etc
+                                Media: audio (mp3, m4a) and video (mp4, mkv)<br>
+                                Supplemental files: Word Doc, Excel, txt, etc
+                            </span>
                         </span>
-                    </span>
+                    {/snippet}
                 </Comp_hosted_files_upload>
+                </div>
+
+                <div
+                    class:hidden={$ae_sess.files.add_to_use_files_method != 'select'}
+                    class=""
+                    >
+                    <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={''}
+                        bind:slct_hosted_file_kv={slct_hosted_file_kv}
+                        bind:slct_hosted_file_id={slct_hosted_file_id}
+                        bind:slct_hosted_file_obj={slct_hosted_file_obj}
+                        />
+                </div>
             {/if}
 
         {:else}
@@ -431,7 +511,7 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
             <button
                 disabled={!$ae_loc.administrator_access}
                 type="button"
-                on:click={() => {
+                onclick={() => {
                     if (confirm('Are you sure you want to remove the file?')) {
 
 
@@ -591,7 +671,7 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
     <button
         type="button"
         class="novi_btn btn btn-sm variant-soft-secondary float-right"
-        on:click={() => {
+        onclick={() => {
             $idaa_loc.archives.show__admin_options = !$idaa_loc.archives.show__admin_options;
         }}
         >
@@ -744,7 +824,7 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
         {#if $idaa_slct.archive_content_id && !$idaa_slct.archive_content_obj?.hosted_file_id}
         <button
             type="button"
-            on:click={() => {
+            onclick={() => {
                 if (!confirm('Are you sure you want to delete this archive content?')) {return false;}
 
                 prom_api__archive_content_obj = archives_func.delete_ae_obj_id__archive_content({