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

Other areas of the AE SvelteKit primary routes.

Browse Source
This commit is contained in:
Scott Idem
2026-03-24 12:18:27 -04:00
parent 6018a94499
commit e1338b1a72
13 changed files with 1607 additions and 1026 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/routes/hosted_files/+layout.svelte
View File

@@ -1,34 +1,34 @@
<script lang="ts">
/** @type {import('./$types').LayoutData} */
let log_lvl: number = 1;
// *** Import Svelte specific
// import { browser } from '$app/environment';
// *** Import other supporting libraries
import { Brain, House, Library, RefreshCw, Satellite } from '@lucide/svelte';
// *** Import Aether specific variables and functions
// import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
// import Element_data_store from '$lib/elements/element_data_store.svelte';
interface Props {
/** @type {import('./$types').LayoutData} */
let log_lvl: number = 1;
data: any;
children?: import('svelte').Snippet;
}
// *** Import Svelte specific
// import { browser } from '$app/environment';
// *** Import other supporting libraries
import { Brain, House, Library, RefreshCw, Satellite } from '@lucide/svelte';
// *** Import Aether specific variables and functions
// import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
// import Element_data_store from '$lib/elements/element_data_store.svelte';
interface Props {
/** @type {import('./$types').LayoutData} */
data: any;
children?: import('svelte').Snippet;
}
let { data, children }: Props = $props();
let { data, children }: Props = $props();
</script>
<svelte:head>
@@ -40,11 +40,10 @@
class:iframe={$ae_loc?.iframe}
class="
ae_hosted_files
h-full max-h-full max-w-6xl overflow-auto
flex flex-col gap-1
m-auto
"
>
m-auto flex h-full max-h-full
max-w-6xl flex-col gap-1
overflow-auto
">
<nav
class="
submenu
@@ -55,8 +54,7 @@
p-1
px-2
pb-2
"
>
">
<span class="justify-self-start">
<!-- Be sure to explain what &AElig; (Aether) means in the title text or similar! -->
<Satellite size="1.5em" class="mx-1 inline-block text-gray-500" />
@@ -68,14 +66,15 @@
/> -->
<a
href="/"
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-success-500"
>
class="btn btn-sm preset-tonal-surface border-surface-500 hover:preset-filled-success-500 border">
<House />
<span class="hidden md:inline"> Home </span>
</a>
</nav>
<section class:iframe={$ae_loc?.iframe} class="main_content grow px-1 md:px-2 pb-28">
<section
class:iframe={$ae_loc?.iframe}
class="main_content grow px-1 pb-28 md:px-2">
{@render children?.()}
</section>
</div>

4
src/routes/hosted_files/+layout.ts
View File

@@ -27,7 +27,9 @@ export async function load({ params, parent, url }) {
const qry_limit = parseInt(url.searchParams.get('limit') ?? '19');
if (!qry_limit) {
console.log(`qry_limit +page.ts: The qry_limit was not found in the params!!!`);
console.log(
`qry_limit +page.ts: The qry_limit was not found in the params!!!`
);
}
ae_acct.slct.qry_limit = qry_limit;

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

@@ -1,90 +1,96 @@
<script lang="ts">
// console.log(`ae_ Svelte Hosted Files +page data:`, data);
// console.log(`ae_ Svelte Hosted Files +page data:`, data);
import { onMount } from 'svelte';
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 { 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 Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
import { Video } from '@lucide/svelte';
let { data } = $props();
import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
import { Video } from '@lucide/svelte';
let { data } = $props();
let log_lvl = 0;
let log_lvl = 0;
let ae_promises: key_val = {};
let ae_promises: key_val = {};
// export let container_class_li = [];
// export let container_class_li = [];
let file_uploads_post_promise;
let download_src;
let download_filename;
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 = {};
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;
}
$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.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;
}
});
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;
}
// $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
// };
// }
// });
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.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
// };
// }
// });
// $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');
});
onMount(() => {
console.log('Hosted Files: AV Utilities +page.svelte');
});
</script>
<!-- <section
@@ -123,8 +129,7 @@
link_to_id={$ae_loc?.account_id}
allow_basic={true}
allow_moderator={true}
class_li={'max-h-full'}
/>
class_li={'max-h-full'} />
<!-- </div> -->

243
src/routes/hosted_files/video_util/+page.svelte
View File

@@ -1,123 +1,129 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { run } from 'svelte/legacy';
// console.log(`ae_ Svelte Hosted Files +page data:`, data);
// console.log(`ae_ Svelte Hosted Files +page data:`, data);
import { onMount } from 'svelte';
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 { 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 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';
import { ArrowLeftRight, Trash2, Upload } from '@lucide/svelte';
let { data } = $props();
import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
import { ArrowLeftRight, Trash2, Upload } from '@lucide/svelte';
let { data } = $props();
let log_lvl = 1;
let log_lvl = 1;
let ae_promises: key_val = {};
let ae_promises: key_val = {};
// export let container_class_li = [];
// export let container_class_li = [];
let file_uploads_post_promise;
let download_src;
let download_filename;
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 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_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
});
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 = {};
}
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 = {};
}
if (!$ae_sess.files) {
$ae_sess.files = {};
}
if (typeof $ae_sess.files.upload_complete === 'undefined') {
if (!$ae_sess.files) {
$ae_sess.files = {};
}
if (typeof $ae_sess.files.upload_complete === 'undefined') {
$ae_sess.files.upload_complete = false;
}
$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;
}
$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.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;
}
});
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;
}
// $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
// };
// }
// });
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.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
// };
// }
// });
// $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');
});
onMount(() => {
console.log('Hosted Files: AV Utilities +page.svelte');
});
</script>
<!-- <section
@@ -140,10 +146,11 @@
<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.
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">
@@ -151,7 +158,7 @@
<button
type="button"
class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 float-right"
class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 float-right border"
title="Toggle between Upload and Select from Hosted Files"
onclick={() => {
if ($ae_sess.files.add_to_use_files_method == 'upload') {
@@ -159,8 +166,7 @@
} else {
$ae_sess.files.add_to_use_files_method = 'upload';
}
}}
>
}}>
<ArrowLeftRight size="1em" class="m-1" />
Upload/Select
</button>
@@ -175,15 +181,15 @@
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 class="flex items-center gap-2 mb-1">
<div class="mb-1 flex items-center gap-2">
<Upload size="1em" class="text-primary-500" />
<strong class="preset-tonal-success px-3 py-1 rounded-full">Upload video files</strong>
<strong class="preset-tonal-success rounded-full px-3 py-1"
>Upload video files</strong>
</div>
<span class="text-sm opacity-70 italic">
<span class="text-sm italic opacity-70">
<strong>Aether hosted files only</strong><br />
Recommended: video (mp4, mkv)<br />
</span>
@@ -200,8 +206,7 @@
allow_moderator={true}
class_li={''}
max_file_count={39}
file_type={'video'}
/>
file_type={'video'} />
</div>
<hr />
@@ -214,8 +219,7 @@
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"
>
class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 float-right border">
<Trash2 size="1em" class="m-1" />
Clear Upload History
</button>
@@ -229,8 +233,7 @@
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>
{log_lvl}></Comp_hosted_files_clip_video>
{:else}
<p>Upload a video file to clip first.</p>
{/if}
@@ -245,8 +248,7 @@
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"
>
class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 float-right border">
<Trash2 size="1em" class="m-1" />
Clear Clip History
</button>
@@ -257,8 +259,7 @@
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>
{log_lvl}></Comp_hosted_files_clip_video_li>
{:else}
<p>Clip a video file first.</p>
{/if}

114
src/routes/hosted_files/video_util/hold_video_util.svelte
View File

@@ -1,54 +1,61 @@
<script lang="ts">
// 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 { 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 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';
import { ArrowLeftRight, Trash2, Upload } from '@lucide/svelte';
let log_lvl = 1;
import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
import { ArrowLeftRight, Trash2, Upload } from '@lucide/svelte';
let log_lvl = 1;
let ae_promises: key_val = {};
let ae_promises: key_val = {};
// export let container_class_li = [];
// export let container_class_li = [];
let file_uploads_post_promise;
let download_src;
let download_filename;
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 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_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
});
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">
<div class="rounded-lg border border-gray-200 p-2">
<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.
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">
@@ -56,7 +63,7 @@
<button
type="button"
class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 float-right"
class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 float-right border"
title="Toggle between Upload and Select from Hosted Files"
onclick={() => {
if ($ae_sess.files.add_to_use_files_method == 'upload') {
@@ -64,8 +71,7 @@
} else {
$ae_sess.files.add_to_use_files_method = 'upload';
}
}}
>
}}>
<ArrowLeftRight size="1em" class="m-1" />
Upload/Select
</button>
@@ -80,15 +86,16 @@
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>
<Upload size="1em" />
<strong class="bg-green-100 p-1">Upload video files</strong>
<strong class="bg-green-100 p-1"
>Upload video files</strong>
</div>
<span class="text-sm text-gray-600 dark:text-gray-400 italic">
<span
class="text-sm text-gray-600 italic dark:text-gray-400">
<strong>Aether hosted files only</strong><br />
Recommended: video (mp4, mkv)<br />
</span>
@@ -97,14 +104,15 @@
</Comp_hosted_files_upload>
</div>
<div class:hidden={$ae_sess.files.add_to_use_files_method == 'select'} class="">
<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={''}
/>
class_li={''} />
</div>
<hr />
@@ -117,8 +125,7 @@
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"
>
class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 float-right border">
<Trash2 size="1em" class="m-1" />
Clear Upload History
</button>
@@ -132,8 +139,7 @@
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>
{log_lvl}></Comp_hosted_files_clip_video>
{:else}
<p>Upload a video file to clip first.</p>
{/if}
@@ -146,8 +152,7 @@
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"
>
class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 float-right border">
<Trash2 size="1em" class="m-1" />
Clear Clip History
</button>
@@ -158,8 +163,7 @@
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>
{log_lvl}></Comp_hosted_files_clip_video_li>
{:else}
<p>Clip a video file first.</p>
{/if}