47 lines
1.2 KiB
Svelte
47 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { albumLink, artistLink, dateToYear, linkUrl } from "$lib/util/functions";
|
|
import type { Album, Markings } from "$lib/util/types";
|
|
|
|
import MarkedStr from "$lib/components/ui/MarkedStr.svelte";
|
|
import LinkText from "$lib/components/ui/LinkText.svelte";
|
|
import TileItem from "./TileItem.svelte";
|
|
|
|
export let item: Album;
|
|
export let withArtist = false;
|
|
export let markings: Markings | undefined = undefined;
|
|
|
|
function playAlbum() {
|
|
alert("playing " + item.name);
|
|
}
|
|
</script>
|
|
|
|
<TileItem
|
|
title={item.name}
|
|
imageUrl={item.imageUrl}
|
|
href={linkUrl(albumLink(item))}
|
|
on:play={playAlbum}
|
|
>
|
|
<p class="font-semibold ellipsis">
|
|
<MarkedStr text={item.name} marked={markings?.title} />
|
|
</p>
|
|
<p class="text-sm text-base-content text-opacity-50 line-clamp-2 badges">
|
|
{#if item.releaseDate}
|
|
<span>{dateToYear(item.releaseDate).toString()}</span>
|
|
{/if}
|
|
<span>{item.albumType}</span>
|
|
{#if withArtist}
|
|
<span>
|
|
{#each item.artists as artist, i}
|
|
{#if i !== 0}
|
|
,
|
|
{/if}
|
|
<LinkText
|
|
item={artistLink(artist)}
|
|
marked={markings?.artists[i]}
|
|
tabindex={-1}
|
|
/>
|
|
{/each}
|
|
</span>
|
|
{/if}
|
|
</p>
|
|
</TileItem>
|