small fixes

frontend/src/lib/components/ImagePlayer.svelte

@@ -7,8 +7,8 @@
   import Expand from '$lib/icons/expand.svelte';
   import { snapImage, expandWindow } from '$lib/utils';
 
-  $: isLCMRunning = $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED && 
-                 $lcmLiveStatus !== LCMLiveStatus.ERROR;
+  $: isLCMRunning =
+    $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED && $lcmLiveStatus !== LCMLiveStatus.ERROR;
   let imageEl: HTMLImageElement;
   let expandedWindow: Window;
   let isExpanded = false;
@@ -42,9 +42,9 @@
   <!-- svelte-ignore a11y-missing-attribute -->
   {#if $lcmLiveStatus === LCMLiveStatus.CONNECTING}
     <!-- Show connecting spinner -->
-    <div class="flex items-center justify-center h-full w-full">
-      <div class="animate-spin rounded-full h-16 w-16 border-b-2 border-white"></div>
-      <p class="text-white ml-2">Connecting...</p>
+    <div class="flex h-full w-full items-center justify-center">
+      <div class="h-16 w-16 animate-spin rounded-full border-b-2 border-white"></div>
+      <p class="ml-2 text-white">Connecting...</p>
     </div>
   {:else if isLCMRunning}
     {#if !isExpanded}
@@ -81,10 +81,10 @@
     </div>
   {:else if $lcmLiveStatus === LCMLiveStatus.ERROR}
     <!-- Show error state with red border -->
-    <div class="flex items-center justify-center h-full w-full border-2 border-red-500 rounded-lg bg-gray-900">
-      <p class="text-center text-white p-4">
-        Connection error
-      </p>
+    <div
+      class="flex h-full w-full items-center justify-center rounded-lg border-2 border-red-500 bg-gray-900"
+    >
+      <p class="p-4 text-center text-white">Connection error</p>
     </div>
   {:else}
     <img

frontend/src/lib/components/Warning.svelte

@@ -12,16 +12,20 @@
 </script>
 
 {#if message}
-  <div class="fixed right-0 top-0 m-4 cursor-pointer" on:click={() => (message = '')}>
-    <div class="rounded bg-red-800 p-4 text-white">
-      {message}
-    </div>
-    <div class="bar transition-all duration-500" style="width: 0;"></div>
+  <div role="alert" class="fixed right-0 top-0 m-4">
+    <button
+      type="button"
+      class="w-full"
+      on:click={() => (message = '')}
+      on:keydown={(e) => e.key === 'Enter' && (message = '')}
+    >
+      <div class="rounded bg-red-800 p-4 text-white">
+        {message}
+      </div>
+      <div class="bar transition-all duration-500" style="width: 0;"></div>
+    </button>
   </div>
 {/if}
 
 <style lang="postcss" scoped>
-  .button {
-    @apply rounded bg-gray-700 font-normal text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:bg-gray-300 dark:disabled:bg-gray-700 dark:disabled:text-black;
-  }
 </style>

frontend/src/lib/lcmLive.ts

@@ -76,7 +76,7 @@ export const lcmLiveActions = {
           }
 
           // If connection was never established (close without open)
-          if (event.code === 1006 && streamId.get() === null) {
+          if (event.code === 1006 && get(streamId) === null) {
             reject(new Error('Cannot connect to server. Please try again later.'));
           }
         };

frontend/src/piexifjs.d.ts

@@ -0,0 +1,12 @@
+declare module 'piexifjs' {
+  export const ImageIFD: {
+    Make: number;
+    ImageDescription: number;
+    Software: number;
+  };
+  export const ExifIFD: {
+    DateTimeOriginal: number;
+  };
+  export function dump(exifObj: any): any;
+  export function insert(exifBytes: any, dataURL: string): string;
+}

frontend/src/routes/+page.svelte

@@ -57,10 +57,10 @@
     }
   }
 
-  $: isLCMRunning = $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED && 
-                 $lcmLiveStatus !== LCMLiveStatus.ERROR;
+  $: isLCMRunning =
+    $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED && $lcmLiveStatus !== LCMLiveStatus.ERROR;
   $: isConnecting = $lcmLiveStatus === LCMLiveStatus.CONNECTING;
-                 
+
   $: {
     // Set warning messages based on lcmLiveStatus
     if ($lcmLiveStatus === LCMLiveStatus.TIMEOUT) {
@@ -76,17 +76,17 @@
         if (isConnecting) {
           return; // Don't allow multiple connection attempts
         }
-        
+
         // Clear any previous warning messages
         warningMessage = '';
         disabled = true;
-        
+
         try {
           if (isImageMode) {
             await mediaStreamActions.enumerateDevices();
             await mediaStreamActions.start();
           }
-          
+
           await lcmLiveActions.start(getSreamdata);
           toggleQueueChecker(false);
         } finally {
@@ -96,7 +96,7 @@
       } else {
         // Handle stopping - disable button during this process too
         disabled = true;
-        
+
         try {
           if (isImageMode) {
             mediaStreamActions.stop();
@@ -114,19 +114,19 @@
       toggleQueueChecker(true);
     }
   }
-  
+
   // Reconnect function for automatic reconnection
   async function reconnect() {
     try {
       disabled = true;
       warningMessage = 'Reconnecting...';
-      
+
       if (isImageMode) {
         await mediaStreamActions.stop();
         await mediaStreamActions.enumerateDevices();
         await mediaStreamActions.start();
       }
-      
+
       await lcmLiveActions.reconnect(getSreamdata);
       warningMessage = '';
       toggleQueueChecker(false);
@@ -162,13 +162,10 @@
         > and run it on your own GPU.
       </p>
     {/if}
-    
+
     {#if $lcmLiveStatus === LCMLiveStatus.ERROR}
-      <p class="text-sm mt-2">
-        <button 
-          class="text-blue-500 underline hover:no-underline" 
-          on:click={reconnect}
-          disabled={disabled}>
+      <p class="mt-2 text-sm">
+        <button class="text-blue-500 underline hover:no-underline" on:click={reconnect} {disabled}>
           Try reconnecting
         </button>
       </p>