diff --git a/web/apps/photos/src/components/Collections/CollectionCard.tsx b/web/apps/photos/src/components/Collections/CollectionCard.tsx index 44f6fac84a..9451d6c082 100644 --- a/web/apps/photos/src/components/Collections/CollectionCard.tsx +++ b/web/apps/photos/src/components/Collections/CollectionCard.tsx @@ -6,7 +6,7 @@ import downloadManager from "@/new/photos/services/download"; import { EnteFile } from "@/new/photos/types/file"; import { useEffect, useState } from "react"; -/** See also: {@link ItemCard}. */ +/** Deprecated in favor of {@link ItemCard}. */ export default function CollectionCard(props: { children?: any; coverFile: EnteFile; diff --git a/web/apps/photos/src/components/Collections/CollectionListBar.tsx b/web/apps/photos/src/components/Collections/CollectionListBar.tsx index d6b8c15e9d..563079b24b 100644 --- a/web/apps/photos/src/components/Collections/CollectionListBar.tsx +++ b/web/apps/photos/src/components/Collections/CollectionListBar.tsx @@ -1,4 +1,5 @@ import { useIsMobileWidth } from "@/base/hooks"; +import { BarItemTile, ItemCard } from "@/new/photos/components/ItemCards"; import type { Person } from "@/new/photos/services/ml/cgroups"; import type { CollectionSummary, @@ -15,7 +16,6 @@ import PeopleIcon from "@mui/icons-material/People"; import PushPin from "@mui/icons-material/PushPin"; import { Box, IconButton, Stack, Typography, styled } from "@mui/material"; import Tooltip from "@mui/material/Tooltip"; -import { CollectionTile } from "components/Collections/styledComponents"; import { IMAGE_CONTAINER_MAX_WIDTH, MIN_COLUMNS, @@ -33,7 +33,6 @@ import AutoSizer from "react-virtualized-auto-sizer"; import { FixedSizeList, ListChildComponentProps, areEqual } from "react-window"; import { COLLECTION_LIST_SORT_BY } from "utils/collection"; import type { GalleryBarMode } from "."; -import CollectionCard from "./CollectionCard"; import CollectionListSortBy from "./CollectionListSortBy"; export interface CollectionListBarProps { @@ -453,23 +452,18 @@ const CollectionBarCard: React.FC = ({ onCollectionClick, }: CollectionBarCardProps) => (
- onCollectionClick(collectionSummary.id)} > - + {activeCollectionID === collectionSummary.id && }
); -const CollectionBarTile = styled(CollectionTile)` - width: 90px; - height: 64px; -`; - interface CardTextProps { text: string; } @@ -557,15 +551,15 @@ interface PersonCardProps { const PersonCard = ({ person, activePerson }: PersonCardProps) => ( - { //onCollectionClick(collectionSummary.id); }} > - + {activePerson.id === person.id && } ); diff --git a/web/apps/photos/src/components/ExportPendingList.tsx b/web/apps/photos/src/components/ExportPendingList.tsx index 7b1267903a..dbc9a60ca4 100644 --- a/web/apps/photos/src/components/ExportPendingList.tsx +++ b/web/apps/photos/src/components/ExportPendingList.tsx @@ -1,4 +1,4 @@ -import { ResultPreviewTile } from "@/new/photos/components/ItemCards"; +import { PreviewItemTile } from "@/new/photos/components/ItemCards"; import { EnteFile } from "@/new/photos/types/file"; import { FlexWrapper } from "@ente/shared/components/Container"; import DialogBoxV2 from "@ente/shared/components/DialogBoxV2"; @@ -33,7 +33,7 @@ const ExportPendingList = (props: Iprops) => { key={file.id} coverFile={file} onClick={() => null} - collectionTile={ResultPreviewTile} + collectionTile={PreviewItemTile} /> diff --git a/web/packages/new/photos/components/ItemCards.tsx b/web/packages/new/photos/components/ItemCards.tsx index 4b8edf71b5..2153e51854 100644 --- a/web/packages/new/photos/components/ItemCards.tsx +++ b/web/packages/new/photos/components/ItemCards.tsx @@ -8,10 +8,19 @@ import { styled } from "@mui/material"; import React, { useEffect, useState } from "react"; interface ItemCardProps { - /** The file whose thumbnail (if any) should be should be shown. */ - coverFile: EnteFile; /** One of the *Tile components to use as the top level element. */ TileComponent: React.FC; + /** + * The file (if any) whose thumbnail (if any) should be should be shown. + */ + coverFile: EnteFile | undefined; + /** + * Optional boolean indicating if the user is currently scrolling. + * + * This is used as a hint by the cover file downloader to prioritize + * downloads. + */ + isScrolling?: boolean; /** Optional click handler. */ onClick?: () => void; } @@ -22,22 +31,24 @@ interface ItemCardProps { * This is a simplified variant / almost-duplicate of {@link CollectionCard}. */ export const ItemCard: React.FC> = ({ - coverFile, TileComponent, + coverFile, + isScrolling, onClick, children, }) => { const [coverImageURL, setCoverImageURL] = useState(""); useEffect(() => { + if (!coverFile) return; void downloadManager - .getThumbnailForPreview(coverFile) + .getThumbnailForPreview(coverFile, isScrolling) .then((url) => url && setCoverImageURL(url)); - }, [coverFile]); + }, [coverFile, isScrolling]); return ( - {coverFile.metadata.hasStaticThumbnail ? ( + {coverFile?.metadata.hasStaticThumbnail ? ( ) : coverImageURL ? ( @@ -53,7 +64,7 @@ export const ItemCard: React.FC> = ({ * A generic "base" tile, meant to be used as the {@link TileComponent} provided * to an {@link ItemCard}. * - * Currently a verbatim copy of {@link CollectionTile}. + * Currently a verbatim copy of the deprecated {@link CollectionTile}. */ export const ItemTile = styled("div")` display: flex; @@ -71,9 +82,18 @@ export const ItemTile = styled("div")` `; /** - * A TileComponent for use in search result dropdown's preview files. + * A 48x48 TileComponent used in search result dropdown's preview files and + * other places. */ -export const ResultPreviewTile = styled(ItemTile)` +export const PreviewItemTile = styled(ItemTile)` width: 48px; height: 48px; `; + +/** + * A rectangular, TV-ish tile used in the gallery bar. + */ +export const BarItemTile = styled(ItemTile)` + width: 90px; + height: 64px; +`; diff --git a/web/packages/new/photos/components/SearchBar.tsx b/web/packages/new/photos/components/SearchBar.tsx index b66b62dfe8..3c447a855e 100644 --- a/web/packages/new/photos/components/SearchBar.tsx +++ b/web/packages/new/photos/components/SearchBar.tsx @@ -1,6 +1,6 @@ import { assertionFailed } from "@/base/assert"; import { useIsMobileWidth } from "@/base/hooks"; -import { ItemCard, ResultPreviewTile } from "@/new/photos/components/ItemCards"; +import { ItemCard, PreviewItemTile } from "@/new/photos/components/ItemCards"; import { isMLSupported, mlStatusSnapshot, @@ -489,7 +489,7 @@ const OptionContents = ({ data: option }: { data: SearchOption }) => ( ))}