Work on the Launder and Websockets. It needs work.

src/lib/element_websocket_v2.svelte

@@ -1,28 +1,58 @@
 <script lang="ts">
-import { createEventDispatcher, onMount } from 'svelte';
+interface Props {
+    log_lvl?: number;
+    ws_connect?: boolean;
+    ws_connect_status?: null|string;
+    ws_server?: string;
+    base_url?: any;
+    group_id?: string;
+    client_id?: any;
+    cmd?: null|string;
+    msg?: null|string;
+    type?: null|string; // msg, cmd, json, hello, bye
+    trigger_send?: any;
+    classes?: string;
+    hide__ws_form?: boolean;
+    hide__ws_messages?: boolean;
+    hide__ws_commands?: boolean;
 
-export let log_lvl: number = 0;
+    ws_conn_status?: any;
-export let ws_connect: boolean = false;
+    ws_recv_status?: any;
-export let ws_connect_status: null|string = null;
+    ws_sent_status?: any;
-export let ws_server = 'dev-api.oneskyit.com';
+}
-export let base_url = `wss://${ws_server}/ws`;
+
-export let group_id = 'ae-grp-99';
+let {
-export let client_id = Date.now();
+    log_lvl = 0,
+    ws_connect = false,
+    ws_connect_status = $bindable(null),
+    ws_server = 'dev-api.oneskyit.com',
+    base_url = `wss://${ws_server}/ws`,
+    group_id = $bindable('ae-grp-99'),
+    client_id = Date.now(),
+    cmd = $bindable(null),
+    msg = $bindable(null),
+    type = null,
+    trigger_send = $bindable(null),
+    classes = 'container p-1 bg-pink-100 text-xs mx-auto pb-16 mb-20 sm:mb-12 md:mb-8',
+    hide__ws_form = $bindable(true),
+    hide__ws_messages = $bindable(false),
+    hide__ws_commands = $bindable(false),
+
+    ws_conn_status = $bindable(null),
+    ws_recv_status = $bindable(null),
+    ws_sent_status = $bindable(null)
+}: Props = $props();
+
+
+// import { run, preventDefault } from 'svelte/legacy';
+// import { createEventDispatcher, onMount } from 'svelte';
 
-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';
-export let hide__ws_form: boolean = true;
-export let hide__ws_messages: boolean = false;
-export let hide__ws_commands: boolean = false;
 
 // *** Set initial variables
-const dispatch = createEventDispatcher();
+// const dispatch = createEventDispatcher();
 
 // JSON formatted data
-let ws_data = {
+let ws_data = $state({
     'client_id': null, // The device or browser ID if available.
     // 'src': null, // Sending client
     // 'account_id': null, // Essentially the person ID or user ID if available.
@@ -34,20 +64,31 @@ let ws_data = {
     'cmd': null, // Command string
     // 'data': null,
     // 'b64': null,
-}
+})
 
-let ws_received_list_cmd: string[] = [];
+let ws_received_list_cmd: string[] = $state([]);
-let ws_received_list_other: any[] = [];
+let ws_received_list_other: any[] = $state([]);
 let ws_received_list_msg: string[] = [];
 
 
-onMount(async () => {
+// onMount(async () => {
-    console.log('** Component Mounted: ** Element Websocket v2');
+//     console.log('** Component Mounted: ** Element Websocket v2');
-});
+// });
 
+// *** Functions and Logic
 
 function ws_connect_group_id({group_id, client_id}) {
-    console.log(`${base_url}/group/${group_id}/client/${client_id}`);
+    if (!group_id) {
+        group_id = 'ae-grp-99';
+        console.log(`WS: No group_id specified! Setting to default: ${group_id}`);
+        return false;
+    }
+    if (!client_id) {
+        client_id = Date.now();
+        console.log(`WS: No client_id specified! Setting to current timestamp: ${client_id}`);
+        // return false;
+    }
+    console.log(`WS Connect URL: ${base_url}/group/${group_id}/client/${client_id}`);
     let ws_connection = new WebSocket(`${base_url}/group/${group_id}/client/${client_id}`);
 
     ws_connection.onopen = function() {
@@ -55,9 +96,10 @@ function ws_connect_group_id({group_id, client_id}) {
 
         ws_connect_status = 'connected';
 
-        dispatch('ws_conn', {
+        // dispatch('ws_conn', {
-            'status': 'connected'
+        //     'status': 'connected'
-        });
+        // });
+        ws_conn_status = 'connected';
 
         // ws_connection.send(JSON.stringify({
         //     client_id: client_id,
@@ -105,7 +147,18 @@ function ws_connect_group_id({group_id, client_id}) {
             ws_received_list_other = ws_received_list_other; // trigger Svelte update -2024-10-04
         }
 
-        dispatch('ws_recv', {
+        // dispatch('ws_recv', {
+        //     // 'client_id': ws_data.client_id, // The device or browser ID if available.
+        //     'src': ws_recv_data.client_id, // The device or browser ID if available.
+        //     // 'account_id': ws_recv_data.account_id, // Essentially the person ID or user ID if available.
+        //     'dest': group_id, // Destination client
+        //     'target': ws_recv_data.target, // echo, dm (direct), grp (group), all (broadcast)
+        //     'type': ws_recv_data.type, // Message type (msg, cmd, json, hello, bye)
+        //     // 'grp': ws_recv_data.grp, // Destination group
+        //     'msg': ws_recv_data.msg, // Message string
+        //     'cmd': ws_recv_data.cmd, // Command string
+        // });
+        ws_recv_status = {
             // 'client_id': ws_data.client_id, // The device or browser ID if available.
             'src': ws_recv_data.client_id, // The device or browser ID if available.
             // 'account_id': ws_recv_data.account_id, // Essentially the person ID or user ID if available.
@@ -115,7 +168,7 @@ function ws_connect_group_id({group_id, client_id}) {
             // 'grp': ws_recv_data.grp, // Destination group
             'msg': ws_recv_data.msg, // Message string
             'cmd': ws_recv_data.cmd, // Command string
-        });
+        };
 
     };
 
@@ -142,9 +195,10 @@ function ws_connect_group_id({group_id, client_id}) {
         ws_received_list_other.unshift(fake_ws_recv_data);
         ws_received_list_other = ws_received_list_other; // trigger Svelte update -2024-10-04
 
-        dispatch('ws_conn', {
+        // dispatch('ws_conn', {
-            'status': 'disconnected'
+        //     'status': 'disconnected'
-        });
+        // });
+        ws_conn_status = 'disconnected';
 
         if (ws_connect) {
             setTimeout(function() {
@@ -179,23 +233,8 @@ function ws_connect_group_id({group_id, client_id}) {
 }
 
 // Start the WS function
-let ws_group: any = null;
+let ws_group: any = $state(null);
-$: if (ws_connect && group_id) {
-    ws_group = ws_connect_group_id({group_id: group_id, client_id: client_id});
-} else {
-    ws_group?.close();
-}
 
-$: if (trigger_send && cmd) {
-    trigger_send = null;
-    console.log('WS: Send triggered!');
-    console.log(cmd);
-    ws_data.target = 'group';
-    ws_data.type = 'cmd';
-    ws_data.cmd = cmd;
-    handle_send_ws_data();
-    cmd = '';
-}
 
 function handle_send_ws_data() {
     console.log(ws_data);
@@ -208,9 +247,21 @@ function handle_send_ws_data() {
     }
     let ws_data_json_str = JSON.stringify(ws_data);
     let resp = ws_group.send(ws_data_json_str);
-    console.log(resp);
+    console.log(`WS: Send data response:`, resp);
 
-    dispatch('ws_sent', {
+    // dispatch('ws_sent', {
+    //     // 'client_id': ws_data.client_id, // The device or browser ID if available.
+    //     'src': ws_data.client_id, // The device or browser ID if available.
+    //     // 'account_id': ws_data.account_id, // Essentially the person ID or user ID if available.
+    //     'dest': group_id, // Destination client
+    //     'group_id': group_id,
+    //     'target': ws_data.target, // echo, dm (direct), grp (group), all (broadcast)
+    //     'type': ws_data.type, // Message type (msg, cmd, json, hello, bye)
+    //     // 'grp': ws_data.grp, // Destination group
+    //     'msg': ws_data.msg, // Message string
+    //     'cmd': ws_data.cmd, // Command string
+    // });
+    ws_sent_status = {
         // 'client_id': ws_data.client_id, // The device or browser ID if available.
         'src': ws_data.client_id, // The device or browser ID if available.
         // 'account_id': ws_data.account_id, // Essentially the person ID or user ID if available.
@@ -221,12 +272,41 @@ function handle_send_ws_data() {
         // 'grp': ws_data.grp, // Destination group
         'msg': ws_data.msg, // Message string
         'cmd': ws_data.cmd, // Command string
-    });
+    };
 
     cmd = '';
     msg = '';
 }
 
+$effect(() => {
+    if (ws_connect && group_id) {
+        ws_group = ws_connect_group_id({group_id: group_id, client_id: client_id});
+    } else {
+        ws_group?.close();
+    }
+});
+
+$effect(() => {
+    if (trigger_send && cmd) {
+        trigger_send = null;
+        console.log('WS: Send triggered!');
+        console.log(cmd);
+        ws_data.target = 'group';
+        ws_data.type = 'cmd';
+        ws_data.cmd = cmd;
+        handle_send_ws_data();
+        cmd = '';
+    }
+});
+
+
+function preventDefault(fn) {
+    return function (event) {
+        event.preventDefault();
+        fn.call(this, event);
+    };
+}
+
 </script>
 
 
@@ -235,7 +315,7 @@ function handle_send_ws_data() {
 <span class="absolute top-0 right-0 flex flex-col gap-1">
     <button
         type="button"
-        on:click={() => {
+        onclick={() => {
             hide__ws_form = !hide__ws_form;
         }}
         class="btn btn-sm text-xs hover:preset-filled-tertiary-500"
@@ -250,7 +330,7 @@ function handle_send_ws_data() {
     </button>
     <button
         type="button"
-        on:click={() => {
+        onclick={() => {
             hide__ws_messages = !hide__ws_messages;
         }}
         class="btn btn-sm text-xs hover:preset-filled-tertiary-500"
@@ -265,7 +345,7 @@ function handle_send_ws_data() {
     </button>
     <button
         type="button"
-        on:click={() => {
+        onclick={() => {
             hide__ws_commands = !hide__ws_commands;
         }}
         class="btn btn-sm text-xs hover:preset-filled-tertiary-500"
@@ -311,7 +391,7 @@ function handle_send_ws_data() {
 
 {#if !hide__ws_form}
 <form
-    on:submit|preventDefault={handle_send_ws_data}
+    onsubmit={preventDefault(handle_send_ws_data)}
     >
     <select
         bind:value={ws_data.type}

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

@@ -308,12 +308,18 @@ let ae_promises: key_val = {
     slct_event_presentation_li: null
 };
 
+let trigger_handle_ws_conn = $state(false);
+let trigger_handle_ws_recv = $state(false);
+let trigger_handle_ws_sent = $state(false);
 
 /* *** BEGIN *** Handle WebSocket events */
-function handle_ws_conn(event) {
+function handle_ws_conn(ws_conn_status: any) {
-    console.log('*** handle_ws_conn() ***');
+    log_lvl = 1;
-    console.log(event);
+    if (log_lvl) {
-    if (event.detail.status == 'connected') {
+        console.log('*** handle_ws_conn() ***', ws_conn_status);
+    }
+
+    if (ws_conn_status.status == 'connected') {
         $events_sess.launcher.ws = {}; // Reset WS related values on a new connection.
         $events_sess.launcher.ws.status = 'connected';
     } else {
@@ -326,13 +332,14 @@ function handle_ws_conn(event) {
 
 // This client received a WebSocket message.
 // When this is called something seems to go wrong. It creates a loop when connected.
-function handle_ws_recv(event) {
+function handle_ws_recv(ws_recv_status: any) {
+    log_lvl = 1;
     if (log_lvl) {
-        console.log('*** handle_ws_recv() ***', event);
+        console.log('*** handle_ws_recv() ***', ws_recv_status);
     }
 
-    if (event.detail.type == 'cmd' && event.detail.cmd) {
+    if (ws_recv_status.type == 'cmd' && ws_recv_status.cmd) {
-        let cmd = event.detail.cmd;
+        let cmd = ws_recv_status.cmd;
         // console.log(cmd);
 
         if ($events_loc.launcher.controller != 'remote') {
@@ -500,11 +507,10 @@ function handle_ws_recv(event) {
 
 
 // This client sent a WebSocket message.
-function handle_ws_sent(event) {
+function handle_ws_sent(ws_sent_status: any) {
-    console.log('*** handle_ws_sent() ***');
+    console.log('*** handle_ws_sent() ***', ws_sent_status);
-    console.log(event);
+    let command = ws_sent_status.cmd;
-    let command = event.detail.cmd;
+    console.log(`CMD: ${command}`);
-    console.log(command);
 
     $events_sess.launcher.controller_cmd = null;
     $events_sess.launcher.controller_trigger_send = null;
@@ -527,6 +533,30 @@ $effect(() => {
     }
 });
 
+$effect(() => {
+    if (trigger_handle_ws_conn) {
+        let ws_conn_status = trigger_handle_ws_conn; // This a string status
+        trigger_handle_ws_conn = false;
+        handle_ws_conn(ws_conn_status);
+    }
+});
+
+$effect(() => {
+    if (trigger_handle_ws_recv) {
+        let ws_recv_status = trigger_handle_ws_recv; // This should be a key value object.
+        trigger_handle_ws_recv = false;
+        handle_ws_recv(ws_recv_status);
+    }
+});
+
+$effect(() => {
+    if (trigger_handle_ws_sent) {
+        let ws_sent_status = trigger_handle_ws_sent; // This should be a key value object.
+        trigger_handle_ws_sent = false;
+        handle_ws_sent(ws_sent_status);
+    }
+});
+
 async function handle_event_file_open () {
     let event_file_obj;
     if ($events_slct.event_file_obj && $events_slct.event_file_obj.event_file_id_random) {
@@ -1064,7 +1094,7 @@ $effect(() => {
 <!-- Main modal -->
  <!-- NOTE: The modal size is intentionally set to "". This makes it undefined and allows the modal to be as large as the content. -->
 <Modal
-    title="{$events_sess.launcher?.modal__title}"
+    title={$events_sess.launcher?.modal__title}
     bind:open={$events_sess.launcher.modal__open}
     autoclose={false}
     size=""
@@ -1110,13 +1140,22 @@ $effect(() => {
         <span class="fas fa-times m-1"></span>
         Close Remote Poster Display Only
     </button>
-
+    Open: {$ae_api.base_url} {$events_sess.launcher.modal__open}
+    <!-- /event/file/{$events_slct.event_file_obj.event_file_id_random}/download?filename={$events_slct.event_file_obj.filename}&x_no_account_id_token=direct-download -->
     <!-- <span class="aspect-9/16 max-h-96"> -->
+     {#if $events_sess.launcher.modal__open}
     <img
         src="{$ae_api.base_url}/event/file/{$events_sess.launcher.modal__open}/download?filename={$events_slct.event_file_obj.filename}&x_no_account_id_token=direct-download"
-        alt="Placeholder"
+        alt="Placeholder: /event/file/{$events_sess.launcher.modal__open}/download?filename={$events_slct.event_file_obj.filename}&x_no_account_id_token=direct-download"
         class="margin-auto max-h-full max-w-full"
         />
+    {:else}
+    <div class="flex flex-row items-center justify-center p-4">
+        <span class="fas fa-info-circle mx-1"></span>
+        <span>No image selected</span>
+    </div>
+    {/if}
+
     <!-- </span> -->
 
     <button
@@ -1183,9 +1222,9 @@ $effect(() => {
         bind:hide__ws_messages={$events_loc.launcher.hide__ws_messages}
         bind:hide__ws_commands={$events_loc.launcher.hide__ws_commands}
 
-        on:ws_conn={handle_ws_conn}
+        bind:ws_conn_status={trigger_handle_ws_conn}
-        on:ws_recv={handle_ws_recv}
+        bind:ws_recv_status={trigger_handle_ws_recv}
-        on:ws_sent={handle_ws_sent}
+        bind:ws_sent_status={trigger_handle_ws_sent}
 
         />
         <!-- on:ws_recv={handle_ws_recv} -->

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

@@ -8,7 +8,6 @@ let { log_lvl = 0 }: Props = $props();
 import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger, time } from '$lib/ae_stores';
 import { events_loc, events_sess, events_slct, events_trigger, events_trig } from '$lib/ae_events_stores';
 
-// import Element_websocket_v2 from '$lib/element_websocket_v2.svelte';
 </script>
 
 

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

@@ -365,7 +365,7 @@ async function handle_open_file() {
         >
         {#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
+            Open Poster {event_file_obj.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})}