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

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>