Uncontext

web/apps/photos/src/components/PhotoFrame.tsx

@@ -1,4 +1,5 @@
 import log from "@/base/log";
+import type { FileInfoProps } from "@/gallery/components/FileInfo";
 import {
     downloadManager,
     type LivePhotoSourceURL,
@@ -11,7 +12,7 @@ import { FileViewer } from "@/new/photos/components/FileViewerComponents";
 import type { GalleryBarMode } from "@/new/photos/components/gallery/reducer";
 import { TRASH_SECTION } from "@/new/photos/services/collection";
 import { styled } from "@mui/material";
-import { PhotoViewer, type PhotoViewerProps } from "components/PhotoViewer";
+import { PhotoViewer } from "components/PhotoViewer";
 import { useRouter } from "next/router";
 import { GalleryContext } from "pages/gallery";
 import PhotoSwipe from "photoswipe";
@@ -67,7 +68,13 @@ export type DisplayFile = EnteFile & {
     canForceConvert?: boolean;
 };
 
-export interface PhotoFrameProps {
+export type PhotoFrameProps = Pick<
+    FileInfoProps,
+    | "fileCollectionIDs"
+    | "allCollectionsNameByID"
+    | "onSelectCollection"
+    | "onSelectPerson"
+> & {
     mode?: GalleryBarMode;
     /**
      * This is an experimental prop, to see if we can merge the separate
@@ -112,15 +119,12 @@ export interface PhotoFrameProps {
     /** This will be set if mode is "people". */
     activePersonID?: string | undefined;
     enableDownload?: boolean;
-    fileCollectionIDs?: Map<number, number[]>;
-    allCollectionsNameByID?: Map<number, string>;
     showAppDownloadBanner?: boolean;
     setIsPhotoSwipeOpen?: (value: boolean) => void;
     isInHiddenSection?: boolean;
     setFilesDownloadProgressAttributesCreator?: SetFilesDownloadProgressAttributesCreator;
     selectable?: boolean;
-    onSelectPerson?: PhotoViewerProps["onSelectPerson"];
-}
+};
 
 /**
  * TODO: Rename me to FileListWithViewer (or Gallery?)
@@ -145,6 +149,7 @@ const PhotoFrame = ({
     isInHiddenSection,
     setFilesDownloadProgressAttributesCreator,
     selectable,
+    onSelectCollection,
     onSelectPerson,
 }: PhotoFrameProps) => {
     const [open, setOpen] = useState(false);
@@ -524,6 +529,12 @@ const PhotoFrame = ({
                     onClose={handleClose}
                     files={files}
                     initialIndex={currentIndex}
+                    {...{
+                        fileCollectionIDs,
+                        allCollectionsNameByID,
+                        onSelectCollection,
+                        onSelectPerson,
+                    }}
                 />
             )}
             <AutoSizer>
@@ -555,9 +566,10 @@ const PhotoFrame = ({
                     favoriteFileIDs,
                     markUnsyncedFavoriteUpdate,
                     markTempDeleted,
-                    allCollectionsNameByID,
-                    fileCollectionIDs,
                     setFilesDownloadProgressAttributesCreator,
+                    fileCollectionIDs,
+                    allCollectionsNameByID,
+                    onSelectCollection,
                     onSelectPerson,
                 }}
             />

web/apps/photos/src/components/PhotoViewer/index.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/base/components/utils/modal";
 import { lowercaseExtension } from "@/base/file-name";
 import log from "@/base/log";
-import { FileInfo, type FileInfoProps } from "@/gallery/components/FileInfo";
+import { FileInfo } from "@/gallery/components/FileInfo";
 import { type FileInfoExif } from "@/gallery/components/viewer/data-source";
 import { downloadManager } from "@/gallery/services/download";
 import { extractRawExif, parseExif } from "@/gallery/services/exif";
@@ -76,7 +76,13 @@ import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery";
 
 export type PhotoViewerProps = Pick<
     PhotoFrameProps,
-    "favoriteFileIDs" | "markUnsyncedFavoriteUpdate" | "markTempDeleted"
+    | "favoriteFileIDs"
+    | "markUnsyncedFavoriteUpdate"
+    | "markTempDeleted"
+    | "fileCollectionIDs"
+    | "allCollectionsNameByID"
+    | "onSelectCollection"
+    | "onSelectPerson"
 > & {
     /**
      * The PhotoViewer is shown when this is `true`.
@@ -102,9 +108,6 @@ export type PhotoViewerProps = Pick<
     isInHiddenSection: boolean;
     enableDownload: boolean;
     setFilesDownloadProgressAttributesCreator: SetFilesDownloadProgressAttributesCreator;
-    fileCollectionIDs?: Map<number, number[]>;
-    allCollectionsNameByID?: Map<number, string>;
-    onSelectPerson?: FileInfoProps["onSelectPerson"];
 };
 
 /**
@@ -138,6 +141,7 @@ export const PhotoViewer: React.FC<PhotoViewerProps> = ({
     setFilesDownloadProgressAttributesCreator,
     fileCollectionIDs,
     allCollectionsNameByID,
+    onSelectCollection,
     onSelectPerson,
 }) => {
     const { showLoadingBar, hideLoadingBar } = usePhotosAppContext();
@@ -733,7 +737,7 @@ export const PhotoViewer: React.FC<PhotoViewerProps> = ({
     };
 
     const handleSelectCollection = (collectionID: number) => {
-        galleryContext.onShowCollection(collectionID);
+        onSelectCollection(collectionID);
         handleClose();
     };
 

web/apps/photos/src/pages/gallery.tsx

@@ -134,7 +134,6 @@ import { FILE_OPS_TYPE, getSelectedFiles, handleFileOps } from "utils/file";
 
 const defaultGalleryContext: GalleryContextType = {
     setActiveCollectionID: () => null,
-    onShowCollection: () => null,
     syncWithRemote: () => null,
     setBlockingLoad: () => null,
     photoListHeader: null,
@@ -813,11 +812,6 @@ const Page: React.FC = () => {
             value={{
                 ...defaultGalleryContext,
                 setActiveCollectionID: handleSetActiveCollectionID,
-                onShowCollection: (id) =>
-                    dispatch({
-                        type: "showNormalOrHiddenCollectionSummary",
-                        collectionSummaryID: id,
-                    }),
                 syncWithRemote,
                 setBlockingLoad,
                 photoListHeader,
@@ -1046,6 +1040,12 @@ const Page: React.FC = () => {
                             setFilesDownloadProgressAttributesCreator
                         }
                         selectable={true}
+                        onSelectCollection={(collectionID) =>
+                            dispatch({
+                                type: "showNormalOrHiddenCollectionSummary",
+                                collectionSummaryID: collectionID,
+                            })
+                        }
                         onSelectPerson={(personID) => {
                             dispatch({ type: "showPerson", personID });
                         }}

web/apps/photos/src/types/gallery/index.ts

@@ -40,8 +40,6 @@ export interface MergedSourceURL {
 
 export interface GalleryContextType {
     setActiveCollectionID: (collectionID: number) => void;
-    /** Newer and almost equivalent alternative to setActiveCollectionID. */
-    onShowCollection: (collectionID: number) => void;
     syncWithRemote: (force?: boolean, silent?: boolean) => Promise<void>;
     setBlockingLoad: (value: boolean) => void;
     photoListHeader: TimeStampListItem;

web/packages/gallery/components/FileInfo.tsx

@@ -124,8 +124,9 @@ export type FileInfoProps = ModalVisibilityProps & {
      * If set, then a clickable chip will be shown for each collection that this
      * file is a part of.
      *
-     * Uses {@link fileCollectionIDs} and {@link allCollectionsNameByID}, so
-     * both of those props should also be set for this to have an effect.
+     * Uses {@link fileCollectionIDs}, {@link allCollectionsNameByID} and
+     * {@link onSelectCollection}, so all of those props should also be set for
+     * this to have an effect.
      */
     showCollections?: boolean;
     /**
@@ -146,11 +147,11 @@ export type FileInfoProps = ModalVisibilityProps & {
      * Called when the user selects a collection from among the collections that
      * the file belongs to.
      */
-    onSelectCollection: (collectionID: number) => void;
+    onSelectCollection?: (collectionID: number) => void;
     /**
      * Called when the user selects a person in the file info panel.
      */
-    onSelectPerson?: ((personID: string) => void) | undefined;
+    onSelectPerson?: (personID: string) => void;
 };
 
 export const FileInfo: React.FC<FileInfoProps> = ({
@@ -315,7 +316,8 @@ export const FileInfo: React.FC<FileInfoProps> = ({
                 )}
                 {showCollections &&
                     fileCollectionIDs &&
-                    allCollectionsNameByID && (
+                    allCollectionsNameByID &&
+                    onSelectCollection && (
                         <InfoItem icon={<FolderOutlinedIcon />}>
                             <Stack
                                 direction="row"

web/packages/gallery/components/viewer/FileViewer.tsx

@@ -17,39 +17,48 @@ import {
     useModalVisibility,
     type ModalVisibilityProps,
 } from "@/base/components/utils/modal";
-import { FileInfo } from "@/gallery/components/FileInfo";
+import { FileInfo, type FileInfoProps } from "@/gallery/components/FileInfo";
 import type { EnteFile } from "@/media/file.js";
 import { Button, styled } from "@mui/material";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { fileInfoExifForFile, type FileInfoExif } from "./data-source";
 import { FileViewerPhotoSwipe } from "./photoswipe";
 
-export type FileViewerProps = ModalVisibilityProps & {
-    /**
-     * The list of files that are currently being displayed in the context in
-     * which the file viewer was invoked.
-     *
-     * Although the file viewer is called on to display a particular file
-     * (specified by the {@link initialIndex} prop), the viewer is always used
-     * in the context of a an album, or search results, or some other arbitrary
-     * list of files. The {@link files} prop sets this underlying list of files.
-     *
-     * After the initial file has been shown, the user can navigate through the
-     * other files from within the viewer by using the arrow buttons.
-     */
-    files: EnteFile[];
-    /**
-     * The index of the file that should be initially shown.
-     *
-     * Subsequently the user may navigate between files by using the controls
-     * provided within the file viewer itself.
-     */
-    initialIndex: number;
-    /**
-     * If true then the viewer does not show controls for downloading the file.
-     */
-    disableDownload?: boolean;
-};
+export type FileViewerProps = ModalVisibilityProps &
+    Pick<
+        FileInfoProps,
+        | "fileCollectionIDs"
+        | "allCollectionsNameByID"
+        | "onSelectCollection"
+        | "onSelectPerson"
+    > & {
+        /**
+         * The list of files that are currently being displayed in the context
+         * in which the file viewer was invoked.
+         *
+         * Although the file viewer is called on to display a particular file
+         * (specified by the {@link initialIndex} prop), the viewer is always
+         * used in the context of a an album, or search results, or some other
+         * arbitrary list of files. The {@link files} prop sets this underlying
+         * list of files.
+         *
+         * After the initial file has been shown, the user can navigate through
+         * the other files from within the viewer by using the arrow buttons.
+         */
+        files: EnteFile[];
+        /**
+         * The index of the file that should be initially shown.
+         *
+         * Subsequently the user may navigate between files by using the
+         * controls provided within the file viewer itself.
+         */
+        initialIndex: number;
+        /**
+         * If true then the viewer does not show controls for downloading the
+         * file.
+         */
+        disableDownload?: boolean;
+    };
 
 /**
  * A PhotoSwipe based image and video viewer.
@@ -60,6 +69,10 @@ const FileViewer: React.FC<FileViewerProps> = ({
     files,
     initialIndex,
     disableDownload,
+    fileCollectionIDs,
+    allCollectionsNameByID,
+    onSelectCollection,
+    onSelectPerson,
 }) => {
     const pswpRef = useRef<FileViewerPhotoSwipe | undefined>();
 
@@ -93,6 +106,18 @@ const FileViewer: React.FC<FileViewerProps> = ({
         [showFileInfo],
     );
 
+    const handleSelectCollection = (collectionID: number) => {
+        onSelectCollection(collectionID);
+        onClose();
+    };
+
+    const handleSelectPerson = onSelectPerson
+        ? (personID: string) => {
+              onSelectPerson(personID);
+              onClose();
+          }
+        : undefined;
+
     useEffect(() => {
         if (!open) {
             // The close state will be handled by the cleanup function.
@@ -136,6 +161,9 @@ const FileViewer: React.FC<FileViewerProps> = ({
                 {...fileInfoVisibilityProps}
                 file={activeFile}
                 exif={activeFileExif}
+                onSelectCollection={handleSelectCollection}
+                onSelectPerson={handleSelectPerson}
+                {...{ fileCollectionIDs, allCollectionsNameByID }}
             />
         </Container>
     );