radames commited on
Commit
bea2d0b
·
1 Parent(s): 9927543

small fixes

Browse files
frontend/src/lib/components/ImagePlayer.svelte CHANGED
@@ -7,8 +7,8 @@
7
  import Expand from '$lib/icons/expand.svelte';
8
  import { snapImage, expandWindow } from '$lib/utils';
9
 
10
- $: isLCMRunning = $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED &&
11
- $lcmLiveStatus !== LCMLiveStatus.ERROR;
12
  let imageEl: HTMLImageElement;
13
  let expandedWindow: Window;
14
  let isExpanded = false;
@@ -42,9 +42,9 @@
42
  <!-- svelte-ignore a11y-missing-attribute -->
43
  {#if $lcmLiveStatus === LCMLiveStatus.CONNECTING}
44
  <!-- Show connecting spinner -->
45
- <div class="flex items-center justify-center h-full w-full">
46
- <div class="animate-spin rounded-full h-16 w-16 border-b-2 border-white"></div>
47
- <p class="text-white ml-2">Connecting...</p>
48
  </div>
49
  {:else if isLCMRunning}
50
  {#if !isExpanded}
@@ -81,10 +81,10 @@
81
  </div>
82
  {:else if $lcmLiveStatus === LCMLiveStatus.ERROR}
83
  <!-- Show error state with red border -->
84
- <div class="flex items-center justify-center h-full w-full border-2 border-red-500 rounded-lg bg-gray-900">
85
- <p class="text-center text-white p-4">
86
- Connection error
87
- </p>
88
  </div>
89
  {:else}
90
  <img
 
7
  import Expand from '$lib/icons/expand.svelte';
8
  import { snapImage, expandWindow } from '$lib/utils';
9
 
10
+ $: isLCMRunning =
11
+ $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED && $lcmLiveStatus !== LCMLiveStatus.ERROR;
12
  let imageEl: HTMLImageElement;
13
  let expandedWindow: Window;
14
  let isExpanded = false;
 
42
  <!-- svelte-ignore a11y-missing-attribute -->
43
  {#if $lcmLiveStatus === LCMLiveStatus.CONNECTING}
44
  <!-- Show connecting spinner -->
45
+ <div class="flex h-full w-full items-center justify-center">
46
+ <div class="h-16 w-16 animate-spin rounded-full border-b-2 border-white"></div>
47
+ <p class="ml-2 text-white">Connecting...</p>
48
  </div>
49
  {:else if isLCMRunning}
50
  {#if !isExpanded}
 
81
  </div>
82
  {:else if $lcmLiveStatus === LCMLiveStatus.ERROR}
83
  <!-- Show error state with red border -->
84
+ <div
85
+ class="flex h-full w-full items-center justify-center rounded-lg border-2 border-red-500 bg-gray-900"
86
+ >
87
+ <p class="p-4 text-center text-white">Connection error</p>
88
  </div>
89
  {:else}
90
  <img
frontend/src/lib/components/Warning.svelte CHANGED
@@ -12,16 +12,20 @@
12
  </script>
13
 
14
  {#if message}
15
- <div class="fixed right-0 top-0 m-4 cursor-pointer" on:click={() => (message = '')}>
16
- <div class="rounded bg-red-800 p-4 text-white">
17
- {message}
18
- </div>
19
- <div class="bar transition-all duration-500" style="width: 0;"></div>
 
 
 
 
 
 
 
20
  </div>
21
  {/if}
22
 
23
  <style lang="postcss" scoped>
24
- .button {
25
- @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;
26
- }
27
  </style>
 
12
  </script>
13
 
14
  {#if message}
15
+ <div role="alert" class="fixed right-0 top-0 m-4">
16
+ <button
17
+ type="button"
18
+ class="w-full"
19
+ on:click={() => (message = '')}
20
+ on:keydown={(e) => e.key === 'Enter' && (message = '')}
21
+ >
22
+ <div class="rounded bg-red-800 p-4 text-white">
23
+ {message}
24
+ </div>
25
+ <div class="bar transition-all duration-500" style="width: 0;"></div>
26
+ </button>
27
  </div>
28
  {/if}
29
 
30
  <style lang="postcss" scoped>
 
 
 
31
  </style>
frontend/src/lib/lcmLive.ts CHANGED
@@ -76,7 +76,7 @@ export const lcmLiveActions = {
76
  }
77
 
78
  // If connection was never established (close without open)
79
- if (event.code === 1006 && streamId.get() === null) {
80
  reject(new Error('Cannot connect to server. Please try again later.'));
81
  }
82
  };
 
76
  }
77
 
78
  // If connection was never established (close without open)
79
+ if (event.code === 1006 && get(streamId) === null) {
80
  reject(new Error('Cannot connect to server. Please try again later.'));
81
  }
82
  };
frontend/src/piexifjs.d.ts ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ declare module 'piexifjs' {
2
+ export const ImageIFD: {
3
+ Make: number;
4
+ ImageDescription: number;
5
+ Software: number;
6
+ };
7
+ export const ExifIFD: {
8
+ DateTimeOriginal: number;
9
+ };
10
+ export function dump(exifObj: any): any;
11
+ export function insert(exifBytes: any, dataURL: string): string;
12
+ }
frontend/src/routes/+page.svelte CHANGED
@@ -57,10 +57,10 @@
57
  }
58
  }
59
 
60
- $: isLCMRunning = $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED &&
61
- $lcmLiveStatus !== LCMLiveStatus.ERROR;
62
  $: isConnecting = $lcmLiveStatus === LCMLiveStatus.CONNECTING;
63
-
64
  $: {
65
  // Set warning messages based on lcmLiveStatus
66
  if ($lcmLiveStatus === LCMLiveStatus.TIMEOUT) {
@@ -76,17 +76,17 @@
76
  if (isConnecting) {
77
  return; // Don't allow multiple connection attempts
78
  }
79
-
80
  // Clear any previous warning messages
81
  warningMessage = '';
82
  disabled = true;
83
-
84
  try {
85
  if (isImageMode) {
86
  await mediaStreamActions.enumerateDevices();
87
  await mediaStreamActions.start();
88
  }
89
-
90
  await lcmLiveActions.start(getSreamdata);
91
  toggleQueueChecker(false);
92
  } finally {
@@ -96,7 +96,7 @@
96
  } else {
97
  // Handle stopping - disable button during this process too
98
  disabled = true;
99
-
100
  try {
101
  if (isImageMode) {
102
  mediaStreamActions.stop();
@@ -114,19 +114,19 @@
114
  toggleQueueChecker(true);
115
  }
116
  }
117
-
118
  // Reconnect function for automatic reconnection
119
  async function reconnect() {
120
  try {
121
  disabled = true;
122
  warningMessage = 'Reconnecting...';
123
-
124
  if (isImageMode) {
125
  await mediaStreamActions.stop();
126
  await mediaStreamActions.enumerateDevices();
127
  await mediaStreamActions.start();
128
  }
129
-
130
  await lcmLiveActions.reconnect(getSreamdata);
131
  warningMessage = '';
132
  toggleQueueChecker(false);
@@ -162,13 +162,10 @@
162
  > and run it on your own GPU.
163
  </p>
164
  {/if}
165
-
166
  {#if $lcmLiveStatus === LCMLiveStatus.ERROR}
167
- <p class="text-sm mt-2">
168
- <button
169
- class="text-blue-500 underline hover:no-underline"
170
- on:click={reconnect}
171
- disabled={disabled}>
172
  Try reconnecting
173
  </button>
174
  </p>
 
57
  }
58
  }
59
 
60
+ $: isLCMRunning =
61
+ $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED && $lcmLiveStatus !== LCMLiveStatus.ERROR;
62
  $: isConnecting = $lcmLiveStatus === LCMLiveStatus.CONNECTING;
63
+
64
  $: {
65
  // Set warning messages based on lcmLiveStatus
66
  if ($lcmLiveStatus === LCMLiveStatus.TIMEOUT) {
 
76
  if (isConnecting) {
77
  return; // Don't allow multiple connection attempts
78
  }
79
+
80
  // Clear any previous warning messages
81
  warningMessage = '';
82
  disabled = true;
83
+
84
  try {
85
  if (isImageMode) {
86
  await mediaStreamActions.enumerateDevices();
87
  await mediaStreamActions.start();
88
  }
89
+
90
  await lcmLiveActions.start(getSreamdata);
91
  toggleQueueChecker(false);
92
  } finally {
 
96
  } else {
97
  // Handle stopping - disable button during this process too
98
  disabled = true;
99
+
100
  try {
101
  if (isImageMode) {
102
  mediaStreamActions.stop();
 
114
  toggleQueueChecker(true);
115
  }
116
  }
117
+
118
  // Reconnect function for automatic reconnection
119
  async function reconnect() {
120
  try {
121
  disabled = true;
122
  warningMessage = 'Reconnecting...';
123
+
124
  if (isImageMode) {
125
  await mediaStreamActions.stop();
126
  await mediaStreamActions.enumerateDevices();
127
  await mediaStreamActions.start();
128
  }
129
+
130
  await lcmLiveActions.reconnect(getSreamdata);
131
  warningMessage = '';
132
  toggleQueueChecker(false);
 
162
  > and run it on your own GPU.
163
  </p>
164
  {/if}
165
+
166
  {#if $lcmLiveStatus === LCMLiveStatus.ERROR}
167
+ <p class="mt-2 text-sm">
168
+ <button class="text-blue-500 underline hover:no-underline" on:click={reconnect} {disabled}>
 
 
 
169
  Try reconnecting
170
  </button>
171
  </p>