Working on new and improved video clipping utility.
This commit is contained in:
Scott Idem
@@ -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 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 download_src;
|
||||
@@ -21,168 +26,261 @@ let file_uploads_clip_post_promise;
|
||||
let download_clip_src;
|
||||
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(() => {
|
||||
console.log('Hosted Files: AV Utilities +page.svelte');
|
||||
});
|
||||
|
||||
|
||||
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_2', event.target.title_part_2.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('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_1', event.target.subtitle_part_1.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]);
|
||||
if (event.target.title_image.files.length > 0) {
|
||||
form_data.append(`title_image`, event.target.title_image.files[0]);
|
||||
}
|
||||
// form_data.append(`file`, event.target.audio_file.files[0]);
|
||||
// if (event.target.title_image.files.length > 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++) {
|
||||
// form_data.append(`file_list`, event.target.event_file_upload_file_list.files[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]);
|
||||
// // }
|
||||
|
||||
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
|
||||
// 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
|
||||
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) {
|
||||
console.log(result);
|
||||
// // 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});
|
||||
// // 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})
|
||||
// .then(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_src = file_obj_url;
|
||||
// download_filename = file_obj_url;
|
||||
// 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;
|
||||
|
||||
});
|
||||
// });
|
||||
|
||||
console.log(file_uploads_post_promise);
|
||||
// console.log(file_uploads_post_promise);
|
||||
|
||||
// let file_blob = new Blob([file_uploads_post_promise.data]);
|
||||
// // console.log(file_blob);
|
||||
// let file_obj_url = URL.createObjectURL(file_blob); // The img src
|
||||
// download_src = file_obj_url;
|
||||
// // let file_blob = new Blob([file_uploads_post_promise.data]);
|
||||
// // // console.log(file_blob);
|
||||
// // let file_obj_url = URL.createObjectURL(file_blob); // The img src
|
||||
// // download_src = file_obj_url;
|
||||
|
||||
// dispatch(
|
||||
// 'event_file_obj_li_updated',
|
||||
// {
|
||||
// link_to_type: link_to_type,
|
||||
// link_to_id: link_to_id,
|
||||
// }
|
||||
// );
|
||||
// // dispatch(
|
||||
// // 'event_file_obj_li_updated',
|
||||
// // {
|
||||
// // link_to_type: link_to_type,
|
||||
// // 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) {
|
||||
console.log('*** handle_submit_form() ***');
|
||||
// form_data.append('start_time', event.target.start_time.value);
|
||||
// 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);
|
||||
form_data.append('end_time', event.target.end_time.value);
|
||||
// download_filename = `clipped_file_test.mp4`
|
||||
|
||||
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);
|
||||
// // 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(`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++) {
|
||||
// form_data.append(`file_list`, event.target.event_file_upload_file_list.files[i]);
|
||||
// }
|
||||
// console.log(form_data);
|
||||
|
||||
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})
|
||||
.then(function (result) {
|
||||
console.log(result);
|
||||
// console.log(file_uploads_clip_post_promise);
|
||||
|
||||
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;
|
||||
|
||||
});
|
||||
|
||||
console.log(file_uploads_clip_post_promise);
|
||||
|
||||
return true;
|
||||
}
|
||||
// return true;
|
||||
// }
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<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>
|
||||
<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_2" value="Title Part 2" placeholder="Title Part 2" 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="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_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="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 -->
|
||||
<label class="label">
|
||||
<div>Audio file (mp3)</div>
|
||||
<input type="file" name="audio_file" accept="audio/*" class="input w-96" />
|
||||
</label>
|
||||
<!-- File type extension is limited to mp3 only -->
|
||||
<label class="label">
|
||||
<div>Audio file (mp3)</div>
|
||||
<input type="file" name="audio_file" accept="audio/*" class="input w-96" />
|
||||
</label>
|
||||
|
||||
<!-- File type extension is limited to png only -->
|
||||
<label class="label">
|
||||
<div>Static image template (png)</div>
|
||||
<input type="file" name="title_image" accept="image/*" class="input w-96" />
|
||||
</label>
|
||||
<!-- File type extension is limited to png only -->
|
||||
<label class="label">
|
||||
<div>Static image template (png)</div>
|
||||
<input type="file" name="title_image" accept="image/*" 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>
|
||||
<button type="submit" class="btn variant-filled-warning mx-1">
|
||||
<span class="fas fa-upload mx-1"></span>
|
||||
Submit
|
||||
</button>
|
||||
|
||||
</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>
|
||||
{/if}
|
||||
{/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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user