# video.svelte + double_video.svelte — Video Components

### video.svelte

<p class="callout danger">**TODO:** still being developed, going to change</p>

<span style="white-space: pre-wrap;">The basic single-camera display component. Accepts a camera object from </span>`<span class="editor-theme-code">state.svelte.js</span>`<span style="white-space: pre-wrap;"> and renders it as an </span>`<span class="editor-theme-code"><img></span>`<span style="white-space: pre-wrap;"> tag pointing at the MJPEG stream URL. Supports two optional modes passed as the </span>`<span class="editor-theme-code">mode</span>`<span style="white-space: pre-wrap;"> prop:</span>

- **`<strong class="editor-theme-bold editor-theme-code">measure</strong>` mode**<span style="white-space: pre-wrap;"> — enables pixel-clicking for stereo measurement. The operator clicks two points across two camera feeds; the component calls </span>`<span class="editor-theme-code">invoke("request_measurement")</span>`<span style="white-space: pre-wrap;"> with the pixel coordinates from both cameras and returns the result via an </span>`<span class="editor-theme-code">onmeasurement</span>`<span style="white-space: pre-wrap;"> callback.</span>
- **`<strong class="editor-theme-bold editor-theme-code">pick</strong>` mode**<span style="white-space: pre-wrap;"> — enables a pick-up interaction for probe/rock collection. The </span>`<span class="editor-theme-code">pick()</span>`<span style="white-space: pre-wrap;"> function is a stub ready for the actual rover arm command to be wired in.</span>

When no mode is set the component is a plain passive video display.

### double\_video.svelte

Displays two camera feeds simultaneously with a picture-in-picture layout. The primary feed fills the frame; the secondary feed appears as a smaller overlay in the bottom-right corner. Clicking the overlay swaps the two feeds, making the secondary feed the primary and vice versa.

<span style="white-space: pre-wrap;">Both feeds show a </span>`<span class="editor-theme-code">⚠ SIGNAL LOST</span>`<span style="white-space: pre-wrap;"> overlay banner when their </span>`<span class="editor-theme-code">stale</span>`<span style="white-space: pre-wrap;"> flag is </span>`<span class="editor-theme-code">true</span>`<span style="white-space: pre-wrap;"> (set by the camera health listener in </span>`<span class="editor-theme-code">state.svelte.js</span>`). The secondary feed shows a smaller version of the same warning.

<span style="white-space: pre-wrap;">Props: </span>`<span class="editor-theme-code">camera1</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">camera2</span>`<span style="white-space: pre-wrap;"> — camera objects from </span>`<span class="editor-theme-code">state.svelte.js</span>`.