UI enhancements for Timeline - working prototype available

[ucom-ux]

Custom Viseron Timeline UX Enhancements for Large Camera Monitoring Setups

I have been testing Viseron in a large-scale road camera monitoring environment, and we added several client-side improvements to make the Timeline more practical for daily operation.

The goal was not to change Viseron's backend behavior, but to improve the browser-side experience when working with many cameras at the same time.

---

✨ Added features

📸 Per-camera frame capture

Each video now has a custom screenshot button that captures the current video frame directly from the browser.

The saved image uses:

• the camera name;
• the current date and time;
• PNG format;
• the original video frame size when available.

This makes it easier to quickly document events without opening external tools.

🔎 Zoom and pan inside each video

Videos now support interactive zoom and pan:

• mouse wheel to zoom in/out (1× – 8×);
• click and drag to pan when zoomed;
• automatic position clamping so the video stays inside the visible area;
• Esc resets all zoomed videos;
• double-click opens the camera card in fullscreen.

Especially useful when reviewing road footage details such as vehicles, plates, lanes, shoulders, or roadside elements.

⌨️ Keyboard shortcuts

Key	Action
Space	Play / Pause
←	Rewind
→	Forward
L	Jump to LIVE
Esc	Reset zoom on all cameras

Shortcuts are ignored while typing in inputs, textareas, or editable fields.

🔴 Improved LIVE button behavior

The native LIVE button is intercepted to reduce the occurrence of the "video segment is missing for the selected period" error.

Instead of jumping to the absolute latest position, the script scans the timeline DOM for markers and clicks the one closest to a position approximately 3 minutes behind the true live edge. This small deliberate delay gives Viseron enough time to have the segment written and available, avoiding the missing-segment error that often appears when jumping to the very tip of the stream.

The behavior is also triggered by the L key.

🧭 Timeline sidebar optimization

When the timeline panel is open, the script:

• hides the Events tab and Events panel;
• reduces the timeline panel width by approximately half.

This gives more screen space to the camera grid while keeping the timeline available for review.

🧱 Fixed camera grid layout

A custom grid layer was added over the live camera area. It supports two modes:

• 3×3 — single-monitor use
• 6×3 — fullscreen across 2 monitors as a mosaic wall

The 6×3 mode also reserves a left-side space to avoid overlap with the reduced timeline sidebar. All slots maintain a 16:9 aspect ratio with minimal gaps and automatic fitting on resize.

🔁 Grid toggle button

A floating toggle button switches between the two layouts. The selected mode is saved in localStorage and restored after a page reload.

🖱️ Drag-and-drop camera ordering

Camera cards can be reordered by drag-and-drop between grid slots. The order is also saved in localStorage, using camera data attributes, title, or video source as a fallback. The layout persists across reloads.

---

How to replicate

index.html from the Gist:
👉 https://gist.github.com/ucom-ux/c16ad136357a573ac3a48f9ffffa8f54

Mount it over the container's original index.html:

services:
  viseron:
    image: roflcoopter/viseron:3.5.2
    volumes:
      - ./index_final.html:/src/viseron/frontend/index.html:ro
      - ./config:/config
      - ./recordings:/recordings
    ports:
      - "8001:8888"

Note: Asset filenames in the HTML (main-DYFDnn95.js, etc.) are tied to Viseron 3.5.2. Using a different version may break the page.

[roflcoopter]

Saw your other post regarding your large deployment, havent gotten around to answer it yet, sorry about that!

Impressive work, sounds like some of it could be useful even in smaller deployments. Maybe we could work together to try and bring some of it into the default UI?