From 67752ccdfe5adbb06259e1509b9b719ff7d8bdf2 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 6 Feb 2026 14:49:36 -0500
Subject: [PATCH] refactor(lib): standardize helpers and format shared
 components

- Applied snake_case helper standardization and formatting to element_input_file, hosted_files_clip_video, and websocket_v2.
- Cleaned up deprecated legacy imports.
---
 .../ae_comp__hosted_files_clip_video.svelte   | 79 +++++++++++++------
 src/lib/elements/element_input_file.svelte    | 55 ++++++++++---
 src/lib/elements/element_websocket_v2.svelte  | 44 ++++++++---
 3 files changed, 131 insertions(+), 47 deletions(-)

diff --git a/src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte b/src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte
index 3dd5cb23..eeea4621 100644
--- a/src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte
+++ b/src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    
-
     // Imports
     // Import components and elements
     // import Element_input_files_tbl from '$lib/element_input_files_tbl.svelte';
@@ -102,17 +100,20 @@
         let new_filename = formData.get('new_filename') as string;
 
         $ae_sess.files.processed_file_kv[hosted_file_id] = {};
-        $ae_sess.files.processed_file_kv[hosted_file_id].submit_status = 'clipping';
+        $ae_sess.files.processed_file_kv[hosted_file_id].submit_status =
+            'clipping';
         $ae_sess.files.processed_file_kv[hosted_file_id].clip_complete = false;
 
         // $ae_sess.files.disable_submit__hosted_file_obj = true;
         $ae_loc.files.processed_file_kv[hosted_file_id] = {};
-        $ae_loc.files.processed_file_kv[hosted_file_id].submit_status = 'clipping';
+        $ae_loc.files.processed_file_kv[hosted_file_id].submit_status =
+            'clipping';
         $ae_loc.files.processed_file_kv[hosted_file_id].start_time = start_time;
         $ae_loc.files.processed_file_kv[hosted_file_id].end_time = end_time;
         $ae_loc.files.processed_file_kv[hosted_file_id].reencode = reencode;
         $ae_loc.files.processed_file_kv[hosted_file_id].scale_down = scale_down;
-        $ae_loc.files.processed_file_kv[hosted_file_id].new_filename = new_filename;
+        $ae_loc.files.processed_file_kv[hosted_file_id].new_filename =
+            new_filename;
         $ae_loc.files.processed_file_kv[hosted_file_id].clip_complete = false;
 
         let endpoint = `/hosted_file/${hosted_file_id}/clip_video`;
@@ -152,11 +153,15 @@
                 // $ae_loc.files.video_clip_file_kv[result.hosted_file_id] = {};
                 // $ae_loc.files.video_clip_file_kv[result.hosted_file_id] = result;
 
-                $ae_sess.files.processed_file_kv[hosted_file_id].submit_status = 'clipped';
-                $ae_sess.files.processed_file_kv[hosted_file_id].clip_complete = true;
+                $ae_sess.files.processed_file_kv[hosted_file_id].submit_status =
+                    'clipped';
+                $ae_sess.files.processed_file_kv[hosted_file_id].clip_complete =
+                    true;
 
-                $ae_loc.files.processed_file_kv[hosted_file_id].submit_status = 'clipped';
-                $ae_loc.files.processed_file_kv[hosted_file_id].clip_complete = true;
+                $ae_loc.files.processed_file_kv[hosted_file_id].submit_status =
+                    'clipped';
+                $ae_loc.files.processed_file_kv[hosted_file_id].clip_complete =
+                    true;
 
                 submit_status = 'clipped';
                 clip_complete = true;
@@ -181,7 +186,9 @@
     {#each Object.entries(hosted_file_obj_kv) as [hosted_file_id, hosted_file_obj]}
         <div class="border border-gray-300 rounded-lg p-2 m-2">
             <!-- Download Button (Standardized) -->
-            <div class="flex flex-row flex-wrap gap-1 justify-center items-center w-full">
+            <div
+                class="flex flex-row flex-wrap gap-1 justify-center items-center w-full"
+            >
                 <!-- Remove from uploaded file kv list -->
                 <button
                     type="button"
@@ -193,7 +200,9 @@
                         );
                         // delete $ae_sess.files.uploaded_file_kv[hosted_file_id];
                         delete $ae_loc.files.uploaded_file_kv[hosted_file_id];
-                        $ae_loc.files.uploaded_file_kv = { ...$ae_loc.files.uploaded_file_kv };
+                        $ae_loc.files.uploaded_file_kv = {
+                            ...$ae_loc.files.uploaded_file_kv
+                        };
                         delete hosted_file_obj_kv[hosted_file_id];
                         hosted_file_obj_kv = { ...hosted_file_obj_kv };
                         // delete $ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id];
@@ -212,8 +221,8 @@
                 <!-- Download the file -->
                 <div class:hidden={!$ae_loc.edit_mode}>
                     <AE_Comp_Hosted_Files_Download_Button
-                        hosted_file_id={hosted_file_id}
-                        hosted_file_obj={hosted_file_obj}
+                        {hosted_file_id}
+                        {hosted_file_obj}
                         color="primary"
                         variant="tonal"
                         classes="novi_btn btn-sm lg:btn-md min-w-72 lg:min-w-96 !justify-start"
@@ -250,7 +259,9 @@
                     value={hosted_file_obj.hosted_file_id}
                 />
 
-                <div class="flex flex-row gap-1 justify-center items-center w-full">
+                <div
+                    class="flex flex-row gap-1 justify-center items-center w-full"
+                >
                     <span class="text-xs font-bold w-32">New Filename:</span>
                     <input
                         type="text"
@@ -267,14 +278,19 @@
                         class="label w-48"
                         title="The start time of the clip. This is the time in the video where the clip will start. You may need to subtract a few seconds to get the exact start time."
                     >
-                        <span class="text-xs font-bold">Start time (HH:MM:SS)</span>
+                        <span class="text-xs font-bold"
+                            >Start time (HH:MM:SS)</span
+                        >
                         <input
                             type="text"
                             name="start_time"
                             value={$ae_loc.files.processed_file_kv &&
                             $ae_loc.files.processed_file_kv[hosted_file_id] &&
-                            $ae_loc.files.processed_file_kv[hosted_file_id].start_time
-                                ? $ae_loc.files.processed_file_kv[hosted_file_id].start_time
+                            $ae_loc.files.processed_file_kv[hosted_file_id]
+                                .start_time
+                                ? $ae_loc.files.processed_file_kv[
+                                      hosted_file_id
+                                  ].start_time
                                 : '00:00:00'}
                             placeholder="HH:MM:SS (00:01:30)"
                             class="input w-32"
@@ -285,14 +301,19 @@
                         class="label w-48"
                         title="The end time of the clip. This is the time in the video where the clip will end. You may need to add a few seconds to get the exact end time."
                     >
-                        <span class="text-xs font-bold">End time (HH:MM:SS)</span>
+                        <span class="text-xs font-bold"
+                            >End time (HH:MM:SS)</span
+                        >
                         <input
                             type="text"
                             name="end_time"
                             value={$ae_loc.files.processed_file_kv &&
                             $ae_loc.files.processed_file_kv[hosted_file_id] &&
-                            $ae_loc.files.processed_file_kv[hosted_file_id].end_time
-                                ? $ae_loc.files.processed_file_kv[hosted_file_id].end_time
+                            $ae_loc.files.processed_file_kv[hosted_file_id]
+                                .end_time
+                                ? $ae_loc.files.processed_file_kv[
+                                      hosted_file_id
+                                  ].end_time
                                 : '00:45:59'}
                             placeholder="HH:MM:SS (01:05:25)"
                             class="input w-32"
@@ -315,7 +336,12 @@
                             True
                         </label>
                         <label class="inline-block">
-                            <input type="radio" name="reencode" value="false" class="radio" />
+                            <input
+                                type="radio"
+                                name="reencode"
+                                value="false"
+                                class="radio"
+                            />
                             False
                         </label>
                     </span>
@@ -336,7 +362,12 @@
                             True
                         </label>
                         <label class="inline-block">
-                            <input type="radio" name="scale_down" value="false" class="radio" />
+                            <input
+                                type="radio"
+                                name="scale_down"
+                                value="false"
+                                class="radio"
+                            />
                             False
                         </label>
                     </span>
@@ -368,7 +399,9 @@
 
             {#await ae_promises[hosted_file_id]}
                 <span class="fas fa-spinner fa-spin m-1"></span>
-                <span class="highlight">Processing... This may take a few minutes.</span>
+                <span class="highlight"
+                    >Processing... This may take a few minutes.</span
+                >
             {:then}
                 {#if ae_promises[hosted_file_id]}
                     <span class="fas fa-download"></span> Ready to download below!
diff --git a/src/lib/elements/element_input_file.svelte b/src/lib/elements/element_input_file.svelte
index f515bbe1..0ad44e47 100644
--- a/src/lib/elements/element_input_file.svelte
+++ b/src/lib/elements/element_input_file.svelte
@@ -7,7 +7,14 @@
     import { ae_util } from '$lib/ae_utils/ae_utils';
     // import { api } from '$lib/api';
     import { check_hosted_file_obj_w_hash } from '$lib/ae_core/core__check_hosted_file_obj_w_hash';
-    import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/stores/ae_stores';
+    import {
+        ae_loc,
+        ae_sess,
+        ae_api,
+        ae_trig,
+        slct,
+        slct_trigger
+    } from '$lib/stores/ae_stores';
 
     const dispatch = createEventDispatcher();
 
@@ -37,7 +44,16 @@
         multiple = true,
         required = true,
         accept = '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',
-        untrusted_extension_list = ['bin', 'dmg', 'exe', 'js', 'msi', 'php', 'py', 'sh'],
+        untrusted_extension_list = [
+            'bin',
+            'dmg',
+            'exe',
+            'js',
+            'msi',
+            'php',
+            'py',
+            'sh'
+        ],
         legacy_extension_list = ['avi', 'doc', 'ppt', 'xls', 'wmv'],
         use_selected_file_table = true,
         file_list_status = $bindable(null),
@@ -74,7 +90,9 @@
         // console.log('*** Start ***');
 
         // for (let [i, file_item] of file_list.entries()) { //  Not sure why this does not work???
-        for await (const [i, file_item] of Array.prototype.entries.call(file_list)) {
+        for await (const [i, file_item] of Array.prototype.entries.call(
+            file_list
+        )) {
             console.log(i, file_item);
 
             // NOTE: The file list is readonly. The filenames can not be changed here.
@@ -208,7 +226,8 @@
             } else {
             }
 
-            file_data['warning_untrusted_extension'] = warning_untrusted_extension;
+            file_data['warning_untrusted_extension'] =
+                warning_untrusted_extension;
             file_data['warning_legacy_extension'] = warning_legacy_extension;
             file_data['warning_size'] = warning_size;
 
@@ -226,7 +245,9 @@
             let file_hash = null;
 
             // Only hash files less than 2 GB (2147483648 bytes)!!!
-            console.log(`File size: ${file_size_bytes / 1048576} MB (${file_size_bytes} bytes)`);
+            console.log(
+                `File size: ${file_size_bytes / 1048576} MB (${file_size_bytes} bytes)`
+            );
             if (file_size_bytes < 2000000000) {
                 // > 2 GB 2 147 483 648
                 file_hash = await ae_util.get_file_hash(file_item);
@@ -243,10 +264,11 @@
                 );
                 file_data['hash_sha256'] = file_hash;
 
-                let check_hosted_file_obj_w_hash_result = await check_hosted_file_obj_w_hash({
-                    api_cfg: $ae_api,
-                    hosted_file_hash: file_hash
-                });
+                let check_hosted_file_obj_w_hash_result =
+                    await check_hosted_file_obj_w_hash({
+                        api_cfg: $ae_api,
+                        hosted_file_hash: file_hash
+                    });
 
                 // console.log(check_hosted_file_obj_w_hash_result);
 
@@ -282,7 +304,9 @@
         const dt = new DataTransfer();
         // let input = document.getElementById(input_element_id);
 
-        let input_element = document.querySelector('input[type="file"].svelte_input_file_element');
+        let input_element = document.querySelector(
+            'input[type="file"].svelte_input_file_element'
+        );
 
         if (!input_element) {
             console.error('Could not find the input element.');
@@ -370,7 +394,8 @@
         <div
             class="file_list_status ae_warning preset-tonal-warning border border-warning-500 p-1 m-1"
         >
-            <span class="fas fa-spinner fa-spin m-1"></span> Processing selected file list...
+            <span class="fas fa-spinner fa-spin m-1"></span> Processing selected file
+            list...
         </div>
     {/if}
 
@@ -406,9 +431,13 @@
                             </button>
                         </td>
                         <td class="file_filename">{file_list_item.filename}</td>
-                        <td class="file_last_modified">{file_list_item.modified_datetime_string}</td
+                        <td class="file_last_modified"
+                            >{file_list_item.modified_datetime_string}</td
+                        >
+                        <td
+                            class="file_size"
+                            class:bg-pink-200={file_list_item.warning_size}
                         >
-                        <td class="file_size" class:bg-pink-200={file_list_item.warning_size}>
                             {file_list_item.file_size_string}
                             <!-- {#if $ae_sess.api_upload_kv[link_to_id]}
                     <span class="text-xs">({$ae_sess.api_upload_kv[link_to_id].percent_completed}%)</span>
diff --git a/src/lib/elements/element_websocket_v2.svelte b/src/lib/elements/element_websocket_v2.svelte
index c5723e5f..66b74553 100644
--- a/src/lib/elements/element_websocket_v2.svelte
+++ b/src/lib/elements/element_websocket_v2.svelte
@@ -87,16 +87,24 @@
     function ws_connect_group_id({ group_id, client_id }) {
         if (!group_id) {
             group_id = 'ae-grp-99';
-            console.log(`WS: No group_id specified! Setting to default: ${group_id}`);
+            console.log(
+                `WS: No group_id specified! Setting to default: ${group_id}`
+            );
             return false;
         }
         if (!client_id) {
             client_id = Date.now();
-            console.log(`WS: No client_id specified! Setting to current timestamp: ${client_id}`);
+            console.log(
+                `WS: No client_id specified! Setting to current timestamp: ${client_id}`
+            );
             // return false;
         }
-        console.log(`WS Connect URL: ${base_url}/group/${group_id}/client/${client_id}`);
-        let ws_connection = new WebSocket(`${base_url}/group/${group_id}/client/${client_id}`);
+        console.log(
+            `WS Connect URL: ${base_url}/group/${group_id}/client/${client_id}`
+        );
+        let ws_connection = new WebSocket(
+            `${base_url}/group/${group_id}/client/${client_id}`
+        );
 
         ws_connection.onopen = function () {
             console.log('WS: connected');
@@ -225,7 +233,10 @@
                 setTimeout(function () {
                     console.log('WS: Disconnected... Try again!');
                     ws_retry_count += 1;
-                    ws_connect_group_id({ group_id: group_id, client_id: client_id });
+                    ws_connect_group_id({
+                        group_id: group_id,
+                        client_id: client_id
+                    });
                     console.log('WS: Again done?');
                 }, ws_retry_delay);
             }
@@ -303,7 +314,10 @@
     $effect(() => {
         if (ws_connect && group_id) {
             console.log('HERE!!!!!');
-            ws_group = ws_connect_group_id({ group_id: group_id, client_id: client_id });
+            ws_group = ws_connect_group_id({
+                group_id: group_id,
+                client_id: client_id
+            });
             // } else if (!ws_connect) {
             //     console.log('HERE!!!!!');
             //     log_lvl = 1;
@@ -316,7 +330,9 @@
             console.log('HERE!!!!!');
             log_lvl = 1;
             if (log_lvl) {
-                console.log(`WS: Not connecting. ws_connect=${ws_connect} group_id=${group_id}`);
+                console.log(
+                    `WS: Not connecting. ws_connect=${ws_connect} group_id=${group_id}`
+                );
             }
             ws_group?.close();
             ws_connect_status = 'disconnected';
@@ -485,7 +501,9 @@
                 class="input text-xs w-96"
             />
 
-            <button type="submit" class="btn btn-sm preset-tonal-warning">Send Group</button>
+            <button type="submit" class="btn btn-sm preset-tonal-warning"
+                >Send Group</button
+            >
         </form>
     {/if}
 
@@ -498,7 +516,9 @@ ae_open:event_file=Kljq0uiTlXt (video)
     <!-- <hr> -->
 
     <section class:hidden={hide__ws_messages}>
-        <h2 class="text-center underline">Messages [grp, client, target, type]</h2>
+        <h2 class="text-center underline">
+            Messages [grp, client, target, type]
+        </h2>
 
         <ol class="list-decimal list-outside max-h-24 overflow-y-auto messages">
             {#each ws_received_list_other as msg_entry, index (index)}
@@ -506,7 +526,8 @@ ae_open:event_file=Kljq0uiTlXt (video)
                     <div class="flex flex-row justify-between gap-1 w-full">
                         <span>
                             [{msg_entry.group_id || 'No Group ID'}]
-                            {msg_entry.client_id.toString().slice(-5) || 'No Client ID'}
+                            {msg_entry.client_id.toString().slice(-5) ||
+                                'No Client ID'}
                             –
                             {msg_entry.target || 'No Target'}
                             |
@@ -535,7 +556,8 @@ ae_open:event_file=Kljq0uiTlXt (video)
                     <div class="flex flex-row justify-between gap-1 w-full">
                         <span>
                             [{cmd_entry.group_id || 'No Group ID'}]
-                            {cmd_entry.client_id.toString().slice(-5) || 'No Client ID'}
+                            {cmd_entry.client_id.toString().slice(-5) ||
+                                'No Client ID'}
                             —
                             {cmd_entry.target || 'No Target'}
                             |