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

Finalizing things for LCI. The poster stuff looks better now.

Browse Source
This commit is contained in:
Scott Idem
2024-10-18 18:23:24 -04:00
parent 789d4f96e0
commit 295fa1b49a
4 changed files with 95 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/lib/element_websocket_v2.svelte
View File

@@ -13,6 +13,7 @@ export let cmd: null|string = null;
export let msg: null|string = null;
export let type: null|string = null; // msg, cmd, json, hello, bye
export let trigger_send: any = null;
export let classes: string = 'container p-1 bg-pink-100 text-xs mx-auto pb-16 mb-20 sm:mb-12 md:mb-8';
// *** Set initial variables
const dispatch = createEventDispatcher();
@@ -226,7 +227,7 @@ function handle_send_ws_data() {
</script>
<section class="ae_element__websocket container p-1 bg-pink-100 text-xs mx-auto pb-16 mb-10">
<section class="ae_element__websocket container p-1 bg-pink-100 text-xs mx-auto pb-16 mb-20 ">
<header>
<h1 class="font-bold text-center">Websocket Messages &amp; Commands</h1>

121
src/routes/events/[event_id]/(launcher)/+layout.svelte
View File

@@ -270,7 +270,7 @@ function handle_ws_recv(event) {
$events_sess.launcher.modal__open = $events_slct.event_file_id;
let modal_title = null;
if (!modal_title) {
modal_title = 'test'; // event_file_obj.filename;
modal_title = '*'; // event_file_obj.filename;
}
$events_sess.launcher.modal__title = modal_title;
// $events_sess.launcher.modal__img_src = `/event/file/${event_file_obj.event_file_id_random}/download`;
@@ -443,7 +443,7 @@ export let close_event_file_as_modal = function close_event_file_as_modal({}) {
</title>
</svelte:head>
<div class="static max-w-screen-xl m-auto border border-gray-200 dark:border-gray-600 mt-12 mb-12">
<div class="static max-w-screen-xl m-auto border border-gray-200 dark:border-gray-600 mt-12 mb-14 sm:mb-12">
{#if !$lq__event_obj}
@@ -457,10 +457,15 @@ export let close_event_file_as_modal = function close_event_file_as_modal({}) {
class="
absolute top-0 start-0 z-20 w-full p-1
flex flex-row items-center justify-evenly bg-slate-200
text-sm hover:text-base
m-auto
opacity-50 hover:opacity-100
transition-all duration-1000
"
>
<h3 class="h4 text-center italic">&AElig; Presentation Launcher</h3>
<h3 class="hidden sm:inline-block h4 text-center italic">
&AElig; Presentation Launcher
</h3>
<h2 class="h3 text-center">{$lq__event_obj.cfg_json?.short_name}</h2>
<h3 class="h4 text-center italic">
{$lq__event_location_obj?.name}
@@ -578,8 +583,9 @@ export let close_event_file_as_modal = function close_event_file_as_modal({}) {
<Footer
class="
absolute bottom-0 start-0 z-20 w-full p-1
md:flex md:items-center md:justify-between
text-base hover:text-lg
flex flex-row items-center justify-between
sm:flex-row md:items-center md:justify-between
text-xs hover:text-base
shadow
bg-gray-200 border-t border-gray-200
dark:bg-gray-800 dark:border-gray-600
@@ -587,25 +593,51 @@ export let close_event_file_as_modal = function close_event_file_as_modal({}) {
transition-all duration-1000
"
>
<div>
<!-- <div>
[Help]
</div>
</div> -->
<div class="slct_location_name">
<span class="fas fa-map-marker-alt"></span>
{$lq__event_location_obj?.name}
</div>
<div>
[Online/Offline]
</div>
<span
class="*:hover:inline px-1 rounded-md"
class:variant-ghost-warning={!$events_loc.launcher.ws_connect}
class:variant-ghost-success={$events_loc.launcher.ws_connect}
>
{#if $events_sess.launcher.ws_connect_status == 'connected'}
<span class="fas fa-wifi mx-1"></span>
<span class="hidden">
WebSocket Connected
</span>
{:else}
<span class="fas fa-times mx-1"></span>
<span class="hidden">
WebSocket Disconnected
</span>
{/if}
</span>
<div>
<span
class:hidden={$events_loc.launcher.app_mode != 'native'}
class="*:hover:inline px-1 rounded-md"
class:variant-ghost-warning={!$events_sess.launcher?.av_recording_status}
class:variant-ghost-success={$events_sess.launcher?.av_recording_status}
>
{#if $events_sess.launcher?.av_recording_status}
<span class="fas fa-video"></span> AV Recording Active
<span class="fas fa-video mx-1"></span>
<span class="hidden">
AV Recording Active
</span>
{:else}
<span class="fas fa-video-slash"></span> AV Recording Inactive
<span class="fas fa-video-slash mx-1"></span>
<span class="hidden">
AV Recording Inactive
</span>
{/if}
</div>
</span>
<div class="current_datetime">
{ae_util.iso_datetime_formatter($time,'date_full_no_year')}
@@ -623,7 +655,9 @@ export let close_event_file_as_modal = function close_event_file_as_modal({}) {
<button
type="button"
on:click={() => ($events_loc.launcher.hide_drawer__cfg = false)}
class="btn btn-sm p-0.5 variant-soft-error hover:variant-filled-error"
class="btn btn-sm p-0.5 variant-soft-error hover:variant-filled-error transition-all duration-1000"
class:opacity-25={!$ae_loc.trusted_access}
class:hover:opacity-75={!$ae_loc.trusted_access}
>
<span class="fas fa-biohazard"></span>
</button>
@@ -731,22 +765,23 @@ export let close_event_file_as_modal = function close_event_file_as_modal({}) {
bind:open={$events_sess.launcher.modal__open}
autoclose={false}
size="xl"
class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
classHeader="px-1 py-0 md:px-1 md:py-0"
class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y m-0"
dialogClass="fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-0 flex"
classHeader="px-1 py-0 md:px-1 md:py-0 absolute top-0 start-0 end-0 bg-gray-200 dark:bg-gray-800 opacity-50 hover:opacity-75"
bodyClass='p-0 flex-1 overflow-y-auto overscroll-contain'
classBody="flex flex-col items-center p-0 md:px-0 py-0"
on:close={async () => {
if ($events_loc.launcher.controller == 'local_push' && $events_sess.launcher.ws_connect_status == 'connected') {
// This should work....????
console.log(`TEST - FAIL??? Local Push Controller Command: ae_close:event_file_modal`);
console.log(`Before: ${$events_sess.launcher.controller_trigger_send}`);
// $events_sess.launcher.controller_cmd = `ae_close:event_file_modal`;
// $events_sess.launcher.controller_trigger_send = true;
// $events_sess = $events_sess;
// events_sess.set($events_sess);
// tick();
// events_sess.set($events_sess);
console.log(`After: ${$events_sess.launcher.controller_trigger_send}`);
// // This should work....????
// console.log(`TEST - FAIL??? Local Push Controller Command: ae_close:event_file_modal`);
// console.log(`Before: ${$events_sess.launcher.controller_trigger_send}`);
// // $events_sess.launcher.controller_cmd = `ae_close:event_file_modal`;
// // $events_sess.launcher.controller_trigger_send = true;
// // $events_sess = $events_sess;
// // events_sess.set($events_sess);
// // tick();
// // events_sess.set($events_sess);
// console.log(`After: ${$events_sess.launcher.controller_trigger_send}`);
}
}}
>
@@ -767,9 +802,10 @@ export let close_event_file_as_modal = function close_event_file_as_modal({}) {
// $events_sess.launcher.modal__open = false;
}}
class="absolute top-0 right-20 m-1 p-1 btn btn-sm variant-soft-error hover:variant-filled-error"
class:hidden={$events_loc.launcher.controller != 'local_push' || $events_sess.launcher.ws_connect_status != 'connected'}
>
<span class="fas fa-times m-1"></span>
Close Remote Display Only
Close Remote Poster Display Only
</button>
<!-- <span class="aspect-[9/16] max-h-96"> -->
@@ -780,13 +816,40 @@ export let close_event_file_as_modal = function close_event_file_as_modal({}) {
/>
<!-- </span> -->
<button
on:click={() => {
console.log(`TEST - THIS WORKS... Local Push Controller Command: ae_close:event_file_modal`);
// This is not terrible if we set autoclose to true.
$events_sess.launcher.controller_cmd = `ae_close:event_file_modal`;
$events_sess.launcher.controller_trigger_send = true;
// $events_sess.launcher.modal__open = false;
}}
class="absolute bottom-0 left-20 m-1 p-1 btn btn-sm variant-soft-error hover:variant-filled-error"
class:hidden={$events_loc.launcher.controller != 'local_push' || $events_sess.launcher.ws_connect_status != 'connected'}
>
<span class="fas fa-times m-1"></span>
Close Remote Poster Display Only
</button>
<!-- Need to add a re-open button... -->
<button
on:click={() => {
$events_sess.launcher.modal__open = false;
}}
class="absolute bottom-0 right-20 m-1 p-1 btn btn-sm variant-soft-warning hover:variant-ghost-warning"
class:hidden={!$ae_loc.trusted_access && ($events_loc.launcher.controller != 'local_push' || $events_sess.launcher.ws_connect_status != 'connected')}
>
<span class="fas fa-times m-1"></span>
Close Controller Poster Only
</button>
<!-- <svelte:fragment slot="footer">
<div class="text-center w-full">
<button
on:click={() => {
$events_sess.pres_mgmt.show_modal__session_poc_agree = false;
$events_sess.launcher.modal__open = false;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
>

42
src/routes/events/[event_id]/(launcher)/launcher_presenter_view.svelte
View File

@@ -72,48 +72,6 @@ $: lq__event_file_obj_li = liveQuery(async () => {
class="flex flex-col md:flex-row wrap gap justify-center"
class:hidden={!$events_loc.launcher.show_content__hidden_files && event_file_obj.hide}
>
<!-- <button
disabled={!$ae_loc.trusted_access}
on:click={() => {
// ae_promises[event_file_obj.event_file_id_random]
ae_promises[event_file_obj.event_file_id_random] = api.download_hosted_file({
api_cfg: $ae_api,
hosted_file_id: event_file_obj.hosted_file_id_random,
return_file: true,
filename: event_file_obj.filename,
auto_download: true,
log_lvl: 0
});
// window.postMessage({ type: 'download_event_file', event_file_id: event_file_obj.event_file_id_random, filename: event_file_obj.filename, auto_download: true }, '*');
}}
class="btn btn-sm lg:btn-md variant-soft-primary hover:variant-filled-primary 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)}... Hosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_obj.event_file_id_random}`}
>
{#await ae_promises[event_file_obj.event_file_id_random]}
<span class="fas fa-spinner fa-spin mx-1"></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>
{:then}
<span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)}"></span>
{/await}
<span class="grow">
{ae_util.shorten_filename({filename: event_file_obj.filename, max_length: 30})}
</span>
<span
class="badge variant-glass-success hover:variant-filled-success text-sm"
class:hidden={!event_file_obj.file_purpose}
>
{event_file_obj.file_purpose}
</span>
</button> -->
<Event_launcher_file_cont
event_file_obj={event_file_obj}

2
src/routes/events/[event_id]/(launcher)/launcher_session_view.svelte
View File

@@ -324,7 +324,7 @@ ae_promises[$events_slct.event_session_id] = events_func.load_ae_obj_li__event_p
<!-- Maybe set max with? max-w-screen-md -->
<ul class="event_presentation_list max-w-full space-y-2">
{#each $lq__event_presentation_obj_li as event_presentation_obj}
<li class="border-b-2 border-gray-300 my-1 py-1">
<li class="border-b-2 border-gray-300 my-1 py-1 text-center md:text-left">
<!-- The presentation information -->
<div class="event_presentation_datetime_name flex flex-row justify-evenly gap-4">