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

refactor(web): remove buffer package (#11058)

Browse source
This commit is contained in:
Michel Heusschen 2024-07-12 18:40:57 +02:00 • committed by GitHub
parent 1b3a7feb67
commit 5748f50c1f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 29 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

24
web/src/lib/components/assets/thumbnail/__test__/image-thumbnail.spec.ts Normal file
View file

@ -0,0 +1,24 @@
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import { render } from '@testing-library/svelte';
describe('ImageThumbnail component', () => {
beforeAll(() => {
Object.defineProperty(HTMLImageElement.prototype, 'decode', {
value: vi.fn(),
});
});
it('shows thumbhash while image is loading', () => {
const sut = render(ImageThumbnail, {
url: 'http://localhost/img.png',
altText: 'test',
thumbhash: '1QcSHQRnh493V4dIh4eXh1h4kJUI',
widthStyle: '250px',
});
const [_, thumbhash] = sut.getAllByRole('img');
expect(thumbhash.getAttribute('src')).toContain(
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAgCAYAAAD5VeO1AAAMRklEQVR4AQBdAKL/', // truncated
);
});
});

5
web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
View file

@ -1,9 +1,8 @@
<script lang="ts">
import { onMount, tick } from 'svelte';
import { decodeBase64 } from '$lib/utils';
import { fade } from 'svelte/transition';
import { thumbHashToDataURL } from 'thumbhash';
// eslint-disable-next-line unicorn/prefer-node-protocol
import { Buffer } from 'buffer';
import { mdiEyeOffOutline } from '@mdi/js';
import Icon from '$lib/components/elements/icon.svelte';
@ -62,7 +61,7 @@
<img
style:width={widthStyle}
style:height={heightStyle}
src={thumbHashToDataURL(Buffer.from(thumbhash, 'base64'))}
src={thumbHashToDataURL(decodeBase64(thumbhash))}
alt={altText}
{title}
class="absolute top-0 object-cover"