Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(lib): standardize helpers and format shared components

Browse Source 
- Applied snake_case helper standardization and formatting to element_input_file, hosted_files_clip_video, and websocket_v2.
- Cleaned up deprecated legacy imports.
This commit is contained in:
Scott Idem
2026-02-06 14:49:36 -05:00
parent 969e5610bb
commit 67752ccdfe
3 changed files with 131 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte
View File

@@ -1,6 +1,4 @@
<script lang="ts"> <script lang="ts">
// Imports // Imports
// Import components and elements // Import components and elements
// import Element_input_files_tbl from '$lib/element_input_files_tbl.svelte'; // 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; 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] = {};
$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.processed_file_kv[hosted_file_id].clip_complete = false;
// $ae_sess.files.disable_submit__hosted_file_obj = true; // $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] = {};
$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].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].end_time = end_time;
$ae_loc.files.processed_file_kv[hosted_file_id].reencode = reencode; $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].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; $ae_loc.files.processed_file_kv[hosted_file_id].clip_complete = false;
let endpoint = `/hosted_file/${hosted_file_id}/clip_video`; 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] = {};
// $ae_loc.files.video_clip_file_kv[result.hosted_file_id] = result; // $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].submit_status =
$ae_sess.files.processed_file_kv[hosted_file_id].clip_complete = true; '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].submit_status =
$ae_loc.files.processed_file_kv[hosted_file_id].clip_complete = true; 'clipped';
$ae_loc.files.processed_file_kv[hosted_file_id].clip_complete =
true;
submit_status = 'clipped'; submit_status = 'clipped';
clip_complete = true; clip_complete = true;
@@ -181,7 +186,9 @@
{#each Object.entries(hosted_file_obj_kv) as [hosted_file_id, hosted_file_obj]} {#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"> <div class="border border-gray-300 rounded-lg p-2 m-2">
<!-- Download Button (Standardized) --> <!-- 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 --> <!-- Remove from uploaded file kv list -->
<button <button
type="button" type="button"
@@ -193,7 +200,9 @@
); );
// delete $ae_sess.files.uploaded_file_kv[hosted_file_id]; // delete $ae_sess.files.uploaded_file_kv[hosted_file_id];
delete $ae_loc.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]; delete hosted_file_obj_kv[hosted_file_id];
hosted_file_obj_kv = { ...hosted_file_obj_kv }; hosted_file_obj_kv = { ...hosted_file_obj_kv };
// delete $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];
@@ -212,8 +221,8 @@
<!-- Download the file --> <!-- Download the file -->
<div class:hidden={!$ae_loc.edit_mode}> <div class:hidden={!$ae_loc.edit_mode}>
<AE_Comp_Hosted_Files_Download_Button <AE_Comp_Hosted_Files_Download_Button
hosted_file_id={hosted_file_id} {hosted_file_id}
hosted_file_obj={hosted_file_obj} {hosted_file_obj}
color="primary" color="primary"
variant="tonal" variant="tonal"
classes="novi_btn btn-sm lg:btn-md min-w-72 lg:min-w-96 !justify-start" 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} 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> <span class="text-xs font-bold w-32">New Filename:</span>
<input <input
type="text" type="text"
@@ -267,14 +278,19 @@
class="label w-48" 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." 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 <input
type="text" type="text"
name="start_time" name="start_time"
value={$ae_loc.files.processed_file_kv && 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] &&
$ae_loc.files.processed_file_kv[hosted_file_id].start_time $ae_loc.files.processed_file_kv[hosted_file_id]
? $ae_loc.files.processed_file_kv[hosted_file_id].start_time .start_time
? $ae_loc.files.processed_file_kv[
hosted_file_id
].start_time
: '00:00:00'} : '00:00:00'}
placeholder="HH:MM:SS (00:01:30)" placeholder="HH:MM:SS (00:01:30)"
class="input w-32" class="input w-32"
@@ -285,14 +301,19 @@
class="label w-48" 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." 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 <input
type="text" type="text"
name="end_time" name="end_time"
value={$ae_loc.files.processed_file_kv && 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] &&
$ae_loc.files.processed_file_kv[hosted_file_id].end_time $ae_loc.files.processed_file_kv[hosted_file_id]
? $ae_loc.files.processed_file_kv[hosted_file_id].end_time .end_time
? $ae_loc.files.processed_file_kv[
hosted_file_id
].end_time
: '00:45:59'} : '00:45:59'}
placeholder="HH:MM:SS (01:05:25)" placeholder="HH:MM:SS (01:05:25)"
class="input w-32" class="input w-32"
@@ -315,7 +336,12 @@
True True
</label> </label>
<label class="inline-block"> <label class="inline-block">
<input type="radio" name="reencode" value="false" class="radio" /> <input
type="radio"
name="reencode"
value="false"
class="radio"
/>
False False
</label> </label>
</span> </span>
@@ -336,7 +362,12 @@
True True
</label> </label>
<label class="inline-block"> <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 False
</label> </label>
</span> </span>
@@ -368,7 +399,9 @@
{#await ae_promises[hosted_file_id]} {#await ae_promises[hosted_file_id]}
<span class="fas fa-spinner fa-spin m-1"></span> <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} {:then}
{#if ae_promises[hosted_file_id]} {#if ae_promises[hosted_file_id]}
<span class="fas fa-download"></span> Ready to download below! <span class="fas fa-download"></span> Ready to download below!

49
src/lib/elements/element_input_file.svelte
View File

@@ -7,7 +7,14 @@
import { ae_util } from '$lib/ae_utils/ae_utils'; import { ae_util } from '$lib/ae_utils/ae_utils';
// import { api } from '$lib/api'; // import { api } from '$lib/api';
import { check_hosted_file_obj_w_hash } from '$lib/ae_core/core__check_hosted_file_obj_w_hash'; 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(); const dispatch = createEventDispatcher();
@@ -37,7 +44,16 @@
multiple = true, multiple = true,
required = 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', 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'], legacy_extension_list = ['avi', 'doc', 'ppt', 'xls', 'wmv'],
use_selected_file_table = true, use_selected_file_table = true,
file_list_status = $bindable(null), file_list_status = $bindable(null),
@@ -74,7 +90,9 @@
// console.log('*** Start ***'); // console.log('*** Start ***');
// for (let [i, file_item] of file_list.entries()) { // Not sure why this does not work??? // 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); console.log(i, file_item);
// NOTE: The file list is readonly. The filenames can not be changed here. // NOTE: The file list is readonly. The filenames can not be changed here.
@@ -208,7 +226,8 @@
} else { } 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_legacy_extension'] = warning_legacy_extension;
file_data['warning_size'] = warning_size; file_data['warning_size'] = warning_size;
@@ -226,7 +245,9 @@
let file_hash = null; let file_hash = null;
// Only hash files less than 2 GB (2147483648 bytes)!!! // 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) { if (file_size_bytes < 2000000000) {
// > 2 GB 2 147 483 648 // > 2 GB 2 147 483 648
file_hash = await ae_util.get_file_hash(file_item); file_hash = await ae_util.get_file_hash(file_item);
@@ -243,7 +264,8 @@
); );
file_data['hash_sha256'] = file_hash; file_data['hash_sha256'] = file_hash;
let check_hosted_file_obj_w_hash_result = await check_hosted_file_obj_w_hash({ let check_hosted_file_obj_w_hash_result =
await check_hosted_file_obj_w_hash({
api_cfg: $ae_api, api_cfg: $ae_api,
hosted_file_hash: file_hash hosted_file_hash: file_hash
}); });
@@ -282,7 +304,9 @@
const dt = new DataTransfer(); const dt = new DataTransfer();
// let input = document.getElementById(input_element_id); // 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) { if (!input_element) {
console.error('Could not find the input element.'); console.error('Could not find the input element.');
@@ -370,7 +394,8 @@
<div <div
class="file_list_status ae_warning preset-tonal-warning border border-warning-500 p-1 m-1" 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> </div>
{/if} {/if}
@@ -406,9 +431,13 @@
</button> </button>
</td> </td>
<td class="file_filename">{file_list_item.filename}</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} {file_list_item.file_size_string}
<!-- {#if $ae_sess.api_upload_kv[link_to_id]} <!-- {#if $ae_sess.api_upload_kv[link_to_id]}
<span class="text-xs">({$ae_sess.api_upload_kv[link_to_id].percent_completed}%)</span> <span class="text-xs">({$ae_sess.api_upload_kv[link_to_id].percent_completed}%)</span>

44
src/lib/elements/element_websocket_v2.svelte
View File

@@ -87,16 +87,24 @@
function ws_connect_group_id({ group_id, client_id }) { function ws_connect_group_id({ group_id, client_id }) {
if (!group_id) { if (!group_id) {
group_id = 'ae-grp-99'; 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; return false;
} }
if (!client_id) { if (!client_id) {
client_id = Date.now(); 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; // return false;
} }
console.log(`WS Connect URL: ${base_url}/group/${group_id}/client/${client_id}`); console.log(
let ws_connection = new WebSocket(`${base_url}/group/${group_id}/client/${client_id}`); `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 () { ws_connection.onopen = function () {
console.log('WS: connected'); console.log('WS: connected');
@@ -225,7 +233,10 @@
setTimeout(function () { setTimeout(function () {
console.log('WS: Disconnected... Try again!'); console.log('WS: Disconnected... Try again!');
ws_retry_count += 1; 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?'); console.log('WS: Again done?');
}, ws_retry_delay); }, ws_retry_delay);
} }
@@ -303,7 +314,10 @@
$effect(() => { $effect(() => {
if (ws_connect && group_id) { if (ws_connect && group_id) {
console.log('HERE!!!!!'); 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) { // } else if (!ws_connect) {
// console.log('HERE!!!!!'); // console.log('HERE!!!!!');
// log_lvl = 1; // log_lvl = 1;
@@ -316,7 +330,9 @@
console.log('HERE!!!!!'); console.log('HERE!!!!!');
log_lvl = 1; log_lvl = 1;
if (log_lvl) { 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_group?.close();
ws_connect_status = 'disconnected'; ws_connect_status = 'disconnected';
@@ -485,7 +501,9 @@
class="input text-xs w-96" 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> </form>
{/if} {/if}
@@ -498,7 +516,9 @@ ae_open:event_file=Kljq0uiTlXt (video)
<!-- <hr> --> <!-- <hr> -->
<section class:hidden={hide__ws_messages}> <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"> <ol class="list-decimal list-outside max-h-24 overflow-y-auto messages">
{#each ws_received_list_other as msg_entry, index (index)} {#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"> <div class="flex flex-row justify-between gap-1 w-full">
<span> <span>
[{msg_entry.group_id || 'No Group ID'}] [{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'} {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"> <div class="flex flex-row justify-between gap-1 w-full">
<span> <span>
[{cmd_entry.group_id || 'No Group ID'}] [{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'} {cmd_entry.target || 'No Target'}
| |