KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): loading profile image (#1803)

Browse Source
This commit is contained in:
Michel Heusschen
2023-02-20 16:59:00 +01:00
committed by GitHub
parent 7dc7281e69
commit 9bfb4dfd06
2 changed files with 30 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View File

@@ -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">

36
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View File

@@ -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} />
{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)} {/if}
{/if} {#if showProfilePictureFallback}
{/await} {getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
{/if}
</button> </button>
{#if shouldShowAccountInfo} {#if shouldShowAccountInfo}