diff --git a/web/apps/photos/src/components/PhotoFrame.tsx b/web/apps/photos/src/components/PhotoFrame.tsx index ccf0908a2b..9d81684af6 100644 --- a/web/apps/photos/src/components/PhotoFrame.tsx +++ b/web/apps/photos/src/components/PhotoFrame.tsx @@ -44,12 +44,18 @@ const Container = styled("div")` const PHOTOSWIPE_HASH_SUFFIX = "&opened"; -interface Props { +export interface PhotoFrameProps { page: | PHOTOS_PAGES.GALLERY | PHOTOS_PAGES.DEDUPLICATE | PHOTOS_PAGES.SHARED_ALBUMS; mode?: GalleryBarMode; + /** + * This is an experimental prop, to see if we can merge the separate + * "isInSearchMode" state kept by the gallery to be instead provided as a + * another mode in which the gallery operates. + */ + modePlus?: GalleryBarMode | "search"; files: EnteFile[]; duplicates?: Duplicate[]; syncWithRemote: () => Promise; @@ -79,6 +85,7 @@ const PhotoFrame = ({ page, duplicates, mode, + modePlus, files, syncWithRemote, favItemIds, @@ -97,7 +104,7 @@ const PhotoFrame = ({ setFilesDownloadProgressAttributesCreator, selectable, onSelectPerson, -}: Props) => { +}: PhotoFrameProps) => { const [open, setOpen] = useState(false); const [currentIndex, setCurrentIndex] = useState(0); const [fetching, setFetching] = useState<{ [k: number]: boolean }>({}); @@ -556,6 +563,7 @@ const PhotoFrame = ({ height={height} getThumbnail={getThumbnail} mode={mode} + modePlus={modePlus} displayFiles={displayFiles} activeCollectionID={activeCollectionID} activePersonID={activePersonID} diff --git a/web/apps/photos/src/components/PhotoList/index.tsx b/web/apps/photos/src/components/PhotoList/index.tsx index e9777a8166..f40aa7887d 100644 --- a/web/apps/photos/src/components/PhotoList/index.tsx +++ b/web/apps/photos/src/components/PhotoList/index.tsx @@ -1,4 +1,3 @@ -import type { GalleryBarMode } from "@/new/photos/components/Gallery/BarImpl"; import { EnteFile } from "@/new/photos/types/file"; import { formattedByteSize } from "@/new/photos/utils/units"; import { FlexWrapper } from "@ente/shared/components/Container"; @@ -17,12 +16,14 @@ import { import { handleSelectCreator } from "utils/photoFrame"; import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery"; +import { assertionFailed } from "@/base/assert"; import { GAP_BTW_TILES, IMAGE_CONTAINER_MAX_HEIGHT, IMAGE_CONTAINER_MAX_WIDTH, MIN_COLUMNS, } from "@/new/photos/components/PhotoList"; +import type { PhotoFrameProps } from "components/PhotoFrame"; export const DATE_CONTAINER_HEIGHT = 48; export const SIZE_AND_COUNT_CONTAINER_HEIGHT = 72; @@ -187,10 +188,9 @@ const NothingContainer = styled(ListItemContainer)` justify-content: center; `; -interface Props { +type Props = Pick & { height: number; width: number; - mode?: GalleryBarMode; displayFiles: EnteFile[]; showAppDownloadBanner: boolean; getThumbnail: ( @@ -200,7 +200,7 @@ interface Props { ) => JSX.Element; activeCollectionID: number; activePersonID?: string; -} +}; interface ItemData { timeStampList: TimeStampListItem[]; @@ -257,6 +257,7 @@ export function PhotoList({ height, width, mode, + modePlus, displayFiles, showAppDownloadBanner, getThumbnail, @@ -890,9 +891,25 @@ export function PhotoList({ renderListItem, ); + // The old, mode unaware, behaviour. + let key = `${activeCollectionID}`; + if (modePlus) { + // If the new experimental modePlus prop is provided, use it to derive a + // mode specific key. + if (modePlus == "search") { + key = "search"; + } else if (modePlus == "people") { + if (!activePersonID) { + assertionFailed(); + } else { + key = activePersonID; + } + } + } + return (