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();

1
src/lib/ae_stores.ts
View File

@@ -227,6 +227,7 @@ export let ae_app_session_data_struct: key_val = {
// uploaded_file_list: [],
video_clip_file_list: [],
submit_status: null, // 'saving', 'created', 'updated', 'saved'
clip_complete: null,
},
'hub': {

6
src/lib/ae_utils/ae_utils__datetime_format.ts
View File

@@ -92,6 +92,12 @@ export let iso_datetime_formatter = function iso_datetime_formatter(
case 'datetime_12_long':
datetime_string = dayjs(raw_datetime).format('MMMM D, YYYY hh:mm A');
break;
case 'datetime_medium_sec':
datetime_string = dayjs(raw_datetime).format('MMM D, YYYY H:mm:ss');
break;
case 'datetime_12_medium_sec':
datetime_string = dayjs(raw_datetime).format('MMM D, YYYY h:mm:ss A');
break;
case 'datetime_short_month':
datetime_string = dayjs(raw_datetime).format('MMM D hh:mm A');
break;

111
src/lib/element_manage_hosted_file_li.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
export let log_lvl: number = 0;
// import { onMount } from 'svelte';
// import { clipboard } from '@skeletonlabs/skeleton';
// import { liveQuery } from "dexie";
@@ -15,19 +14,32 @@ import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_st
import { db_core } from "$lib/ae_core/db_core";
import { core_func } from '$lib/ae_core/ae_core_functions';
export let container_class_li: string|Array<string> = [];
export let lq__hosted_file_obj_li: any;
export let link_to_type: string;
export let link_to_id: string;
// export let allow_basic: boolean = false;
// export let allow_moderator: boolean = false;
export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
interface Props {
log_lvl?: number;
container_class_li?: string|Array<string>;
lq__hosted_file_obj_li: any;
link_to_type: string;
link_to_id: string;
// export let allow_moderator: boolean = false;
display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
}
let {
log_lvl = 0,
container_class_li = [],
lq__hosted_file_obj_li = $bindable([]),
link_to_type,
link_to_id,
display_mode = 'default'
}: Props = $props();
// export let show_convert_btn: null|boolean = null;
// let ae_placeholder_li: key_val = {};
let ae_promises: key_val = {};
let ae_tmp: key_val = {};
let ae_tmp: key_val = $state({});
ae_tmp.show__file_li = true;
ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
// let ae_triggers: key_val = {};
@@ -40,7 +52,7 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
>
<button
type="button"
on:click={() => {
onclick={() => {
console.log('*** Refresh button clicked ***');
db_core.file.clear();
@@ -75,7 +87,7 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
<button
type="button"
on:click={() => {
onclick={() => {
console.log('*** Show Alt Download button clicked ***');
ae_tmp.show__direct_download = !ae_tmp.show__direct_download;
}}
@@ -113,13 +125,82 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
<div class="overflow-auto w-full">
<ol>
{#each $lq__hosted_file_obj_li as hosted_file_obj}
<ol class="list-decimal list-inside">
{#each [...$lq__hosted_file_obj_li].reverse() as hosted_file_obj}
<li>
<a href="" class="underline text-blue-500">
<button
type="button"
disabled={!$ae_loc.trusted_access}
onclick={() => {
// This (uploaded_file_kv) is referenced by other AE components. Currently it is only used for the video clipper. This should be a toggle of Add/Remove.
if ($ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id]) {
delete $ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id];
$ae_loc.files.uploaded_file_kv = {...$ae_loc.files.uploaded_file_kv};
} else {
$ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id] = hosted_file_obj;
lq__hosted_file_obj_li[hosted_file_obj.hosted_file_id] = hosted_file_obj;
}
}}
class="btn btn-sm variant-soft-secondary hover:variant-filled-secondary"
title="Add/Remove file to/from the locally stored uploaded file list. This is referenced by other AE components."
>
{#if $ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id]}
<span class="fas fa-minus-circle m-1"></span>
<span class="hidden">Remove</span>
{:else}
<span class="fas fa-plus-circle m-1"></span>
<span class="hidden">Add</span>
{/if}
</button>
<button
type="button"
disabled={!$ae_loc.administrator_access}
onclick={() => {
// This (uploaded_file_kv) is referenced by other AE components. Currently it is only used for the video clipper.
$ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id] = hosted_file_obj;
}}
class:hidden={!$ae_loc.administrator_access}
class="btn btn-sm variant-soft-secondary hover:variant-filled-secondary"
title="Delete a file from the host server."
>
<span class="fas fa-trash-alt m-1"></span>
<span class="hidden">Delete</span>
</button>
<button
type="button"
disabled={!$ae_loc.administrator_access}
class:hidden={!$ae_loc.administrator_access}
onclick={() => {
// This should show/hide the editable fields for the file. This might need to be in a little modal.
}}
class="btn btn-sm variant-soft-primary hover:variant-filled-primary"
title="Edit file details"
>
<span class="fas fa-edit m-1"></span>
<span class="hidden">Edit</span>
</button>
<span class="text-xs text-gray-500">
<span class="fas fa-calendar-day mx-1"></span>
<span class="hidden">Created on:</span>
{ae_util.iso_datetime_formatter(hosted_file_obj.created_on, 'datetime_medium_sec')}
{#if hosted_file_obj.updated_on}
<span class="fas fa-sync-alt mx-1"></span>
Updated on
{ae_util.iso_datetime_formatter(hosted_file_obj.updated_on, 'datetime_medium_sec')}
{/if}
</span>
<!-- <a href="" class="underline text-blue-500"> -->
{hosted_file_obj.filename}
</a>
{ae_util.format_bytes(hosted_file_obj.size)}
<!-- </a> -->
<span class="text-xs text-gray-500">
{ae_util.format_bytes(hosted_file_obj.size)}
</span>
</li>
{/each}
</ol>

29
src/lib/element_manage_hosted_file_li_all.svelte
View File

@@ -15,14 +15,25 @@ import Element_manage_hosted_file_li from '$lib/element_manage_hosted_file_li.sv
// import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { db_core } from "$lib/ae_core/db_core";
// import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
// import { events_func } from '$lib/ae_events_functions';
export let container_class_li: string|Array<string> = [];
export let link_to_type: string;
export let link_to_id: string;
export let allow_basic: boolean = false; // Not used yet
export let allow_moderator: boolean = false; // Not used yet
export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
interface Props {
// import { events_func } from '$lib/ae_events_functions';
container_class_li?: string|Array<string>;
link_to_type: string;
link_to_id: string;
allow_basic?: boolean; // Not used yet
allow_moderator?: boolean; // Not used yet
display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
}
let {
container_class_li = [],
link_to_type,
link_to_id,
allow_basic = false,
allow_moderator = false,
display_mode = 'default'
}: Props = $props();
console.log(`HERE HERE HERE HERE: link_to_type: ${link_to_type} link_to_id: ${link_to_id}`);
@@ -40,7 +51,7 @@ let dq__where_eq_val: string = link_to_id;
// This should include all files that are associated with an object (event, location, session, presenter, etc.)
// I am not sure why, but doing reverse() and then sortBy() seems to sort in descending order.
$: lq__hosted_file_obj_li = liveQuery(async () => {
let lq__hosted_file_obj_li = $derived(liveQuery(async () => {
// console.log(`dq__where_val: ${dq__where_val}`);
// console.log(`dq__where_eq_val: ${dq__where_eq_val}`);
let results = await db_core.file
@@ -53,7 +64,7 @@ $: lq__hosted_file_obj_li = liveQuery(async () => {
// .toArray()
;
return results;
});
}));
</script>