state.svelte.js — Global State

state.svelte.js is the single source of truth for shared reactive state that needs to be accessible across multiple components and routes. Currently it manages the three camera objects.

Camera objects

Three camera state objects are exported as Svelte 5 $state runes:

Each object has three fields: name (display string), port (full http://localhost:PORT URL used as the <img> src), and stale (boolean set to true when the backend reports no frames for 2+ seconds).

Camera health listener — initCameraHealthListener()

This function is called once from +layout.svelte on app startup. It listens for the camera-feed-status Tauri event emitted by the GStreamer health watcher in the backend, and updates the stale flag on the matching camera object. A 500ms startup delay is included to ensure the Tauri bridge is ready before the listener is attached.

Components that display video can read the stale flag to show a warning overlay when a feed is lost.