feat(frontend): self host avatar placeholders

This commit is contained in:
Sam 2023-03-25 22:14:04 +01:00
parent 67dae103d8
commit 0c187aaf84
No known key found for this signature in database
GPG Key ID: B4EF20DDE721CAA1
4 changed files with 15 additions and 7 deletions

View File

@ -153,19 +153,24 @@ export const pronounDisplay = (entry: Pronoun) => {
}; };
export const userAvatars = (user: User | MeUser | MemberPartialUser) => { export const userAvatars = (user: User | MeUser | MemberPartialUser) => {
if (!user.avatar) return []; if (!user.avatar) return defaultAvatars;
return [ return [
`${PUBLIC_BASE_URL}/media/users/${user.id}/${user.avatar}.webp`, `${PUBLIC_BASE_URL}/media/users/${user.id}/${user.avatar}.webp`,
`${PUBLIC_BASE_URL}/media/users/${user.id}/${user.avatar}.webp`, `${PUBLIC_BASE_URL}/media/users/${user.id}/${user.avatar}.jpg`,
]; ];
}; };
export const memberAvatars = (member: Member | PartialMember) => { export const memberAvatars = (member: Member | PartialMember) => {
if (!member.avatar) return []; if (!member.avatar) return defaultAvatars;
return [ return [
`${PUBLIC_BASE_URL}/media/members/${member.id}/${member.avatar}.webp`, `${PUBLIC_BASE_URL}/media/members/${member.id}/${member.avatar}.webp`,
`${PUBLIC_BASE_URL}/media/members/${member.id}/${member.avatar}.webp`, `${PUBLIC_BASE_URL}/media/members/${member.id}/${member.avatar}.jpg`,
]; ];
}; };
export const defaultAvatars = [
`${PUBLIC_BASE_URL}/default/512.webp`,
`${PUBLIC_BASE_URL}/default/512.jpg`,
];

View File

@ -1,4 +1,6 @@
<script lang="ts"> <script lang="ts">
import { defaultAvatars } from "$lib/api/entities";
export let urls: string[]; export let urls: string[];
export let alt: string; export let alt: string;
export let width = 300; export let width = 300;
@ -14,6 +16,8 @@
return "application/octet-stream"; return "application/octet-stream";
} }
}; };
$: urls = urls.length > 0 ? urls : defaultAvatars;
</script> </script>
{#if urls.length > 0} {#if urls.length > 0}
@ -21,9 +25,8 @@
{#each urls as url} {#each urls as url}
<source {width} srcSet={url} type={contentTypeFor(url)} /> <source {width} srcSet={url} type={contentTypeFor(url)} />
{/each} {/each}
<img {width} src={urls[0]} {alt} class="rounded-circle img-fluid" /> <img {width} src={urls[0] || defaultAvatars[0]} {alt} class="rounded-circle img-fluid" />
</picture> </picture>
{:else} {:else}
<!-- TODO: actual placeholder that isn't a cat --> <img {width} class="rounded-circle img-fluid" src={defaultAvatars[0]} {alt} />
<img {width} class="rounded-circle img-fluid" src="https://placekitten.com/512/512" {alt} />
{/if} {/if}

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB