yolo/arr
3
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Search results: poster, rating, overview and trailer chip #148

New Issue
Closed
opened 2026-08-23 19:41:43 +01:00 by naps62-yolo · 0 comments
naps62-yolo commented 2026-08-23 19:41:43 +01:00
Owner
Copy Link
Copy Source

Depends on: #144, #147

Search rows are text. §9.2 says there is never a moment where the user has to
know whether they are searching or adding, and a row with no artwork makes the
add decision harder than the API already makes it — the poster, the year and the
rating are how a person tells two films with the same title apart.

Every row, library and TMDB alike, gains:

  • a poster thumbnail on the left, from poster_path via image.tmdb.org
    (§9.6 — the browser composes the URL and picks the size; w92 or w154 is
    the right order of magnitude for a row);
  • year and a rating chip from vote_average, with vote_count as its title
    attribute where the response carries one;
  • a one-line overview, truncated, never wrapping the row to a second height;
  • a trailer chip which opens YouTube in a new tab.

The trailer chip resolves on click through GET /api/trailer (#144): show a
pending state on the chip, then window.open the YouTube watch URL. A 404 turns
the chip into a quiet "no trailer" rather than an error — TMDB simply has no
video for plenty of titles and that is not a failure. Never open a tab before
the key resolves; a popup blocker eats a tab opened from an async callback, so
open it on the click and navigate it when the key arrives, or handle the block
visibly. Do not fire the request on hover or on render — the whole point of
§9.6's resolve-on-click is that a page of results costs zero extra calls.

Rows with no poster get a placeholder of the same size, so the column edge does
not jitter as results stream in.

An episode row shows its series' poster and keeps reading as
Series · SxxEyy · Episode title.

Goes through the impeccable skill before any markup, per CLAUDE.md.

Do not start until blitz/tv-tracking is on main — it rewrites the search
rendering in web/src/main.ts, including the series and episode row variants
this changes.

Depends on: #144, #147 Search rows are text. §9.2 says there is never a moment where the user has to know whether they are searching or adding, and a row with no artwork makes the add decision harder than the API already makes it — the poster, the year and the rating are how a person tells two films with the same title apart. Every row, library and TMDB alike, gains: - a poster thumbnail on the left, from `poster_path` via `image.tmdb.org` (§9.6 — the browser composes the URL and picks the size; `w92` or `w154` is the right order of magnitude for a row); - year and a rating chip from `vote_average`, with `vote_count` as its title attribute where the response carries one; - a one-line overview, truncated, never wrapping the row to a second height; - a **trailer chip** which opens YouTube in a new tab. The trailer chip resolves on click through `GET /api/trailer` (#144): show a pending state on the chip, then `window.open` the YouTube watch URL. A 404 turns the chip into a quiet "no trailer" rather than an error — TMDB simply has no video for plenty of titles and that is not a failure. Never open a tab before the key resolves; a popup blocker eats a tab opened from an async callback, so open it on the click and navigate it when the key arrives, or handle the block visibly. Do not fire the request on hover or on render — the whole point of §9.6's resolve-on-click is that a page of results costs zero extra calls. Rows with no poster get a placeholder of the same size, so the column edge does not jitter as results stream in. An episode row shows its series' poster and keeps reading as `Series · SxxEyy · Episode title`. Goes through the `impeccable` skill before any markup, per CLAUDE.md. **Do not start until `blitz/tv-tracking` is on main** — it rewrites the search rendering in `web/src/main.ts`, including the series and episode row variants this changes.
naps62-yolo added this to the Rich metadata milestone 2026-08-23 19:41:43 +01:00
naps62-yolo added the area/webdifficulty/moderatephase/6-tvtype/feature labels 2026-08-23 19:41:43 +01:00
naps62-yolo added a new dependency 2026-08-23 19:42:42 +01:00
#144 Trailer resolution endpoint keyed on a TMDB id
naps62-yolo added a new dependency 2026-08-23 19:42:42 +01:00
#147 Posters and ratings on both sides of search results
naps62-yolo added phase/5-ui and removed phase/6-tv labels 2026-08-23 19:42:56 +01:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area/api
arr-api
 area/ci
CI and test harness
 area/compat
arr-compat
 area/core
arr-core
 area/daemon
arr-daemon
 area/db
arr-db
 area/dl
arr-dl
 area/indexer
arr-indexer
 area/infra
workspace and tooling
 area/meta
arr-meta
 area/parse
arr-parse
 area/probe
arr-probe
 area/subs
arr-subs crate: providers, extraction, translation, sync
 area/web
web/
 difficulty/easy
bounded, obvious approach, few files
 difficulty/hard
subtle correctness or cross-cutting
 difficulty/moderate
multiple files, judgement, an interface to design
 difficulty/trivial
one file, mechanical, no design decisions
 phase/1-skeleton
workspace, CI, config, database, empty API and SPA
 phase/2-logic
parsing and policy engine, pure, no network
 phase/3-sourcing
TMDB and Prowlarr, read-only
 phase/4-movies
movies end to end
 phase/5-ui
search, buckets, library views, queues
 phase/6-tv
seasons, episodes, tracking, derived status
 phase/7-people
owner tags and notifications
 phase/8-compat
Jellyseerr shim
 phase/9-subtitles
build order: subtitles, DESIGN.md §15
 type/bug
type/chore
type/feature
type/test
No labels area/web difficulty/moderate phase/5-ui type/feature
Milestone
No items
No Milestone Rich metadata
Projects
Clear projects
No projects
Assignees
Clear assignees
hermes (Hermes (agent)) naps62 (Miguel Palhas) naps62-yolo (naps62-yolo (agent))
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Depends on
#144 Trailer resolution endpoint keyed on a TMDB id
yolo/arr
#147 Posters and ratings on both sides of search results
yolo/arr
Reference: yolo/arr#148