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 7

Feature - Implemented virtual scroll on web (#573)

Browse source 
This PR implemented a virtual scroll on the web, as seen in this article.

[Building the Google Photos Web UI](https://medium.com/google-design/google-photos-45b714dfbed1)
This commit is contained in:
Alex 2022-09-04 08:34:39 -05:00 • committed by GitHub
parent bd92dde117
commit 552340add7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
58 changed files with 2197 additions and 698 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,32 +15,19 @@
export let thumbnailSize: number | undefined = undefined;
export let format: ThumbnailFormat = ThumbnailFormat.Webp;
export let selected: boolean = false;
export let isExisted: boolean = false;
export let disabled: boolean = false;
let imageData: string;
// let videoData: string;
let mouseOver: boolean = false;
$: dispatch('mouseEvent', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
$: dispatch('mouse-event', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
let mouseOverIcon: boolean = false;
let videoPlayerNode: HTMLVideoElement;
let isThumbnailVideoPlaying = false;
let calculateVideoDurationIntervalHandler: NodeJS.Timer;
let videoProgress = '00:00';
// let videoAbortController: AbortController;
let videoUrl: string;
const loadImageData = async () => {
const { data } = await api.assetApi.getAssetThumbnail(asset.id, format, {
responseType: 'blob'
});
if (data instanceof Blob) {
imageData = URL.createObjectURL(data);
return imageData;
}
};
const loadVideoData = async () => {
isThumbnailVideoPlaying = false;
@ -117,7 +104,7 @@
$: getThumbnailBorderStyle = () => {
if (selected) {
return 'border-[20px] border-immich-primary/20';
} else if (isExisted) {
} else if (disabled) {
return 'border-[20px] border-gray-300';
} else {
return '';
@ -125,36 +112,38 @@
};
$: getOverlaySelectorIconStyle = () => {
if (selected || isExisted) {
if (selected || disabled) {
return '';
} else {
return 'bg-gradient-to-b from-gray-800/50';
}
};
const thumbnailClickedHandler = () => {
if (!isExisted) {
if (!disabled) {
dispatch('click', { asset });
}
};
const onIconClickedHandler = (e: MouseEvent) => {
e.stopPropagation();
dispatch('select', { asset });
if (!disabled) {
dispatch('select', { asset });
}
};
</script>
<IntersectionObserver once={true} let:intersecting>
<IntersectionObserver once={false} let:intersecting>
<div
style:width={`${thumbnailSize}px`}
style:height={`${thumbnailSize}px`}
class={`bg-gray-100 relative ${getSize()} ${
isExisted ? 'cursor-not-allowed' : 'hover:cursor-pointer'
disabled ? 'cursor-not-allowed' : 'hover:cursor-pointer'
}`}
on:mouseenter={handleMouseOverThumbnail}
on:mouseleave={handleMouseLeaveThumbnail}
on:click={thumbnailClickedHandler}
>
{#if mouseOver || selected || isExisted}
{#if mouseOver || selected || disabled}
<div
in:fade={{ duration: 200 }}
class={`w-full ${getOverlaySelectorIconStyle()} via-white/0 to-white/0 absolute p-2 z-10`}
@ -167,7 +156,7 @@
>
{#if selected}
<CheckCircle size="24" color="#4250af" />
{:else if isExisted}
{:else if disabled}
<CheckCircle size="24" color="#252525" />
{:else}
<CheckCircle size="24" color={mouseOverIcon ? 'white' : '#d8dadb'} />
@ -212,12 +201,13 @@
<!-- Thumbnail -->
{#if intersecting}
<img
id={asset.id}
style:width={`${thumbnailSize}px`}
style:height={`${thumbnailSize}px`}
in:fade={{ duration: 250 }}
in:fade={{ duration: 150 }}
src={`/api/asset/thumbnail/${asset.id}?format=${format}`}
alt={asset.id}
class={`object-cover ${getSize()} transition-all duration-100 z-0 ${getThumbnailBorderStyle()}`}
class={`object-cover ${getSize()} transition-all z-0 ${getThumbnailBorderStyle()}`}
loading="lazy"
/>
{/if}