fix(home): uniform card heights in the Your Libraries row
MediaCard derives its artwork aspect ratio from the item, so a music library rendered aspect-square (144px tall at w-36) next to video libraries at aspect-video (81px), leaving the home row ragged. Add an optional `aspect` prop that overrides the derived ratio, and pass aspect="video" from the home Libraries strip. Unset, behaviour is unchanged, so the /library overview grid and the media carousels keep their per-type ratios. Artwork already uses object-cover, so square music art crops rather than distorts. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -45,9 +45,16 @@
|
||||
* TRACES: UR-068 | DR-119
|
||||
*/
|
||||
showFavorite?: boolean;
|
||||
/**
|
||||
* Force the artwork box to a fixed aspect ratio instead of deriving one from
|
||||
* the item. Use on rows that mix item kinds (e.g. the home "Your Libraries"
|
||||
* strip, where square music art next to 16:9 video art would otherwise give
|
||||
* the cards different heights). Artwork still fills the box via object-cover.
|
||||
*/
|
||||
aspect?: "square" | "video" | "poster";
|
||||
}
|
||||
|
||||
let { item, size = "medium", showProgress = false, showDownloadStatus = true, sizeLabel, downloadedBadge, onRemove, onclick, onLongPress, showFavorite = true }: Props = $props();
|
||||
let { item, size = "medium", showProgress = false, showDownloadStatus = true, sizeLabel, downloadedBadge, onRemove, onclick, onLongPress, showFavorite = true, aspect }: Props = $props();
|
||||
|
||||
// Long-press detection. We arm a timer on pointerdown; if it fires before the
|
||||
// pointer is released (or moves too far), we treat it as a long press and set a
|
||||
@@ -179,7 +186,14 @@
|
||||
"kind" in item && (item.kind === "track" || item.kind === "album" || item.kind === "artist" || item.kind === "playlist")
|
||||
);
|
||||
|
||||
const FIXED_ASPECT = {
|
||||
square: "aspect-square",
|
||||
video: "aspect-video",
|
||||
poster: "aspect-[2/3]",
|
||||
} as const;
|
||||
|
||||
const aspectRatio = $derived(() => {
|
||||
if (aspect) return FIXED_ASPECT[aspect];
|
||||
if ("kind" in item) {
|
||||
return isMusicType ? "aspect-square" : "aspect-[2/3]";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user