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