helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(web): make assets cachable (#1724)

Browse source
This commit is contained in:
Michel Heusschen 2023-02-10 23:01:35 +01:00 • committed by GitHub
parent 74cd3d66c6
commit d91cc3616b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 91 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/src/lib/components/album-page/__tests__/album-card.spec.ts
View file

@ -44,10 +44,10 @@ describe('AlbumCard component', () => {
const albumDetailsElement = sut.getByTestId('album-details');
const detailsText = `${count} items` + (shared ? ' . Shared' : '');
expect(albumImgElement).toHaveAttribute('src', 'no-thumbnail.png');
expect(albumImgElement).toHaveAttribute('src');
expect(albumImgElement).toHaveAttribute('alt', album.id);
await waitFor(() => expect(albumImgElement).toHaveAttribute('src', 'no-thumbnail.png'));
await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
expect(albumImgElement).toHaveAttribute('alt', album.id);
expect(apiMock.assetApi.getAssetThumbnail).not.toHaveBeenCalled();
@ -108,7 +108,7 @@ describe('AlbumCard component', () => {
sut = render(AlbumCard, { album });
const albumImgElement = sut.getByTestId('album-image');
await waitFor(() => expect(albumImgElement).toHaveAttribute('src', 'no-thumbnail.png'));
await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
});
it('dispatches custom "click" event with the album in context', async () => {

7
web/src/lib/components/album-page/album-card.svelte
View file

@ -16,14 +16,13 @@
import { createEventDispatcher, onMount } from 'svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import CircleIconButton from '../shared-components/circle-icon-button.svelte';
import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
export let album: AlbumResponseDto;
const NO_THUMBNAIL = 'no-thumbnail.png';
let imageData = `/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=${ThumbnailFormat.Webp}`;
if (!album.albumThumbnailAssetId) {
imageData = NO_THUMBNAIL;
imageData = noThumbnailUrl;
}
const dispatchClick = createEventDispatcher<OnClick>();
@ -51,7 +50,7 @@
};
onMount(async () => {
imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || NO_THUMBNAIL;
imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || noThumbnailUrl;
});
const locale = navigator.language;

9
web/src/lib/components/album-page/album-viewer.svelte
View file

@ -40,6 +40,7 @@
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import { bulkDownload } from '$lib/utils/asset-utils';
import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
import ImmichLogo from '../shared-components/immich-logo.svelte';
export let album: AlbumResponseDto;
export let sharedLink: SharedLinkResponseDto | undefined = undefined;
@ -419,13 +420,7 @@
class="flex gap-2 place-items-center hover:cursor-pointer ml-6"
href="https://immich.app"
>
<img
src="/immich-logo.svg"
alt="immich logo"
height="30"
width="30"
draggable="false"
/>
<ImmichLogo height={30} width={30} />
<h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">
IMMICH
</h1>

3
web/src/lib/components/album-page/user-selection-modal.svelte
View file

@ -6,6 +6,7 @@
import Link from 'svelte-material-icons/Link.svelte';
import ShareCircle from 'svelte-material-icons/ShareCircle.svelte';
import { goto } from '$app/navigation';
import ImmichLogo from '../shared-components/immich-logo.svelte';
export let album: AlbumResponseDto;
export let sharedUsersInAlbum: Set<UserResponseDto>;
@ -53,7 +54,7 @@
<BaseModal on:close={() => dispatch('close')}>
<svelte:fragment slot="title">
<span class="flex gap-2 place-items-center">
<img src="/immich-logo.svg" width="24" alt="Immich" draggable="false" />
<ImmichLogo width={24} />
<p class="font-medium">Invite to album</p>
</span>
</svelte:fragment>

12
web/src/lib/components/forms/admin-registration-form.svelte
View file

@ -1,7 +1,8 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { api } from '@api';
import ImmichLogo from '../shared-components/immich-logo.svelte';
let error: string;
let success: string;
@ -55,14 +56,7 @@
class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
>
<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
<img
class="text-center"
src="/immich-logo.svg"
height="100"
width="100"
alt="immich-logo"
draggable="false"
/>
<ImmichLogo class="text-center" height="100" width="100" />
<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
Admin Registration
</h1>

10
web/src/lib/components/forms/change-password-form.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts">
import { api, UserResponseDto } from '@api';
import { createEventDispatcher } from 'svelte';
import ImmichLogo from '../shared-components/immich-logo.svelte';
export let user: UserResponseDto;
let error: string;
@ -47,14 +48,7 @@
class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
>
<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
<img
class="text-center"
src="/immich-logo.svg"
height="100"
width="100"
alt="immich-logo"
draggable="false"
/>
<ImmichLogo class="text-center" height="100" width="100" />
<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
Change Password
</h1>

10
web/src/lib/components/forms/create-user-form.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts">
import { api } from '@api';
import { createEventDispatcher } from 'svelte';
import ImmichLogo from '../shared-components/immich-logo.svelte';
import {
notificationController,
NotificationType
@ -80,14 +81,7 @@
class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
>
<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
<img
class="text-center"
src="/immich-logo.svg"
height="100"
width="100"
alt="immich-logo"
draggable="false"
/>
<ImmichLogo class="text-center" height="100" width="100" />
<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
Create new user
</h1>

10
web/src/lib/components/forms/login-form.svelte
View file

@ -5,6 +5,7 @@
import { handleError } from '$lib/utils/handle-error';
import { api, oauth, OAuthConfigResponseDto } from '@api';
import { createEventDispatcher, onMount } from 'svelte';
import ImmichLogo from '../shared-components/immich-logo.svelte';
let error: string;
let email = '';
@ -77,14 +78,7 @@
class="border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-md py-8"
>
<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
<img
class="text-center"
src="/immich-logo.svg"
height="100"
width="100"
alt="immich-logo"
draggable="false"
/>
<ImmichLogo class="text-center" height="100" width="100" />
<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">Login</h1>
</div>

3
web/src/lib/components/share-page/individual-shared-viewer.svelte
View file

@ -17,6 +17,7 @@
notificationController,
NotificationType
} from '../shared-components/notification/notification';
import ImmichLogo from '../shared-components/immich-logo.svelte';
export let sharedLink: SharedLinkResponseDto;
export let isOwned: boolean;
@ -122,7 +123,7 @@
class="flex gap-2 place-items-center hover:cursor-pointer ml-6"
href="https://immich.app"
>
<img src="/immich-logo.svg" alt="immich logo" height="30" width="30" draggable="false" />
<ImmichLogo height="30" width="30" />
<h1 class="font-immich-title text-lg text-immich-primary dark:text-immich-dark-primary">
IMMICH
</h1>

10
web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import ImmichLogo from './immich-logo.svelte';
export let dropHandler: (event: DragEvent) => void;
export let dragOverHandler: (event: DragEvent) => void;
@ -14,13 +15,6 @@
on:dragleave={dragLeaveHandler}
class="fixed inset-0 w-full h-full z-[1000] flex flex-col items-center justify-center bg-gray-100/90 dark:bg-immich-dark-bg/90 text-immich-dark-gray dark:text-immich-gray"
>
<img
src="/immich-logo.svg"
alt="immich logo"
height="200"
width="200"
class="animate-bounce pb-16"
draggable="false"
/>
<ImmichLogo height="200" width="200" class="animate-bounce pb-16" />
<div class="text-2xl">Drop files anywhere to upload</div>
</div>

7
web/src/lib/components/shared-components/immich-logo.svelte Normal file
View file

@ -0,0 +1,7 @@
<script lang="ts">
import immichLogoUrl from '$lib/assets/immich-logo.svg';
export let draggable = false;
</script>
<img src={immichLogoUrl} alt="Immich Logo" {draggable} {...$$restProps} />

3
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View file

@ -8,6 +8,7 @@
import ThemeButton from '../theme-button.svelte';
import { AppRoute } from '../../../constants';
import AccountInfoPanel from './account-info-panel.svelte';
import ImmichLogo from '../immich-logo.svelte';
export let user: UserResponseDto;
export let shouldShowUploadButton = true;
@ -50,7 +51,7 @@
class="flex gap-2 place-items-center hover:cursor-pointer"
href="/photos"
>
<img src="/immich-logo.svg" alt="immich logo" height="35" width="35" draggable="false" />
<ImmichLogo height="35" width="35" />
<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">
IMMICH
</h1>

11
web/src/lib/components/shared-components/upload-asset-preview.svelte
View file

@ -2,6 +2,7 @@
import { fade } from 'svelte/transition';
import { asByteUnitString } from '$lib/utils/byte-units';
import { UploadAsset } from '$lib/models/upload-asset';
import ImmichLogo from './immich-logo.svelte';
export let uploadAsset: UploadAsset;
@ -16,13 +17,9 @@
>
<div class="relative">
{#if showFallbackImage}
<img
in:fade={{ duration: 250 }}
src="immich-logo.svg"
alt="Immich Logo"
class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg"
draggable="false"
/>
<div in:fade={{ duration: 250 }}>
<ImmichLogo class="h-[70px] w-[70px] object-cover rounded-tl-lg rounded-bl-lg" />
</div>
{:else}
<img
in:fade={{ duration: 250 }}

3
web/src/lib/components/sharing-page/shared-album-list-tile.svelte
View file

@ -1,13 +1,14 @@
<script lang="ts">
import { AlbumResponseDto, api, ThumbnailFormat, UserResponseDto } from '@api';
import { fade } from 'svelte/transition';
import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
export let album: AlbumResponseDto;
export let user: UserResponseDto;
const loadImageData = async (thubmnailId: string | null) => {
if (thubmnailId == null) {
return '/no-thumbnail.png';
return noThumbnailUrl;
}
const { data } = await api.assetApi.getAssetThumbnail(thubmnailId, ThumbnailFormat.Webp, {