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

Trying to improve the hosted file manage.

Browse Source
This commit is contained in:
Scott Idem
2025-01-07 20:22:44 -05:00
parent 641c6b28c3
commit f8e88b0355
11 changed files with 1027 additions and 394 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,7 @@ import Element_input_files_tbl from '$lib/element_input_files_tbl.svelte';
import type { key_val } from '$lib/ae_stores';
import { api } from '$lib/api';
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
@@ -26,281 +27,72 @@ 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 upload_complete: boolean = false;
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 = {};
// Local Variables
let task_id = link_to_id;
let input_file_list: any = null;
let ae_promises: key_val = {}; // Promise<any>;
let ae_triggers: key_val = {};
// let input_file_list: any = null;
let ae_promises: key_val = {};
// let ae_promises_clipping: key_val = {};
// let ae_triggers: key_val = {};
let input_element_id = 'ae_comp__hosted_files_upload__input';
// let input_element_id = 'ae_comp__hosted_files_upload__input';
let form_kv: key_val = {
start_time: null,
end_time: null,
reencode: null,
video_file: null,
};
let download_clip_src: string;
let download_clip_filename: string;
// let form_kv: key_val = {
// start_time: null,
// end_time: null,
// reencode: null,
// video_file: null,
// };
// let download_clip_src: string;
// let download_clip_filename: string;
$ae_sess.files.obj = {
obj: null,
};
// Functions and Logic
async function handle_submit_form_files(event) {
console.log('*** handle_submit_form() ***');
$ae_sess.files.disable_submit__hosted_file_obj = true;
$ae_sess.files.submit_status = 'saving';
submit_status = 'saving';
upload_complete = false;
hosted_file_id_li = [];
hosted_file_obj_li = [];
let hosted_file_results;
form_kv = {
start_time: event.target.start_time.value,
end_time: event.target.end_time.value,
reencode: event.target.reencode.value,
video_file: event.target.file_list.files[0],
};
// const form_data = new FormData();
// form_data.append('start_time', event.target.start_time.value);
// form_data.append('end_time', event.target.end_time.value);
// if (event.target.reencode.value == '1' || event.target.reencode.value == 'true') {
// form_data.append('reencode', 'true');
// } else {
// form_data.append('reencode', 'false');
// }
// form_data.append('reencode', event.target.reencode.value);
// form_data.append(`video_file`, event.target.video_file.files[0]);
// let download_filename = `clipped_file_test.mp4`;
// let params = null;
// let endpoint = '/hosted_file/clip_video';
// console.log(form_data);
// params = null;
if (event.target[input_element_id].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
// The task_id should be the file hash.
// processed_file_list[i] has the file hash_sha256, hash_sha256_match, warnings, uploaded, uploaded_bytes, filename, and file_size_bytes.
for (let i = 0; i < event.target[input_element_id].files.length; i++) {
let tmp_file = event.target[input_element_id].files[i];
task_id = $ae_sess.files.processed_file_list[i].hash_sha256;
hosted_file_results = await handle_input_upload_files([tmp_file], form_kv, task_id);
if (hosted_file_results) {
console.log(`hosted_file_results:`, hosted_file_results);
} else {
console.log(`hosted_file_results:`, hosted_file_results);
}
}
// 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;
event.target.reset();
// await tick();
if (log_lvl) {
console.log(`hosted_file_id_li: ${hosted_file_id_li}`, hosted_file_id_li);
} 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;
$ae_sess.files.submit_status = 'saved';
submit_status = 'saved';
upload_complete = true;
}
async function handle_input_upload_files(input_upload_files, form_kv, task_id) {
console.log('*** handle_input_upload_files() ***');
console.log(input_upload_files);
console.log(form_kv);
const form_data = new FormData();
// form_data.append('account_id', $ae_loc.account_id);
// form_data.append('link_to_type', link_to_type);
// form_data.append('link_to_id', link_to_id);
form_data.append('start_time', form_kv.start_time);
form_data.append('end_time', form_kv.end_time);
if (form_kv.reencode == '1' || form_kv.reencode == 'true') {
form_data.append('reencode', 'true');
} else {
form_data.append('reencode', 'false');
}
// There should really only be one file uploaded at a time for now.
for (let i = 0; i < input_upload_files.length; i++) {
form_data.append(`video_file`, input_upload_files[i]);
}
// hash_sha256, uploaded, uploaded_bytes
// $ae_sess.files.processed_file_list[i] = {
// ...$ae_sess.files.processed_file_list[i],
// uploaded: $ae_sess.api_upload_kv[link_to_id].percent_completed,
// uploaded_bytes: $ae_sess.api_upload_kv[link_to_id].uploaded_bytes,
// };
let params = null;
let endpoint = '/hosted_file/clip_video';
console.log(form_data);
params = null;
// Uncomment and the post_promise is not seen by the "await" below
// post_promise = await api.post_object({api_cfg: $cfg.api, endpoint: endpoint, params: params, data:form_data});
// Uncomment so that the post_promise is not seen by the "await" below
ae_promises.upload__hosted_file_obj = api.post_object({
api_cfg: $ae_api,
endpoint: endpoint,
params: params,
form_data: form_data,
return_blob: true,
filename: 'clipped_video_test.mp4',
auto_download: false,
task_id: task_id,
log_lvl: log_lvl
})
.then(async function (result) {
console.log(result);
let file_blob = new Blob([result.data]);
// console.log(file_blob);
let file_obj_url = window.URL.createObjectURL(file_blob); // The img src
// const url = window.URL.createObjectURL(new Blob([result.data]));
download_clip_src = file_obj_url;
// download_filename = file_obj_url;
return true;
// // WARNING!!!! ONLY ONE FILE IS EXPECTED TO BE UPLOADED AT A TIME!!!
// // NOTE: The /hosted_file/upload_files endpoint will always return a list of successful files uploaded. In this case we are only uploading one file and expecting a list of one item.
// let x = 0;
// console.log(result[x]);
// let hosted_file_obj = result[x];
// let hosted_file_id = hosted_file_obj.hosted_file_id_random;
// hosted_file_id_li.push(hosted_file_id);
// hosted_file_obj_li.push(hosted_file_obj);
// let hosted_file_data: key_val = {};
// hosted_file_data['hosted_file_id_random'] = hosted_file_id;
// hosted_file_data['for_type'] = link_to_type;
// hosted_file_data['for_id_random'] = link_to_id;
// hosted_file_data['filename'] = hosted_file_obj.filename;
// hosted_file_data['extension'] = hosted_file_obj.extension;
// hosted_file_data['enable'] = true;
// console.log(hosted_file_data);
// return hosted_file_data;
// $ae_sess.files.new_upload_list[i].uploaded_bytes = 10; // fake 10 bytes at least...
// let event_file_id = await events_func.create_hosted_file_obj_from_hosted_file_async({
// api_cfg: $ae_api,
// hosted_file_id: hosted_file_id,
// data: event_file_data,
// log_lvl: log_lvl
// })
// .then(function (create_result) {
// console.log(create_result); // NOTE: This should be the event_file_id string
// // let event_file_id = create_result;
// return create_result;
// });
// return event_file_id;
})
// .then(function (hosted_file_data) {
// return hosted_file_data;
// })
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
return false;
})
.finally( function () {
// $slct_trigger = 'load__hosted_file_obj_li';
});
console.log(ae_promises.upload__hosted_file_obj);
let hosted_file_result = ae_promises.upload__hosted_file_obj;
return hosted_file_result;
}
function handle_clip_video(event) {
console.log('*** handle_clip_video() ***');
submit_status = 'clipping';
clip_complete = false;
let hosted_file_id = event.target.hosted_file_id.value;
// $ae_sess.files.disable_submit__hosted_file_obj = true;
$ae_sess.files[hosted_file_id] = {};
$ae_sess.files[hosted_file_id].submit_status = 'saving';
$ae_sess.files[hosted_file_id].start_time = event.target.start_time.value;
$ae_sess.files[hosted_file_id].end_time = event.target.end_time.value;
$ae_sess.files[hosted_file_id].reencode = event.target.reencode.value;
$ae_sess.files[hosted_file_id].new_filename = event.target.new_filename.value;
$ae_sess.files[hosted_file_id].upload_complete = false;
$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].clip_complete = false;
let endpoint = `/${hosted_file_id}/clip_video`;
// $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].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].new_filename = event.target.new_filename.value;
$ae_loc.files.processed_file_kv[hosted_file_id].clip_complete = false;
let endpoint = `/hosted_file/${hosted_file_id}/clip_video`;
let params = {
link_to_type: link_to_type,
link_to_id: link_to_id,
filename_no_ext: event.target.new_filename.value.replace('.mp4', ''),
from_type: 'mp4', // Video file type being converted
to_type: 'mp4', // Video file type to convert to
start_time: event.target.start_time.value,
end_time: event.target.end_time.value,
reencode: event.target.reencode.value,
filename_no_ext: event.target.new_filename.value,
from_type: 'mp4', // Video file type being converted
to_type: 'mp4', // Video file type to convert to
};
ae_promises[hosted_file_id] = {};
@@ -309,13 +101,36 @@ function handle_clip_video(event) {
api_cfg: $ae_api,
endpoint: endpoint,
params: params,
// return_blob: true,
// filename: event.target.new_filename.value,
// auto_download: false,
task_id: task_id,
log_lvl: log_lvl
})
.then(function (result) {
console.log(result);
$ae_sess.files[hosted_file_id].submit_status = 'saved';
$ae_sess.files[hosted_file_id].upload_complete = true;
video_clip_file_kv[result.hosted_file_id_random] = {};
video_clip_file_kv[result.hosted_file_id_random] = result;
// $ae_loc.files.video_clip_file_kv[result.hosted_file_id_random] = {};
// $ae_loc.files.video_clip_file_kv[result.hosted_file_id_random] = 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_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;
// let file_blob = new Blob([result.data]);
// // console.log(file_blob);
// let file_obj_url = window.URL.createObjectURL(file_blob); // The img src
// // const url = window.URL.createObjectURL(new Blob([result.data]));
// download_clip_src = file_obj_url;
// // download_filename = file_obj_url;
return true;
});
@@ -326,153 +141,153 @@ function handle_clip_video(event) {
<div>
<h3 class="h3">{hosted_file_obj_li.length}&times; files uploaded</h3>
{#each hosted_file_obj_li as hosted_file_obj, i}
<div>
<span>{hosted_file_obj.hosted_file_id_random}</span>
<span>{hosted_file_obj.filename}</span>
<span>{hosted_file_obj.extension}</span>
<!-- <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>
{#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}
<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">
<button
type="button"
disabled={!$ae_loc.trusted_access}
onclick={() => {
ae_promises[hosted_file_id] = api.download_hosted_file({
api_cfg: $ae_api,
hosted_file_id: hosted_file_id,
return_file: true,
filename: hosted_file_obj.filename,
auto_download: true,
log_lvl: 0
});
// 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}
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]}
<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>
{:then}
<span class="fas fa-{ae_util.file_extension_icon(hosted_file_obj?.file_extension)}"></span>
{/await}
<span class="grow">
{ae_util.shorten_filename({filename: hosted_file_obj?.filename, max_length: 30})}
</span>
</button>
<span>{ae_util.shorten_filename({filename: hosted_file_obj?.filename, max_length: 30})}</span>
<span>
<span class="text-sm font-bold">
File ID:
</span>
{hosted_file_obj.hosted_file_id_random}</span>
<span>
<span class="text-sm font-bold">
Type:
</span>
{hosted_file_obj.extension}</span>
<!-- <span>{hosted_file_obj.filename}</span> -->
</div>
<form
on:submit|preventDefault={handle_clip_video}
onsubmit={handle_clip_video}
class="{class_li_default} {class_li}"
>
<!-- {$ae_sess?.files[hosted_file_obj?.hosted_file_id_random ?? 'obj'].submit_status ?? 'not set'} -->
<input type="hidden" name="hosted_file_id" value="{hosted_file_obj.hosted_file_id_random}" />
<label class="label">Start time (HH:MM:SS) <input type="text" name="start_time" value="00:00:00" placeholder="HH:MM:SS (00:01:30)" class="input w-32" /></label>
<label class="label">End time (HH:MM:SS) <input type="text" name="end_time" value="00:01:15" placeholder="HH:MM:SS (01:05:25)" class="input w-32" /></label>
<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" class="input w-full text-sm" name="new_filename" value={hosted_file_obj.filename} />
</div>
<label class="label">Re-encode (true or false) <input type="text" name="reencode" value="false" placeholder="true" class="input w-32" /></label>
<div class="max-w-screen-sm flex flex-row gap-1 justify-center items-center w-full">
<label 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>
<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 : '00:00:00'}
placeholder="HH:MM:SS (00:01:30)" class="input w-32" />
</label>
<!-- {#await ae_promises.upload__hosted_file_obj}
<div class="text-lg flex flex-row gap-1 items-center justify-center">
<span class="fas fa-spinner fa-spin m-1"></span>
<span class="">
Uploading
{#if $ae_sess.api_upload_kv[task_id]}
{$ae_sess.api_upload_kv[task_id].percent_completed}%
{/if}
<label 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>
<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 : '00:45:59'}
placeholder="HH:MM:SS (01:05:25)" class="input w-32" />
</label>
<span class="flex flex-col gap-1 items-center justify-center"
title="Re-encode the video file? 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">
Re-encode?
</span>
<label class="inline-block">
<input type="radio" name="reencode" value="true" class="radio" checked />
True
</label>
<label class="inline-block">
<input type="radio" name="reencode" value="false" class="radio" />
False
</label>
</span>
</div>
{:then} -->
<button
type="submit"
class="btn btn-lg btn-primary variant-ghost-primary hover:variant-ghost-success w-54"
disabled={$ae_sess.files.disable_submit__hosted_file_obj || $ae_sess.files.status__file_list != 'ready'}
class="btn btn-lg btn-primary variant-ghost-primary"
disabled={submit_status == 'clipping'}
>
Process Video
{#await ae_promises[hosted_file_id]}
<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}
<span class="fas fa-cut m-1"></span>
Clip Video
{/if}
{/await}
<!-- <span class="fas fa-cut m-1"></span>
Clip Video -->
</button>
<!-- {/await} -->
</form>
{/each}
<!-- class:hidden={!$ae_loc.trusted_access} -->
<form
on:submit|preventDefault={handle_submit_form_files}
class="{class_li_default} {class_li}"
>
<label class="label">Start time (HH:MM:SS) <input type="text" name="start_time" value="00:00:00" placeholder="HH:MM:SS (00:01:30)" class="input w-32" /></label>
<label class="label">End time (HH:MM:SS) <input type="text" name="end_time" value="00:01:15" placeholder="HH:MM:SS (01:05:25)" class="input w-32" /></label>
<label class="label">Re-encode (true or false) <input type="text" name="reencode" value="false" placeholder="true" class="input w-32" /></label>
{#await ae_promises.upload__hosted_file_obj}
<div class="text-lg flex flex-row gap-1 items-center justify-center">
{#await ae_promises[hosted_file_id]}
<span class="fas fa-spinner fa-spin m-1"></span>
<span class="">
Uploading
{#if $ae_sess.api_upload_kv[task_id]}
{$ae_sess.api_upload_kv[task_id].percent_completed}%
{/if}
</span>
</div>
<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!
{:else}
<!-- <p>Fill out the form and select the video file to clip.</p> -->
{/if}
{/await}
<label
for="ae_comp__hosted_files_upload__input"
class="svelte_input_file_label text-center"
class:hidden={$ae_sess.files.disable_submit__hosted_file_obj}
>
<slot name="label">
<div>
<span class="fas fa-upload"></span>
<!-- Select files to upload -->
<!-- <span class="fas fa-file-archive"></span> -->
<strong class="bg-blue-300 p-1">Upload files</strong>
<!-- (drag and drop) -->
</div>
<span class="text-sm text-gray-600 dark:text-gray-400 italic">
<strong>Video files only</strong><br>
(mp4 or mkv)
</span>
</slot>
</label>
</div>
{/each}
<input
id={input_element_id}
type="file"
bind:files={input_file_list}
{multiple}
{required}
{accept}
name={input_name}
class="svelte_input_file_element file-dropzone-input block w-full text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 {input_class_li.join(' ')}"
class:hidden={$ae_sess.files.disable_submit__hosted_file_obj}
/>
<Element_input_files_tbl
bind:input_file_list={input_file_list}
bind:file_list_status={$ae_sess.files.status__file_list}
bind:processed_file_list={$ae_sess.files.processed_file_list}
table_class_li={table_class_li}
/>
<button
type="submit"
class="btn btn-lg btn-primary variant-ghost-primary hover:variant-ghost-success w-54"
disabled={$ae_sess.files.disable_submit__hosted_file_obj || $ae_sess.files.status__file_list != 'ready'}
>
{#await ae_promises.upload__hosted_file_obj}
<span class="fas fa-spinner fa-spin m-1"></span>
<span class="">
Uploading
{#if $ae_sess.api_upload_kv[task_id]}
{$ae_sess.api_upload_kv[task_id].percent_completed}%
{/if}
</span>
{:then}
<span class="fas fa-upload m-1"></span>
<span class="text-sm">
Upload?
</span>
<!-- <span class="fas fa-save m-1"></span> -->
<span class="grow font-bold">
{#if $ae_sess.files.processed_file_list?.length > 0}
<!-- {#each $ae_sess.files.processed_file_list as file_obj, index}
<span class="text-xs">
{file_obj.filename}
</span>
{/each} -->
{$ae_sess.files.processed_file_list.length == 1 ? `${$ae_sess.files.processed_file_list.length} file` : `${$ae_sess.files.processed_file_list.length} files`}
{:else}
<span class="text-xs">
No files selected
</span>
{/if}
<!-- Files -->
</span>
{/await}
</button>
</form>
<hr />
<!-- <hr />
{#await ae_promises.upload__hosted_file_obj}
<span class="fas fa-spinner fa-spin m-1"></span>
@@ -483,6 +298,6 @@ function handle_clip_video(event) {
{:else}
<p>Fill out the form and select the video file to clip.</p>
{/if}
{/await}
{/await} -->
</div>

75
src/lib/ae_core/ae_comp__hosted_files_clip_video_li.svelte Normal file
View File

@@ -0,0 +1,75 @@
<script lang="ts">
export let log_lvl: number = 0;
// Imports
// Import components and elements
// Import storage, functions, and libraries
import type { key_val } from '$lib/ae_stores';
import { api } from '$lib/api';
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
// 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 = '';
let ae_promises: key_val = {};
</script>
<h3 class="h3">{Object.entries($ae_loc.files).length}&times; files clipped</h3>
<div class="{class_li_default} {class_li} ">
{#each Object.entries($ae_loc.files.video_clip_file_kv) as [hosted_file_id, hosted_file_obj]}
<button
type="button"
disabled={!$ae_loc.trusted_access}
onclick={() => {
ae_promises[hosted_file_id] = api.download_hosted_file({
api_cfg: $ae_api,
hosted_file_id: hosted_file_id,
return_file: true,
filename: hosted_file_obj.filename,
auto_download: true,
log_lvl: 0
});
// 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"
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_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>
{:then}
<span class="fas fa-{ae_util.file_extension_icon(hosted_file_obj?.file_extension)}"></span>
{/await}
<span class="grow">
{ae_util.shorten_filename({filename: hosted_file_obj?.filename, max_length: 30})}
</span>
<span class="shrink">
{ae_util.format_bytes(hosted_file_obj?.size)}
</span>
</button>
{/each}
</div>

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

@@ -31,6 +31,7 @@ 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 = {};
// Local Variables
@@ -52,6 +53,7 @@ async function handle_submit_form_files(event) {
hosted_file_id_li = [];
hosted_file_obj_li = [];
hosted_file_obj_kv = {};
let hosted_file_results;
@@ -169,6 +171,8 @@ async function handle_input_upload_files(input_upload_files, task_id) {
hosted_file_data['enable'] = true;
console.log(hosted_file_data);
hosted_file_obj_kv[hosted_file_id] = hosted_file_data;
return hosted_file_data;
// $ae_sess.files.new_upload_list[i].uploaded_bytes = 10; // fake 10 bytes at least...

10
src/lib/ae_core/ae_core_functions.ts
View File

@@ -39,7 +39,11 @@ import {
} from "$lib/ae_core/core__country_subdivisions";
import {
delete_ae_obj_id__hosted_file
load_ae_obj_id__hosted_file,
load_ae_obj_li__hosted_file,
delete_ae_obj_id__hosted_file,
db_save_ae_obj_li__hosted_file,
db_update_ae_obj_id__hosted_file
} from "$lib/ae_core/core__hosted_files";
let ae_promises: key_val = {}; // Promise<any>;
@@ -403,7 +407,11 @@ let export_obj = {
load_ae_obj_li__time_zone: load_ae_obj_li__time_zone,
load_ae_obj_li__country: load_ae_obj_li__country,
load_ae_obj_li__country_subdivision: load_ae_obj_li__country_subdivision,
load_ae_obj_id__hosted_file: load_ae_obj_id__hosted_file,
load_ae_obj_li__hosted_file: load_ae_obj_li__hosted_file,
delete_ae_obj_id__hosted_file: delete_ae_obj_id__hosted_file,
db_save_ae_obj_li__hosted_file: db_save_ae_obj_li__hosted_file,
db_update_ae_obj_id__hosted_file: db_update_ae_obj_id__hosted_file,
handle_load_ae_obj_id__site_domain: handle_load_ae_obj_id__site_domain,
handle_load_ae_obj_code__data_store: handle_load_ae_obj_code__data_store,
load_ae_obj_id__activity_log: load_ae_obj_id__activity_log,

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

@@ -1,11 +1,149 @@
import type { key_val } from '$lib/ae_stores';
import { api } from '$lib/api';
// import { db_events } from "$lib/db_events";
import { db_core } from "$lib/ae_core/db_core";
let ae_promises: key_val = {};
// Updated 2024-06-14
export async function load_ae_obj_id__hosted_file(
{
api_cfg,
hosted_file_id,
try_cache = false,
log_lvl = 0
}: {
api_cfg: any,
hosted_file_id: string,
try_cache?: boolean,
log_lvl?: number
}
) {
if (log_lvl) {
console.log(`*** load_ae_obj_id__hosted_file() *** hosted_file_id=${hosted_file_id}`);
}
let params = {};
ae_promises.load__hosted_file_obj = await api.get_ae_obj_id_crud({
api_cfg: api_cfg,
obj_type: 'hosted_file',
obj_id: hosted_file_id, // NOTE: This is the FQDN, not normally the ID.
use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value
params: params,
log_lvl: log_lvl
})
.then(function (hosted_file_obj_get_result) {
if (hosted_file_obj_get_result) {
// This is expecting a list
db_save_ae_obj_li__hosted_file({obj_type: 'hosted_file', obj_li: [hosted_file_obj_get_result]});
return hosted_file_obj_get_result;
} else {
console.log('No results returned.');
return null;
}
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
return ae_promises.load__hosted_file_obj;
}
// Updated 2024-07-03
export async function load_ae_obj_li__hosted_file(
{
api_cfg,
for_obj_type,
for_obj_id,
enabled = 'enabled',
hidden = 'not_hidden',
limit = 99,
offset = 0,
order_by_li = {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC'},
params = {},
try_cache = true,
log_lvl = 0
}: {
api_cfg: any,
for_obj_type: string,
for_obj_id: string,
enabled?: string,
hidden?: string,
limit?: number,
offset?: number,
order_by_li?: key_val,
params?: key_val,
try_cache?: boolean,
log_lvl?: number
}
) {
if (log_lvl) {
console.log(`*** load_ae_obj_li__hosted_file() *** for_obj_type=${for_obj_type} for_obj_id=${for_obj_id}`);
}
// Check if for_obj_type is in the list of valid Aether object types:
let valid_for_obj_types = ['account', 'archive', 'archive_content', 'event', 'event_session', 'event_presentation', 'event_presenter', 'event_location', 'post', 'post_comment'];
if (!valid_for_obj_types.includes(for_obj_type)) {
console.log(`Invalid for_obj_type: ${for_obj_type}`);
return [];
}
// let enabled: string = (params.qry__enabled ?? 'enabled'); // all, disabled, enabled
// let hidden: string = (params.qry__hidden ?? 'all'); // all, hidden, not_hidden
// let limit: number = (params.qry__limit ?? 99); // 99
// let offset: number = (params.qry__offset ?? 0); // 0
let params_json: key_val = {};
// console.log('params_json:', params_json);
ae_promises.load__hosted_file_obj_li = await api.get_ae_obj_li_for_obj_id_crud_v2({
api_cfg: api_cfg,
obj_type: 'hosted_file',
for_obj_type: for_obj_type,
for_obj_id: for_obj_id,
use_alt_tbl: false,
use_alt_mdl: false,
use_alt_exp: false,
enabled: enabled,
hidden: hidden,
order_by_li: order_by_li,
limit: limit,
offset: offset,
params_json: params_json,
params: params,
log_lvl: log_lvl
})
.then(function (hosted_file_obj_li_get_result) {
if (hosted_file_obj_li_get_result) {
if (try_cache) {
db_save_ae_obj_li__hosted_file({
obj_type: 'hosted_file',
obj_li: hosted_file_obj_li_get_result,
log_lvl: log_lvl
});
}
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.load__hosted_file_obj_li:', ae_promises.load__hosted_file_obj_li);
}
return ae_promises.load__hosted_file_obj_li;
}
// Updated 2024-11-07
export async function delete_ae_obj_id__hosted_file(
{
@@ -56,4 +194,141 @@ export async function delete_ae_obj_id__hosted_file(
});
return ae_promises.delete__hosted_file_obj;
}
}
// This function will loop through the hosted_file_obj_li and save each one to the DB.
// Updated 2025-01-07
export function db_save_ae_obj_li__hosted_file(
{
obj_type,
obj_li,
log_lvl = 0
}: {
obj_type: string,
obj_li: any,
log_lvl?: number
}
) {
if (log_lvl) {
console.log(`*** db_save_ae_obj_li__hosted_file() ***`);
}
if (obj_li && obj_li.length) {
obj_li.forEach(async function (obj: any) {
if (log_lvl) {
console.log(`ae_obj ${obj_type}:`, obj);
}
try {
const id_random = await db_core.file.put({
id: obj.hosted_file_id_random,
id_random: obj.hosted_file_id_random,
hosted_file_id: obj.hosted_file_id_random,
hosted_file_id_random: obj.hosted_file_id_random,
hash_sha256: obj.hash_sha256, // Renamed with alias in FastAPI model
for_type: obj.for_type,
for_id: obj.for_id_id_random,
for_id_random: obj.for_id_random,
account_id: obj.account_id_random,
filename: obj.filename,
extension: obj.extension,
content_type: obj.content_type,
size: obj.size,
enable: obj.enable,
hide: obj.hide,
// priority: obj.priority,
// sort: obj.sort,
group: obj.group,
notes: obj.notes,
created_on: obj.created_on,
updated_on: obj.updated_on,
filename_no_ext: obj.filename_no_ext,
filename_w_ext: obj.filename_w_ext,
});
// console.log(`Put obj with ID: ${obj.hosted_file_id_random} or ${id_random}`);
} catch (error) {
let status = `Failed to put ${obj.hosted_file_id_random}: ${error}`;
console.log(status);
}
// const id_random = await db_core.file.put(obj);
// console.log(`Put obj with ID: ${obj.hosted_file_id_random}`);
});
return true;
}
return false;
}
// Updated 2025-01-07
export function db_update_ae_obj_id__hosted_file(
{
obj_type,
obj_id,
data_kv,
log_lvl = 0
}: {
obj_type: string,
obj_id: string,
data_kv: key_val,
log_lvl?: number
}
) {
if (log_lvl) {
console.log(`*** db_update_ae_obj_id__hosted_file() ***`);
}
if (obj_id) {
console.log(`ae_obj ${obj_type}:`, obj_id);
try {
// db_core.file.update(obj_id, data_kv);
db_core.file.update(obj_id,
{
// for_type: data_kv.for_type,
// for_id: data_kv.for_id_id_random,
// for_id_random: data_kv.for_id_random,
filename: data_kv.filename,
extension: data_kv.extension,
content_type: data_kv.content_type,
size: data_kv.size,
// enable: data_kv.enable,
// hide: data_kv.hide,
// priority: data_kv.priority,
// sort: data_kv.sort,
// group: data_kv.group,
// notes: data_kv.notes,
// created_on: data_kv.created_on,
// updated_on: data_kv.updated_on,
filename_no_ext: data_kv.filename_no_ext,
filename_w_ext: data_kv.filename_w_ext,
// hosted_file_content_type: data_kv.hosted_file_content_type,
// file_size: data_kv.file_size,
// hosted_file_size: data_kv.hosted_file_size,
}
);
console.log(`Update obj with ID: ${obj_id}`);
} catch (error) {
let status = `Failed to update ${obj_id}: ${error}`;
console.log(status);
}
// const id_random = await db_core.file.put(obj);
// console.log(`Put obj with ID: ${data_kv.hosted_file_id_random}`);
return true;
}
return false;
}

47
src/lib/ae_core/db_core.ts
View File

@@ -3,6 +3,41 @@ import Dexie, { type Table } from 'dexie';
// li = list
// kv = key value list
// Updated 2025-01-07
export interface File {
id: string;
id_random: string;
hosted_file_id: string;
hosted_file_id_random: string;
hash_sha256: string;
for_type?: string;
for_id?: string;
for_id_random?: string;
account_id: string;
filename: string;
extension: string;
content_type: string;
size: number; // In bytes
enable: null|boolean;
hide?: null|boolean;
priority?: null|boolean
sort?: null|number;
group?: null|string;
notes?: null|string;
created_on: Date;
updated_on?: null|Date;
// Additional fields for convenience (database views)
filename_no_ext: string;
filename_w_ext: string;
}
// Updated 2024-07-17
export interface Person {
id: string;
@@ -71,14 +106,24 @@ export interface Person {
}
// Updated 2024-06-24
// Updated 2025-01-07
export class MySubClassedDexie extends Dexie {
file!: Table<File>;
person!: Table<Person>;
// user!: Table<User>;
constructor() {
super('ae_core_db');
this.version(1).stores({
file: `
id, id_random, hosted_file_id, hosted_file_id_random,
hash_sha256,
account_id,
for_type, for_id, for_id_random,
filename, extension,
content_type, size,
enable, hide, priority, sort, group, created_on, updated_on`,
person: `
id, person_id, person_id_random,
external_id, code,

11
src/lib/ae_stores.ts
View File

@@ -112,6 +112,12 @@ export let ae_app_local_data_struct: key_val = {
show_element__sql_qry_results: false,
},
files: {
processed_file_kv: {},
uploaded_file_kv: {},
video_clip_file_kv: {},
},
'ds': {},
'hub': {
'show_element__cfg': true,
@@ -214,7 +220,12 @@ export let ae_app_session_data_struct: key_val = {
'files': {
disable_submit__hosted_file_obj: false,
processed_file_kv: {},
uploaded_file_kv: {},
video_clip_file_kv: {},
processed_file_list: [],
// uploaded_file_list: [],
video_clip_file_list: [],
submit_status: null, // 'saving', 'created', 'updated', 'saved'
},

142
src/lib/element_manage_hosted_file_li.svelte Normal file
View File

@@ -0,0 +1,142 @@
<script lang="ts">
export let log_lvl: number = 0;
import { onMount } from 'svelte';
import { clipboard } from '@skeletonlabs/skeleton';
// import { liveQuery } from "dexie";
import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { api } from '$lib/api';
// import Element_ae_crud from '$lib/element_ae_crud.svelte';
// import Element_data_store from '$lib/element_data_store_v2.svelte';
// import { core_func } from '$lib/ae_core_functions';
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 { 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'
// export let show_convert_btn: null|boolean = null;
// let ae_placeholder_li: key_val = {};
let ae_promises: key_val = {};
let ae_tmp: key_val = {};
ae_tmp.show__file_li = true;
ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
// let ae_triggers: key_val = {};
</script>
<div
class="float-right flex flex-row items-center"
>
<button
type="button"
on:click={() => {
console.log('*** Refresh button clicked ***');
db_core.file.clear();
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,
try_cache: true
});
// ae_tmp.show__file_li = false;
// console.log(`$lq__hosted_file_obj_li:`, $lq__hosted_file_obj_li);
// $slct_trigger = 'load__hosted_file_obj_li';
// ae_tmp.show__file_li = true;
}}
class="btn btn-sm p-1 m-1 variant-soft-tertiary hover:variant-ghost-warning transition hover:transition-all *:hover:inline"
class:hidden={!$ae_loc.edit_mode || !$ae_loc.authenticated_access}
title="Refresh the list of files"
>
<span class="fas fa-sync-alt m-1"></span>
<div class="hidden">
Files
</div>
</button>
<button
type="button"
on:click={() => {
console.log('*** Show Alt Download button clicked ***');
ae_tmp.show__direct_download = !ae_tmp.show__direct_download;
}}
class="btn btn-sm p-1 m-1 variant-soft-tertiary hover:variant-ghost-warning transition hover:transition-all *:hover:inline"
class:hidden={!$ae_loc.edit_mode || !$ae_loc.trusted_access}
title="Toggle direct download link and copy link button"
>
<span class="fas fa-download m-1"></span>
<div class="hidden">
{ae_tmp.show__direct_download ? 'Alt On' : 'Alt Download Off'}
</div>
</button>
</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>
{#each $lq__hosted_file_obj_li as hosted_file_obj}
<li>
{hosted_file_obj.filename}
</li>
{/each}
</ol>
</div>
{:else}
<p
class="w-96 text-center text-gray-500"
class:hidden={display_mode != 'default'}
>
No files available to display
</p>
{/if}
</section>
<style>
</style>

88
src/lib/element_manage_hosted_file_li_all.svelte Normal file
View File

@@ -0,0 +1,88 @@
<script lang="ts">
// NEW NEW NEW: 2025-01-07
// import { onMount } from 'svelte';
// import { clipboard } from '@skeletonlabs/skeleton';
import { liveQuery } from "dexie";
import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils';
// import { api } from '$lib/api';
// import Element_ae_crud from '$lib/element_ae_crud.svelte';
// import Element_data_store from '$lib/element_data_store_v2.svelte';
import Element_manage_hosted_file_li from '$lib/element_manage_hosted_file_li.svelte';
// import { core_func } from '$lib/ae_core_functions';
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;
export let allow_moderator: boolean = false;
export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
console.log(`HERE HERE HERE HERE: link_to_type: ${link_to_type} link_to_id: ${link_to_id}`);
// export let show_convert_btn: null|boolean = null;
// let ae_placeholder_li: key_val = {};
// let ae_promises: key_val = {};
let ae_tmp: key_val = {};
ae_tmp.show__file_li = true;
ae_tmp.show__direct_download = false;
// let ae_triggers: key_val = {};
let dq__where_val: string = `${link_to_type}_id`; // no more _random ???
let dq__where_eq_val: string = link_to_id ?? 'Q8lR8Ai8hx2FjbQ3C_EH1Q';
// 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 () => {
console.log(`dq__where_val: ${dq__where_val}`);
console.log(`dq__where_eq_val: ${dq__where_eq_val}`);
let results = await db_core.file
// .where(dq__where_val)
.where('account_id')
// .equals(dq__where_eq_val)
.equals('Q8lR8Ai8hx2FjbQ3C_EH1Q')
// .reverse()
// .sortBy('created_on')
// .toArray()
;
return results;
});
</script>
<!-- {#if lq__hosted_file_obj_li}
<h3 class="h3">{lq__hosted_file_obj_li.length}&times; files clipped</h3>
<div class="container">
<ol>
{#each lq__hosted_file_obj_li as hosted_file_obj}
<li>
{hosted_file_obj.filename}
</li>
{/each}
</ol>
</div>
{:else}
<p>No files found</p>
{/if} -->
{#if lq__hosted_file_obj_li}
<Element_manage_hosted_file_li
link_to_type={link_to_type}
link_to_id={link_to_id}
lq__hosted_file_obj_li={lq__hosted_file_obj_li}
allow_basic={allow_basic}
allow_moderator={allow_moderator}
container_class_li={container_class_li}
display_mode={display_mode}
/>
{:else}
<p>No files found</p>
{/if}

47
src/routes/hosted_files/+layout.ts Normal file
View File

@@ -0,0 +1,47 @@
/** @type {import('./$types').LayoutLoad} */
console.log(`IDAA BB - [account_id] +layout.ts start`);
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
let log_lvl: number = 0;
let data = await parent();
data.log_lvl = log_lvl;
let account_id = data.account_id;
let ae_acct = data[account_id];
// console.log(`ae_acct = `, ae_acct);
if (!account_id) {
console.log(`ae Core - [account_id] +page.ts: The account_id was not found!!!`);
error(404, {
message: 'Account ID not found'
});
}
ae_acct.slct.account_id = account_id;
if (browser) {
let load_hosted_file_obj_li = core_func.load_ae_obj_li__hosted_file({
api_cfg: ae_acct.api,
for_obj_type: 'account',
for_obj_id: account_id,
enabled: 'enabled',
hidden: 'not_hidden',
limit: 99,
order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC', 'title': 'ASC'},
try_cache: true,
log_lvl: log_lvl
});
console.log(`load_hosted_file_obj_li = `, load_hosted_file_obj_li);
ae_acct.slct.hosted_file_obj_li = load_hosted_file_obj_li;
}
// WARNING: Precaution against shared data between sites and sessions.
data[account_id] = ae_acct;
return data;
}

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

@@ -12,9 +12,14 @@ import type { key_val } from '$lib/ae_stores';
import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte';
import Comp_hosted_files_clip_video from '$lib/ae_core/ae_comp__hosted_files_clip_video.svelte';
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 log_lvl = 1;
let ae_promises: key_val = {};
// export let container_class_li = [];
let file_uploads_post_promise;
@@ -31,9 +36,53 @@ let hosted_file_upload: key_val = {
// link_to_id: ae_loc.account_id,
hosted_file_id_li: [],
hosted_file_obj_li: [],
clip_complete: false,
upload_complete: false,
submit_status: null,
};
let hosted_file_clip: key_val = {
video_clip_file_kv: {},
clip_complete: false,
submit_status: null,
};
if (!$ae_loc.files) {
$ae_loc.files = {};
$ae_loc.files.processed_file_kv = {};
$ae_loc.files.uploaded_file_kv = {};
$ae_loc.files.video_clip_file_kv = {};
// $ae_loc.files.uploaded_file_list = [];
// $ae_loc.files.video_clip_file_list = [];
}
if (!$ae_loc.files.processed_file_kv) {
$ae_loc.files.processed_file_kv = {};
}
$: if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_li) {
// Append this list to the $ae_loc.files.uploaded_file_li list
$ae_loc.files.uploaded_file_li = [
...$ae_loc.files.uploaded_file_li,
...$ae_sess.files.uploaded_file_li
];
}
$: if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_kv) {
// Add this key-value pair to the $ae_loc.files.uploaded_file_kv object
$ae_loc.files.uploaded_file_kv = {
...$ae_loc.files.uploaded_file_kv,
...$ae_sess.files.uploaded_file_kv
};
}
$: if ($ae_sess.files.clip_complete && $ae_sess.files.video_clip_file_kv) {
// Add this key-value pair to the $ae_loc.files.video_clip_file_kv object
$ae_loc.files.video_clip_file_kv = {
...$ae_loc.files.video_clip_file_kv,
...$ae_sess.files.video_clip_file_kv
};
}
onMount(() => {
console.log('Hosted Files: AV Utilities +page.svelte');
});
@@ -170,7 +219,7 @@ function handle_submit_form(event) {
<section
class="ae__hosted_files__av_util container space-y-4"
class="ae__hosted_files__av_util container space-y-4 pb-20"
>
<div class="border border-gray-200 p-2 rounded-lg">
@@ -184,7 +233,8 @@ function handle_submit_form(event) {
link_to_id={$ae_loc.account_id}
bind:hosted_file_id_li={hosted_file_upload.hosted_file_id_li}
bind:hosted_file_obj_li={hosted_file_upload.hosted_file_obj_li}
bind:upload_complete={hosted_file_upload.upload_complete}
bind:hosted_file_obj_kv={$ae_sess.files.uploaded_file_kv}
bind:upload_complete={$ae_sess.files.upload_complete}
log_lvl={log_lvl}
>
<span slot="label">
@@ -199,22 +249,80 @@ function handle_submit_form(event) {
</span>
</Comp_hosted_files_upload>
<h2 class="h2">Step 2: Clip Video</h2>
{#if hosted_file_upload.upload_complete}
<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"
link_to_id={$ae_loc.account_id}
bind:hosted_file_id_li={hosted_file_upload.hosted_file_id_li}
bind:hosted_file_obj_li={hosted_file_upload.hosted_file_obj_li}
bind:upload_complete={hosted_file_upload.upload_complete}
log_lvl={log_lvl}
>
</Comp_hosted_files_clip_video>
{#if $ae_loc.files.uploaded_file_kv && Object.entries($ae_loc.files.uploaded_file_kv).length > 0}
<button
type="button"
onclick={() => {
$ae_loc.files.uploaded_file_kv = {};
}}
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning float-right"
>
<span class="fas fa-broom"></span>
Clear Upload History
</button>
<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"
link_to_id={$ae_loc.account_id}
bind:hosted_file_id_li={hosted_file_clip.hosted_file_id_li}
bind:hosted_file_obj_li={hosted_file_clip.hosted_file_obj_li}
bind:hosted_file_obj_kv={$ae_loc.files.uploaded_file_kv}
bind:video_clip_file_kv={$ae_loc.files.video_clip_file_kv}
bind:clip_complete={$ae_sess.files.clip_complete}
bind:submit_status={hosted_file_clip.submit_status}
log_lvl={log_lvl}
>
</Comp_hosted_files_clip_video>
{:else}
<p>Upload a video file to clip.</p>
<p>Upload a video file to clip first.</p>
{/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}
<button
type="button"
onclick={() => {
$ae_loc.files.video_clip_file_kv = {};
}}
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning float-right"
>
<span class="fas fa-broom"></span>
Clear Clip History
</button>
<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"
link_to_id={$ae_loc.account_id}
bind:video_clip_file_kv={$ae_loc.files.video_clip_file_kv}
log_lvl={log_lvl}
>
</Comp_hosted_files_clip_video_li>
{:else}
<p>Clip a video file first.</p>
{/if}
<!-- <hr /> -->
<!-- {$ae_sess.files?.uploaded_file_li?.length}&times; Files Upload History
History:
{#each Object.entries($ae_loc.files.uploaded_file_kv) as [hosted_file_id, hosted_file_obj]}
<div>
<span>{hosted_file_obj.hosted_file_id_random}</span>
<span>{hosted_file_obj.filename}</span>
<span>{hosted_file_obj.extension}</span>
<button
type="button"
class="btn btn-sm btn-primary"
>
Clip Video
</button>
</div>
{/each} -->
<!-- <form on:submit|preventDefault={handle_submit_form_clip} class="av_util_mp4_clip form space-y-4"> -->
<!-- <label class="label">Start time (HH:MM:SS) <input type="text" name="start_time" value="00:00:00" placeholder="HH:MM:SS (00:01:30)" class="input w-32" /></label>
@@ -251,11 +359,12 @@ function handle_submit_form(event) {
</div>
{#if 1===2}
<div class="border border-gray-200 p-2 rounded-lg hidden">
<h2 class="h2">Convert mp3 to mp4</h2>
<p>This AV utility will take an mp3 audio file and a static image template and create a mp4 video file. This process may take a few seconds to a handful of minutes. Please be patient while it is processing.</p>
<form on:submit|preventDefault={handle_submit_form} class="av_util_mp3_to_mp4 space-y-4">
<form onsubmit={handle_submit_form} class="av_util_mp3_to_mp4 space-y-4">
<input type="text" name="title_part_1" value="Title Part 1" placeholder="Title Part 1" class="input" />
<input type="text" name="title_part_2" value="Title Part 2" placeholder="Title Part 2" class="input" />
@@ -297,8 +406,22 @@ function handle_submit_form(event) {
{/await}
</div>
{/if}
<!-- Show files for this account -->
<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={''}
/>
The end
</section>