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
|
* TRACES: UR-068 | DR-119
|
||||||
*/
|
*/
|
||||||
showFavorite?: boolean;
|
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
|
// 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
|
// 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")
|
"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(() => {
|
const aspectRatio = $derived(() => {
|
||||||
|
if (aspect) return FIXED_ASPECT[aspect];
|
||||||
if ("kind" in item) {
|
if ("kind" in item) {
|
||||||
return isMusicType ? "aspect-square" : "aspect-[2/3]";
|
return isMusicType ? "aspect-square" : "aspect-[2/3]";
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -159,12 +159,15 @@
|
|||||||
{#if shortcutLibraries.length > 0}
|
{#if shortcutLibraries.length > 0}
|
||||||
<div>
|
<div>
|
||||||
<h2 class="text-xl font-bold text-white mb-4 px-4">Your Libraries</h2>
|
<h2 class="text-xl font-bold text-white mb-4 px-4">Your Libraries</h2>
|
||||||
<div class="flex gap-4 overflow-x-auto px-4 pb-2">
|
<div class="flex gap-4 overflow-x-auto px-4 pb-2 items-start">
|
||||||
{#each shortcutLibraries as lib (lib.id)}
|
{#each shortcutLibraries as lib (lib.id)}
|
||||||
<div class="flex-shrink-0">
|
<div class="flex-shrink-0">
|
||||||
|
<!-- Uniform 16:9 artwork so music (square) and video libraries
|
||||||
|
line up at the same height in this mixed row. -->
|
||||||
<MediaCard
|
<MediaCard
|
||||||
item={lib}
|
item={lib}
|
||||||
size="medium"
|
size="medium"
|
||||||
|
aspect="video"
|
||||||
onclick={() => handleLibraryClick(lib)}
|
onclick={() => handleLibraryClick(lib)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user