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

Using the hosted file select method is 90% working. It still needs to create a new hosted_file_link record.

Browse Source
This commit is contained in:
Scott Idem
2025-03-18 16:37:19 -04:00
parent 6749ecc4c3
commit 42ac7911f2
6 changed files with 817 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/element_manage_hosted_file_li.svelte
View File

@@ -27,6 +27,9 @@ interface Props {
display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
max_file_count?: number;
file_type?: string; // 'image', 'video', 'audio', 'document', 'other'
slct_hosted_file_kv?: key_val;
slct_hosted_file_id?: any;
slct_hosted_file_obj?: any;
}
let {
@@ -38,7 +41,10 @@ let {
link_to_id,
display_mode = 'default',
max_file_count = 19,
file_type = 'all'
file_type = 'all',
slct_hosted_file_kv = $bindable({}),
slct_hosted_file_id = $bindable(null),
slct_hosted_file_obj = $bindable(null)
}: Props = $props();
// export let show_convert_btn: null|boolean = null;
@@ -146,9 +152,21 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
if ($ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id]) {
delete $ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id];
$ae_loc.files.uploaded_file_kv = {...$ae_loc.files.uploaded_file_kv};
delete slct_hosted_file_kv[hosted_file_obj.hosted_file_id];
slct_hosted_file_id = null;
slct_hosted_file_obj = null;
} else {
$ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id] = hosted_file_obj;
lq__hosted_file_obj_li[hosted_file_obj.hosted_file_id] = hosted_file_obj;
slct_hosted_file_kv[hosted_file_obj.hosted_file_id] = hosted_file_obj;
slct_hosted_file_id = hosted_file_obj.hosted_file_id;
slct_hosted_file_obj = hosted_file_obj;
}
log_lvl = 1;
if (log_lvl) {
console.log(`slct_hosted_file_kv:`, slct_hosted_file_kv);
}
}}
class="btn btn-sm variant-soft-secondary hover:variant-filled-secondary"

11
src/lib/element_manage_hosted_file_li_all.svelte
View File

@@ -25,6 +25,9 @@ interface Props {
allow_basic?: boolean; // Not used yet
allow_moderator?: boolean; // Not used yet
display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
slct_hosted_file_kv?: key_val;
slct_hosted_file_id?: any;
slct_hosted_file_obj?: any;
}
let {
@@ -34,7 +37,10 @@ let {
link_to_id,
allow_basic = false,
allow_moderator = false,
display_mode = 'default'
display_mode = 'default',
slct_hosted_file_kv = $bindable({}),
slct_hosted_file_id = $bindable(null),
slct_hosted_file_obj = $bindable(null)
}: Props = $props();
console.log(`HERE HERE HERE HERE: link_to_type: ${link_to_type} link_to_id: ${link_to_id}`);
@@ -95,6 +101,9 @@ let lq__hosted_file_obj_li = $derived(liveQuery(async () => {
class_li_default={class_li_default}
class_li={class_li}
display_mode={display_mode}
bind:slct_hosted_file_kv={slct_hosted_file_kv}
bind:slct_hosted_file_id={slct_hosted_file_id}
bind:slct_hosted_file_obj={slct_hosted_file_obj}
/>
<!-- allow_basic={allow_basic} -->
<!-- allow_moderator={allow_moderator} -->

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

@@ -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">&AElig; 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}&times; Files Upload History
History:
{#each Object.entries($ae_loc.files.uploaded_file_kv) as [hosted_file_id, hosted_file_obj]}
<div>
<span>{hosted_file_obj.hosted_file_id_random}</span>
<span>{hosted_file_obj.filename}</span>
<span>{hosted_file_obj.extension}</span>
<button
type="button"
class="btn btn-sm btn-primary"
>
Clip Video
</button>
</div>
{/each} -->
<!-- <form on:submit|preventDefault={handle_submit_form_clip} class="av_util_mp4_clip form space-y-4"> -->
<!-- <label class="label">Start time (HH:MM:SS) <input type="text" name="start_time" value="00:00:00" placeholder="HH:MM:SS (00:01:30)" class="input w-32" /></label>
<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
View 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}&times; Files Upload History
History:
{#each Object.entries($ae_loc.files.uploaded_file_kv) as [hosted_file_id, hosted_file_obj]}
<div>
<span>{hosted_file_obj.hosted_file_id_random}</span>
<span>{hosted_file_obj.filename}</span>
<span>{hosted_file_obj.extension}</span>
<button
type="button"
class="btn btn-sm btn-primary"
>
Clip Video
</button>
</div>
{/each} -->
<!-- <form on:submit|preventDefault={handle_submit_form_clip} class="av_util_mp4_clip form space-y-4"> -->
<!-- <label class="label">Start time (HH:MM:SS) <input type="text" name="start_time" value="00:00:00" placeholder="HH:MM:SS (00:01:30)" class="input w-32" /></label>
<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
View 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}&times; Files Upload History
History:
{#each Object.entries($ae_loc.files.uploaded_file_kv) as [hosted_file_id, hosted_file_obj]}
<div>
<span>{hosted_file_obj.hosted_file_id_random}</span>
<span>{hosted_file_obj.filename}</span>
<span>{hosted_file_obj.extension}</span>
<button
type="button"
class="btn btn-sm btn-primary"
>
Clip Video
</button>
</div>
{/each} -->
<!-- <form on:submit|preventDefault={handle_submit_form_clip} class="av_util_mp4_clip form space-y-4"> -->
<!-- <label class="label">Start time (HH:MM:SS) <input type="text" name="start_time" value="00:00:00" placeholder="HH:MM:SS (00:01:30)" class="input w-32" /></label>
<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>

134
src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
export let log_lvl: number = 0;
import { run, preventDefault } from 'svelte/legacy';
// *** Import Svelte core
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
@@ -14,17 +15,25 @@ import { archives_func } from '$lib/ae_archives/ae_archives_functions';
import Tiptap_editor from '$lib/element_tiptap_editor.svelte';
import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte';
import Element_manage_hosted_file_li_wrap from '$lib/element_manage_hosted_file_li_all.svelte';
export let lq__archive_content_obj: any;
interface Props {
log_lvl?: number;
lq__archive_content_obj: any;
}
let { log_lvl = 0, lq__archive_content_obj }: Props = $props();
let create_archive_content_obj_promise: any;
let delete_archive_content_obj_promise: any;
let update_archive_content_obj_promise: any;
let upload__hosted_file_obj_promise: any;
let prom_api__archive_content_obj: any;
let prom_api__archive_content_obj__hosted_file: any;
let prom_api__archive_content_obj: any = $state();
let prom_api__archive_content_obj__hosted_file: any = $state();
let disable_submit_btn = false;
let disable_submit_btn = $state(false);
let slct_hosted_file_kv: key_val = $state({});
if ($idaa_slct.archive_content_id) {
console.log(`Archive Content ID selected: ${$idaa_slct.archive_content_id}`);
@@ -58,7 +67,7 @@ if ($idaa_slct.archive_content_id) {
console.log(`Archive Content Object started: ${$idaa_slct.archive_content_obj}`)
}
let lu_time_zone_list:any = localStorage.getItem('lu_time_zone_list') ? JSON.parse(localStorage.getItem('lu_time_zone_list')) : [];
let lu_time_zone_list:any = $state(localStorage.getItem('lu_time_zone_list') ? JSON.parse(localStorage.getItem('lu_time_zone_list')) : []);
$ae_loc.lu_time_zone_list = [];
// $ae_loc.lu_time_zone_list = [];
if (lu_time_zone_list && lu_time_zone_list.length > 0) {
@@ -105,8 +114,6 @@ onMount(() => {
});
async function handle_submit_form(event) {
if (log_lvl > 1) {
console.log('*** handle_submit_form() ***');
@@ -265,10 +272,6 @@ async function handle_submit_form(event) {
}
}
$: if ($idaa_slct.archive_content_obj?.upload_complete && $idaa_slct.archive_content_obj?.hosted_file_id_li?.length && $idaa_slct.archive_content_obj.hosted_file_obj_li?.length) {
handle_hosted_files_uploaded($idaa_slct.archive_content_obj.hosted_file_id_li, $idaa_slct.archive_content_obj.hosted_file_obj_li);
}
async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_file_obj_li: any[]) {
console.log(`*** handle_hosted_files_uploaded() *** ${hosted_file_id_li}`);
@@ -297,6 +300,44 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
});
}
run(() => {
if ($idaa_slct.archive_content_obj?.upload_complete && $idaa_slct.archive_content_obj?.hosted_file_id_li?.length && $idaa_slct.archive_content_obj.hosted_file_obj_li?.length) {
handle_hosted_files_uploaded($idaa_slct.archive_content_obj.hosted_file_id_li, $idaa_slct.archive_content_obj.hosted_file_obj_li);
}
});
let slct_hosted_file_id: any = $state(null);
let slct_hosted_file_obj: any = $state(null);
$effect(() => {
if (slct_hosted_file_id && slct_hosted_file_obj) {
console.log(`*** handle_hosted_file_selected() *** ${slct_hosted_file_id}`);
// We need to update the archive_content_obj with the new file (for now just the first one).
prom_api__archive_content_obj = archives_func.update_ae_obj__archive_content({
api_cfg: $ae_api,
archive_content_id: $idaa_slct.archive_content_id,
data_kv: {
hosted_file_id_random: slct_hosted_file_id,
// file_path: hosted_file_obj_li[0].file_path,
filename: slct_hosted_file_obj.filename,
file_extension: slct_hosted_file_obj.extension,
archive_content_type: 'hosted_file',
},
log_lvl: log_lvl
})
.then(function (archive_content_obj_update_result) {
// $idaa_slct.archive_content_obj = $lq__archive_content_obj;
$idaa_slct.archive_content_obj = archive_content_obj_update_result;
})
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
return false;
});
slct_hosted_file_id = null;
slct_hosted_file_obj = null;
}
});
</script>
<section
@@ -305,7 +346,7 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
>
<!-- bind:clientHeight={ae_iframe_height} -->
<form on:submit|preventDefault={handle_submit_form} class="space-y-2">
<form onsubmit={preventDefault(handle_submit_form)} class="space-y-2">
{#await prom_api__archive_content_obj}
<div class="awaiting alert_msg_pulse" out:fade={{ duration: 2000 }}>Saving...</div>
@@ -402,6 +443,26 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
No file uploaded yet.
{#if $ae_loc.trusted_access}
<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>
<div
class:hidden={$ae_sess.files.add_to_use_files_method != 'upload'}
class="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="archive_content"
@@ -411,19 +472,38 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
bind:upload_complete={$idaa_slct.archive_content_obj.upload_complete}
log_lvl={log_lvl}
>
<span slot="label">
<div>
<span class="fas fa-upload"></span>
<strong class="bg-green-100 p-1">Upload archive files</strong>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400 italic">
<strong>Aether hosted files only</strong><br>
Recommended: PowerPoint (pptx) or Keynote (key) or Adobe PDF<br>
Media: audio (mp3, m4a) and video (mp4, mkv)<br>
Supplemental files: Word Doc, Excel, txt, etc
{#snippet label()}
<span >
<div>
<span class="fas fa-upload"></span>
<strong class="bg-green-100 p-1">Upload archive files</strong>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400 italic">
<strong>Aether hosted files only</strong><br>
Recommended: PowerPoint (pptx) or Keynote (key) or Adobe PDF<br>
Media: audio (mp3, m4a) and video (mp4, mkv)<br>
Supplemental files: Word Doc, Excel, txt, etc
</span>
</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={''}
bind:slct_hosted_file_kv={slct_hosted_file_kv}
bind:slct_hosted_file_id={slct_hosted_file_id}
bind:slct_hosted_file_obj={slct_hosted_file_obj}
/>
</div>
{/if}
{:else}
@@ -431,7 +511,7 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
<button
disabled={!$ae_loc.administrator_access}
type="button"
on:click={() => {
onclick={() => {
if (confirm('Are you sure you want to remove the file?')) {
@@ -591,7 +671,7 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
<button
type="button"
class="novi_btn btn btn-sm variant-soft-secondary float-right"
on:click={() => {
onclick={() => {
$idaa_loc.archives.show__admin_options = !$idaa_loc.archives.show__admin_options;
}}
>
@@ -744,7 +824,7 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
{#if $idaa_slct.archive_content_id && !$idaa_slct.archive_content_obj?.hosted_file_id}
<button
type="button"
on:click={() => {
onclick={() => {
if (!confirm('Are you sure you want to delete this archive content?')) {return false;}
prom_api__archive_content_obj = archives_func.delete_ae_obj_id__archive_content({