mirror of
https://github.com/immich-app/immich.git
synced 2025-01-22 11:42:46 +01:00
fix(web): loading profile image (#1803)
This commit is contained in:
parent
7dc7281e69
commit
9bfb4dfd06
2 changed files with 30 additions and 33 deletions
|
@ -1,6 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { clickOutside } from '$lib/utils/click-outside';
|
import { clickOutside } from '$lib/utils/click-outside';
|
||||||
import { api, UserResponseDto } from '@api';
|
import { UserResponseDto } from '@api';
|
||||||
import { createEventDispatcher } from 'svelte';
|
import { createEventDispatcher } from 'svelte';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
|
@ -10,18 +10,14 @@
|
||||||
|
|
||||||
export let user: UserResponseDto;
|
export let user: UserResponseDto;
|
||||||
|
|
||||||
|
// Show fallback while loading profile picture and hide when image loads.
|
||||||
|
let showProfilePictureFallback = true;
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
const getFirstLetter = (text?: string) => {
|
const getFirstLetter = (text?: string) => {
|
||||||
return text?.charAt(0).toUpperCase();
|
return text?.charAt(0).toUpperCase();
|
||||||
};
|
};
|
||||||
|
|
||||||
const getUserProfileImage = async () => {
|
|
||||||
if (!user.profileImagePath) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return api.userApi.getProfileImage(user.id).catch(() => null);
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
@ -34,23 +30,26 @@
|
||||||
>
|
>
|
||||||
<div class="bg-white dark:bg-immich-dark-primary/10 rounded-3xl mx-4 mt-4 pb-4">
|
<div class="bg-white dark:bg-immich-dark-primary/10 rounded-3xl mx-4 mt-4 pb-4">
|
||||||
<div class="flex place-items-center place-content-center">
|
<div class="flex place-items-center place-content-center">
|
||||||
<button
|
<div
|
||||||
class="flex place-items-center place-content-center rounded-full bg-immich-primary dark:bg-immich-dark-primary dark:immich-dark-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary dark:text-immich-dark-bg mt-4"
|
class="flex place-items-center place-content-center rounded-full bg-immich-primary dark:bg-immich-dark-primary dark:immich-dark-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary dark:text-immich-dark-bg mt-4 select-none"
|
||||||
>
|
>
|
||||||
{#await getUserProfileImage() then}
|
{#if user.profileImagePath}
|
||||||
<img
|
<img
|
||||||
transition:fade={{ duration: 100 }}
|
transition:fade={{ duration: 100 }}
|
||||||
|
class:hidden={showProfilePictureFallback}
|
||||||
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
|
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
|
||||||
alt="profile-img"
|
alt="profile-img"
|
||||||
class="inline rounded-full h-20 w-20 object-cover shadow-md border-2 border-immich-primary dark:border-immich-dark-primary"
|
class="inline rounded-full h-20 w-20 object-cover shadow-md border-2 border-immich-primary dark:border-immich-dark-primary"
|
||||||
draggable="false"
|
draggable="false"
|
||||||
|
on:load={() => (showProfilePictureFallback = false)}
|
||||||
/>
|
/>
|
||||||
{:catch}
|
{/if}
|
||||||
|
{#if showProfilePictureFallback}
|
||||||
<div transition:fade={{ duration: 200 }} class="text-lg">
|
<div transition:fade={{ duration: 200 }} class="text-lg">
|
||||||
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
|
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
|
||||||
</div>
|
</div>
|
||||||
{/await}
|
{/if}
|
||||||
</button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium mt-4">
|
<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium mt-4">
|
||||||
|
|
|
@ -14,15 +14,12 @@
|
||||||
|
|
||||||
let shouldShowAccountInfo = false;
|
let shouldShowAccountInfo = false;
|
||||||
|
|
||||||
|
// Show fallback while loading profile picture and hide when image loads.
|
||||||
|
let showProfilePictureFallback = true;
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
let shouldShowAccountInfoPanel = false;
|
let shouldShowAccountInfoPanel = false;
|
||||||
|
|
||||||
const getUserProfileImage = async () => {
|
|
||||||
if (!user.profileImagePath) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return api.userApi.getProfileImage(user.id).catch(() => null);
|
|
||||||
};
|
|
||||||
const getFirstLetter = (text?: string) => {
|
const getFirstLetter = (text?: string) => {
|
||||||
return text?.charAt(0).toUpperCase();
|
return text?.charAt(0).toUpperCase();
|
||||||
};
|
};
|
||||||
|
@ -96,19 +93,20 @@
|
||||||
<button
|
<button
|
||||||
class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
|
class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
|
||||||
>
|
>
|
||||||
{#await getUserProfileImage() then hasProfileImage}
|
{#if user.profileImagePath}
|
||||||
{#if hasProfileImage}
|
|
||||||
<img
|
<img
|
||||||
transition:fade={{ duration: 100 }}
|
transition:fade={{ duration: 100 }}
|
||||||
|
class:hidden={showProfilePictureFallback}
|
||||||
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
|
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
|
||||||
alt="profile-img"
|
alt="profile-img"
|
||||||
class="inline rounded-full h-12 w-12 object-cover shadow-md border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-all"
|
class="inline rounded-full h-12 w-12 object-cover shadow-md border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-all"
|
||||||
draggable="false"
|
draggable="false"
|
||||||
|
on:load={() => (showProfilePictureFallback = false)}
|
||||||
/>
|
/>
|
||||||
{:else}
|
{/if}
|
||||||
|
{#if showProfilePictureFallback}
|
||||||
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
|
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
|
||||||
{/if}
|
{/if}
|
||||||
{/await}
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{#if shouldShowAccountInfo}
|
{#if shouldShowAccountInfo}
|
||||||
|
|
Loading…
Reference in a new issue