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

Working on new and improved video clipping utility.

Browse Source
This commit is contained in:
Scott Idem
2025-01-07 13:49:30 -05:00
parent ff6e240a37
commit 641c6b28c3
4 changed files with 1091 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

488
src/lib/ae_core/ae_comp__hosted_files_clip_video.svelte Normal file
View File

@@ -0,0 +1,488 @@
<script lang="ts">
export let log_lvl: number = 0;
// Imports
// Import components and elements
import Element_input_files_tbl from '$lib/element_input_files_tbl.svelte';
// Import storage, functions, and libraries
import type { key_val } from '$lib/ae_stores';
import { api } from '$lib/api';
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 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[] = [];
// 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_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;
$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() ***');
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;
let endpoint = `/${hosted_file_id}/clip_video`;
let params = {
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] = {};
// .convert__hosted_file_obj
ae_promises[hosted_file_id] = api.get_object({
api_cfg: $ae_api,
endpoint: endpoint,
params: params,
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;
return true;
});
}
</script>
<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>
</div>
<form
on:submit|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'} -->
<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>
<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">
<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>
{: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'}
>
Process 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">
<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>
{/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>
<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 />
{#await ae_promises.upload__hosted_file_obj}
<span class="fas fa-spinner fa-spin m-1"></span>
<p class="highlight">Converting... This may take a few minutes.</p>
{:then}
{#if ae_promises.upload__hosted_file_obj}
<a href={download_clip_src} download={download_clip_filename} class="ae_btn btn_lg btn_primary"><span class="fas fa-download"></span> Ready to Download</a>
{:else}
<p>Fill out the form and select the video file to clip.</p>
{/if}
{/await}
</div>

396
src/lib/ae_core/ae_comp__hosted_files_clip_video_v1.svelte Normal file
View File

@@ -0,0 +1,396 @@
<script lang="ts">
export let log_lvl: number = 0;
// Imports
// Import components and elements
import Element_input_files_tbl from '$lib/element_input_files_tbl.svelte';
// Import storage, functions, and libraries
import type { key_val } from '$lib/ae_stores';
import { api } from '$lib/api';
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 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[] = [];
// 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_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;
// 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;
}
</script>
<div>
<!-- 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">
<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>
{/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>
<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 />
{#await ae_promises.upload__hosted_file_obj}
<span class="fas fa-spinner fa-spin m-1"></span>
<p class="highlight">Converting... This may take a few minutes.</p>
{:then}
{#if ae_promises.upload__hosted_file_obj}
<a href={download_clip_src} download={download_clip_filename} class="ae_btn btn_lg btn_primary"><span class="fas fa-download"></span> Ready to Download</a>
{:else}
<p>Fill out the form and select the video file to clip.</p>
{/if}
{/await}
</div>

3
src/lib/element_input_file.svelte
View File

@@ -353,7 +353,8 @@ function remove_file_from_filelist(index) {
on:click|preventDefault={() => { (remove_file_from_filelist(file_index)); }} on:click|preventDefault={() => { (remove_file_from_filelist(file_index)); }}
class="btn btn-md variant-soft-warning hover:variant-filled-secondary m-1" class="btn btn-md variant-soft-warning hover:variant-filled-secondary m-1"
title="Remove file from upload list"> title="Remove file from upload list">
<span class="fas fa-minus"></span> <span class="fas fa-minus"></span>
<span class="hidden">Remove</span>
</button> </button>
</td> </td>
<td class="file_filename">{file_list_item.filename}</td> <td class="file_filename">{file_list_item.filename}</td>

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

@@ -10,7 +10,12 @@ import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils'; import { ae_util } from '$lib/ae_utils/ae_utils';
import type { key_val } from '$lib/ae_stores'; import type { key_val } from '$lib/ae_stores';
export let container_class_li = []; 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';
let log_lvl = 1;
// export let container_class_li = [];
let file_uploads_post_promise; let file_uploads_post_promise;
let download_src; let download_src;
@@ -21,168 +26,261 @@ let file_uploads_clip_post_promise;
let download_clip_src; let download_clip_src;
let download_clip_filename; let download_clip_filename;
let hosted_file_upload: key_val = {
// link_to_type: 'account',
// link_to_id: ae_loc.account_id,
hosted_file_id_li: [],
hosted_file_obj_li: [],
upload_complete: false,
};
onMount(() => { onMount(() => {
console.log('Hosted Files: AV Utilities +page.svelte'); console.log('Hosted Files: AV Utilities +page.svelte');
}); });
function handle_submit_form(event) { function handle_submit_form(event) {
console.log('*** handle_submit_form() ***'); // console.log('*** handle_submit_form() ***');
console.log(event.target.file_list); // console.log(event.target.file_list);
const form_data = new FormData(); // const form_data = new FormData();
form_data.append('title_part_1', event.target.title_part_1.value); // form_data.append('title_part_1', event.target.title_part_1.value);
form_data.append('title_part_2', event.target.title_part_2.value); // form_data.append('title_part_2', event.target.title_part_2.value);
form_data.append('subtitle_part_1', event.target.subtitle_part_1.value); // form_data.append('subtitle_part_1', event.target.subtitle_part_1.value);
form_data.append('subtitle_part_2', event.target.subtitle_part_2.value); // form_data.append('subtitle_part_2', event.target.subtitle_part_2.value);
form_data.append('font_color', event.target.font_color.value); // form_data.append('font_color', event.target.font_color.value);
form_data.append(`file`, event.target.audio_file.files[0]); // form_data.append(`file`, event.target.audio_file.files[0]);
if (event.target.title_image.files.length > 0) { // if (event.target.title_image.files.length > 0) {
form_data.append(`title_image`, event.target.title_image.files[0]); // form_data.append(`title_image`, event.target.title_image.files[0]);
} // }
download_filename = `${event.target.title_part_1.value}_${event.target.title_part_2.value}_${event.target.subtitle_part_1.value}_${event.target.subtitle_part_2.value}.mp4` // download_filename = `${event.target.title_part_1.value}_${event.target.title_part_2.value}_${event.target.subtitle_part_1.value}_${event.target.subtitle_part_2.value}.mp4`
// for (let i = 0; i < event.target.file_list.files.length; i++) { // // for (let i = 0; i < event.target.file_list.files.length; i++) {
// form_data.append(`file_list`, event.target.event_file_upload_file_list.files[i]); // // form_data.append(`file_list`, event.target.event_file_upload_file_list.files[i]);
// } // // }
let params = null; // let params = null;
let endpoint = '/hosted_file/create_video'; // let endpoint = '/hosted_file/create_video';
console.log(form_data); // console.log(form_data);
params = null; // params = null;
// Uncomment and the file_uploads_post_promise is not seen by the "await" below // // Uncomment and the file_uploads_post_promise is not seen by the "await" below
// file_uploads_post_promise = await api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, data:form_data}); // // file_uploads_post_promise = await api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, data:form_data});
// Uncomment so that the file_uploads_post_promise is not seen by the "await" below // // Uncomment so that the file_uploads_post_promise is not seen by the "await" below
file_uploads_post_promise = api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, form_data:form_data, return_blob: true, filename: 'test.mp4', auto_download: false}) // file_uploads_post_promise = api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, form_data:form_data, return_blob: true, filename: 'test.mp4', auto_download: false})
.then(function (result) { // .then(function (result) {
console.log(result); // console.log(result);
let file_blob = new Blob([result.data]); // let file_blob = new Blob([result.data]);
// console.log(file_blob); // // console.log(file_blob);
let file_obj_url = window.URL.createObjectURL(file_blob); // The img src // let file_obj_url = window.URL.createObjectURL(file_blob); // The img src
// const url = window.URL.createObjectURL(new Blob([result.data])); // // const url = window.URL.createObjectURL(new Blob([result.data]));
download_src = file_obj_url; // download_src = file_obj_url;
// download_filename = file_obj_url; // // download_filename = file_obj_url;
}); // });
console.log(file_uploads_post_promise); // console.log(file_uploads_post_promise);
// let file_blob = new Blob([file_uploads_post_promise.data]); // // let file_blob = new Blob([file_uploads_post_promise.data]);
// // console.log(file_blob); // // // console.log(file_blob);
// let file_obj_url = URL.createObjectURL(file_blob); // The img src // // let file_obj_url = URL.createObjectURL(file_blob); // The img src
// download_src = file_obj_url; // // download_src = file_obj_url;
// dispatch( // // dispatch(
// 'event_file_obj_li_updated', // // 'event_file_obj_li_updated',
// { // // {
// link_to_type: link_to_type, // // link_to_type: link_to_type,
// link_to_id: link_to_id, // // link_to_id: link_to_id,
// } // // }
// ); // // );
return true; // return true;
} }
// function handle_submit_form_clip(event) {
// console.log('*** handle_submit_form() ***');
// console.log(event.target.file_list);
// const form_data = new FormData();
function handle_submit_form_clip(event) { // form_data.append('start_time', event.target.start_time.value);
console.log('*** handle_submit_form() ***'); // form_data.append('end_time', event.target.end_time.value);
console.log(event.target.file_list); // 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);
const form_data = new FormData(); // form_data.append(`video_file`, event.target.video_file.files[0]);
form_data.append('start_time', event.target.start_time.value); // download_filename = `clipped_file_test.mp4`
form_data.append('end_time', event.target.end_time.value);
if (event.target.reencode.value == '1' || event.target.reencode.value == 'true') { // // for (let i = 0; i < event.target.file_list.files.length; i++) {
form_data.append('reencode', 'true'); // // form_data.append(`file_list`, event.target.event_file_upload_file_list.files[i]);
} 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 params = null;
download_filename = `clipped_file_test.mp4` // let endpoint = '/hosted_file/clip_video';
// for (let i = 0; i < event.target.file_list.files.length; i++) { // console.log(form_data);
// form_data.append(`file_list`, event.target.event_file_upload_file_list.files[i]);
// }
let params = null; // params = null;
let endpoint = '/hosted_file/clip_video'; // file_uploads_clip_post_promise = api.post_object({
// api_cfg: $ae_api, endpoint: endpoint,
// params: params,
// form_data:form_data,
// return_blob: true,
// filename: 'test.mp4',
// auto_download: false
// })
// .then(function (result) {
// console.log(result);
console.log(form_data); // 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_src = file_obj_url;
// // download_filename = file_obj_url;
params = null; // });
file_uploads_clip_post_promise = api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, form_data:form_data, return_blob: true, filename: 'test.mp4', auto_download: false}) // console.log(file_uploads_clip_post_promise);
.then(function (result) {
console.log(result);
let file_blob = new Blob([result.data]); // return true;
// 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_src = file_obj_url;
// download_filename = file_obj_url;
});
console.log(file_uploads_clip_post_promise);
return true;
}
</script> </script>
<section <section
class="ae__hosted_files__av_util md:container h-full mx-auto space-y-4 {container_class_li.join(' ')}"> class="ae__hosted_files__av_util container space-y-4"
>
<h2>Convert mp3 to mp4</h2> <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>
<h2 class="h2">Step 1: Upload Video File</h2>
<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"
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}
>
<span slot="label">
<div>
<span class="fas fa-upload"></span>
<strong class="bg-green-100 p-1">Upload video files</strong>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400 italic">
<strong>Aether hosted files only</strong><br>
Recommended: video (mp4, mkv)<br>
</span>
</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>
{:else}
<p>Upload a video file to clip.</p>
{/if}
<!-- <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>
<label class="label">End time (HH:MM:SS) <input type="text" name="end_time" value="01:59:59" 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> -->
<!-- File type extension is limited to mp4 only -->
<!-- <label class="label">
<div>Video file (mp4)</div>
<input type="file" name="video_file" accept="video/*" class="input file w-96" />
</label> -->
<!-- <button type="submit" class="btn variant-filled-warning mx-1">
<span class="fas fa-upload mx-1"></span>
Submit
</button> -->
<!-- </form> -->
<!-- <hr /> -->
<!-- {#await file_uploads_clip_post_promise}
<p class="highlight">Converting... This may take a few minutes.</p>
{:then}
{#if file_uploads_clip_post_promise}
<a href={download_clip_src} download={download_clip_filename} class="ae_btn btn_lg btn_primary"><span class="fas fa-download"></span> Ready to Download</a>
{:else}
<p>Fill out the form and select the video file to clip.</p>
{/if}
{/await} -->
</div>
<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> <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} on:keydown={e => e.key === 'Escape' && handle_cancel_form} class="av_util_mp3_to_mp4 space-y-4"> <form on:submit|preventDefault={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_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" /> <input type="text" name="title_part_2" value="Title Part 2" placeholder="Title Part 2" class="input" />
<input type="text" name="subtitle_part_1" value="Sub-Title Part 1" placeholder="Sub-Title Part 1" class="input" /> <input type="text" name="subtitle_part_1" value="Sub-Title Part 1" placeholder="Sub-Title Part 1" class="input" />
<input type="text" name="subtitle_part_2" value="Sub-Title Part 2" placeholder="Sub-Title Part 2" class="input" /> <input type="text" name="subtitle_part_2" value="Sub-Title Part 2" placeholder="Sub-Title Part 2" class="input" />
<input type="text" name="font_color" value="black" placeholder="Font color" class="input w-32" /> <input type="text" name="font_color" value="black" placeholder="Font color" class="input w-32" />
<!-- File type extension is limited to mp3 only --> <!-- File type extension is limited to mp3 only -->
<label class="label"> <label class="label">
<div>Audio file (mp3)</div> <div>Audio file (mp3)</div>
<input type="file" name="audio_file" accept="audio/*" class="input w-96" /> <input type="file" name="audio_file" accept="audio/*" class="input w-96" />
</label> </label>
<!-- File type extension is limited to png only --> <!-- File type extension is limited to png only -->
<label class="label"> <label class="label">
<div>Static image template (png)</div> <div>Static image template (png)</div>
<input type="file" name="title_image" accept="image/*" class="input w-96" /> <input type="file" name="title_image" accept="image/*" class="input w-96" />
</label> </label>
<button type="submit" class="btn variant-filled-warning mx-1"> <button type="submit" class="btn variant-filled-warning mx-1">
<span class="fas fa-upload mx-1"></span> <span class="fas fa-upload mx-1"></span>
Submit Submit
</button> </button>
</form> </form>
@@ -197,46 +295,10 @@ function handle_submit_form_clip(event) {
<p>Fill out the form and select the audio file and static image template file.</p> <p>Fill out the form and select the audio file and static image template file.</p>
{/if} {/if}
{/await} {/await}
</div>
<hr>
<h2>Clip mp4</h2>
<p>This AV utility will take an mp4 video file 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>
<form on:submit|preventDefault={handle_submit_form_clip} on:keydown={e => e.key === 'Escape' && handle_cancel_form_clip} class="av_util_mp4_clip 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>
<label class="label">End time (HH:MM:SS) <input type="text" name="end_time" value="00:00:00" 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>
<!-- File type extension is limited to mp4 only -->
<label class="label">
<div>Video file (mp4)</div>
<input type="file" name="video_file" accept="video/*" class="input w-96" />
</label>
<button type="submit" class="btn variant-filled-warning mx-1">
<span class="fas fa-upload mx-1"></span>
Submit
</button>
</form>
<hr />
{#await file_uploads_clip_post_promise}
<p class="highlight">Converting... This may take a few minutes.</p>
{:then}
{#if file_uploads_clip_post_promise}
<a href={download_clip_src} download={download_clip_filename} class="ae_btn btn_lg btn_primary"><span class="fas fa-download"></span> Ready to Download</a>
{:else}
<p>Fill out the form and select the video file to clip.</p>
{/if}
{/await}
</section> </section>