Work on expanding the routes

src/routes/+layout.svelte

@@ -213,6 +213,14 @@ $: if ($slct_trigger == 'set_access_code_li' && !$ae_loc.ds['hub__page__access_c
 // }
 </script>
 
+
+<svelte:head>
+	<title>{data.ae_loc.title}</title>
+    <link rel="stylesheet" href="{data.ae_loc.site_style_href}">
+    <!-- <link rel="manifest" href="/manifest.json"> -->
+</svelte:head>
+
+
 <!-- regionFooter="flex justify-end space-x-2" -->
 
 <Modal components={modalRegistry}
@@ -324,7 +332,7 @@ $: if ($slct_trigger == 'set_access_code_li' && !$ae_loc.ds['hub__page__access_c
 
 
     <svelte:fragment slot="footer">
-        <div class="flex justify-between space-x-2">
+        <div class="flex justify-between space-x-2 text-slate-400 hover:text-slate-800 transition">
             {@html $ae_loc.ds['hub__site__appshell_footer']}
         </div>
     </svelte:fragment>

src/routes/+page.svelte

@@ -52,7 +52,7 @@ onMount(() => {
 
 
 <div data-sveltekit-preload-data="false" class="">
-{#if $ae_loc.iframe}
+<!-- {#if $ae_loc.iframe}
 <a
 	class="btn btn-sm variant-soft"
 	href="/?iframe=false"
@@ -73,7 +73,6 @@ onMount(() => {
 	class="btn btn-sm variant-soft"
 	title="Reload and clear the page cache"
 	on:click={() => {
-		// $ae_loc.
 		window.location.reload(true);
 	}}
 	>
@@ -84,7 +83,6 @@ onMount(() => {
 	class="btn btn-sm variant-soft"
 	title="Clear the browser storage for this page"
 	on:click={() => {
-		// $ae_loc.
 		localStorage.clear();
 		sessionStorage.clear();
 		alert('Local and Session Storage cleared. You will probably want to refresh the page.');
@@ -93,6 +91,13 @@ onMount(() => {
 	<span class="fas fa-sync mx-1"></span>
 	Clear Storage
 </button>
+<a
+	class="btn btn-sm variant-soft"
+	href="/hosted_files"
+	>
+	<span class="fas fa-code mx-1"></span>
+	Util: Convert Videos
+</a> -->
 </div>
 
 </section>

src/routes/events_badges/+layout.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+/** @type {import('./$types').LayoutData} */
+export let data;
+import { goto } from '$app/navigation';
+</script>
+
+
+<svelte:head>
+	<title>Events Badges - {data.ae_loc.title}</title>
+</svelte:head>
+
+<!-- <h1>Events Badges Layout?</h1> -->
+
+<div class="submenu flex flex-row justify-center">
+    <span class="btn-group variant-soft-secondary px-4 py-2">
+    {#each Object.entries(data.submenu) as [key, item]}
+        <!-- <a href="/settings/{item.slug}">{item.title}</a> -->
+        <!-- class:hidden={!$ae_loc.trusted_access && item.access} -->
+        {#if item.disable}
+        <button
+            title={item.title}
+            class="hover:variant-ghost-secondary"
+            class:hidden={(!data.ae_loc.trusted_access && item.access === 'trusted') || (!data.ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
+            disabled={item.disable}
+
+            on:click={() => {
+                // window.location(item.href);
+                // href={item.href}
+                // invalidateAll
+                goto(item.href, { });
+            }}
+            >
+            {item.name}
+        </button>
+        {:else}
+        <a
+            href={item.href}
+            title={item.title}
+            class="hover:variant-ghost-secondary"
+            class:hidden={(!data.ae_loc.trusted_access && item.access === 'trusted') || (!data.ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
+            class:disabled={item.disable}
+            >
+            {item.name}
+        </a>
+        {/if}
+
+        <!-- <button
+            title={item.title}
+            class="hover:variant-ghost-secondary"
+            class:hidden={(!data.ae_loc.trusted_access && item.access === 'trusted') || (!data.ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
+            disabled={item.disable}
+
+            on:click={() => {
+                // window.location(item.href);
+                // href={item.href}
+                // invalidateAll
+                goto(item.href, { });
+            }}
+            >
+            {item.name}
+        </button> -->
+    {/each}
+    </span>
+</div>
+
+<slot></slot>

src/routes/events_badges/+layout.ts

@@ -0,0 +1,33 @@
+/** @type {import('./$types').LayoutLoad} */
+
+import { get } from 'svelte/store';
+
+import { api } from '$lib/api';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+import type { key_val } from '$lib/ae_stores';
+
+
+export async function load({ params, parent, url }) { // route
+    // console.log(`Svelte Events Badges layout.ts data = params:`, params);
+    // console.log(`Svelte Events Badges layout.ts data = route:`, route);
+    // console.log(`Svelte Events Badges layout.ts data = url:`, url);
+
+    // const { ae_init, root_layout_ts } = await parent();
+    let data = await parent();
+    console.log(`Svelte Events Badges layout.ts data = data:`, data);
+
+    data.ae_events_badges_layout_ts = true;
+
+    let submenu = {
+        main: {name: 'Main', href: '/events_badges', access: false},
+        manage: {name: 'Manage', href: '/events_badges/manage', access: 'administrator', disable: true},
+        review: {name: 'Review', href: '/events_badges/review', access: false},
+        print: {name: 'Print', href: '/events_badges/print', access: 'trusted', disable: true},
+        view: {name: 'View', href: '/events_badges/view', access: 'trusted', hide: true}, // event_badge_id
+        // new: {name: 'New', href: '/events_badges/new'},
+        test: {name: 'Test', href: '/sponsorships'},
+        };
+    data.submenu = submenu
+
+    return data;
+}

src/routes/events_badges/+page.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+export let data;
+// console.log(`ae_ Svelte Events Badges +page data:`, data);
+
+import { onMount } from 'svelte';
+
+import { api } from '$lib/api';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils';
+import type { key_val } from '$lib/ae_stores';
+
+
+onMount(() => {
+    console.log('Events Badges: +page.svelte');
+
+    let href_url = window.location.href;
+    // console.log(href_url);
+
+    $ae_loc.href_url = href_url;
+    // console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
+
+    // $slct_trigger = 'msg_parent';
+    ae_util.handle_url_and_message('event_id', $slct.event_id);
+    ae_util.handle_url_and_message('event_badge_id', $slct.event_badge_id);
+    if ($slct.event_badge_id) {
+        console.log(`Got an ID. Let's show the modal!`);
+        modalStore.trigger(modal_edit__event_badge_obj);
+    }
+});
+</script>
+
+
+<section class="ae_events_badges md:container h-full mx-auto">
+
+
+</section>
+
+
+<style lang="postcss">
+</style>

src/routes/events_badges/+page.ts

@@ -0,0 +1,6 @@
+/** @type {import('./$types').PageLoad} */
+export function load() {
+    return {
+        ae_events_badges_page_ts: true,
+    };
+}

src/routes/events_speakers/+layout.svelte

@@ -3,4 +3,10 @@
 export let data;
 </script>
 
+
+<svelte:head>
+	<title>Events Speakers - {data.ae_loc.title}</title>
+</svelte:head>
+
+
 <slot></slot>

src/routes/hosted_files/+page.svelte

@@ -0,0 +1,245 @@
+<script lang="ts">
+export let data;
+// console.log(`ae_ Svelte Hosted Files +page data:`, data);
+
+import { onMount } from 'svelte';
+
+
+import { api } from '$lib/api';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils';
+import type { key_val } from '$lib/ae_stores';
+
+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;
+
+onMount(() => {
+    console.log('Hosted Files: AV Utilities +page.svelte');
+});
+
+
+function handle_submit_form(event) {
+    console.log('*** handle_submit_form() ***');
+
+    console.log(event.target.file_list);
+
+    const form_data = new FormData();
+
+    form_data.append('title_part_1', event.target.title_part_1.value);
+    form_data.append('title_part_2', event.target.title_part_2.value);
+
+    form_data.append('subtitle_part_1', event.target.subtitle_part_1.value);
+    form_data.append('subtitle_part_2', event.target.subtitle_part_2.value);
+
+    form_data.append('font_color', event.target.font_color.value);
+
+    form_data.append(`file`, event.target.audio_file.files[0]);
+    if (event.target.title_image.files.length > 0) {
+        form_data.append(`title_image`, event.target.title_image.files[0]);
+    }
+
+    download_filename = `${event.target.title_part_1.value}_${event.target.title_part_2.value}_${event.target.subtitle_part_1.value}_${event.target.subtitle_part_2.value}.mp4`
+
+    // for (let i = 0; i < event.target.file_list.files.length; i++) {
+    //     form_data.append(`file_list`, event.target.event_file_upload_file_list.files[i]);
+    // }
+
+    let params = null;
+
+    let endpoint = '/hosted_file/create_video';
+
+    console.log(form_data);
+
+    params = null;
+
+    // Uncomment and the file_uploads_post_promise is not seen by the "await" below
+    // file_uploads_post_promise = await api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, data:form_data});
+    // Uncomment so that the file_uploads_post_promise is not seen by the "await" below
+    file_uploads_post_promise = api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, form_data:form_data, return_blob: true, filename: 'test.mp4', auto_download: false})
+    .then(function (result) {
+        console.log(result);
+
+        let file_blob = new Blob([result.data]);
+        // console.log(file_blob);
+        let file_obj_url = window.URL.createObjectURL(file_blob); // The img src
+        // const url = window.URL.createObjectURL(new Blob([result.data]));
+        download_src = file_obj_url;
+        // download_filename = file_obj_url;
+
+    });
+
+    console.log(file_uploads_post_promise);
+
+    // let file_blob = new Blob([file_uploads_post_promise.data]);
+    // // console.log(file_blob);
+    // let file_obj_url = URL.createObjectURL(file_blob); // The img src
+    // download_src = file_obj_url;
+
+    // dispatch(
+    //     'event_file_obj_li_updated',
+    //     {
+    //         link_to_type: link_to_type,
+    //         link_to_id: link_to_id,
+    //     }
+    // );
+
+    return true;
+}
+
+
+
+
+
+function handle_submit_form_clip(event) {
+    console.log('*** handle_submit_form() ***');
+
+    console.log(event.target.file_list);
+
+    const form_data = new FormData();
+
+    form_data.append('start_time', event.target.start_time.value);
+    form_data.append('end_time', event.target.end_time.value);
+
+    if (event.target.reencode.value == '1' || event.target.reencode.value == 'true') {
+        form_data.append('reencode', 'true');
+    } else {
+        form_data.append('reencode', 'false');
+    }
+    // form_data.append('reencode', event.target.reencode.value);
+
+    form_data.append(`video_file`, event.target.video_file.files[0]);
+
+    download_filename = `clipped_file_test.mp4`
+
+    // for (let i = 0; i < event.target.file_list.files.length; i++) {
+    //     form_data.append(`file_list`, event.target.event_file_upload_file_list.files[i]);
+    // }
+
+    let params = null;
+
+    let endpoint = '/hosted_file/clip_video';
+
+    console.log(form_data);
+
+    params = null;
+
+    file_uploads_clip_post_promise = api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, form_data:form_data, return_blob: true, filename: 'test.mp4', auto_download: false})
+    .then(function (result) {
+        console.log(result);
+
+        let file_blob = new Blob([result.data]);
+        // console.log(file_blob);
+        let file_obj_url = window.URL.createObjectURL(file_blob); // The img src
+        // const url = window.URL.createObjectURL(new Blob([result.data]));
+        download_src = file_obj_url;
+        // download_filename = file_obj_url;
+
+    });
+
+    console.log(file_uploads_clip_post_promise);
+
+    return true;
+}
+
+</script>
+
+
+<section
+    class="ae__hosted_files__av_util md:container h-full mx-auto space-y-4 {container_class_li.join(' ')}">
+
+    <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 on:submit|preventDefault={handle_submit_form} on:keydown={e => e.key === 'Escape' && handle_cancel_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}
+
+
+
+    <hr>
+
+
+    <h2>Clip mp4</h2>
+    <p>This AV utility will take an mp4 video file create a clipped mp4 video file. This process may take a few seconds to a handful of minutes. Re-encoding will take longer. Please be patient while it is processing.</p>
+    <form on:submit|preventDefault={handle_submit_form_clip} on:keydown={e => e.key === 'Escape' && handle_cancel_form_clip} class="av_util_mp4_clip 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="00:00:00" 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 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}
+
+</section>
+
+
+<style>
+
+</style>

src/routes/sponsorships/+layout.svelte

@@ -3,6 +3,11 @@
 export let data;
 </script>
 
+
+<svelte:head>
+	<title>Sponsorships - {data.ae_loc.title}</title>
+</svelte:head>
+
 <!-- <h1>Sponsorships Layout?</h1> -->
 
 <!-- <div class="submenu">

src/routes/sponsorships/[slug]/+page.svelte

@@ -79,6 +79,7 @@ onMount(() => {
     $ae_loc.href_url = url;
     // console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
 
+    ae_util.handle_url_and_message('sponsorship_cfg_id', $slct.sponsorship_id);
     ae_util.handle_url_and_message('sponsorship_id', $slct.sponsorship_id);
     if ($slct.sponsorship_id) {
         console.log(`Got an ID. Let's show the modal!`);