From 641c6b28c3a768d740ede15b1062830519a2bebe Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 7 Jan 2025 13:49:30 -0500
Subject: [PATCH] Working on new and improved video clipping utility.

---
 .../ae_comp__hosted_files_clip_video.svelte   | 488 ++++++++++++++++++
 ...ae_comp__hosted_files_clip_video_v1.svelte | 396 ++++++++++++++
 src/lib/element_input_file.svelte             |   3 +-
 src/routes/hosted_files/+page.svelte          | 348 ++++++++-----
 4 files changed, 1091 insertions(+), 144 deletions(-)
 create mode 100644 src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte
 create mode 100644 src/lib/ae_core/ae_comp__hosted_files_clip_video_v1.svelte

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
new file mode 100644
index 00000000..6fa15692
--- /dev/null
+++ b/src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte
@@ -0,0 +1,488 @@
+<script lang="ts">
+export let log_lvl: number = 0;
+
+// Imports
+// Import components and elements
+import Element_input_files_tbl from '$lib/element_input_files_tbl.svelte';
+
+// Import storage, functions, and libraries
+import type { key_val } from '$lib/ae_stores';
+
+import { api } from '$lib/api';
+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 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[] = [];
+
+
+// Local Variables
+let task_id = link_to_id;
+let input_file_list: any = null;
+let ae_promises: key_val = {}; // Promise<any>;
+let ae_triggers: key_val = {};
+
+let input_element_id = 'ae_comp__hosted_files_upload__input';
+
+let form_kv: key_val = {
+    start_time: null,
+    end_time: null,
+    reencode: null,
+    video_file: null,
+};
+let download_clip_src: string;
+let download_clip_filename: string;
+
+$ae_sess.files.obj = {
+    obj: null,
+};
+
+// Functions and Logic
+async function handle_submit_form_files(event) {
+    console.log('*** handle_submit_form() ***');
+
+    $ae_sess.files.disable_submit__hosted_file_obj = true;
+    $ae_sess.files.submit_status = 'saving';
+    submit_status = 'saving';
+    upload_complete = false;
+
+    hosted_file_id_li = [];
+    hosted_file_obj_li = [];
+
+    let hosted_file_results;
+
+    form_kv = {
+        start_time: event.target.start_time.value,
+        end_time: event.target.end_time.value,
+        reencode: event.target.reencode.value,
+        video_file: event.target.file_list.files[0],
+    };
+
+
+    // 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]);
+
+    // let download_filename = `clipped_file_test.mp4`;
+
+    // let params = null;
+
+    // let endpoint = '/hosted_file/clip_video';
+
+    // console.log(form_data);
+
+    // params = null;
+
+
+    if (event.target[input_element_id].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
+        // The task_id should be the file hash.
+        // processed_file_list[i] has the file hash_sha256, hash_sha256_match, warnings, uploaded, uploaded_bytes, filename, and file_size_bytes.
+        for (let i = 0; i < event.target[input_element_id].files.length; i++) {
+            let tmp_file = event.target[input_element_id].files[i];
+
+            task_id = $ae_sess.files.processed_file_list[i].hash_sha256;
+
+            hosted_file_results = await handle_input_upload_files([tmp_file], form_kv, task_id);
+
+            if (hosted_file_results) {
+                console.log(`hosted_file_results:`, hosted_file_results);
+            } else {
+                console.log(`hosted_file_results:`, hosted_file_results);
+            }
+        }
+        // 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;
+        event.target.reset();
+        // await tick();
+
+        if (log_lvl) {
+            console.log(`hosted_file_id_li: ${hosted_file_id_li}`, hosted_file_id_li);
+        } 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;
+    $ae_sess.files.submit_status = 'saved';
+    submit_status = 'saved';
+    upload_complete = true;
+}
+
+
+async function handle_input_upload_files(input_upload_files, form_kv, task_id) {
+    console.log('*** handle_input_upload_files() ***');
+    console.log(input_upload_files);
+    console.log(form_kv);
+
+    const form_data = new FormData();
+
+    // form_data.append('account_id', $ae_loc.account_id);
+    // form_data.append('link_to_type', link_to_type);
+    // form_data.append('link_to_id', link_to_id);
+
+    form_data.append('start_time', form_kv.start_time);
+    form_data.append('end_time', form_kv.end_time);
+
+    if (form_kv.reencode == '1' || form_kv.reencode == 'true') {
+        form_data.append('reencode', 'true');
+    } else {
+        form_data.append('reencode', 'false');
+    }
+
+    // There should really only be one file uploaded at a time for now.
+    for (let i = 0; i < input_upload_files.length; i++) {
+        form_data.append(`video_file`, input_upload_files[i]);
+    }
+
+    // hash_sha256, uploaded, uploaded_bytes
+    // $ae_sess.files.processed_file_list[i] = {
+    //     ...$ae_sess.files.processed_file_list[i],
+    //     uploaded: $ae_sess.api_upload_kv[link_to_id].percent_completed,
+    //     uploaded_bytes: $ae_sess.api_upload_kv[link_to_id].uploaded_bytes,
+    // };
+
+    let params = null;
+
+    let endpoint = '/hosted_file/clip_video';
+
+    console.log(form_data);
+
+    params = null;
+
+    // Uncomment and the post_promise is not seen by the "await" below
+    // post_promise = await api.post_object({api_cfg: $cfg.api, endpoint: endpoint, params: params, data:form_data});
+    // Uncomment so that the post_promise is not seen by the "await" below
+    ae_promises.upload__hosted_file_obj = api.post_object({
+        api_cfg: $ae_api,
+        endpoint: endpoint,
+        params: params,
+        form_data: form_data,
+        return_blob: true,
+        filename: 'clipped_video_test.mp4',
+        auto_download: false,
+        task_id: task_id,
+        log_lvl: log_lvl
+    })
+    .then(async 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_clip_src = file_obj_url;
+        // download_filename = file_obj_url;
+
+        return true;
+
+
+        // // WARNING!!!! ONLY ONE FILE IS EXPECTED TO BE UPLOADED AT A TIME!!!
+        // // NOTE: The /hosted_file/upload_files endpoint will always return a list of successful files uploaded. In this case we are only uploading one file and expecting a list of one item.
+        // let x = 0;
+        // console.log(result[x]);
+        // let hosted_file_obj = result[x];
+
+        // let hosted_file_id = hosted_file_obj.hosted_file_id_random;
+
+        // hosted_file_id_li.push(hosted_file_id);
+        // hosted_file_obj_li.push(hosted_file_obj);
+
+        // let hosted_file_data: key_val = {};
+        // hosted_file_data['hosted_file_id_random'] = hosted_file_id;
+        // hosted_file_data['for_type'] = link_to_type;
+        // hosted_file_data['for_id_random'] = link_to_id;
+        // hosted_file_data['filename'] = hosted_file_obj.filename;
+        // hosted_file_data['extension'] = hosted_file_obj.extension;
+        // hosted_file_data['enable'] = true;
+        // console.log(hosted_file_data);
+
+        // return hosted_file_data;
+
+        // $ae_sess.files.new_upload_list[i].uploaded_bytes = 10; // fake 10 bytes at least...
+
+        // let event_file_id = await events_func.create_hosted_file_obj_from_hosted_file_async({
+        //     api_cfg: $ae_api,
+        //     hosted_file_id: hosted_file_id,
+        //     data: event_file_data,
+        //     log_lvl: log_lvl
+        //     })
+        // .then(function (create_result) {
+        //     console.log(create_result); // NOTE: This should be the event_file_id string
+        //     // let event_file_id = create_result;
+        //     return create_result;
+        // });
+
+        // return event_file_id;
+    })
+    // .then(function (hosted_file_data) {
+    //     return hosted_file_data;
+    // })
+    .catch(function (error) {
+        console.log('Something went wrong.');
+        console.log(error);
+        return false;
+    })
+    .finally( function () {
+        // $slct_trigger = 'load__hosted_file_obj_li';
+    });
+
+    console.log(ae_promises.upload__hosted_file_obj);
+    let hosted_file_result = ae_promises.upload__hosted_file_obj;
+
+    return hosted_file_result;
+}
+
+function handle_clip_video(event) {
+    console.log('*** handle_clip_video() ***');
+
+    let hosted_file_id = event.target.hosted_file_id.value;
+
+    // $ae_sess.files.disable_submit__hosted_file_obj = true;
+    $ae_sess.files[hosted_file_id] = {};
+    $ae_sess.files[hosted_file_id].submit_status = 'saving';
+    $ae_sess.files[hosted_file_id].start_time = event.target.start_time.value;
+    $ae_sess.files[hosted_file_id].end_time = event.target.end_time.value;
+    $ae_sess.files[hosted_file_id].reencode = event.target.reencode.value;
+    $ae_sess.files[hosted_file_id].new_filename = event.target.new_filename.value;
+    $ae_sess.files[hosted_file_id].upload_complete = false;
+
+    let endpoint = `/${hosted_file_id}/clip_video`;
+
+    let params = {
+        start_time: event.target.start_time.value,
+        end_time: event.target.end_time.value,
+        reencode: event.target.reencode.value,
+        filename_no_ext: event.target.new_filename.value,
+        from_type: 'mp4', // Video file type being converted
+        to_type: 'mp4', // Video file type to convert to
+    };
+
+    ae_promises[hosted_file_id] = {};
+    // .convert__hosted_file_obj
+    ae_promises[hosted_file_id] = api.get_object({
+        api_cfg: $ae_api,
+        endpoint: endpoint,
+        params: params,
+        log_lvl: log_lvl
+    })
+    .then(function (result) {
+        console.log(result);
+
+        $ae_sess.files[hosted_file_id].submit_status = 'saved';
+        $ae_sess.files[hosted_file_id].upload_complete = true;
+
+        return true;
+    });
+
+}
+</script>
+
+
+<div>
+
+<h3 class="h3">{hosted_file_obj_li.length}&times; files uploaded</h3>
+{#each hosted_file_obj_li as hosted_file_obj, i}
+    <div>
+        <span>{hosted_file_obj.hosted_file_id_random}</span>
+        <span>{hosted_file_obj.filename}</span>
+        <span>{hosted_file_obj.extension}</span>
+    </div>
+    <form
+        on:submit|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'} -->
+
+        <input type="hidden" name="hosted_file_id" value="{hosted_file_obj.hosted_file_id_random}" />
+
+        <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="00:01:15" 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>
+
+        <!-- {#await ae_promises.upload__hosted_file_obj}
+        <div class="text-lg flex flex-row gap-1 items-center justify-center">
+            <span class="fas fa-spinner fa-spin m-1"></span>
+            <span class="">
+                Uploading
+                {#if $ae_sess.api_upload_kv[task_id]}
+                    {$ae_sess.api_upload_kv[task_id].percent_completed}%
+                {/if}
+            </span>
+        </div>
+        {:then} -->
+        <button
+            type="submit"
+            class="btn btn-lg btn-primary variant-ghost-primary hover:variant-ghost-success w-54"
+            disabled={$ae_sess.files.disable_submit__hosted_file_obj || $ae_sess.files.status__file_list != 'ready'}
+            >
+            Process Video
+        </button>
+        <!-- {/await} -->
+
+    </form>
+
+{/each}
+
+<!-- class:hidden={!$ae_loc.trusted_access} -->
+<form
+    on:submit|preventDefault={handle_submit_form_files}
+    class="{class_li_default} {class_li}"
+    >
+
+    <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="00:01:15" 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>
+
+    {#await ae_promises.upload__hosted_file_obj}
+    <div class="text-lg flex flex-row gap-1 items-center justify-center">
+        <span class="fas fa-spinner fa-spin m-1"></span>
+        <span class="">
+            Uploading
+            {#if $ae_sess.api_upload_kv[task_id]}
+                {$ae_sess.api_upload_kv[task_id].percent_completed}%
+            {/if}
+        </span>
+    </div>
+    {/await}
+
+    <label
+        for="ae_comp__hosted_files_upload__input"
+        class="svelte_input_file_label text-center"
+        class:hidden={$ae_sess.files.disable_submit__hosted_file_obj}
+        >
+        <slot name="label">
+        <div>
+            <span class="fas fa-upload"></span>
+            <!-- Select files to upload -->
+            <!-- <span class="fas fa-file-archive"></span> -->
+            <strong class="bg-blue-300 p-1">Upload files</strong>
+            <!-- (drag and drop) -->
+        </div>
+        <span class="text-sm text-gray-600 dark:text-gray-400 italic">
+            <strong>Video files only</strong><br>
+            (mp4 or mkv)
+        </span>
+        </slot>
+    </label>
+
+    <input
+        id={input_element_id}
+        type="file"
+        bind:files={input_file_list}
+        {multiple}
+        {required}
+        {accept}
+        name={input_name}
+        class="svelte_input_file_element file-dropzone-input block w-full text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 {input_class_li.join(' ')}"
+        class:hidden={$ae_sess.files.disable_submit__hosted_file_obj}
+        />
+
+    <Element_input_files_tbl
+        bind:input_file_list={input_file_list}
+
+        bind:file_list_status={$ae_sess.files.status__file_list}
+        bind:processed_file_list={$ae_sess.files.processed_file_list}
+        table_class_li={table_class_li}
+        />
+
+    <button
+        type="submit"
+        class="btn btn-lg btn-primary variant-ghost-primary hover:variant-ghost-success w-54"
+        disabled={$ae_sess.files.disable_submit__hosted_file_obj || $ae_sess.files.status__file_list != 'ready'}
+        >
+        {#await ae_promises.upload__hosted_file_obj}
+            <span class="fas fa-spinner fa-spin m-1"></span>
+            <span class="">
+                Uploading
+                {#if $ae_sess.api_upload_kv[task_id]}
+                    {$ae_sess.api_upload_kv[task_id].percent_completed}%
+                {/if}
+            </span>
+        {:then}
+            <span class="fas fa-upload m-1"></span>
+            <span class="text-sm">
+                Upload?
+            </span>
+            <!-- <span class="fas fa-save m-1"></span> -->
+            <span class="grow font-bold">
+                {#if $ae_sess.files.processed_file_list?.length > 0}
+                    <!-- {#each $ae_sess.files.processed_file_list as file_obj, index}
+                        <span class="text-xs">
+                            {file_obj.filename}
+                        </span>
+                    {/each} -->
+                    {$ae_sess.files.processed_file_list.length == 1 ? `${$ae_sess.files.processed_file_list.length} file` : `${$ae_sess.files.processed_file_list.length} files`}
+                {:else}
+                    <span class="text-xs">
+                        No files selected
+                    </span>
+                {/if}
+                <!-- Files -->
+            </span>
+        {/await}
+    </button>
+</form>
+
+
+<hr />
+
+{#await ae_promises.upload__hosted_file_obj}
+    <span class="fas fa-spinner fa-spin m-1"></span>
+    <p class="highlight">Converting... This may take a few minutes.</p>
+{:then}
+    {#if ae_promises.upload__hosted_file_obj}
+    <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>
\ No newline at end of file
diff --git a/src/lib/ae_core/ae_comp__hosted_files_clip_video_v1.svelte b/src/lib/ae_core/ae_comp__hosted_files_clip_video_v1.svelte
new file mode 100644
index 00000000..956dccde
--- /dev/null
+++ b/src/lib/ae_core/ae_comp__hosted_files_clip_video_v1.svelte
@@ -0,0 +1,396 @@
+<script lang="ts">
+export let log_lvl: number = 0;
+
+// Imports
+// Import components and elements
+import Element_input_files_tbl from '$lib/element_input_files_tbl.svelte';
+
+// Import storage, functions, and libraries
+import type { key_val } from '$lib/ae_stores';
+
+import { api } from '$lib/api';
+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 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[] = [];
+
+
+// Local Variables
+let task_id = link_to_id;
+let input_file_list: any = null;
+let ae_promises: key_val = {}; // Promise<any>;
+let ae_triggers: key_val = {};
+
+let input_element_id = 'ae_comp__hosted_files_upload__input';
+
+let form_kv: key_val = {
+    start_time: null,
+    end_time: null,
+    reencode: null,
+    video_file: null,
+};
+let download_clip_src: string;
+let download_clip_filename: string;
+
+// Functions and Logic
+async function handle_submit_form_files(event) {
+    console.log('*** handle_submit_form() ***');
+
+    $ae_sess.files.disable_submit__hosted_file_obj = true;
+    $ae_sess.files.submit_status = 'saving';
+    submit_status = 'saving';
+    upload_complete = false;
+
+    hosted_file_id_li = [];
+    hosted_file_obj_li = [];
+
+    let hosted_file_results;
+
+    form_kv = {
+        start_time: event.target.start_time.value,
+        end_time: event.target.end_time.value,
+        reencode: event.target.reencode.value,
+        video_file: event.target.file_list.files[0],
+    };
+
+
+    // 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]);
+
+    // let download_filename = `clipped_file_test.mp4`;
+
+    // let params = null;
+
+    // let endpoint = '/hosted_file/clip_video';
+
+    // console.log(form_data);
+
+    // params = null;
+
+
+    if (event.target[input_element_id].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
+        // The task_id should be the file hash.
+        // processed_file_list[i] has the file hash_sha256, hash_sha256_match, warnings, uploaded, uploaded_bytes, filename, and file_size_bytes.
+        for (let i = 0; i < event.target[input_element_id].files.length; i++) {
+            let tmp_file = event.target[input_element_id].files[i];
+
+            task_id = $ae_sess.files.processed_file_list[i].hash_sha256;
+
+            hosted_file_results = await handle_input_upload_files([tmp_file], form_kv, task_id);
+
+            if (hosted_file_results) {
+                console.log(`hosted_file_results:`, hosted_file_results);
+            } else {
+                console.log(`hosted_file_results:`, hosted_file_results);
+            }
+        }
+        // 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;
+        event.target.reset();
+        // await tick();
+
+        if (log_lvl) {
+            console.log(`hosted_file_id_li: ${hosted_file_id_li}`, hosted_file_id_li);
+        } 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;
+    $ae_sess.files.submit_status = 'saved';
+    submit_status = 'saved';
+    upload_complete = true;
+}
+
+
+async function handle_input_upload_files(input_upload_files, form_kv, task_id) {
+    console.log('*** handle_input_upload_files() ***');
+    console.log(input_upload_files);
+    console.log(form_kv);
+
+    const form_data = new FormData();
+
+    // form_data.append('account_id', $ae_loc.account_id);
+    // form_data.append('link_to_type', link_to_type);
+    // form_data.append('link_to_id', link_to_id);
+
+    form_data.append('start_time', form_kv.start_time);
+    form_data.append('end_time', form_kv.end_time);
+
+    if (form_kv.reencode == '1' || form_kv.reencode == 'true') {
+        form_data.append('reencode', 'true');
+    } else {
+        form_data.append('reencode', 'false');
+    }
+
+    // There should really only be one file uploaded at a time for now.
+    for (let i = 0; i < input_upload_files.length; i++) {
+        form_data.append(`video_file`, input_upload_files[i]);
+    }
+
+    // hash_sha256, uploaded, uploaded_bytes
+    // $ae_sess.files.processed_file_list[i] = {
+    //     ...$ae_sess.files.processed_file_list[i],
+    //     uploaded: $ae_sess.api_upload_kv[link_to_id].percent_completed,
+    //     uploaded_bytes: $ae_sess.api_upload_kv[link_to_id].uploaded_bytes,
+    // };
+
+    let params = null;
+
+    let endpoint = '/hosted_file/clip_video';
+
+    console.log(form_data);
+
+    params = null;
+
+    // Uncomment and the post_promise is not seen by the "await" below
+    // post_promise = await api.post_object({api_cfg: $cfg.api, endpoint: endpoint, params: params, data:form_data});
+    // Uncomment so that the post_promise is not seen by the "await" below
+    ae_promises.upload__hosted_file_obj = api.post_object({
+        api_cfg: $ae_api,
+        endpoint: endpoint,
+        params: params,
+        form_data: form_data,
+        return_blob: true,
+        filename: 'clipped_video_test.mp4',
+        auto_download: false,
+        task_id: task_id,
+        log_lvl: log_lvl
+    })
+    .then(async 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_clip_src = file_obj_url;
+        // download_filename = file_obj_url;
+
+        return true;
+
+
+        // // WARNING!!!! ONLY ONE FILE IS EXPECTED TO BE UPLOADED AT A TIME!!!
+        // // NOTE: The /hosted_file/upload_files endpoint will always return a list of successful files uploaded. In this case we are only uploading one file and expecting a list of one item.
+        // let x = 0;
+        // console.log(result[x]);
+        // let hosted_file_obj = result[x];
+
+        // let hosted_file_id = hosted_file_obj.hosted_file_id_random;
+
+        // hosted_file_id_li.push(hosted_file_id);
+        // hosted_file_obj_li.push(hosted_file_obj);
+
+        // let hosted_file_data: key_val = {};
+        // hosted_file_data['hosted_file_id_random'] = hosted_file_id;
+        // hosted_file_data['for_type'] = link_to_type;
+        // hosted_file_data['for_id_random'] = link_to_id;
+        // hosted_file_data['filename'] = hosted_file_obj.filename;
+        // hosted_file_data['extension'] = hosted_file_obj.extension;
+        // hosted_file_data['enable'] = true;
+        // console.log(hosted_file_data);
+
+        // return hosted_file_data;
+
+        // $ae_sess.files.new_upload_list[i].uploaded_bytes = 10; // fake 10 bytes at least...
+
+        // let event_file_id = await events_func.create_hosted_file_obj_from_hosted_file_async({
+        //     api_cfg: $ae_api,
+        //     hosted_file_id: hosted_file_id,
+        //     data: event_file_data,
+        //     log_lvl: log_lvl
+        //     })
+        // .then(function (create_result) {
+        //     console.log(create_result); // NOTE: This should be the event_file_id string
+        //     // let event_file_id = create_result;
+        //     return create_result;
+        // });
+
+        // return event_file_id;
+    })
+    // .then(function (hosted_file_data) {
+    //     return hosted_file_data;
+    // })
+    .catch(function (error) {
+        console.log('Something went wrong.');
+        console.log(error);
+        return false;
+    })
+    .finally( function () {
+        // $slct_trigger = 'load__hosted_file_obj_li';
+    });
+
+    console.log(ae_promises.upload__hosted_file_obj);
+    let hosted_file_result = ae_promises.upload__hosted_file_obj;
+
+    return hosted_file_result;
+}
+
+</script>
+
+
+<div>
+<!-- class:hidden={!$ae_loc.trusted_access} -->
+<form
+    on:submit|preventDefault={handle_submit_form_files}
+    class="{class_li_default} {class_li}"
+    >
+
+    <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="00:01:15" 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>
+
+    {#await ae_promises.upload__hosted_file_obj}
+    <div class="text-lg flex flex-row gap-1 items-center justify-center">
+        <span class="fas fa-spinner fa-spin m-1"></span>
+        <span class="">
+            Uploading
+            {#if $ae_sess.api_upload_kv[task_id]}
+                {$ae_sess.api_upload_kv[task_id].percent_completed}%
+            {/if}
+        </span>
+    </div>
+    {/await}
+
+    <label
+        for="ae_comp__hosted_files_upload__input"
+        class="svelte_input_file_label text-center"
+        class:hidden={$ae_sess.files.disable_submit__hosted_file_obj}
+        >
+        <slot name="label">
+        <div>
+            <span class="fas fa-upload"></span>
+            <!-- Select files to upload -->
+            <!-- <span class="fas fa-file-archive"></span> -->
+            <strong class="bg-blue-300 p-1">Upload files</strong>
+            <!-- (drag and drop) -->
+        </div>
+        <span class="text-sm text-gray-600 dark:text-gray-400 italic">
+            <strong>Video files only</strong><br>
+            (mp4 or mkv)
+        </span>
+        </slot>
+    </label>
+
+    <input
+        id={input_element_id}
+        type="file"
+        bind:files={input_file_list}
+        {multiple}
+        {required}
+        {accept}
+        name={input_name}
+        class="svelte_input_file_element file-dropzone-input block w-full text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 {input_class_li.join(' ')}"
+        class:hidden={$ae_sess.files.disable_submit__hosted_file_obj}
+        />
+
+    <Element_input_files_tbl
+        bind:input_file_list={input_file_list}
+
+        bind:file_list_status={$ae_sess.files.status__file_list}
+        bind:processed_file_list={$ae_sess.files.processed_file_list}
+        table_class_li={table_class_li}
+        />
+
+    <button
+        type="submit"
+        class="btn btn-lg btn-primary variant-ghost-primary hover:variant-ghost-success w-54"
+        disabled={$ae_sess.files.disable_submit__hosted_file_obj || $ae_sess.files.status__file_list != 'ready'}
+        >
+        {#await ae_promises.upload__hosted_file_obj}
+            <span class="fas fa-spinner fa-spin m-1"></span>
+            <span class="">
+                Uploading
+                {#if $ae_sess.api_upload_kv[task_id]}
+                    {$ae_sess.api_upload_kv[task_id].percent_completed}%
+                {/if}
+            </span>
+        {:then}
+            <span class="fas fa-upload m-1"></span>
+            <span class="text-sm">
+                Upload?
+            </span>
+            <!-- <span class="fas fa-save m-1"></span> -->
+            <span class="grow font-bold">
+                {#if $ae_sess.files.processed_file_list?.length > 0}
+                    <!-- {#each $ae_sess.files.processed_file_list as file_obj, index}
+                        <span class="text-xs">
+                            {file_obj.filename}
+                        </span>
+                    {/each} -->
+                    {$ae_sess.files.processed_file_list.length == 1 ? `${$ae_sess.files.processed_file_list.length} file` : `${$ae_sess.files.processed_file_list.length} files`}
+                {:else}
+                    <span class="text-xs">
+                        No files selected
+                    </span>
+                {/if}
+                <!-- Files -->
+            </span>
+        {/await}
+    </button>
+</form>
+
+
+<hr />
+
+{#await ae_promises.upload__hosted_file_obj}
+    <span class="fas fa-spinner fa-spin m-1"></span>
+    <p class="highlight">Converting... This may take a few minutes.</p>
+{:then}
+    {#if ae_promises.upload__hosted_file_obj}
+    <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>
\ No newline at end of file
diff --git a/src/lib/element_input_file.svelte b/src/lib/element_input_file.svelte
index 90b7a640..b63d24d1 100644
--- a/src/lib/element_input_file.svelte
+++ b/src/lib/element_input_file.svelte
@@ -353,7 +353,8 @@ function remove_file_from_filelist(index) {
                     on:click|preventDefault={() => { (remove_file_from_filelist(file_index)); }}
                     class="btn btn-md variant-soft-warning hover:variant-filled-secondary m-1"
                     title="Remove file from upload list">
-                <span class="fas fa-minus"></span>
+                    <span class="fas fa-minus"></span>
+                    <span class="hidden">Remove</span>
                 </button>
             </td>
             <td class="file_filename">{file_list_item.filename}</td>
diff --git a/src/routes/hosted_files/+page.svelte b/src/routes/hosted_files/+page.svelte
index 4d449081..0eba1171 100644
--- a/src/routes/hosted_files/+page.svelte
+++ b/src/routes/hosted_files/+page.svelte
@@ -10,7 +10,12 @@ 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';
 
-export let container_class_li = [];
+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';
+
+let log_lvl = 1;
+
+// export let container_class_li = [];
 
 let file_uploads_post_promise;
 let download_src;
@@ -21,168 +26,261 @@ let file_uploads_clip_post_promise;
 let download_clip_src;
 let download_clip_filename;
 
+let hosted_file_upload: key_val = {
+    // link_to_type: 'account',
+    // link_to_id: ae_loc.account_id,
+    hosted_file_id_li: [],
+    hosted_file_obj_li: [],
+    upload_complete: false,
+};
+
 onMount(() => {
     console.log('Hosted Files: AV Utilities +page.svelte');
 });
 
 
 function handle_submit_form(event) {
-    console.log('*** handle_submit_form() ***');
+//     console.log('*** handle_submit_form() ***');
 
-    console.log(event.target.file_list);
+//     console.log(event.target.file_list);
 
-    const form_data = new FormData();
+//     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('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('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('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]);
-    }
+//     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`
+//     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]);
-    // }
+//     // 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 params = null;
 
-    let endpoint = '/hosted_file/create_video';
+//     let endpoint = '/hosted_file/create_video';
 
-    console.log(form_data);
+//     console.log(form_data);
 
-    params = null;
+//     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);
+//     // 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;
+//         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);
+//     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;
+//     // 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,
-    //     }
-    // );
+//     // dispatch(
+//     //     'event_file_obj_li_updated',
+//     //     {
+//     //         link_to_type: link_to_type,
+//     //         link_to_id: link_to_id,
+//     //     }
+//     // );
 
-    return true;
+//     return true;
 }
 
 
+// function handle_submit_form_clip(event) {
+//     console.log('*** handle_submit_form() ***');
 
+//     console.log(event.target.file_list);
 
+//     const form_data = new FormData();
 
-function handle_submit_form_clip(event) {
-    console.log('*** handle_submit_form() ***');
+//     form_data.append('start_time', event.target.start_time.value);
+//     form_data.append('end_time', event.target.end_time.value);
 
-    console.log(event.target.file_list);
+//     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);
 
-    const form_data = new FormData();
+//     form_data.append(`video_file`, event.target.video_file.files[0]);
 
-    form_data.append('start_time', event.target.start_time.value);
-    form_data.append('end_time', event.target.end_time.value);
+//     download_filename = `clipped_file_test.mp4`
 
-    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);
+//     // 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]);
+//     // }
 
-    form_data.append(`video_file`, event.target.video_file.files[0]);
+//     let params = null;
 
-    download_filename = `clipped_file_test.mp4`
+//     let endpoint = '/hosted_file/clip_video';
 
-    // 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]);
-    // }
+//     console.log(form_data);
 
-    let params = null;
+//     params = null;
 
-    let endpoint = '/hosted_file/clip_video';
+//     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);
 
-    console.log(form_data);
+//         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;
 
-    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);
+//     console.log(file_uploads_clip_post_promise);
 
-        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;
-}
+//     return true;
+// }
 
 </script>
 
 
 <section
-    class="ae__hosted_files__av_util md:container h-full mx-auto space-y-4 {container_class_li.join(' ')}">
+    class="ae__hosted_files__av_util container space-y-4"
+    >
 
-    <h2>Convert mp3 to mp4</h2>
+<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>
+
+    <h2 class="h2">Step 1: Upload Video File</h2>
+    <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:upload_complete={hosted_file_upload.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>
+            </span>
+        </span>
+    </Comp_hosted_files_upload>
+
+    <h2 class="h2">Step 2: Clip Video</h2>
+    {#if hosted_file_upload.upload_complete}
+    <Comp_hosted_files_clip_video
+        class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
+        link_to_type="account"
+        link_to_id={$ae_loc.account_id}
+        bind:hosted_file_id_li={hosted_file_upload.hosted_file_id_li}
+        bind:hosted_file_obj_li={hosted_file_upload.hosted_file_obj_li}
+        bind:upload_complete={hosted_file_upload.upload_complete}
+        log_lvl={log_lvl}
+        >
+    </Comp_hosted_files_clip_video>
+    {:else}
+        <p>Upload a video file to clip.</p>
+    {/if}
+
+    <!-- <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>
+
+
+
+<div class="border border-gray-200 p-2 rounded-lg hidden">
+    <h2 class="h2">Convert mp3 to mp4</h2>
     <p>This AV utility will take an mp3 audio file and a static image template and create a mp4 video file. This process may take a few seconds to a handful of minutes. Please be patient while it is processing.</p>
-    <form on:submit|preventDefault={handle_submit_form} on:keydown={e => e.key === 'Escape' && handle_cancel_form} class="av_util_mp3_to_mp4 space-y-4">
+    <form on:submit|preventDefault={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="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="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" />
+        <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 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>
+        <!-- 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>
+        <button type="submit" class="btn variant-filled-warning mx-1">
+            <span class="fas fa-upload mx-1"></span>
+            Submit
+        </button>
 
     </form>
 
@@ -197,46 +295,10 @@ function handle_submit_form_clip(event) {
         <p>Fill out the form and select the audio file and static image template file.</p>
         {/if}
     {/await}
+</div>
 
 
 
-    <hr>
-
-
-    <h2>Clip mp4</h2>
-    <p>This AV utility will take an mp4 video file 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>
-    <form on:submit|preventDefault={handle_submit_form_clip} on:keydown={e => e.key === 'Escape' && handle_cancel_form_clip} class="av_util_mp4_clip 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="00:00:00" 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 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}
-
 </section>