focus wip
This commit is contained in:
@@ -315,11 +315,18 @@ export default function Gallery() {
|
||||
const hiddenCollectionSummaries = state.hiddenCollectionSummaries;
|
||||
const tempDeletedFileIDs = state.tempDeletedFileIDs;
|
||||
const tempHiddenFileIDs = state.tempHiddenFileIDs;
|
||||
const barMode = state.barMode ?? "albums";
|
||||
const activeCollectionID = state.activeCollectionID;
|
||||
const activeCollection = state.activeCollection;
|
||||
const activePersonID = state.activePersonID;
|
||||
const barMode = state.focus.type ?? "albums";
|
||||
const activeCollectionID =
|
||||
state.focus.type == "people"
|
||||
? undefined
|
||||
: state.focus.activeCollectionSummaryID;
|
||||
const activeCollection =
|
||||
state.focus.type == "people" ? undefined : state.focus.activeCollection;
|
||||
const activePerson =
|
||||
state.focus.type == "people" ? state.focus.activePerson : undefined;
|
||||
const activePersonID = activePerson?.id;
|
||||
const isInSearchMode = state.isInSearchMode;
|
||||
const filteredFiles = state.filteredFiles;
|
||||
|
||||
if (process.env.NEXT_PUBLIC_ENTE_WIP_CL) console.log("render", { state });
|
||||
|
||||
@@ -484,8 +491,8 @@ export default function Gallery() {
|
||||
!archivedCollectionIDs
|
||||
) {
|
||||
dispatch({
|
||||
type: "set",
|
||||
filteredData: [],
|
||||
type: "setFilteredFiles",
|
||||
filteredFiles: [],
|
||||
galleryPeopleState: undefined,
|
||||
});
|
||||
return;
|
||||
@@ -510,8 +517,8 @@ export default function Gallery() {
|
||||
}
|
||||
|
||||
dispatch({
|
||||
type: "set",
|
||||
filteredData: filteredFiles,
|
||||
type: "setFilteredFiles",
|
||||
filteredFiles,
|
||||
galleryPeopleState,
|
||||
});
|
||||
}, [
|
||||
@@ -529,8 +536,6 @@ export default function Gallery() {
|
||||
activePersonID,
|
||||
]);
|
||||
|
||||
const { filteredData, ...galleryPeopleState } = state;
|
||||
|
||||
const selectAll = (e: KeyboardEvent) => {
|
||||
// ignore ctrl/cmd + a if the user is typing in a text field
|
||||
if (
|
||||
@@ -550,7 +555,7 @@ export default function Gallery() {
|
||||
exportModalView ||
|
||||
authenticateUserModalView ||
|
||||
isPhotoSwipeOpen ||
|
||||
!filteredData?.length ||
|
||||
!filteredFiles?.length ||
|
||||
!user
|
||||
) {
|
||||
return;
|
||||
@@ -561,10 +566,10 @@ export default function Gallery() {
|
||||
count: 0,
|
||||
collectionID: activeCollectionID,
|
||||
context:
|
||||
barMode == "people" && galleryPeopleState?.activePerson?.id
|
||||
barMode == "people" && activePersonID
|
||||
? {
|
||||
mode: "people" as const,
|
||||
personID: galleryPeopleState.activePerson.id,
|
||||
personID: activePersonID,
|
||||
}
|
||||
: {
|
||||
mode: barMode as "albums" | "hidden-albums",
|
||||
@@ -572,7 +577,7 @@ export default function Gallery() {
|
||||
},
|
||||
};
|
||||
|
||||
filteredData.forEach((item) => {
|
||||
filteredFiles.forEach((item) => {
|
||||
if (item.ownerID === user.id) {
|
||||
selected.ownCount++;
|
||||
}
|
||||
@@ -746,7 +751,7 @@ export default function Gallery() {
|
||||
startLoading();
|
||||
try {
|
||||
setOpenCollectionSelector(false);
|
||||
const selectedFiles = getSelectedFiles(selected, filteredData);
|
||||
const selectedFiles = getSelectedFiles(selected, filteredFiles);
|
||||
const toProcessFiles =
|
||||
ops === COLLECTION_OPS_TYPE.REMOVE
|
||||
? selectedFiles
|
||||
@@ -782,7 +787,7 @@ export default function Gallery() {
|
||||
// passing files here instead of filteredData for hide ops because we want to move all files copies to hidden collection
|
||||
const selectedFiles = getSelectedFiles(
|
||||
selected,
|
||||
ops === FILE_OPS_TYPE.HIDE ? files : filteredData,
|
||||
ops === FILE_OPS_TYPE.HIDE ? files : filteredFiles,
|
||||
);
|
||||
const toProcessFiles =
|
||||
ops === FILE_OPS_TYPE.DOWNLOAD
|
||||
@@ -925,7 +930,7 @@ export default function Gallery() {
|
||||
[],
|
||||
);
|
||||
|
||||
if (!user || !filteredData) {
|
||||
if (!user || !filteredFiles) {
|
||||
// Don't render until we get the logged in user and dispatch "mount".
|
||||
return <div></div>;
|
||||
}
|
||||
@@ -1050,8 +1055,11 @@ export default function Gallery() {
|
||||
setActiveCollectionID: handleSetActiveCollectionID,
|
||||
hiddenCollectionSummaries,
|
||||
showPeopleSectionButton,
|
||||
people: galleryPeopleState?.people ?? [],
|
||||
activePerson: galleryPeopleState?.activePerson,
|
||||
people:
|
||||
(state.focus.type == "people"
|
||||
? state.focus.people
|
||||
: undefined) ?? [],
|
||||
activePerson,
|
||||
onSelectPerson: handleSelectPerson,
|
||||
setCollectionNamerAttributes,
|
||||
setPhotoListHeader,
|
||||
@@ -1109,14 +1117,14 @@ export default function Gallery() {
|
||||
) : !isInSearchMode &&
|
||||
!isFirstLoad &&
|
||||
barMode == "people" &&
|
||||
!galleryPeopleState?.activePerson ? (
|
||||
!activePerson ? (
|
||||
<PeopleEmptyState />
|
||||
) : (
|
||||
<PhotoFrame
|
||||
page={PAGES.GALLERY}
|
||||
mode={barMode}
|
||||
modePlus={isInSearchMode ? "search" : barMode}
|
||||
files={filteredData}
|
||||
files={filteredFiles}
|
||||
syncWithRemote={syncWithRemote}
|
||||
favItemIds={state.favoriteFileIDs}
|
||||
setSelected={setSelected}
|
||||
@@ -1126,7 +1134,7 @@ export default function Gallery() {
|
||||
}
|
||||
setIsPhotoSwipeOpen={setIsPhotoSwipeOpen}
|
||||
activeCollectionID={activeCollectionID}
|
||||
activePersonID={galleryPeopleState?.activePerson?.id}
|
||||
activePersonID={activePerson?.id}
|
||||
enableDownload={true}
|
||||
fileToCollectionsMap={fileToCollectionsMap}
|
||||
collectionNameMap={collectionNameMap}
|
||||
|
||||
@@ -44,13 +44,16 @@ import type { FamilyData } from "../../services/user";
|
||||
|
||||
/**
|
||||
* Specifies what the bar at the top of the gallery is displaying currently.
|
||||
*
|
||||
* TODO: Deprecated(?). Use GalleryFocus instead. Deprecated if it can be used
|
||||
* in all cases where the bar mode was in use.
|
||||
*/
|
||||
export type GalleryBarMode = "albums" | "hidden-albums" | "people";
|
||||
|
||||
/**
|
||||
* Specifies what the gallery is currently displaying.
|
||||
*
|
||||
* TODO: An experiment at consolidating state.
|
||||
* This can be overridden by a search.
|
||||
*/
|
||||
export type GalleryFocus =
|
||||
| {
|
||||
@@ -59,7 +62,16 @@ export type GalleryFocus =
|
||||
* albums.
|
||||
*/
|
||||
type: "albums" | "hidden-albums";
|
||||
activeCollectionID: number;
|
||||
activeCollectionSummaryID: number;
|
||||
/**
|
||||
* If the active collection ID is for a collection and not a
|
||||
* pseudo-collection, this property will be set to the corresponding
|
||||
* {@link Collection}.
|
||||
*
|
||||
* It is guaranteed that this will be one of the {@link collections}
|
||||
* (when we are in the "albums" focus) or {@link hiddenCollections}
|
||||
* (when we are in "hidden-albums" focus).
|
||||
*/
|
||||
activeCollection: Collection | undefined;
|
||||
activeCollectionSummary: CollectionSummary;
|
||||
}
|
||||
@@ -195,66 +207,22 @@ export interface GalleryState {
|
||||
* local state also gets synced in a bit.
|
||||
*/
|
||||
tempDeletedFileIDs: Set<number>;
|
||||
|
||||
/**
|
||||
* Variant of {@link tempDeletedFileIDs} for files that have just been
|
||||
* hidden.
|
||||
*/
|
||||
tempHiddenFileIDs: Set<number>;
|
||||
|
||||
/*--< Transient UI state >--*/
|
||||
/*--< State that underlies transient UI state >--*/
|
||||
|
||||
/**
|
||||
* If visible, what should the (sticky) gallery bar show.
|
||||
*/
|
||||
barMode: GalleryBarMode | undefined;
|
||||
/**
|
||||
* The section / area, and the item within it, that the gallery is currently
|
||||
* showing.
|
||||
*/
|
||||
focus: GalleryFocus | undefined;
|
||||
activeCollectionID: number | undefined;
|
||||
/**
|
||||
* If the active collection ID is for a collection and not a
|
||||
* pseudo-collection, this property will be set to the corresponding
|
||||
* {@link Collection}.
|
||||
*
|
||||
* It is guaranteed that this will be one of the {@link collections} (when
|
||||
* we are in the "albums" focus) or {@link hiddenCollections} (when we are
|
||||
* in "hidden-albums" focus).
|
||||
*/
|
||||
activeCollection: Collection | undefined;
|
||||
/**
|
||||
* The currently selected person, if any.
|
||||
*
|
||||
* When present, it is used to derive the {@link activePerson} property of
|
||||
* the {@link focus}.
|
||||
* the {@link focus}. UI code should use the focus, this is meant as the
|
||||
* underlying primitive state.
|
||||
*/
|
||||
activePersonID: string | undefined;
|
||||
|
||||
filteredData: EnteFile[];
|
||||
/**
|
||||
* The currently selected person, if any.
|
||||
*
|
||||
* Whenever this is present, it is guaranteed to be one of the items from
|
||||
* within {@link people}.
|
||||
*/
|
||||
activePerson: Person | undefined;
|
||||
/**
|
||||
* The list of people to show.
|
||||
*/
|
||||
people: Person[] | undefined;
|
||||
/**
|
||||
* `true` if we are in "search mode".
|
||||
*
|
||||
* We will always be in search mode if we are showing search results, but we
|
||||
* also may be in search mode earlier on smaller screens, where the search
|
||||
* input is only shown on entering search mode. See: [Note: "Search mode"].
|
||||
*
|
||||
* That is, {@link isInSearchMode} may be true even when
|
||||
* {@link searchResults} is undefined.
|
||||
*/
|
||||
isInSearchMode: boolean;
|
||||
selectedPersonID: string | undefined;
|
||||
/**
|
||||
* List of files that match the selected search option.
|
||||
*
|
||||
@@ -266,6 +234,31 @@ export interface GalleryState {
|
||||
* set this value to the result.
|
||||
*/
|
||||
searchResults: EnteFile[] | undefined;
|
||||
|
||||
/*--< Transient UI state >--*/
|
||||
|
||||
/**
|
||||
* The section, and the item within it, that the gallery is currently
|
||||
* showing.
|
||||
*
|
||||
* This can be temporarily overridden when we display search results.
|
||||
*/
|
||||
focus: GalleryFocus | undefined;
|
||||
/**
|
||||
* The files to show, uniqued and sorted appropriately.
|
||||
*/
|
||||
filteredFiles: EnteFile[] | undefined;
|
||||
/**
|
||||
* `true` if we are in "search mode".
|
||||
*
|
||||
* We will always be in search mode if we are showing search results, but we
|
||||
* also may be in search mode earlier on smaller screens, where the search
|
||||
* input is only shown on entering search mode. See: [Note: "Search mode"].
|
||||
*
|
||||
* That is, {@link isInSearchMode} may be true even when
|
||||
* {@link searchResults} is undefined.
|
||||
*/
|
||||
isInSearchMode: boolean;
|
||||
}
|
||||
|
||||
export type GalleryAction =
|
||||
@@ -279,8 +272,8 @@ export type GalleryAction =
|
||||
trashedFiles: EnteFile[];
|
||||
}
|
||||
| {
|
||||
type: "set";
|
||||
filteredData: EnteFile[];
|
||||
type: "setFilteredFiles";
|
||||
filteredFiles: EnteFile[];
|
||||
galleryPeopleState:
|
||||
| { activePerson: Person | undefined; people: Person[] }
|
||||
| undefined;
|
||||
|
||||
Reference in New Issue
Block a user