add logic to show placeholder when user is scrolling
This commit is contained in:
parent
c24732e789
commit
b8d36842cc
|
@ -426,7 +426,11 @@ const PhotoFrame = ({
|
|||
handleSelect(filteredData[index].id, index)(!checked);
|
||||
}
|
||||
};
|
||||
const getThumbnail = (files: EnteFile[], index: number) =>
|
||||
const getThumbnail = (
|
||||
files: EnteFile[],
|
||||
index: number,
|
||||
isScrolling: boolean
|
||||
) =>
|
||||
files[index] ? (
|
||||
<PreviewCard
|
||||
key={`tile-${files[index].id}-selected-${
|
||||
|
@ -450,6 +454,7 @@ const PhotoFrame = ({
|
|||
(index >= currentHover && index <= rangeStart)
|
||||
}
|
||||
activeCollection={activeCollection}
|
||||
showPlaceholder={isScrolling}
|
||||
/>
|
||||
) : (
|
||||
<></>
|
||||
|
|
|
@ -24,7 +24,7 @@ import { GalleryContext } from 'pages/gallery';
|
|||
import { SpecialPadding } from 'styles/SpecialPadding';
|
||||
|
||||
const A_DAY = 24 * 60 * 60 * 1000;
|
||||
// const NO_OF_PAGES = 2;
|
||||
const NO_OF_PAGES = 1;
|
||||
const FOOTER_HEIGHT = 90;
|
||||
|
||||
export enum ITEM_TYPE {
|
||||
|
@ -153,7 +153,11 @@ interface Props {
|
|||
width: number;
|
||||
filteredData: EnteFile[];
|
||||
showAppDownloadBanner: boolean;
|
||||
getThumbnail: (files: EnteFile[], index: number) => JSX.Element;
|
||||
getThumbnail: (
|
||||
files: EnteFile[],
|
||||
index: number,
|
||||
isScrolling?: boolean
|
||||
) => JSX.Element;
|
||||
activeCollection: number;
|
||||
resetFetching: () => void;
|
||||
}
|
||||
|
@ -512,9 +516,9 @@ export function PhotoList({
|
|||
}
|
||||
};
|
||||
|
||||
// const extraRowsToRender = Math.ceil(
|
||||
// (NO_OF_PAGES * height) / IMAGE_CONTAINER_MAX_HEIGHT
|
||||
// );
|
||||
const extraRowsToRender = Math.ceil(
|
||||
(NO_OF_PAGES * height) / IMAGE_CONTAINER_MAX_HEIGHT
|
||||
);
|
||||
|
||||
const generateKey = (index) => {
|
||||
switch (timeStampList[index].itemType) {
|
||||
|
@ -527,7 +531,10 @@ export function PhotoList({
|
|||
}
|
||||
};
|
||||
|
||||
const renderListItem = (listItem: TimeStampListItem) => {
|
||||
const renderListItem = (
|
||||
listItem: TimeStampListItem,
|
||||
isScrolling: boolean
|
||||
) => {
|
||||
switch (listItem.itemType) {
|
||||
case ITEM_TYPE.TIME:
|
||||
return listItem.dates ? (
|
||||
|
@ -556,7 +563,8 @@ export function PhotoList({
|
|||
const ret = listItem.items.map((item, idx) =>
|
||||
getThumbnail(
|
||||
filteredDataCopy,
|
||||
listItem.itemStartIndex + idx
|
||||
listItem.itemStartIndex + idx,
|
||||
isScrolling
|
||||
)
|
||||
);
|
||||
if (listItem.groups) {
|
||||
|
@ -587,14 +595,15 @@ export function PhotoList({
|
|||
width={width}
|
||||
itemCount={timeStampList.length}
|
||||
itemKey={generateKey}
|
||||
overscanCount={0}>
|
||||
{({ index, style }) => (
|
||||
overscanCount={extraRowsToRender}
|
||||
useIsScrolling>
|
||||
{({ index, style, isScrolling }) => (
|
||||
<ListItem style={style}>
|
||||
<ListContainer
|
||||
columns={columns}
|
||||
shrinkRatio={shrinkRatio}
|
||||
groups={timeStampList[index].groups}>
|
||||
{renderListItem(timeStampList[index])}
|
||||
{renderListItem(timeStampList[index], isScrolling)}
|
||||
</ListContainer>
|
||||
</ListItem>
|
||||
)}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
|
||||
import React, { useContext, useLayoutEffect, useState } from 'react';
|
||||
import { EnteFile } from 'types/file';
|
||||
import { styled } from '@mui/material';
|
||||
import PlayCircleOutlineOutlinedIcon from '@mui/icons-material/PlayCircleOutlineOutlined';
|
||||
|
@ -18,18 +18,18 @@ import { formatDateRelative } from 'utils/time';
|
|||
|
||||
interface IProps {
|
||||
file: EnteFile;
|
||||
updateURL?: (url: string) => EnteFile;
|
||||
onClick?: () => void;
|
||||
forcedEnable?: boolean;
|
||||
selectable?: boolean;
|
||||
selected?: boolean;
|
||||
onSelect?: (checked: boolean) => void;
|
||||
onHover?: () => void;
|
||||
onRangeSelect?: () => void;
|
||||
isRangeSelectActive?: boolean;
|
||||
selectOnClick?: boolean;
|
||||
isInsSelectRange?: boolean;
|
||||
activeCollection?: number;
|
||||
updateURL: (url: string) => EnteFile;
|
||||
onClick: () => void;
|
||||
selectable: boolean;
|
||||
selected: boolean;
|
||||
onSelect: (checked: boolean) => void;
|
||||
onHover: () => void;
|
||||
onRangeSelect: () => void;
|
||||
isRangeSelectActive: boolean;
|
||||
selectOnClick: boolean;
|
||||
isInsSelectRange: boolean;
|
||||
activeCollection: number;
|
||||
showPlaceholder: boolean;
|
||||
}
|
||||
|
||||
const Check = styled('input')<{ active: boolean }>`
|
||||
|
@ -203,7 +203,6 @@ export default function PreviewCard(props: IProps) {
|
|||
file,
|
||||
onClick,
|
||||
updateURL,
|
||||
forcedEnable,
|
||||
selectable,
|
||||
selected,
|
||||
onSelect,
|
||||
|
@ -213,14 +212,13 @@ export default function PreviewCard(props: IProps) {
|
|||
isRangeSelectActive,
|
||||
isInsSelectRange,
|
||||
} = props;
|
||||
const isMounted = useRef(true);
|
||||
const publicCollectionGalleryContext = useContext(
|
||||
PublicCollectionGalleryContext
|
||||
);
|
||||
const deduplicateContext = useContext(DeduplicateContext);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (file && !file.msrc) {
|
||||
if (file && !file.msrc && !props.showPlaceholder) {
|
||||
const main = async () => {
|
||||
try {
|
||||
let url;
|
||||
|
@ -236,18 +234,14 @@ export default function PreviewCard(props: IProps) {
|
|||
} else {
|
||||
url = await DownloadManager.getThumbnail(file);
|
||||
}
|
||||
if (isMounted.current) {
|
||||
setImgSrc(url);
|
||||
thumbs.set(file.id, url);
|
||||
if (updateURL) {
|
||||
const newFile = updateURL(url);
|
||||
file.msrc = newFile.msrc;
|
||||
file.html = newFile.html;
|
||||
file.src = newFile.src;
|
||||
file.w = newFile.w;
|
||||
file.h = newFile.h;
|
||||
}
|
||||
}
|
||||
setImgSrc(url);
|
||||
thumbs.set(file.id, url);
|
||||
const newFile = updateURL(url);
|
||||
file.msrc = newFile.msrc;
|
||||
file.html = newFile.html;
|
||||
file.src = newFile.src;
|
||||
file.w = newFile.w;
|
||||
file.h = newFile.h;
|
||||
} catch (e) {
|
||||
logError(e, 'preview card useEffect failed');
|
||||
// no-op
|
||||
|
@ -262,12 +256,7 @@ export default function PreviewCard(props: IProps) {
|
|||
main();
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
// cool cool cool
|
||||
isMounted.current = false;
|
||||
};
|
||||
}, [file]);
|
||||
}, [file, props.showPlaceholder]);
|
||||
|
||||
const handleClick = () => {
|
||||
if (selectOnClick) {
|
||||
|
@ -300,10 +289,10 @@ export default function PreviewCard(props: IProps) {
|
|||
|
||||
return (
|
||||
<Cont
|
||||
id={`thumb-${file?.id}`}
|
||||
id={`thumb-${file?.id}-${props.showPlaceholder}`}
|
||||
onClick={handleClick}
|
||||
onMouseEnter={handleHover}
|
||||
disabled={!forcedEnable && !file?.msrc && !imgSrc}
|
||||
disabled={!file?.msrc && !imgSrc}
|
||||
{...(selectable ? useLongPress(longPressCallback, 500) : {})}>
|
||||
{selectable && (
|
||||
<Check
|
||||
|
|
Loading…
Reference in a new issue