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

Lots of work on file management and video processing (ffmpeg).

Browse Source
This commit is contained in:
Scott Idem
2025-03-17 19:38:38 -04:00
parent ab055beaff
commit 39d0a210f3
9 changed files with 334 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<script lang="ts">
export let log_lvl: number = 0;
import { preventDefault } from 'svelte/legacy';
// Imports
// Import components and elements
@@ -13,34 +13,53 @@ import { ae_util } from '$lib/ae_utils/ae_utils';
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 clip_complete: boolean = false;
// 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[] = [];
export let hosted_file_obj_kv: key_val = {};
export let video_clip_file_kv: key_val = {};
interface Props {
log_lvl?: number;
// Expecting these for link_to_type: 'event', 'event_location', 'archive_content', etc
link_to_type: string;
link_to_id: string;
// 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';
class_li_default?: string;
class_li?: string;
// export let table_class_li: string[] = ['table', 'table-sm', 'table-striped', 'table-hover' , 'text-sm'];
clip_complete?: boolean;
// export let upload_complete: boolean = false;
submit_status?: null|string;
// hosted_file_id_li?: string[];
// hosted_file_obj_li?: any[];
hosted_file_obj_kv?: key_val;
video_clip_file_kv?: key_val;
}
let {
log_lvl = $bindable(0),
link_to_type = $bindable(),
link_to_id = $bindable(),
class_li_default = 'flex flex-col gap-1 items-center justify-center w-full max-w-2xl mx-auto my-1',
class_li = $bindable(''),
clip_complete = $bindable(false),
submit_status = $bindable(null),
// hosted_file_id_li = [],
// hosted_file_obj_li = [],
hosted_file_obj_kv = $bindable({}),
video_clip_file_kv = $bindable({})
}: Props = $props();
// Local Variables
let task_id = link_to_id;
// let input_file_list: any = null;
let ae_promises: key_val = {};
let ae_promises: key_val = $state({});
// let ae_promises_clipping: key_val = {};
// let ae_triggers: key_val = {};
@@ -79,6 +98,7 @@ function handle_clip_video(event) {
$ae_loc.files.processed_file_kv[hosted_file_id].start_time = event.target.start_time.value;
$ae_loc.files.processed_file_kv[hosted_file_id].end_time = event.target.end_time.value;
$ae_loc.files.processed_file_kv[hosted_file_id].reencode = event.target.reencode.value;
$ae_loc.files.processed_file_kv[hosted_file_id].scale_down = event.target.scale_down.value;
$ae_loc.files.processed_file_kv[hosted_file_id].new_filename = event.target.new_filename.value;
$ae_loc.files.processed_file_kv[hosted_file_id].clip_complete = false;
@@ -93,6 +113,7 @@ function handle_clip_video(event) {
start_time: event.target.start_time.value,
end_time: event.target.end_time.value,
reencode: event.target.reencode.value,
scale_down: event.target.scale_down.value,
};
ae_promises[hosted_file_id] = {};
@@ -151,7 +172,30 @@ function handle_clip_video(event) {
<a href="/hosted_file/{hosted_file_id}/download?x_no_account_id_token=direct-download" download={$ae_sess.files[hosted_file_id].new_filename} class="ae_btn btn_lg btn_primary"><span class="fas fa-download"></span> Ready to Download</a>
{/if} -->
<div class="flex flex-row 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"
onclick={() => {
// This (uploaded_file_kv) is referenced by other AE components. Currently it is only used with the manage hosted file list and clip video components.
console.log(`Removed hosted file ID: ${hosted_file_id}`, $ae_loc.files.uploaded_file_kv);
// 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};
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];
console.log(`Removed hosted file ID: ${hosted_file_obj.hosted_file_id}`, $ae_loc.files.uploaded_file_kv);
}}
class:hidden={!$ae_loc.edit_mode}
class="btn btn-sm variant-soft-danger hover:variant-filled-danger"
title={`Remove this file:\n${hosted_file_obj.filename}\n[API] SHA256: ${hosted_file_obj?.hash_sha256?.slice(0, 10)}... Hosted ID: ${hosted_file_obj.hosted_file_id_random}`}
>
<span class="fas fa-minus-circle m-1"></span>
<span class="hidden">Remove</span>
</button>
<!-- Download the file -->
<button
type="button"
disabled={!$ae_loc.trusted_access}
@@ -167,19 +211,23 @@ function handle_clip_video(event) {
// window.postMessage({ type: 'download_event_file', hosted_file_id: idaa_archive_content_obj.hosted_file_id, filename: idaa_archive_content_obj.filename, auto_download: true }, '*');
}}
class="novi_btn btn btn-sm lg:btn-md variant-soft-primary hover:variant-filled-primary min-w-72 lg:min-w-96"
class:hidden={!$ae_loc.edit_mode}
class="novi_btn btn btn-sm lg:btn-md variant-soft-primary hover:variant-filled-primary min-w-72 lg:min-w-96"
title={`Download this file:\n${hosted_file_obj.filename}\n[API] SHA256: ${hosted_file_obj?.hash_sha256?.slice(0, 10)}... Hosted ID: ${hosted_file_obj.hosted_file_id_random}`}
>
{#await $ae_sess.api_download_kv[hosted_file_id]}
{#await ae_promises[hosted_file_id]}
<span class="fas fa-spinner fa-spin mx-1"></span>
<span class="">
Downloading
{#if $ae_sess.api_download_kv[hosted_file_id]}
{$ae_sess.api_download_kv[hosted_file_id].percent_completed}%
{/if}
:
</span>
{#if submit_status == 'clipping'}
<span class="">Clipping</span>
{:else}
<span class="">
Downloading
{#if $ae_sess.api_download_kv[hosted_file_id]}
{$ae_sess.api_download_kv[hosted_file_id].percent_completed}%
{/if}
:
</span>
{/if}
{:then}
<span class="fas fa-{ae_util.file_extension_icon(hosted_file_obj?.file_extension)}"></span>
{/await}
@@ -203,7 +251,7 @@ function handle_clip_video(event) {
</div>
<form
onsubmit={handle_clip_video}
onsubmit={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'} -->
@@ -249,6 +297,22 @@ function handle_clip_video(event) {
False
</label>
</span>
<span class="flex flex-col gap-1 items-center justify-center"
title="Scale the video file down to 1920x1080? This does cause some minor quality loss. Re-encoding is useful if the audio or video seems to be chopped off at the beginning or end of the clip. It can also help with partially corrupted files."
>
<span class="text-xs font-bold">
Scale down?
</span>
<label class="inline-block">
<input type="radio" name="scale_down" value="true" class="radio" checked />
True
</label>
<label class="inline-block">
<input type="radio" name="scale_down" value="false" class="radio" />
False
</label>
</span>
</div>
<button
@@ -256,17 +320,20 @@ function handle_clip_video(event) {
class="btn btn-lg btn-primary variant-ghost-primary"
disabled={submit_status == 'clipping'}
>
{#await ae_promises[hosted_file_id]}
<!-- {#await ae_promises[hosted_file_id]} -->
{#if $ae_loc.files.processed_file_kv[hosted_file_id] && $ae_loc.files.processed_file_kv[hosted_file_id].submit_status == 'clipping'}
<span class="fas fa-spinner fa-spin m-1"></span>
<span class="highlight">Clipping...</span>
{:then}
{#if ae_promises[hosted_file_id]}
<span class="fas fa-check m-1"></span>
{:else}
<!-- {#if ae_promises[hosted_file_id]} -->
{#if $ae_loc.files.processed_file_kv[hosted_file_id] && $ae_loc.files.processed_file_kv[hosted_file_id].submit_status == 'clipped'}
<span class="fas fa-check m-1"></span>
Clipped
{:else}
<span class="fas fa-cut m-1"></span>
Clip Video
<span class="fas fa-cut m-1"></span>
Clip Video
{/if}
{/await}
{/if}
<!-- <span class="fas fa-cut m-1"></span>
Clip Video -->
</button>

26
src/lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
export let log_lvl: number = 0;
// Imports
// Import components and elements
@@ -15,16 +14,27 @@ import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$
// export let hosted_file_id_li: string[] = [];
// export let hosted_file_obj_li: any[] = [];
// export let hosted_file_obj_kv: key_val = {};
export let video_clip_file_kv: key_val = {};
export let class_li_default: string = 'flex flex-row flex-wrap gap-2 items-center justify-center w-full max-w-2xl p-2 mx-auto my-1 border border-gray-300 rounded-lg';
export let class_li: string = '';
interface Props {
log_lvl?: number;
// export let hosted_file_obj_kv: key_val = {};
video_clip_file_kv?: key_val;
class_li_default?: string;
class_li?: string;
link_to_type: string;
link_to_id: string;
}
export let link_to_type: string;
export let link_to_id: string;
let {
log_lvl = 0,
video_clip_file_kv = $bindable({}),
class_li_default = 'flex flex-row flex-wrap gap-2 items-center justify-center w-full max-w-2xl p-2 mx-auto my-1 border border-gray-300 rounded-lg',
class_li = '',
link_to_type,
link_to_id
}: Props = $props();
let ae_promises: key_val = {};
let ae_promises: key_val = $state({});
</script>

42
src/lib/ae_core/ae_comp__hosted_files_upload.svelte
View File

@@ -43,9 +43,13 @@ let ae_triggers: key_val = {};
let input_element_id = 'ae_comp__hosted_files_upload__input';
// Functions and Logic
async function handle_submit_form_files(event) {
async function handle_submit_form_files(event: SubmitEvent) {
console.log('*** handle_submit_form() ***');
if (!event) {
return;
}
$ae_sess.files.disable_submit__hosted_file_obj = true;
$ae_sess.files.submit_status = 'saving';
submit_status = 'saving';
@@ -57,7 +61,8 @@ async function handle_submit_form_files(event) {
let hosted_file_results;
if (event.target[input_element_id].files.length > 0) {
const target = event.target as HTMLFormElement;
if (target && target[input_element_id] && (target[input_element_id] as HTMLInputElement)?.files && (target[input_element_id] as HTMLInputElement).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
@@ -68,7 +73,11 @@ async function handle_submit_form_files(event) {
task_id = $ae_sess.files.processed_file_list[i].hash_sha256;
hosted_file_results = await handle_input_upload_files([tmp_file], task_id);
// hosted_file_results = await handle_input_upload_files([tmp_file], task_id);
hosted_file_results = await handle_input_upload_files({
input_upload_files: [tmp_file],
task_id: task_id
});
if (hosted_file_results) {
console.log(`hosted_file_results:`, hosted_file_results);
@@ -78,7 +87,7 @@ async function handle_submit_form_files(event) {
}
// 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;
$ae_sess = $ae_sess; // Is this needed? 2025-03-17
event.target.reset();
// await tick();
@@ -87,21 +96,6 @@ async function handle_submit_form_files(event) {
} 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;
@@ -111,7 +105,15 @@ async function handle_submit_form_files(event) {
}
async function handle_input_upload_files(input_upload_files, task_id) {
async function handle_input_upload_files(
{
input_upload_files,
task_id
} : {
input_upload_files: any[],
task_id: string
}
) {
console.log('*** handle_input_upload_files() ***');
const form_data = new FormData();