77 lines
2.4 KiB
Svelte
77 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import ActionButton from '$lib/components/ActionButton.svelte';
|
|
import AlbumCover from '$lib/components/album-page/album-cover.svelte';
|
|
import { getAlbumActions } from '$lib/services/album.service';
|
|
import { user } from '$lib/stores/user.store';
|
|
import { getShortDateRange } from '$lib/utils/date-time';
|
|
import type { AlbumResponseDto } from '@immich/sdk';
|
|
import { t } from 'svelte-i18n';
|
|
|
|
interface Props {
|
|
album: AlbumResponseDto;
|
|
showOwner?: boolean;
|
|
showDateRange?: boolean;
|
|
showItemCount?: boolean;
|
|
preload?: boolean;
|
|
}
|
|
|
|
let { album, showOwner = false, showDateRange = false, showItemCount = false, preload = false }: Props = $props();
|
|
|
|
const AlbumActions = $derived(getAlbumActions($t, album));
|
|
</script>
|
|
|
|
<div
|
|
class="group relative rounded-2xl border border-transparent p-5 hover:bg-gray-100 hover:border-gray-200 dark:hover:border-gray-800 dark:hover:bg-gray-900"
|
|
data-testid="album-card"
|
|
>
|
|
<div
|
|
id="icon-{album.id}"
|
|
class="absolute end-6 top-6 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
|
|
data-testid="context-button-parent"
|
|
>
|
|
<ActionButton action={AlbumActions.ContextMenu} />
|
|
</div>
|
|
|
|
<AlbumCover {album} {preload} class="transition-all duration-300 hover:shadow-lg" />
|
|
|
|
<div class="mt-4">
|
|
<p
|
|
class="w-full leading-6 text-lg line-clamp-2 font-semibold text-black dark:text-white group-hover:text-primary"
|
|
data-testid="album-name"
|
|
title={album.albumName}
|
|
>
|
|
{album.albumName}
|
|
</p>
|
|
|
|
{#if showDateRange && album.startDate && album.endDate}
|
|
<p class="flex text-sm dark:text-immich-dark-fg capitalize">
|
|
{getShortDateRange(album.startDate, album.endDate)}
|
|
</p>
|
|
{/if}
|
|
|
|
<span class="flex gap-2 text-sm dark:text-immich-dark-fg" data-testid="album-details">
|
|
{#if showItemCount}
|
|
<p>
|
|
{$t('items_count', { values: { count: album.assetCount } })}
|
|
</p>
|
|
{/if}
|
|
|
|
{#if (showOwner || album.shared) && showItemCount}
|
|
<p>•</p>
|
|
{/if}
|
|
|
|
{#if showOwner}
|
|
{#if $user.id === album.ownerId}
|
|
<p>{$t('owned')}</p>
|
|
{:else if album.owner}
|
|
<p>{$t('shared_by_user', { values: { user: album.owner.name } })}</p>
|
|
{:else}
|
|
<p>{$t('shared')}</p>
|
|
{/if}
|
|
{:else if album.shared}
|
|
<p>{$t('shared')}</p>
|
|
{/if}
|
|
</span>
|
|
</div>
|
|
</div>
|