Using the hosted file select method is 90% working. It still needs to create a new hosted_file_link record.
This commit is contained in:
Scott Idem
@@ -1,6 +1,4 @@
|
||||
<script lang="ts">
|
||||
import { run } from 'svelte/legacy';
|
||||
|
||||
// console.log(`ae_ Svelte Hosted Files +page data:`, data);
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
@@ -11,9 +9,6 @@ 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';
|
||||
|
||||
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';
|
||||
|
||||
@@ -29,27 +24,6 @@ let file_uploads_post_promise;
|
||||
let download_src;
|
||||
let download_filename;
|
||||
|
||||
|
||||
let file_uploads_clip_post_promise;
|
||||
let download_clip_src;
|
||||
let download_clip_filename;
|
||||
|
||||
let hosted_file_upload: key_val = $state({
|
||||
// link_to_type: 'account',
|
||||
// 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 = $state({
|
||||
video_clip_file_kv: {},
|
||||
clip_complete: false,
|
||||
submit_status: null,
|
||||
});
|
||||
|
||||
if (!$ae_loc.files) {
|
||||
$ae_loc.files = {};
|
||||
$ae_loc.files.processed_file_kv = {};
|
||||
@@ -122,59 +96,19 @@ onMount(() => {
|
||||
>
|
||||
|
||||
<div class="border border-gray-200 p-2 rounded-lg">
|
||||
<h1 class="h1">Clip and Scale Video Files</h1>
|
||||
<p>This AV utility will take an mp4 video file and create a clipped mp4 video file. By default, videos will be scaled down to 1920x1080. This process takes at least 30 seconds, but it can easily take a handful of minutes. The scaling option requires that the video be re-encoded. Please be patient while it is processing.</p>
|
||||
<h1 class="h1">Æ Hosted Files</h1>
|
||||
|
||||
<h2 class="h2">
|
||||
Step 1: Upload Video File or Select from Hosted Files
|
||||
<h2 class="h2">Video Utilities</h2>
|
||||
<p>Clip, scale, re-encode videos files (mp4).</p>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning float-right"
|
||||
title="Toggle between Upload and Select from Hosted Files"
|
||||
onclick={() => {
|
||||
if ($ae_sess.files.add_to_use_files_method == 'upload') {
|
||||
$ae_sess.files.add_to_use_files_method = 'select';
|
||||
} else {
|
||||
$ae_sess.files.add_to_use_files_method = 'upload';
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-exchange-alt m-1"></span>
|
||||
Upload/Select
|
||||
</button>
|
||||
</h2>
|
||||
<a href="hosted_files/video_util" class="btn variant-filled-primary">
|
||||
<span class="fas fa-video mx-1"></span>
|
||||
Video Utilities
|
||||
</a>
|
||||
|
||||
<div class:hidden={$ae_sess.files.add_to_use_files_method == 'upload'}>
|
||||
<Comp_hosted_files_upload
|
||||
class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
|
||||
link_to_type="account"
|
||||
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:hosted_file_obj_kv={$ae_sess.files.uploaded_file_kv}
|
||||
bind:upload_complete={$ae_sess.files.upload_complete}
|
||||
log_lvl={log_lvl}
|
||||
>
|
||||
{#snippet label()}
|
||||
<span >
|
||||
<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>
|
||||
{/snippet}
|
||||
</Comp_hosted_files_upload>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class:hidden={$ae_sess.files.add_to_use_files_method == 'select'}
|
||||
class=""
|
||||
>
|
||||
<h2 class="h2">Manage Files</h2>
|
||||
|
||||
<Element_manage_hosted_file_li_wrap
|
||||
link_to_type={'account'}
|
||||
link_to_id={$ae_loc?.account_id}
|
||||
@@ -182,120 +116,7 @@ onMount(() => {
|
||||
allow_moderator={true}
|
||||
class_li={''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2 class="h2">
|
||||
Step 2: Clip Video
|
||||
|
||||
<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 m-1"></span>
|
||||
Clear Upload History
|
||||
</button>
|
||||
</h2>
|
||||
{#if $ae_loc.files.uploaded_file_kv && Object.entries($ae_loc.files.uploaded_file_kv).length > 0}
|
||||
<Comp_hosted_files_clip_video
|
||||
class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
|
||||
link_to_type="account"
|
||||
link_to_id={$ae_loc.account_id}
|
||||
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 first.</p>
|
||||
{/if}
|
||||
|
||||
|
||||
<h2 class="h2">
|
||||
Step 3: Download Recently Processed Video Clips
|
||||
|
||||
<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 m-1"></span>
|
||||
Clear Clip History
|
||||
</button>
|
||||
</h2>
|
||||
{#if $ae_loc.files.video_clip_file_kv && Object.entries($ae_loc.files.video_clip_file_kv).length > 0}
|
||||
<Comp_hosted_files_clip_video_li
|
||||
class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
|
||||
link_to_type="account"
|
||||
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}× 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>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
370
src/routes/hosted_files/video_util/+page.svelte
Normal file
370
src/routes/hosted_files/video_util/+page.svelte
Normal file
@@ -0,0 +1,370 @@
|
||||
<script lang="ts">
|
||||
import { run } from 'svelte/legacy';
|
||||
|
||||
// console.log(`ae_ Svelte Hosted Files +page data:`, data);
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
|
||||
// import { api } from '$lib/api.js';
|
||||
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';
|
||||
|
||||
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 { data } = $props();
|
||||
|
||||
let log_lvl = 1;
|
||||
|
||||
let ae_promises: key_val = {};
|
||||
|
||||
// export let container_class_li = [];
|
||||
|
||||
let file_uploads_post_promise;
|
||||
let download_src;
|
||||
let download_filename;
|
||||
|
||||
|
||||
let file_uploads_clip_post_promise;
|
||||
let download_clip_src;
|
||||
let download_clip_filename;
|
||||
|
||||
let hosted_file_upload: key_val = $state({
|
||||
// link_to_type: 'account',
|
||||
// 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 = $state({
|
||||
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 = {};
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
// 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
|
||||
};
|
||||
$ae_sess.files.upload_complete = false;
|
||||
}
|
||||
|
||||
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
|
||||
};
|
||||
$ae_sess.files.clip_complete = false;
|
||||
}
|
||||
});
|
||||
|
||||
// $effect(() => {
|
||||
// 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
|
||||
// };
|
||||
// }
|
||||
// });
|
||||
|
||||
// $effect(() => {
|
||||
// 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');
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<section
|
||||
class="ae__hosted_files__av_util container space-y-4 pb-20"
|
||||
>
|
||||
|
||||
<div class="border border-gray-200 p-2 rounded-lg">
|
||||
<h1 class="h1">Clip and Scale Video Files</h1>
|
||||
<p>This AV utility will take an mp4 video file and create a clipped mp4 video file. By default, videos will be scaled down to 1920x1080. This process takes at least 30 seconds, but it can easily take a handful of minutes. The scaling option requires that the video be re-encoded. Please be patient while it is processing.</p>
|
||||
|
||||
<h2 class="h2">
|
||||
Step 1: Upload Video File or Select from Hosted Files
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning float-right"
|
||||
title="Toggle between Upload and Select from Hosted Files"
|
||||
onclick={() => {
|
||||
if ($ae_sess.files.add_to_use_files_method == 'upload') {
|
||||
$ae_sess.files.add_to_use_files_method = 'select';
|
||||
} else {
|
||||
$ae_sess.files.add_to_use_files_method = 'upload';
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-exchange-alt m-1"></span>
|
||||
Upload/Select
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<div class:hidden={$ae_sess.files.add_to_use_files_method != 'upload'}>
|
||||
<Comp_hosted_files_upload
|
||||
class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
|
||||
link_to_type="account"
|
||||
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:hosted_file_obj_kv={$ae_sess.files.uploaded_file_kv}
|
||||
bind:upload_complete={$ae_sess.files.upload_complete}
|
||||
log_lvl={log_lvl}
|
||||
>
|
||||
{#snippet label()}
|
||||
<span >
|
||||
<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>
|
||||
{/snippet}
|
||||
</Comp_hosted_files_upload>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class:hidden={$ae_sess.files.add_to_use_files_method != 'select'}
|
||||
class=""
|
||||
>
|
||||
<Element_manage_hosted_file_li_wrap
|
||||
link_to_type={'account'}
|
||||
link_to_id={$ae_loc?.account_id}
|
||||
allow_basic={true}
|
||||
allow_moderator={true}
|
||||
class_li={''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2 class="h2">
|
||||
Step 2: Clip Video
|
||||
|
||||
<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 m-1"></span>
|
||||
Clear Upload History
|
||||
</button>
|
||||
</h2>
|
||||
{#if $ae_loc.files.uploaded_file_kv && Object.entries($ae_loc.files.uploaded_file_kv).length > 0}
|
||||
<Comp_hosted_files_clip_video
|
||||
class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
|
||||
link_to_type="account"
|
||||
link_to_id={$ae_loc.account_id}
|
||||
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 first.</p>
|
||||
{/if}
|
||||
|
||||
|
||||
<h2 class="h2">
|
||||
Step 3: Download Recently Processed Video Clips
|
||||
|
||||
<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 m-1"></span>
|
||||
Clear Clip History
|
||||
</button>
|
||||
</h2>
|
||||
{#if $ae_loc.files.video_clip_file_kv && Object.entries($ae_loc.files.video_clip_file_kv).length > 0}
|
||||
<Comp_hosted_files_clip_video_li
|
||||
class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
|
||||
link_to_type="account"
|
||||
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}× 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>
|
||||
<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>
|
||||
|
||||
|
||||
{#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 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" />
|
||||
|
||||
<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" />
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<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_post_promise}
|
||||
<p class="highlight">Converting... This may take a few minutes.</p>
|
||||
{:then}
|
||||
{#if file_uploads_post_promise}
|
||||
<a href={download_src} download={download_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 audio file and static image template file.</p>
|
||||
{/if}
|
||||
{/await}
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
<!-- <h2 class="h2">Step X: Manage Hosted Files</h2> -->
|
||||
<!-- 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={''}
|
||||
/> -->
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
302
src/routes/hosted_files/video_util/video_util.svelte
Normal file
302
src/routes/hosted_files/video_util/video_util.svelte
Normal file
@@ -0,0 +1,302 @@
|
||||
<script lang="ts">
|
||||
|
||||
// import { api } from '$lib/api.js';
|
||||
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';
|
||||
|
||||
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;
|
||||
let download_src;
|
||||
let download_filename;
|
||||
|
||||
|
||||
let file_uploads_clip_post_promise;
|
||||
let download_clip_src;
|
||||
let download_clip_filename;
|
||||
|
||||
let hosted_file_upload: key_val = $state({
|
||||
// link_to_type: 'account',
|
||||
// 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 = $state({
|
||||
video_clip_file_kv: {},
|
||||
clip_complete: false,
|
||||
submit_status: null,
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<section
|
||||
class="ae__hosted_files__av_util container space-y-4 pb-20"
|
||||
>
|
||||
|
||||
<div class="border border-gray-200 p-2 rounded-lg">
|
||||
<h1 class="h1">Clip and Scale Video Files</h1>
|
||||
<p>This AV utility will take an mp4 video file and create a clipped mp4 video file. By default, videos will be scaled down to 1920x1080. This process takes at least 30 seconds, but it can easily take a handful of minutes. The scaling option requires that the video be re-encoded. Please be patient while it is processing.</p>
|
||||
|
||||
<h2 class="h2">
|
||||
Step 1: Upload Video File or Select from Hosted Files
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm variant-ghost-warning hover:variant-filled-warning float-right"
|
||||
title="Toggle between Upload and Select from Hosted Files"
|
||||
onclick={() => {
|
||||
if ($ae_sess.files.add_to_use_files_method == 'upload') {
|
||||
$ae_sess.files.add_to_use_files_method = 'select';
|
||||
} else {
|
||||
$ae_sess.files.add_to_use_files_method = 'upload';
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-exchange-alt m-1"></span>
|
||||
Upload/Select
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<div class:hidden={$ae_sess.files.add_to_use_files_method == 'upload'}>
|
||||
<Comp_hosted_files_upload
|
||||
class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
|
||||
link_to_type="account"
|
||||
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:hosted_file_obj_kv={$ae_sess.files.uploaded_file_kv}
|
||||
bind:upload_complete={$ae_sess.files.upload_complete}
|
||||
log_lvl={log_lvl}
|
||||
>
|
||||
{#snippet label()}
|
||||
<span >
|
||||
<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>
|
||||
{/snippet}
|
||||
</Comp_hosted_files_upload>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class:hidden={$ae_sess.files.add_to_use_files_method == 'select'}
|
||||
class=""
|
||||
>
|
||||
<Element_manage_hosted_file_li_wrap
|
||||
link_to_type={'account'}
|
||||
link_to_id={$ae_loc?.account_id}
|
||||
allow_basic={true}
|
||||
allow_moderator={true}
|
||||
class_li={''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2 class="h2">
|
||||
Step 2: Clip Video
|
||||
|
||||
<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 m-1"></span>
|
||||
Clear Upload History
|
||||
</button>
|
||||
</h2>
|
||||
{#if $ae_loc.files.uploaded_file_kv && Object.entries($ae_loc.files.uploaded_file_kv).length > 0}
|
||||
<Comp_hosted_files_clip_video
|
||||
class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
|
||||
link_to_type="account"
|
||||
link_to_id={$ae_loc.account_id}
|
||||
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 first.</p>
|
||||
{/if}
|
||||
|
||||
|
||||
<h2 class="h2">
|
||||
Step 3: Download Recently Processed Video Clips
|
||||
|
||||
<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 m-1"></span>
|
||||
Clear Clip History
|
||||
</button>
|
||||
</h2>
|
||||
{#if $ae_loc.files.video_clip_file_kv && Object.entries($ae_loc.files.video_clip_file_kv).length > 0}
|
||||
<Comp_hosted_files_clip_video_li
|
||||
class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
|
||||
link_to_type="account"
|
||||
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}× 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>
|
||||
<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>
|
||||
|
||||
|
||||
{#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 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" />
|
||||
|
||||
<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" />
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<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_post_promise}
|
||||
<p class="highlight">Converting... This may take a few minutes.</p>
|
||||
{:then}
|
||||
{#if file_uploads_post_promise}
|
||||
<a href={download_src} download={download_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 audio file and static image template file.</p>
|
||||
{/if}
|
||||
{/await}
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
<!-- <h2 class="h2">Step X: Manage Hosted Files</h2> -->
|
||||
<!-- 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={''}
|
||||
/> -->
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user