diff --git a/src/lib/components/library/MediaCard.svelte b/src/lib/components/library/MediaCard.svelte index 7e9b488c..c9ce535d 100644 --- a/src/lib/components/library/MediaCard.svelte +++ b/src/lib/components/library/MediaCard.svelte @@ -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]"; } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 50d9c851..7897e776 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -159,12 +159,15 @@ {#if shortcutLibraries.length > 0}