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

feat: Migrate ESLint to flat config and resolve initial linting errors

Browse Source 
Migrated the ESLint configuration to the new flat config format ()
and addressed several initial linting errors.

Key changes include:
- Updated ESLint configuration to treat  as warnings instead of errors.
- Fixed  errors in  by declaring  and .
- Corrected  error in  by using  instead of an out-of-scope .
- Resolved  error in  by replacing the undefined  directive with the  component.
- Addressed  errors in  by replacing  with  and  with .
- Fixed  errors in  by importing necessary modules (, , ) and adding missing props (, , , , ).
This commit is contained in:
Scott Idem
2025-11-17 18:46:54 -05:00
parent b99e85f1db
commit 7e1eaba3bc
374 changed files with 95654 additions and 93952 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,55 +1,54 @@
<script lang="ts">
/** @type {import('./$types').LayoutData} */
let log_lvl: number = 1;
/** @type {import('./$types').LayoutData} */
let log_lvl: number = 1;
// *** Import Svelte specific
// import { browser } from '$app/environment';
// *** Import Svelte specific
// import { browser } from '$app/environment';
// *** Import other supporting libraries
// import * as icons from '@lucide/svelte';
import {
Brain,
House, Library,
RefreshCw,
Satellite
} from '@lucide/svelte';
// *** Import other supporting libraries
// import * as icons from '@lucide/svelte';
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 { core_func } from '$lib/ae_core/ae_core_functions';
import Element_data_store from '$lib/elements/element_data_store_v2.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 { core_func } from '$lib/ae_core/ae_core_functions';
import Element_data_store from '$lib/elements/element_data_store_v2.svelte';
interface Props {
/** @type {import('./$types').LayoutData} */
data: any;
children?: import('svelte').Snippet;
}
let { data, children }: Props = $props();
interface Props {
/** @type {import('./$types').LayoutData} */
data: any;
children?: import('svelte').Snippet;
}
let { data, children }: Props = $props();
</script>
<svelte:head>
<title>Hosted Files - {$ae_loc?.title ?? 'Æ loading...'}</title>
</svelte:head>
<div
id="ae_hosted_files"
class:iframe={$ae_loc?.iframe}
class="
id="ae_hosted_files"
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
"
>
<nav
class="
>
<nav
class="
submenu
flex flex-row flex-wrap
items-center justify-between
@@ -59,39 +58,26 @@ let { data, children }: Props = $props();
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"
/>
<abbr title="Aether - Hosted Files Module">
Æ
Hosted Files
</abbr>
</span>
<!-- <Element_data_store
>
<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" />
<abbr title="Aether - Hosted Files Module"> Æ Hosted Files </abbr>
</span>
<!-- <Element_data_store
ds_code="hub__site__appshell_header"
ds_type="html"
/> -->
<a
href="/"
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-success-500"
>
<House />
<span class="hidden md:inline">
Home
</span>
</a>
</nav>
<a
href="/"
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-success-500"
>
<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"
>
{@render children?.()}
</section>
</div>
<section class:iframe={$ae_loc?.iframe} class="main_content grow px-1 md:px-2 pb-28">
{@render children?.()}
</section>
</div>

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

@@ -5,49 +5,56 @@ import { error } from '@sveltejs/kit';
import { browser } from '$app/environment';
import { core_func } from '$lib/ae_core/ae_core_functions';
export async function load({ params, parent, url }) { // route
let log_lvl: number = 0;
export async function load({ params, parent, url }) {
// route
const log_lvl: number = 0;
let data = await parent();
data.log_lvl = log_lvl;
const data = await parent();
data.log_lvl = log_lvl;
let account_id = data.account_id;
let ae_acct = data[account_id];
// console.log(`ae_acct = `, ae_acct);
const account_id = data.account_id;
const ae_acct = data[account_id];
// console.log(`ae_acct = `, ae_acct);
// if (!account_id) {
// console.log(`ae Core - [account_id] +page.ts: The account_id was not found!!!`);
// error(404, {
// if (!account_id) {
// console.log(`ae Core - [account_id] +page.ts: The account_id was not found!!!`);
// error(404, {
// message: 'Account ID not found'
// });
// }
// }
// ae_acct.slct.account_id = account_id;
// ae_acct.slct.account_id = account_id;
let qry_limit = url.searchParams.get('limit') ?? 19;
if (!qry_limit) {
console.log(`qry_limit +page.ts: The qry_limit was not found in the params!!!`);
}
ae_acct.slct.qry_limit = qry_limit;
const qry_limit = url.searchParams.get('limit') ?? 19;
if (!qry_limit) {
console.log(`qry_limit +page.ts: The qry_limit was not found in the params!!!`);
}
ae_acct.slct.qry_limit = qry_limit;
if (browser) {
let load_hosted_file_obj_li = core_func.load_ae_obj_li__hosted_file({
api_cfg: ae_acct.api,
for_obj_type: 'account',
for_obj_id: account_id,
enabled: 'enabled',
hidden: 'not_hidden',
limit: qry_limit,
order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC', 'title': 'ASC'},
try_cache: true,
log_lvl: log_lvl
});
console.log(`load_hosted_file_obj_li = `, load_hosted_file_obj_li);
ae_acct.slct.hosted_file_obj_li = load_hosted_file_obj_li;
}
if (browser) {
const load_hosted_file_obj_li = core_func.load_ae_obj_li__hosted_file({
api_cfg: ae_acct.api,
for_obj_type: 'account',
for_obj_id: account_id,
enabled: 'enabled',
hidden: 'not_hidden',
limit: qry_limit,
order_by_li: {
priority: 'DESC',
sort: 'DESC',
updated_on: 'DESC',
created_on: 'DESC',
title: 'ASC'
},
try_cache: true,
log_lvl: log_lvl
});
console.log(`load_hosted_file_obj_li = `, load_hosted_file_obj_li);
ae_acct.slct.hosted_file_obj_li = load_hosted_file_obj_li;
}
// WARNING: Precaution against shared data between sites and sessions.
data[account_id] = ae_acct;
// WARNING: Precaution against shared data between sites and sessions.
data[account_id] = ae_acct;
return data;
return data;
}

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

@@ -1,96 +1,92 @@
<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';
let { data } = $props();
import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
let log_lvl = 0;
let { data } = $props();
let ae_promises: key_val = {};
let log_lvl = 0;
// export let container_class_li = [];
let ae_promises: key_val = {};
let file_uploads_post_promise;
let download_src;
let download_filename;
// export let container_class_li = [];
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 = {};
}
let file_uploads_post_promise;
let download_src;
let download_filename;
$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_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.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.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');
});
// $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
@@ -108,35 +104,30 @@ onMount(() => {
> -->
<!-- <div class="border border-gray-200 p-2 rounded-lg"> -->
<h1 class="h1">Æ Hosted Files</h1>
<h1 class="h1">Æ Hosted Files</h1>
<h2 class="h2">Video Utilities</h2>
<p>Clip, scale, re-encode videos files (mp4).</p>
<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>
<a href="hosted_files/video_util" class="btn preset-filled-primary-500">
<span class="fas fa-video mx-1"></span>
Video Utilities
</a>
<hr />
<hr />
<h2 class="h2">Manage Files</h2>
<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={'max-h-full'}
/>
<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-h-full'}
/>
<!-- </div> -->
<!-- <h2 class="h2">Step X: Manage Hosted Files</h2> -->
<!-- Show files for this account -->
<!-- <Element_manage_hosted_file_li_wrap
@@ -147,6 +138,4 @@ onMount(() => {
container_class_li={''}
/> -->
<!-- </section> -->

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

@@ -1,122 +1,118 @@
<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 Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
let { data } = $props();
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 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 file_uploads_clip_post_promise;
let download_clip_src;
let download_clip_filename;
let hosted_file_clip: key_val = $state({
video_clip_file_kv: {},
clip_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,
});
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 = {};
}
let hosted_file_clip: key_val = $state({
video_clip_file_kv: {},
clip_complete: false,
submit_status: null,
});
$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_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.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.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');
});
// $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
@@ -135,138 +131,133 @@ 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">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
<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>
<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={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 != '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>
<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 />
<hr />
<h2 class="h2">
Step 2: Clip Video
<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={log_lvl}
>
</Comp_hosted_files_clip_video>
{:else}
<p>Upload a video file to clip first.</p>
{/if}
<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 />
<hr />
<h2 class="h2">
Step 3: Download Recently Processed Video Clips
<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={log_lvl}
>
</Comp_hosted_files_clip_video_li>
{:else}
<p>Clip a video file first.</p>
{/if}
<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
@@ -277,6 +268,4 @@ onMount(() => {
container_class_li={''}
/> -->
<!-- </section> -->

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

@@ -1,185 +1,172 @@
<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 Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
let log_lvl = 1;
let ae_promises: key_val = {};
let log_lvl = 1;
// export let container_class_li = [];
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,
});
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
<section
class="ae__hosted_files__av_util container space-y-4 pb-20"
>
<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="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>
<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>
<h2 class="h2">
Step 1: Upload Video File or Select from Hosted Files
<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>
<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>
<hr />
<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>
<h2 class="h2">
Step 2: Clip Video
<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>
<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
<h2 class="h2">
Step 2: Clip Video
<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}
<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={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={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
<!-- {$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>
@@ -195,31 +182,29 @@ let hosted_file_clip: key_val = $state({
</div>
{/each} -->
<!-- <form on:submit|preventDefault={handle_submit_form_clip} class="av_util_mp4_clip form space-y-4"> -->
<!-- <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">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">
<!-- 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">
<!-- <button type="submit" class="btn variant-filled-warning mx-1">
<span class="fas fa-upload mx-1"></span>
Submit
</button> -->
<!-- </form> -->
<!-- </form> -->
<!-- <hr /> -->
<!-- <hr /> -->
<!-- {#await file_uploads_clip_post_promise}
<!-- {#await file_uploads_clip_post_promise}
<p class="highlight">Converting... This may take a few minutes.</p>
{:then}
{#if file_uploads_clip_post_promise}
@@ -228,28 +213,18 @@ let hosted_file_clip: key_val = $state({
<p>Fill out the form and select the video file to clip.</p>
{/if}
{/await} -->
</div>
</div>
<!-- <h2 class="h2">Step X: Manage Hosted Files</h2> -->
<!-- Show files for this account -->
<!-- <Element_manage_hosted_file_li_wrap
<!-- <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>