Files
OSIT-AE-App-Svelte/src/routes/events/[event_id]/(launcher)/launcher_file_cont.svelte

701 lines
30 KiB
Svelte

<script lang="ts">
interface Props {
log_lvl?: number;
event_file_id: string;
event_file_obj: any;
// export let os: string = null;
max_filename_length?: number;
hide_launch_icon?: boolean;
hide_meta?: boolean;
hide_created_on?: boolean;
hide_os?: boolean;
hide_size?: boolean;
show_bak_download?: boolean;
// export let hide_api_download: boolean = true;
btn_size?: string;
session_type?: string; // oral, poster, workshop, symposium, roundtable, other
open_method?: null|string; // modal, download, native open (download, cache, copy, open), URL
modal_title?: string;
modal__title?: any;
modal__open_event_file_id?: any;
modal__event_file_obj?: any;
}
let {
log_lvl = 0,
event_file_id,
event_file_obj = $bindable({}),
max_filename_length = 50,
hide_launch_icon = false,
hide_meta = false,
hide_created_on = false,
hide_os = false,
hide_size = false,
show_bak_download = false,
btn_size = 'btn_md',
session_type = 'oral',
open_method = 'download',
modal_title = $bindable(''),
modal__title = $bindable(''),
modal__open_event_file_id = $bindable(null),
modal__event_file_obj = $bindable(null),
}: Props = $props();
// *** Import Svelte specific
// import { preventDefault } from 'svelte/legacy';
import { onMount, tick } from 'svelte';
import { fade, scale, fly } from 'svelte/transition';
// *** Import other supporting libraries
// *** Import Aether specific variables and functions
import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { api } from '$lib/api';
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { core_func } from '$lib/ae_core/ae_core_functions';
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';
import Element_ae_crud from '$lib/element_ae_crud.svelte';
// *** Functions and Logic
let ae_downloads: key_val = {};
let ae_promises: key_val = $state({});
let ae_tmp: key_val = $state({});
let ae_triggers: key_val = $state({});
let open_file_clicked: null|boolean = $state(null);
let open_file_status: null|string = $state(null); // null, 'checking_cache', 'checking_cache_failed', 'downloading_file', 'downloading_file_failed', 'opening_file', 'opening_file_failed', 'opening_file_success'
let open_file_status_message: null|string = $state(null);
if (!$events_loc.launcher.screen_saver_img_kv) {
$events_loc.launcher.screen_saver_img_kv = {};
}
let screen_saver_exts = ['jpg', 'png', 'PNG', 'webp'];
if (screen_saver_exts.includes(event_file_obj.extension)) {
// $events_loc.launcher.screen_saver_img_kv.push(event_file_obj);
// $events_loc.launcher.screen_saver_img_kv[event_file_id] = event_file_obj;
$events_loc.launcher.screen_saver_img_kv[event_file_id] = Object.create(event_file_obj);
// let temp_obj = Object.create(event_file_obj)
// $events_loc.launcher.screen_saver_img_kv[temp_obj.event_file_id_random] = Object.create(temp_obj);
// $ae_event_launcher = $ae_event_launcher;
}
onMount(() => {
console.log('** Component Mounted: ** Event Launcher File Container (Hash Open)');
console.log(`Session Type: ${session_type}; Open Method: ${open_method}`);
if (screen_saver_exts.includes(event_file_obj.extension)) {
// $events_loc.launcher.screen_saver_img_kv[event_file_id] = event_file_obj;
let temp_obj = Object.create(event_file_obj)
$events_loc.launcher.screen_saver_img_kv[temp_obj.event_file_id_random] = Object.create(temp_obj);
// $ae_event_launcher = $ae_event_launcher;
}
// window.addEventListener('message', function(event) {
// console.log('Message received in event file uploaded manage component:');
// console.log(event);
// if (event.data.type == 'api_download_blob') {
// console.log('Download blob (file) message received:');
// console.log(event.data);
// // Get the event_file_id from the event.data.endpoint value.
// // Example: /event/file/abc123/download
// let endpoint = event.data.endpoint;
// let event_file_id = endpoint.split('/')[3];
// ae_downloads[event_file_id] = {
// 'size_total': event.data.size_total,
// 'size_loaded': event.data.size_loaded,
// 'percent_completed': event.data.percent_completed,
// };
// // let event_file_id = event.data.event_file_id;
// // let filename = event.data.filename;
// // let auto_download = event.data.auto_download;
// // ae_promises[event_file_id]
// // ae_promises[event_file_id] = download_event_file({ 'event_file_id': event_file_id, 'return_file': true, filename: filename, auto_download: auto_download, log_lvl: 1 });
// }
// });
});
async function handle_open_file() {
console.log('*** handle_open_file() ***');
console.log(`App Mode: ${$events_loc.launcher.app_mode}; Cache Path: ${$events_loc.launcher.local_file_cache_path}; Temp Path: ${$events_loc.launcher.host_file_temp_path}`);
// null or "default" is for regular use in their preferred browser.
// "app" mode is for Electron and node.js.
// "onsite" mode is for Chrome or Firefox and downloading files with modified extensions and other slight changes.
if ($events_loc.launcher.app_mode == 'native' && native_app) {
console.log('* ** *** **** BEGIN TESTING **** *** ** *');
console.log('Process: Check local hash file cache, Download hash file to cache, and Open cached hash file after copying to temp directory');
open_file_clicked = true;
// await tick();
// setTimeout(() => {console.log('Finished waiting to hide the message.'); open_file_clicked = false;}, 15000);
open_file_status = 'checking_cache';
open_file_status_message = 'Checking local cache...';
let check_hash_file_cache_result = await native_app.check_hash_file_cache_v2({local_file_cache_path: $events_loc.launcher.local_file_cache_path, hash: event_file_obj.hash_sha256, check_hash: true});
if (check_hash_file_cache_result) {
console.log('Cached hash file found.');
} else if (check_hash_file_cache_result == null) {
console.log(`Cached hash file not found. Need to download from API server. Base URL ${$events_loc.launcher.api.base_url}`);
open_file_status = 'downloading_file';
open_file_status_message = 'Downloading file...';
let download_hash_file_to_cache_result = await native_app.download_hash_file_to_cache_v2({api_base_url: $events_loc.launcher.api.base_url, api_base_url_backup: $events_loc.launcher.api.base_url_backup, local_file_cache_path: $events_loc.launcher.local_file_cache_path, event_file_id: event_file_id, hash: event_file_obj.hash_sha256, verify_hash: true, overwrite_existing: false});
// console.log(download_hash_file_to_cache_result);
if (download_hash_file_to_cache_result) {
console.log('Hash file downloaded to cache.');
} else if (download_hash_file_to_cache_result == null) {
console.log('Hash file was not found in cache and or could not be downloaded.');
open_file_status = 'file_not_found';
open_file_status_message = 'File was not found in cache and could not be downloaded.';
setTimeout(() => {console.log(`Hiding Open File Message: ${open_file_status_message}`); open_file_clicked = false;}, 10000); // Default 15 seconds (15000)
return null;
} else {
console.log('Hash file may be in the process of being downloaded or something went wrong.');
open_file_status = 'downloading_file_or_failed';
open_file_status_message = 'Hash file may be in the process of being downloaded or something went wrong.';
setTimeout(() => {console.log(`Hiding Open File Message: ${open_file_status_message}`); open_file_clicked = false;}, 10000); // Default 15 seconds (15000)
return false;
}
} else {
console.log(`Cached hash file found, but hash did not match. May still be downloading from the API server. Base URL ${$events_loc.launcher.api.base_url}`);
open_file_status = 'try_again';
open_file_status_message = 'Please try again...';
return null;
}
setTimeout(() => {console.log('Finished waiting to hide the message.'); open_file_clicked = false;}, 15000); // Default 15 seconds (15000)
console.log('Cached hash file found and ready to be opened from the temp directory.');
open_file_status = 'opening_file';
open_file_status_message = 'Opening file...';
let filename = '';
if ((event_file_obj.extension == 'ppt' || event_file_obj.extension == 'pptx') && event_file_obj.open_in_os == 'win') {
if (event_file_obj.extension == 'ppt') {
filename = event_file_obj.filename.replace('.ppt', '.pptwin');
} else if (event_file_obj.extension == 'pptx') {
filename = event_file_obj.filename.replace('.pptx', '.pptxwin');
}
} else {
filename = event_file_obj.filename;
}
console.log(`Opening ${filename}`);
let electron_open_hash_file_to_temp_result = await native_app.open_hash_file_to_temp_v2({local_file_cache_path: $events_loc.launcher.local_file_cache_path, hash: event_file_obj.hash_sha256, host_file_temp_path: $events_loc.launcher.host_file_temp_path, filename: filename, verify_hash: true});
if (electron_open_hash_file_to_temp_result) {
console.log('Local hash file was opened to temp.');
open_file_status = 'opening_file_success';
open_file_status_message = 'Opening Application';
} else if (electron_open_hash_file_to_temp_result == null) {
console.log('Local hash file was not found. It may still be downloading.');
open_file_status = 'file_not_found';
open_file_status_message = 'File not found!';
} else {
console.log('Local hash file was not opened to temp. Something went wrong.');
open_file_status = 'opening_file_failed';
open_file_status_message = 'Failed to open the file!';
return false;
}
console.log('Done with test of cache check, download file, and open cached file from temp directory.');
} else if ($events_loc.launcher.app_mode == 'onsite') {
open_file_clicked = true;
await tick();
setTimeout(() => {console.log('Finished waiting to hide the message.'); open_file_clicked = false;}, 15000);
} else {
// NOTE: Add first test controller command here.
// $events_sess.launcher.controller_cmd = `ae:open:event_file_id=${$slct.event_file_id}`;
// $events_sess.launcher.controller_trigger_send = true; // Trigger the controller to send.
// $events_sess.launcher.controller_cmd = null; // Reset command to null
open_file_clicked = true;
await tick();
setTimeout(() => {console.log('Finished waiting to hide the message.'); open_file_clicked = false;}, 15000);
}
}
// function handle_open_method_poster() {
// console.log('*** handle_open_method_poster() ***');
// $events_loc.launcher.show_modal_event_poster = true;
// if (event_file_obj.extension == 'png' || event_file_obj.extension == 'jpg') {
// $events_loc.launcher.event_poster_file_type = 'image';
// } else if (event_file_obj.extension == 'mp4' || event_file_obj.extension == 'mov') {
// $events_loc.launcher.event_poster_file_type = 'video';
// }
// $events_loc.launcher.poster_src = `/event/file/${event_file_id}/download`;
// $events_loc.launcher.modal_title = modal_title;
// }
function preventDefault(fn) {
return function (event) {
event.preventDefault();
fn.call(this, event);
};
}
</script>
<div
class="
event_launcher_file_cont
grow
flex flex-col md:flex-row flex-wrap
gap-1 items-center
max-w-full
transition-all
"
class:justify-between={!hide_meta}
class:justify-center={hide_meta}
>
{#if open_file_clicked}
<div class="open_file_clicked alert" in:fade="{{ duration: 250 }}" out:fade="{{ duration: 2000 }}">
{#if ($events_loc.launcher.app_mode == 'native')}
{#if (open_file_status)}
<div class="alert_msg_pulse"><strong>*** {open_file_status_message} ***</strong></div>
{/if}
<!-- <strong>*** Please wait while this file is cached... ***</strong> -->
<p>Most files will automatically be opened full screen.</p>
<p>PowerPoint or KeyNote will attempt to display in presenter view.</p>
<p>PDFs, videos, and images will attempt to be displayed mirrored.</p>
<p>Please close the file when finished.</p>
{:else if ($events_loc.launcher.app_mode == 'onsite')}
<strong>*** Please wait while this file loads... ***</strong>
<p>Most files will automatically be opened full screen.</p>
<p>PowerPoint or KeyNote will attempt to display in presenter view.</p>
<p>PDFs, videos, and images will attempt to be displayed mirrored.</p>
<p>Please close the file when finished.</p>
{:else}
<strong>*** Please wait while this file downloads... ***</strong>
<p>Onsite in the Speaker Ready Room and conference session rooms:</p>
<ul>
<li>Most files will automatically be opened full screen.</li>
<li>PowerPoint or KeyNote will attempt to display in presenter view.</li>
<li>PDFs, videos, and images will attempt to be displayed mirrored.</li>
<li>Please close the file when finished.</li>
</ul>
{/if}
</div>
{/if}
<span class="event_file_action">
<!-- First [WORKING!] - Handle opening using a modal. This applies to all Launcher app modes (default, onsite, native) -->
{#if (session_type == 'poster' || open_method == 'modal')}
<!-- <a
href="/event/file/{event_file_id}/download"
download
class="ae_btn btn_info {btn_size}"
on:click|preventDefault={() => {handle_open_method_poster();}}
data-hash_sha256={event_file_obj.hash_sha256}
data-filename={event_file_obj.filename}
title={event_file_obj.filename}
>
<span class="fas fa-paper-plane" class:hidden="{hide_launch_icon}"></span> {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}
</a> -->
<button
type="button"
onclick={() => {
// modal__title = modal_title;
modal__open_event_file_id = event_file_id;
modal__event_file_obj = event_file_obj;
// $events_sess.launcher.modal__open_event_file_id = event_file_id;
// $events_sess.launcher.modal__open = event_file_id;
// $events_sess.launcher.modal__open_event_file_id = event_file_id;
// $events_sess.launcher.modal__event_file_obj = event_file_obj;
if (!modal__title) {
modal__title = event_file_obj.filename;
}
// $events_sess.launcher.modal__title = modal__title;
// $events_sess.launcher.modal__img_src = `/event/file/${event_file_id}/download`;
$events_slct.event_file_id = event_file_id;
$events_slct.event_file_obj = event_file_obj;
// let as_modal_result = open_event_file_as_modal({
// event_file_id: event_file_id,
// filename: event_file_obj.filename,
// extension: event_file_obj.extension,
// modal_title: modal_title
// });
// if (as_modal_result) {
// console.log($events_loc.launcher);
// console.log(event_file_obj);
// events_loc.launcher.set({...$events_loc.launcher, ...as_modal_result});
// }
if ($events_loc.launcher.controller == 'local_push') {
console.log(`Local Push Controller Command: ae_open:event_file=${event_file_id}`);
$events_sess.launcher.controller_cmd = `ae_open:event_file=${event_file_id}`;
$events_sess.launcher.controller_trigger_send = true;
// tick();
core_func.create_ae_obj__activity_log({
api_cfg: $ae_api,
account_id: $ae_loc.account_id,
data_kv: {
name: `Open Poster: ${event_file_obj.filename}`,
object_type: 'event_file',
object_id_random: event_file_id,
action: 'open_poster_w_controller',
meta_json: {
event_file_id: event_file_id,
filename: event_file_obj.filename,
extension: event_file_obj.extension,
modal_title: modal_title
}
},
log_lvl: log_lvl
});
}
}}
class:preset-tonal-success={$events_slct.event_file_id == event_file_id}
class="
btn btn-sm md:btn-md lg:btn-lg
preset-tonal-primary border border-primary-500
min-w-96
"
title={`Open this file in a modal window:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}...\nHosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_id}`}
>
{#if (screen_saver_exts.includes(event_file_obj.extension))}
<span class="fas fa-chart-bar m-1" class:hidden="{hide_launch_icon}"></span>
Open Poster
<!-- {event_file_id} -->
{:else}
<span class="fas fa-paper-plane m-1" class:hidden="{hide_launch_icon}"></span>
{ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}
{/if}
<!-- {$events_sess.launcher.modal__open_event_file_id ?? '-- not set --'} -->
</button>
<!-- {#if ($events_loc.launcher.app_mode == 'native')} -->
<!-- Second [NOT WORKING!!!] - Handle opening a file. This applies to all Launcher app modes (default, onsite, native) -->
{:else if ($events_loc.launcher.app_mode == 'native')}
<a
href="/event/file/{event_file_id}/download?use_os=true"
download
class="ae_btn btn_info {btn_size}"
onclick={preventDefault(() => {handle_open_file();})}
data-hash_sha256={event_file_obj.hash_sha256}
data-filename={event_file_obj.filename}
title={`${event_file_obj.filename} [A] -- SHA256 hash: ${event_file_obj.hash_sha256.slice(0, 10)}...`}
>
<span class="fas fa-paper-plane" class:hidden="{hide_launch_icon}"></span> {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}
</a>
<!-- Third [NOT WORKING!!!] - Handle opening a file. This applies to all Launcher app modes (default, onsite, native) -->
<!-- {:else if ($events_loc.launcher.app_mode == 'onsite' && (event_file_obj.extension == 'ppt' || event_file_obj.extension == 'pptx') && event_file_obj.open_in_os == 'win')}
<a
href="/event/file/{event_file_id}/download?use_os=true" download
class="ae_btn btn_info {btn_size}"
on:click={() => {handle_open_file();}}
data-hash_sha256={event_file_obj.hash_sha256}
data-filename={event_file_obj.filename}
title={`${event_file_obj.filename} [A] -- SHA256 hash: ${event_file_obj.hash_sha256.slice(0, 10)}...`}
>
<span class="fas fa-paper-plane" class:hidden="{hide_launch_icon}"></span> {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}
</a> -->
<!-- Last [WORKING!] - Handle opening a file. This applies to all Launcher app modes (default, onsite, native) -->
{:else}
<button
type="button"
onclick={() => {
let new_filename = event_file_obj.filename;
if ($events_loc.launcher.app_mode == 'onsite' && (event_file_obj.extension == 'ppt' || event_file_obj.extension == 'pptx') && event_file_obj.open_in_os == 'win') {
// Example: the_new_filename.pptxwin
new_filename = event_file_obj.filename + 'win';
}
// ae_promises[event_file_id]
ae_promises[event_file_id] = api.download_hosted_file({
api_cfg: $ae_api,
hosted_file_id: event_file_obj.hosted_file_id_random, // +'x'
return_file: true,
filename: new_filename,
auto_download: true,
log_lvl: 1
});
// window.postMessage({ type: 'download_event_file', event_file_id: event_file_id, filename: event_file_obj.filename, auto_download: true }, '*');
if ($events_loc.launcher.controller == 'local_push') {
console.log(`Local Push Controller Command: ae_download:hosted_file=${event_file_obj.hosted_file_id_random}`);
$events_sess.launcher.controller_cmd = `ae_download:hosted_file=${event_file_obj.hosted_file_id_random}:${new_filename}:${event_file_obj.extension}`;
$events_sess.launcher.controller_trigger_send = true;
// tick();
}
}}
class="
btn btn-sm
preset-tonal-primary border border-primary-500
min-w-72 lg:min-w-96
"
title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}...\nHosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_id}`}
>
{#await ae_promises[event_file_id]}
<span class="text-sm">
<span class="fas fa-spinner fa-spin mx-0.5"></span>
<span class="">
Downloading
{#if $ae_sess.api_download_kv[event_file_obj.hosted_file_id_random]}
{$ae_sess.api_download_kv[event_file_obj.hosted_file_id_random].percent_completed}%
{/if}
:
</span>
</span>
{:then result}
<span class="text-xs">
<span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)} mx-0.5"></span>
{event_file_obj.extension}
{#if result === null}
<span>
<span class="fas fa-exclamation-triangle mx-1"></span>
Download failed!
</span>
{/if}
</span>
{/await}
<span class="grow text-xs md:text-sm border-l border-gray-400 pl-1">
<!-- {event_file_obj.filename_no_ext} -->
<!-- {ae_util.shorten_filename({filename: event_file_obj.filename_w_ext, max_length: 40})} -->
{ae_util.shorten_string({string: event_file_obj.filename_no_ext, begin_length: 45, max_length: 65})}
<!-- {event_file_obj.filename_no_ext.slice(0, 35)} -->
</span>
<span
class="
badge my-0 py-0.5
preset-tonal-success hover:preset-filled-success-500 text-xs xl:text-sm
"
class:hidden={!event_file_obj.file_purpose}
>
{event_file_obj.file_purpose}
</span>
</button>
{/if}
</span>
<span
class="event_file_meta grow text-sm text-gray-500 flex flex-col sm:flex-row gap-1 wrap items-center justify-between w-64 max-w-80 font-mono"
class:hidden="{hide_meta}"
>
<button
type="button"
onclick={() => {
// let new_filename = event_file_obj.filename;
// if ($events_loc.launcher.app_mode == 'onsite' && (event_file_obj.extension == 'ppt' || event_file_obj.extension == 'pptx') && event_file_obj.open_in_os == 'win') {
// // Example: the_new_filename.pptxwin
// new_filename = event_file_obj.filename + 'win';
// }
// ae_promises[event_file_id]
ae_promises[event_file_id] = api.download_hosted_file({
api_cfg: $ae_api,
hosted_file_id: event_file_obj.hosted_file_id_random, // +'x'
return_file: true,
filename: event_file_obj.filename,
auto_download: true,
log_lvl: 1
});
// window.postMessage({ type: 'download_event_file', event_file_id: event_file_id, filename: event_file_obj.filename, auto_download: true }, '*');
}}
class="event_file_os"
class:hidden="{hide_os || 1==1}"
>
{#if event_file_obj.open_in_os == 'win'}
<span class="fab fa-windows"></span> Win
{:else if event_file_obj.open_in_os == 'mac'}
<span class="fab fa-apple"></span> Mac
{:else}
<span class="fas fa-folder-open"></span>
{/if}
</button>
<Element_ae_crud
trigger_patch={ae_triggers.open_in_os}
api_cfg={$ae_api}
object_type={'event_file'}
object_id={event_file_id}
field_name={'open_in_os'}
field_type={'button'}
field_value={ae_tmp.value__open_in_os}
allow_null={false}
hide_edit_btn={true}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.load_ae_obj_id__event_file({
api_cfg: $ae_api,
event_file_id: event_file_obj?.event_file_id_random,
log_lvl: log_lvl
});
}}
>
<!-- {(event_file_obj?.open_in_os ? 'Hidden' : 'Not Hidden')} -->
<button
type="button"
onclick={() => {
// Go from null to win, win to mac, mac to null, null to win, etc.
if (!event_file_obj?.open_in_os) {
ae_tmp.value__open_in_os = 'win';
} else if (event_file_obj?.open_in_os == 'win') {
ae_tmp.value__open_in_os = 'mac';
} else if (event_file_obj?.open_in_os == 'mac') {
ae_tmp.value__open_in_os = null;
} else {
ae_tmp.value__open_in_os = null;
}
// $events_slct.exhibit_tracking_obj.open_in_os = !event_file_obj?.open_in_os;
ae_triggers.open_in_os = true;
}}
class="btn btn-sm transition-all group"
class:preset-tonal-success={event_file_obj?.open_in_os=='win'}
class:preset-tonal-warning={event_file_obj?.open_in_os=='mac'}
disabled={!$ae_loc.trusted_access}
title="Open with: {event_file_obj?.open_in_os ?? 'Default'}"
>
{#if event_file_obj?.open_in_os == 'win'}
<span class="fab fa-windows m-1"></span>
<span class="hidden group-hover:inline-block">
Windows
</span>
{:else if event_file_obj?.open_in_os == 'mac'}
<!-- <span class="fas fa-toggle-off m-1"></span> -->
<span class="fab fa-apple m-1"></span>
<span class="hidden group-hover:inline-block">
macOS
</span>
{:else}
<span class="fas fa-folder-open m-1"></span>
<span class="hidden group-hover:inline-block">
Default
</span>
{/if}
<!-- {@html (event_file_obj?.hide ? '<span class="fas fa-eye m-1"></span> Unhide?' : '<span class="fas fa-eye-slash m-1"></span> Hide?')} -->
</button>
</Element_ae_crud>
<span
class="
event_file_created_on
text-xs text-center
flex flex-row gap-1 items-center justify-end
w-24 md:w-44
preset-filled-surface-100-900
rounded
px-1
py-0.5
"
class:hidden="{hide_created_on}"
>
<span class="fas fa-calendar-day"></span>
<span class="flex flex-row flex-wrap md:flex-nowrap gap-1 items-center justify-end">
<span class="w-18">
{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'date_short')}
</span>
<span class="w-18">
<!-- <span class="fas fa-clock"></span> -->
{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'time_12_short')}
</span>
</span>
</span>
<span
class="
event_file_size
text-xs text-center
flex flex-row gap-1 items-center justify-end
preset-filled-surface-100-900
w-22 max-w-28
rounded
py-0.5
"
class:hidden="{hide_size}"
>
<span class="fas fa-save"></span>
{#if event_file_obj.file_size}{ae_util.format_bytes(event_file_obj.file_size)}{/if}
</span>
<!-- {#if ($events_loc.launcher.app_mode == 'native' || $events_loc.launcher.app_mode == 'onsite')} -->
<!-- {#if (show_bak_download)} -->
<!-- <a href="/event/file/{event_file_id}/download" class="event_file_download" class:hidden="{!show_bak_download}" title="Download with original filename and extension"><span class="fas fa-download"></span></a> -->
<!-- <a href="/event/file/{event_file_id}/download?filename={event_file_obj.filename}&use_os=true" class="ae_btn btn_info {btn_size}">{event_file_obj.filename}</a> -->
<!-- {/if} -->
</span>
<!-- <button
class="ae_btn btn_xs btn_outline_debug"
class:hidden="{hide_api_download}"
on:click={() => {
// if (!confirm('Download file from API server?')) {
// return false;
// }
download_event_file({ 'event_file_id': event_file_id, 'return_file': true, filename: event_file_obj.filename, auto_download: true, log_lvl: 1 });
}}
title="Download file from API server?"
>
<span class="fas fa-download"></span>
</button> -->
</div>
<style>
</style>