OSIT-AE-App-Svelte/src/routes/hosted_files/+page.svelte

<script lang="ts">
// 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 Element_manage_hosted_file_li_wrap from '$lib/element_manage_hosted_file_li_all.svelte';

let { data } = $props();

let log_lvl = 0;

let ae_promises: key_val = {};

// export let container_class_li = [];

let file_uploads_post_promise;
let download_src;
let download_filename;

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">Æ Hosted Files</h1>

    <h2 class="h2">Video Utilities</h2>
    <p>Clip, scale, re-encode videos files (mp4).</p>

    <a href="hosted_files/video_util" class="btn preset-filled-primary-500">
        <span class="fas fa-video mx-1"></span>
        Video Utilities
    </a>


    <h2 class="h2">Manage Files</h2>

    <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>


{#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 preset-filled-warning-500 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>