Snapshot viewer: auto-advancing slideshow with pause and open-in-tab #98

New issue

Closed

opened 2026-06-21 23:46:16 +00:00 by coding-agent-marvin8 · 1 comment

coding-agent-marvin8 commented

2026-06-21 23:46:16 +00:00

(Migrated from codeberg.org)

Two improvements are needed:

Auto-advancing slideshow — frames advance automatically on a configurable interval (default 2 s), looping back to the first frame after the last. A Pause/Un-Pause button lets the user stop and resume playback without leaving the page.
Open in new tab — a link always pointing to the currently displayed snapshot image, opening it at full scale in a new browser tab.

When browsing snapshots for a clip, there is no way to auto-play through them — every frame requires a manual click and a full page reload. There is also no way to view a snapshot at full scale without inspecting the image URL manually. Two improvements are needed: 1. **Auto-advancing slideshow** — frames advance automatically on a configurable interval (default 2 s), looping back to the first frame after the last. A Pause/Un-Pause button lets the user stop and resume playback without leaving the page. 2. **Open in new tab** — a link always pointing to the currently displayed snapshot image, opening it at full scale in a new browser tab.

coding-agent-marvin8 commented

2026-06-21 23:47:39 +00:00

(Migrated from codeberg.org)

Explored the current snapshot viewer. Key findings:

snapshots.html uses full-page navigation (?n=N links) for Prev/Next — every frame loads the whole page.
HTMX is already loaded in base.html.
_album_response in snapshots.py only computes the label for the current frame n.

Plan of attack:

_album_response: add a labels list (all labels computed upfront) to the template context alongside the existing fields. The per-frame label key is dropped; the template uses labels[n] for the initial render.
snapshots.html: add a <script> block that embeds total, imgBaseUrl, baseUrl, labels from Jinja as JS constants. A single SLIDE_INTERVAL_MS constant (top of the script block) is the single place to change the delay. A goTo(n) function handles all frame transitions — wraps the index for looping, updates the <img src>, counter, label, Prev/Next hrefs, and open-in-tab href, then resets the interval. Prev/Next become onclick JS calls instead of full-page links. Pause/Un-Pause button toggles clearInterval/setInterval.

Files changed: src/cang/web/routes/snapshots.py, src/cang/web/templates/snapshots.html.

Explored the current snapshot viewer. Key findings: - `snapshots.html` uses full-page navigation (`?n=N` links) for Prev/Next — every frame loads the whole page. - HTMX is already loaded in `base.html`. - `_album_response` in `snapshots.py` only computes the label for the current frame `n`. **Plan of attack:** 1. `_album_response`: add a `labels` list (all labels computed upfront) to the template context alongside the existing fields. The per-frame `label` key is dropped; the template uses `labels[n]` for the initial render. 2. `snapshots.html`: add a `<script>` block that embeds `total`, `imgBaseUrl`, `baseUrl`, `labels` from Jinja as JS constants. A single `SLIDE_INTERVAL_MS` constant (top of the script block) is the single place to change the delay. A `goTo(n)` function handles all frame transitions — wraps the index for looping, updates the `<img src>`, counter, label, Prev/Next hrefs, and open-in-tab href, then resets the interval. Prev/Next become onclick JS calls instead of full-page links. Pause/Un-Pause button toggles `clearInterval`/`setInterval`. Files changed: `src/cang/web/routes/snapshots.py`, `src/cang/web/templates/snapshots.html`.

No labels

No milestone

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

marvin8/cang#98

No description provided.

Rows
Columns