0987cd6ad9
Applied consistent code formatting across the project using Prettier, now configured to use 4-space indentation instead of tabs.
272 lines
8.9 KiB
Svelte
272 lines
8.9 KiB
Svelte
<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/stores/ae_stores';
|
|
// import { ae_util } from '$lib/ae_utils/ae_utils';
|
|
import type { key_val } from '$lib/stores/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/elements/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
|
|
space-y-4
|
|
flex flex-col gap-1
|
|
items-center
|
|
justify-start
|
|
py-1 px-2 pb-16
|
|
h-full
|
|
max-h-full
|
|
min-w-full
|
|
max-w-6xl
|
|
overflow-auto
|
|
"
|
|
> -->
|
|
|
|
<!-- <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 preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 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}
|
|
>
|
|
{#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={''}
|
|
max_file_count={39}
|
|
file_type={'video'}
|
|
/>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<h2 class="h2">
|
|
Step 2: Clip Video
|
|
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
$ae_loc.files.uploaded_file_kv = {};
|
|
}}
|
|
class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 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}
|
|
></Comp_hosted_files_clip_video>
|
|
{:else}
|
|
<p>Upload a video file to clip first.</p>
|
|
{/if}
|
|
|
|
<hr />
|
|
|
|
<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 preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 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}
|
|
></Comp_hosted_files_clip_video_li>
|
|
{:else}
|
|
<p>Clip a video file first.</p>
|
|
{/if}
|
|
|
|
<!-- </div> -->
|
|
|
|
<!-- <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> -->
|