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

src/lib/element_websocket_v2.svelte

@@ -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>

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

@@ -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
+        flex flex-row items-center justify-between
-        text-base hover:text-lg
+        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>
+    <span
-    [Online/Offline]
+        class="*:hover:inline px-1 rounded-md"
-    </div>
+        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"
+    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"
-    classHeader="px-1 py-0 md:px-1 md:py-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....????
+            // // This should work....????
-            console.log(`TEST - FAIL??? Local Push Controller Command: ae_close:event_file_modal`);
+            // console.log(`TEST - FAIL??? Local Push Controller Command: ae_close:event_file_modal`);
-            console.log(`Before: ${$events_sess.launcher.controller_trigger_send}`);
+            // console.log(`Before: ${$events_sess.launcher.controller_trigger_send}`);
-            // $events_sess.launcher.controller_cmd = `ae_close:event_file_modal`;
+            // // $events_sess.launcher.controller_cmd = `ae_close:event_file_modal`;
-            // $events_sess.launcher.controller_trigger_send = true;
+            // // $events_sess.launcher.controller_trigger_send = true;
-            // $events_sess = $events_sess;
+            // // $events_sess = $events_sess;
-            // events_sess.set($events_sess);
+            // // events_sess.set($events_sess);
-            // tick();
+            // // tick();
-            // events_sess.set($events_sess);
+            // // events_sess.set($events_sess);
-            console.log(`After: ${$events_sess.launcher.controller_trigger_send}`);
+            // 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"
                 >

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

@@ -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}

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

@@ -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">