fix(feed): keep the duration, live state and resume bar in the bare row
Dropping Thumb dropped everything it draws ON the image — duration, the live/stream badges, the saved marker and the resume bar. Those are metadata, not decoration, so they move into the meta line and the bar onto the row. Splits the spec's overloaded compact flag into thumb/dense, which meant one thing per family and nothing on its own.
This commit is contained in:
@@ -19,8 +19,11 @@ export interface FeedViewSpec {
|
||||
/** Narrowest grid column in px, or null for ONE full-width column. VirtualFeed derives the
|
||||
* column count from this and the container width, so every multi-column view reflows for free. */
|
||||
minCol: number | null;
|
||||
/** card family: a tighter card. row family: no thumbnail at all. */
|
||||
compact: boolean;
|
||||
/** Show the video thumbnail. False only for the bare row — whose badges (duration, live state,
|
||||
* saved, resume bar) then move into the meta line, since Thumb is what draws them. */
|
||||
thumb: boolean;
|
||||
/** card family: tighter padding and no channel avatar, for the small card's ~180px column. */
|
||||
dense: boolean;
|
||||
/** row family: actions sit under the meta rather than docked at the right edge. Frees ~168px of
|
||||
* width (measured), which is what lets a row block survive in a narrow tile column. */
|
||||
actionsBelow: boolean;
|
||||
@@ -28,12 +31,12 @@ export interface FeedViewSpec {
|
||||
|
||||
// The whole matrix in one place. Adding a view here makes TS point at every switch that needs it.
|
||||
export const FEED_VIEW_SPEC: Record<FeedView, FeedViewSpec> = {
|
||||
cards: { family: "card", minCol: 260, compact: false, actionsBelow: false },
|
||||
cardsSmall: { family: "card", minCol: 180, compact: true, actionsBelow: false },
|
||||
cards: { family: "card", minCol: 260, thumb: true, dense: false, actionsBelow: false },
|
||||
cardsSmall: { family: "card", minCol: 180, thumb: true, dense: true, actionsBelow: false },
|
||||
// Single column on purpose: the point of the list is that your eye runs down one edge with the
|
||||
// titles stacked. Density must not cost that — `tiles` is the multi-column option instead.
|
||||
rows: { family: "row", minCol: null, compact: false, actionsBelow: false },
|
||||
rowsCompact: { family: "row", minCol: null, compact: true, actionsBelow: false },
|
||||
rows: { family: "row", minCol: null, thumb: true, dense: false, actionsBelow: false },
|
||||
rowsCompact: { family: "row", minCol: null, thumb: false, dense: false, actionsBelow: false },
|
||||
// 380 = thumbnail (160) + gap (12) + ~192 for the text + the block's own padding (16). The text
|
||||
// floor is the action row's measured 156px plus enough for a title to be worth reading.
|
||||
// Tuned by measuring the real layouts, not guessed: 3 columns need 3n+32 px, so 380 turns the
|
||||
@@ -41,7 +44,7 @@ export const FEED_VIEW_SPEC: Record<FeedView, FeedViewSpec> = {
|
||||
// (~955px) still gets 2. 470 was tried first and needed 956px for two — the common layout fell
|
||||
// back to ONE column and the mode looked broken; 400 then left 596px tiles whose titles ended
|
||||
// halfway, which is the very waste this mode exists to kill.
|
||||
tiles: { family: "row", minCol: 380, compact: false, actionsBelow: true },
|
||||
tiles: { family: "row", minCol: 380, thumb: true, dense: false, actionsBelow: true },
|
||||
};
|
||||
|
||||
function isFeedView(v: unknown): v is FeedView {
|
||||
|
||||
Reference in New Issue
Block a user