65 lines
1.1 KiB
Svelte
65 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { loadAvatarVariant } from "#lib/api/avatars.js";
|
|
import Icon from "#lib/components/ui/Icon.svelte";
|
|
|
|
interface Props {
|
|
ownerId: number;
|
|
uniqueId: string | null;
|
|
}
|
|
|
|
let { ownerId, uniqueId }: Props = $props();
|
|
|
|
let url = $state<string | null>(null);
|
|
|
|
$effect(() => {
|
|
url = null;
|
|
if (uniqueId === null) {
|
|
return;
|
|
}
|
|
let active = true;
|
|
loadAvatarVariant(ownerId > 0 ? "peer" : "chat", ownerId, uniqueId).then(
|
|
(resolved) => {
|
|
if (active) {
|
|
url = resolved;
|
|
}
|
|
}
|
|
);
|
|
return () => {
|
|
active = false;
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<span class="feed-photo">
|
|
{#if url}
|
|
<img alt="" src={url}>
|
|
{:else}
|
|
<Icon name="photo" size="0.875rem" />
|
|
{/if}
|
|
</span>
|
|
|
|
<style lang="scss">
|
|
.feed-photo {
|
|
overflow: hidden;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: 50%;
|
|
|
|
vertical-align: middle;
|
|
|
|
color: var(--color-white);
|
|
|
|
background-color: var(--color-gray);
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
</style>
|