Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-03-11 02:23:09 -05:00
Code Issues Activity

fix(web): hide img alt text while loading (#1834)

Browse source
This commit is contained in:
Michel Heusschen 2023-02-22 18:52:23 +01:00 • committed by GitHub
parent 846e35f57e
commit a9a769d902
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
web/src/lib/components/shared-components/immich-thumbnail.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
import { AssetResponseDto, AssetTypeEnum, getFileUrl, ThumbnailFormat } from '@api';
import { createEventDispatcher, onDestroy } from 'svelte';
import { createEventDispatcher } from 'svelte';
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
@ -22,14 +22,13 @@
export let publicSharedKey = '';
export let isRoundedCorner = false;
let imageData: string;
let mouseOver = false;
let playMotionVideo = false;
$: dispatch('mouse-event', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
let mouseOverIcon = false;
let videoPlayerNode: HTMLVideoElement;
let isImageLoading = true;
let isThumbnailVideoPlaying = false;
let calculateVideoDurationIntervalHandler: NodeJS.Timer;
let videoProgress = '00:00';
@ -69,10 +68,6 @@
}
};
onDestroy(() => {
URL.revokeObjectURL(imageData);
});
const getSize = () => {
if (thumbnailSize) {
return `w-[${thumbnailSize}px] h-[${thumbnailSize}px]`;
@ -255,12 +250,13 @@
id={asset.id}
style:width={`${thumbnailSize}px`}
style:height={`${thumbnailSize}px`}
in:fade={{ duration: 150 }}
src={`/api/asset/thumbnail/${asset.id}?format=${format}&key=${publicSharedKey}`}
alt={asset.id}
class={`object-cover ${getSize()} transition-all z-0 ${getThumbnailBorderStyle()}`}
class:opacity-0={isImageLoading}
loading="lazy"
draggable="false"
on:load|once={() => (isImageLoading = false)}
/>
{/if}
@ -305,3 +301,9 @@
{/if}
</div>
</IntersectionObserver>
<style>
img {
transition: 0.2s ease all;
}
</style>