65 lines
1.4 KiB
Svelte
65 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { isPreviewable } from "$lib/api/media";
|
|
import type { MediaRef } from "$lib/api/types";
|
|
import AlbumTile from "$lib/components/media/AlbumTile.svelte";
|
|
import FileChip from "$lib/components/media/FileChip.svelte";
|
|
|
|
interface Props {
|
|
chatId: number;
|
|
media: MediaRef[];
|
|
onopen: (index: number) => void;
|
|
own?: boolean;
|
|
}
|
|
|
|
let { media, chatId, onopen, own = false }: Props = $props();
|
|
|
|
const asFiles = $derived(
|
|
media.every((item) => !isPreviewable(item.kind, item.mime))
|
|
);
|
|
|
|
const columns = $derived.by(() => {
|
|
const count = media.length;
|
|
if (count === 2) {
|
|
return 2;
|
|
}
|
|
if (count === 4) {
|
|
return 2;
|
|
}
|
|
return 3;
|
|
});
|
|
</script>
|
|
|
|
{#if asFiles}
|
|
<div class="AlbumFiles">
|
|
{#each media as item, index (item.id ?? index)}
|
|
<FileChip media={item} {own} />
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<div class="MediaAlbum" style:--cols={columns}>
|
|
{#each media as item, index (item.id ?? index)}
|
|
<AlbumTile media={item} {chatId} onopen={() => onopen(index)} />
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<style lang="scss">
|
|
.AlbumFiles {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.MediaAlbum {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--cols), 1fr);
|
|
gap: 0.125rem;
|
|
|
|
overflow: hidden;
|
|
max-width: 20rem;
|
|
margin-bottom: 0.25rem;
|
|
border-radius: var(--border-radius-default-small);
|
|
}
|
|
</style>
|