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

Getting ready to make the new hosted file management and tools live on dev. Then on prod...

Browse Source
This commit is contained in:
Scott Idem
2025-03-18 15:01:30 -04:00
parent 39d0a210f3
commit c96e59c660
7 changed files with 155 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -122,6 +122,7 @@ function handle_clip_video(event) {
api_cfg: $ae_api,
endpoint: endpoint,
params: params,
timeout: 300000, // 5 minutes
// return_blob: true,
// filename: event.target.new_filename.value,
// auto_download: false,
@@ -160,12 +161,19 @@ function handle_clip_video(event) {
</script>
<div>
<section
class="{class_li_default} {class_li}"
>
<!-- <h3 class="h3">{hosted_file_obj_li.length}&times; files uploaded</h3>
{#each hosted_file_obj_li as hosted_file_obj, i} -->
<h3 class="h3">{Object.entries(hosted_file_obj_kv).length}&times; files uploaded</h3>
<h3
class="h3"
>
{Object.entries(hosted_file_obj_kv).length}&times; files uploaded
</h3>
{#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">
<!-- {#if $ae_sess.files[hosted_file_id].upload_complete}
@@ -187,12 +195,11 @@ function handle_clip_video(event) {
// 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}`}
class="btn btn-sm variant-soft-warning hover:variant-filled-warning"
title={`Remove this file from list of videos:\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>
<span class="">Remove</span>
</button>
<!-- Download the file -->
@@ -367,4 +374,4 @@ function handle_clip_video(event) {
{/if}
{/await} -->
</div>
</section>

23
src/lib/ae_core/core__hosted_files.ts
View File

@@ -154,6 +154,7 @@ export async function delete_ae_obj_id__hosted_file(
rm_orphan = false,
fake_delete = false, // Fake the delete result to "true"
params = {},
try_cache = true,
log_lvl = 0
}: {
api_cfg: any,
@@ -163,6 +164,7 @@ export async function delete_ae_obj_id__hosted_file(
rm_orphan?: boolean,
fake_delete?: boolean,
params?: key_val,
try_cache?: boolean,
log_lvl?: number
}
) {
@@ -191,8 +193,29 @@ export async function delete_ae_obj_id__hosted_file(
params: params,
// return_meta: return_meta,
log_lvl: log_lvl
})
.then(function (hosted_file_obj_li_get_result) {
if (hosted_file_obj_li_get_result) {
if (try_cache) {
if (log_lvl) {
console.log(`Attempting to remove IDB entry for hosted_file_id=${hosted_file_id}`);
}
db_core.file.delete(hosted_file_id); // Delete from the DB no matter what.
}
return hosted_file_obj_li_get_result;
} else {
console.log('No results returned.');
return [];
}
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
if (log_lvl) {
console.log('ae_promises.delete__hosted_file_obj:', ae_promises.delete__hosted_file_obj);
}
return ae_promises.delete__hosted_file_obj;
}

1
src/lib/ae_stores.ts
View File

@@ -116,6 +116,7 @@ export let ae_app_local_data_struct: key_val = {
processed_file_kv: {},
uploaded_file_kv: {},
video_clip_file_kv: {},
add_to_use_files_method: 'upload', // upload, select
},
'ds': {},

82
src/lib/element_manage_hosted_file_li.svelte
View File

@@ -18,21 +18,27 @@ import { core_func } from '$lib/ae_core/ae_core_functions';
interface Props {
log_lvl?: number;
container_class_li?: string|Array<string>;
class_li_default?: string;
class_li?: 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'
max_file_count?: number;
file_type?: string; // 'image', 'video', 'audio', 'document', 'other'
}
let {
log_lvl = 0,
container_class_li = [],
class_li_default = 'flex flex-col gap-1 items-center justify-center w-full max-w-2xl mx-auto my-1 max-h-96 overflow-auto',
class_li = '',
lq__hosted_file_obj_li = $bindable([]),
link_to_type,
link_to_id,
display_mode = 'default'
display_mode = 'default',
max_file_count = 19,
file_type = 'all'
}: Props = $props();
// export let show_convert_btn: null|boolean = null;
@@ -47,8 +53,25 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
</script>
<section
class="{class_li_default} {class_li}"
>
<h3
class="h3"
class:hidden={!$lq__hosted_file_obj_li?.length || display_mode != 'default'}
>
Manage Files:
<span class="font-bold bg-success-100 px-4 border rounded-lg border-success-200"
title="Files for {link_to_type ?? '-- not set --'}: {link_to_id ?? '-- not set --'} (files: {$lq__hosted_file_obj_li?.length ?? 'None'})"
>
<span class="fas fa-folder-open mx-1"></span>
{@html $lq__hosted_file_obj_li ? `${$lq__hosted_file_obj_li.length}&times;` : '-- none --'}
</span>
</h3>
<div
class="float-right flex flex-row items-center"
class="flex flex-row flex-wrap items-center justify-center gap-1"
>
<button
type="button"
@@ -57,16 +80,19 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
db_core.file.clear();
let params = {
qry__enabled: 'all',
qry__hidden: 'all',
}
// let params = {
// qry__enabled: 'all',
// qry__hidden: 'all',
// }
core_func.load_ae_obj_li__hosted_file({
api_cfg: $ae_api,
for_obj_type: link_to_type,
for_obj_id: link_to_id,
params: params,
enabled: 'enabled',
hidden: 'not_hidden',
limit: 250,
// params: params,
try_cache: true
});
@@ -103,30 +129,14 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
</div>
<section class="svelte_component event_file_uploaded_manage {container_class_li}"
class:text-sm={display_mode != 'default'}
>
<h3
class="h6"
class:hidden={!$lq__hosted_file_obj_li?.length || display_mode != 'default'}
>
Manage Files:
<span class="font-bold bg-success-100 px-4 border rounded-lg border-success-200"
title="Files for {link_to_type ?? '-- not set --'}: {link_to_id ?? '-- not set --'} (files: {$lq__hosted_file_obj_li?.length ?? 'None'})"
>
<span class="fas fa-folder-open mx-1"></span>
{@html $lq__hosted_file_obj_li ? `${$lq__hosted_file_obj_li.length}&times;` : '-- none --'}
</span>
</h3>
{#if $lq__hosted_file_obj_li && $lq__hosted_file_obj_li.length}
<div class="overflow-auto w-full">
<ol class="list-decimal list-inside">
{#each [...$lq__hosted_file_obj_li].reverse() as hosted_file_obj}
{#each [...$lq__hosted_file_obj_li].reverse().slice(0, max_file_count) as hosted_file_obj}
<li>
<button
type="button"
@@ -157,9 +167,17 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
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;
if (!confirm(`Are you sure you want to delete this hosted file?\n${hosted_file_obj.filename} [${hosted_file_obj.hosted_file_id_random}]`)) {return false;}
ae_promises.delete__hosted_file_obj = core_func.delete_ae_obj_id__hosted_file({
api_cfg: $ae_api,
hosted_file_id: hosted_file_obj.hosted_file_id_random,
link_to_type: link_to_type,
link_to_id: link_to_id,
rm_orphan: true,
fake_delete: false,
log_lvl: 1
})
}}
class:hidden={!$ae_loc.administrator_access}
class="btn btn-sm variant-soft-secondary hover:variant-filled-secondary"
@@ -201,6 +219,14 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
<span class="text-xs text-gray-500">
{ae_util.format_bytes(hosted_file_obj.size)}
</span>
<span
class:hidden={!$ae_loc.edit_mode}
class="text-xs text-gray-500"
>
{hosted_file_obj.hash_sha256?.slice(0, 6)}...
</span>
</li>
{/each}
</ol>

9
src/lib/element_manage_hosted_file_li_all.svelte
View File

@@ -18,7 +18,8 @@ import { db_core } from "$lib/ae_core/db_core";
interface Props {
// import { events_func } from '$lib/ae_events_functions';
container_class_li?: string|Array<string>;
class_li_default?: string; // |Array<string>;
class_li?: string; // |Array<string>;
link_to_type: string;
link_to_id: string;
allow_basic?: boolean; // Not used yet
@@ -27,7 +28,8 @@ interface Props {
}
let {
container_class_li = [],
class_li_default,
class_li,
link_to_type,
link_to_id,
allow_basic = false,
@@ -90,7 +92,8 @@ let lq__hosted_file_obj_li = $derived(liveQuery(async () => {
link_to_type={link_to_type}
link_to_id={link_to_id}
lq__hosted_file_obj_li={lq__hosted_file_obj_li}
container_class_li={container_class_li}
class_li_default={class_li_default}
class_li={class_li}
display_mode={display_mode}
/>
<!-- allow_basic={allow_basic} -->

10
src/routes/hosted_files/+layout.ts
View File

@@ -5,7 +5,7 @@ import { error } from '@sveltejs/kit';
import { browser } from '$app/environment';
import { core_func } from '$lib/ae_core/ae_core_functions';
export async function load({ params, parent }) { // route
export async function load({ params, parent, url }) { // route
let log_lvl: number = 0;
let data = await parent();
@@ -24,6 +24,12 @@ export async function load({ params, parent }) { // route
// ae_acct.slct.account_id = account_id;
let qry_limit = url.searchParams.get('limit') ?? 19;
if (!qry_limit) {
console.log(`qry_limit +page.ts: The qry_limit was not found in the params!!!`);
}
ae_acct.slct.qry_limit = qry_limit;
if (browser) {
let load_hosted_file_obj_li = core_func.load_ae_obj_li__hosted_file({
api_cfg: ae_acct.api,
@@ -31,7 +37,7 @@ export async function load({ params, parent }) { // route
for_obj_id: account_id,
enabled: 'enabled',
hidden: 'not_hidden',
limit: 99,
limit: qry_limit,
order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC', 'title': 'ASC'},
try_cache: true,
log_lvl: log_lvl

59
src/routes/hosted_files/+page.svelte
View File

@@ -16,6 +16,7 @@ import Comp_hosted_files_clip_video from '$lib/ae_core/ae_comp__hosted_files_cli
import Comp_hosted_files_clip_video_li from '$lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte';
import Element_manage_hosted_file_li_wrap from '$lib/element_manage_hosted_file_li_all.svelte';
let { data } = $props();
let log_lvl = 1;
@@ -121,10 +122,30 @@ onMount(() => {
>
<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>
<h1 class="h1">Clip and Scale Video Files</h1>
<p>This AV utility will take an mp4 video file and create a clipped mp4 video file. By default, videos will be scaled down to 1920x1080. This process takes at least 30 seconds, but it can easily take a handful of minutes. The scaling option requires that the video be re-encoded. Please be patient while it is processing.</p>
<h2 class="h2">Step 1: Upload Video File</h2>
<h2 class="h2">
Step 1: Upload Video File or Select from Hosted Files
<button
type="button"
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning float-right"
title="Toggle between Upload and Select from Hosted Files"
onclick={() => {
if ($ae_sess.files.add_to_use_files_method == 'upload') {
$ae_sess.files.add_to_use_files_method = 'select';
} else {
$ae_sess.files.add_to_use_files_method = 'upload';
}
}}
>
<span class="fas fa-exchange-alt m-1"></span>
Upload/Select
</button>
</h2>
<div class:hidden={$ae_sess.files.add_to_use_files_method == 'upload'}>
<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"
@@ -148,10 +169,23 @@ onMount(() => {
</span>
{/snippet}
</Comp_hosted_files_upload>
</div>
<div class:hidden={$ae_sess.files.add_to_use_files_method == 'select'}>
<Element_manage_hosted_file_li_wrap
link_to_type={'account'}
link_to_id={$ae_loc?.account_id}
allow_basic={true}
allow_moderator={true}
class_li={''}
/>
</div>
<hr />
<h2 class="h2">
Step 2: Clip Video
<h2 class="h2">Step 2: Clip Video</h2>
{#if $ae_loc.files.uploaded_file_kv && Object.entries($ae_loc.files.uploaded_file_kv).length > 0}
<button
type="button"
onclick={() => {
@@ -162,6 +196,8 @@ onMount(() => {
<span class="fas fa-broom m-1"></span>
Clear Upload History
</button>
</h2>
{#if $ae_loc.files.uploaded_file_kv && Object.entries($ae_loc.files.uploaded_file_kv).length > 0}
<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"
@@ -178,8 +214,9 @@ onMount(() => {
{/if}
<h2 class="h2">Step 3: Download Video Clips</h2>
{#if $ae_loc.files.video_clip_file_kv && Object.entries($ae_loc.files.video_clip_file_kv).length > 0}
<h2 class="h2">
Step 3: Download Recently Processed Video Clips
<button
type="button"
onclick={() => {
@@ -190,6 +227,8 @@ onMount(() => {
<span class="fas fa-broom m-1"></span>
Clear Clip History
</button>
</h2>
{#if $ae_loc.files.video_clip_file_kv && Object.entries($ae_loc.files.video_clip_file_kv).length > 0}
<Comp_hosted_files_clip_video_li
class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
link_to_type="account"
@@ -308,15 +347,15 @@ onMount(() => {
<h2 class="h2">Step X: Manage Files</h2>
<!-- <h2 class="h2">Step X: Manage Hosted Files</h2> -->
<!-- Show files for this account -->
<Element_manage_hosted_file_li_wrap
<!-- <Element_manage_hosted_file_li_wrap
link_to_type={'account'}
link_to_id={$ae_loc?.account_id}
allow_basic={true}
allow_moderator={true}
container_class_li={''}
/>
/> -->