new

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;

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<CollectionBarCardProps> = ({
     onCollectionClick,
 }: CollectionBarCardProps) => (
     <div>
-        <CollectionCard
-            collectionTile={CollectionBarTile}
+        <ItemCard
+            TileComponent={BarItemTile}
             coverFile={collectionSummary.coverFile}
             onClick={() => onCollectionClick(collectionSummary.id)}
         >
             <CardText text={collectionSummary.name} />
             <CollectionBarCardIcon type={collectionSummary.type} />
-        </CollectionCard>
+        </ItemCard>
         {activeCollectionID === collectionSummary.id && <ActiveIndicator />}
     </div>
 );
 
-const CollectionBarTile = styled(CollectionTile)`
-    width: 90px;
-    height: 64px;
-`;
-
 interface CardTextProps {
     text: string;
 }
@@ -557,15 +551,15 @@ interface PersonCardProps {
 
 const PersonCard = ({ person, activePerson }: PersonCardProps) => (
     <Box>
-        <CollectionCard
-            collectionTile={CollectionBarTile}
+        <ItemCard
+            TileComponent={BarItemTile}
             coverFile={person.displayFaceFile}
             onClick={() => {
                 //onCollectionClick(collectionSummary.id);
             }}
         >
             <CardText text={person.name} />
-        </CollectionCard>
+        </ItemCard>
         {activePerson.id === person.id && <ActiveIndicator />}
     </Box>
 );

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}
                     />
                 </Box>
                 <ItemContainer>

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<React.PropsWithChildren>;
+    /**
+     * 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<React.PropsWithChildren<ItemCardProps>> = ({
-    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 (
         <TileComponent {...{ onClick }}>
-            {coverFile.metadata.hasStaticThumbnail ? (
+            {coverFile?.metadata.hasStaticThumbnail ? (
                 <StaticThumbnail fileType={coverFile.metadata.fileType} />
             ) : coverImageURL ? (
                 <img src={coverImageURL} />
@@ -53,7 +64,7 @@ export const ItemCard: React.FC<React.PropsWithChildren<ItemCardProps>> = ({
  * 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;
+`;

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 }) => (
                     <ItemCard
                         key={file.id}
                         coverFile={file}
-                        TileComponent={ResultPreviewTile}
+                        TileComponent={PreviewItemTile}
                     />
                 ))}
             </Stack>