kenmirrors/ente
1
0
Fork 0
mirror of https://github.com/ente-io/ente.git synced 2025-08-13 09:47:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remaining fi props

Browse Source
This commit is contained in:
Manav Rathi
2025-02-27 13:06:24 +05:30
parent 51effed5a3
commit 25935f6219
2 changed files with 42 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/apps/photos/src/components/PhotoFrame.tsx
View File

@@ -20,7 +20,7 @@ import { t } from "i18next";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { GalleryContext } from "pages/gallery"; import { GalleryContext } from "pages/gallery";
import PhotoSwipe from "photoswipe"; import PhotoSwipe from "photoswipe";
import { useContext, useEffect, useState } from "react"; import { useCallback, useContext, useEffect, useState } from "react";
import AutoSizer from "react-virtualized-auto-sizer"; import AutoSizer from "react-virtualized-auto-sizer";
import { import {
SelectedState, SelectedState,
@@ -256,6 +256,11 @@ const PhotoFrame = ({
} }
}, [selected]); }, [selected]);
const handleTriggerSyncWithRemote = useCallback(
() => void syncWithRemote(),
[syncWithRemote],
);
if (!displayFiles) { if (!displayFiles) {
return <div />; return <div />;
} }
@@ -535,7 +540,7 @@ const PhotoFrame = ({
files={files} files={files}
initialIndex={currentIndex} initialIndex={currentIndex}
disableDownload={!enableDownload} disableDownload={!enableDownload}
onTriggerSyncWithRemote={() => void syncWithRemote()} onTriggerSyncWithRemote={handleTriggerSyncWithRemote}
{...{ {...{
fileCollectionIDs, fileCollectionIDs,
allCollectionsNameByID, allCollectionsNameByID,

54
web/packages/gallery/components/viewer/FileViewer.tsx
View File

@@ -18,6 +18,7 @@ import {
type ModalVisibilityProps, type ModalVisibilityProps,
} from "@/base/components/utils/modal"; } from "@/base/components/utils/modal";
import type { LocalUser } from "@/base/local-user"; import type { LocalUser } from "@/base/local-user";
import log from "@/base/log";
import { import {
FileInfo, FileInfo,
type FileInfoExif, type FileInfoExif,
@@ -25,7 +26,7 @@ import {
} from "@/gallery/components/FileInfo"; } from "@/gallery/components/FileInfo";
import type { EnteFile } from "@/media/file.js"; import type { EnteFile } from "@/media/file.js";
import { Button, styled } from "@mui/material"; import { Button, styled } from "@mui/material";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { fileInfoExifForFile } from "./data-source"; import { fileInfoExifForFile } from "./data-source";
import { import {
FileViewerPhotoSwipe, FileViewerPhotoSwipe,
@@ -127,18 +128,18 @@ const FileViewer: React.FC<FileViewerProps> = ({
>(undefined); >(undefined);
// If `true`, then we need to trigger a sync with remote when we close. // If `true`, then we need to trigger a sync with remote when we close.
const [needsSync, setNeedsSync] = useState(false); const [, setNeedsSync] = useState(false);
const { show: showFileInfo, props: fileInfoVisibilityProps } = const { show: showFileInfo, props: fileInfoVisibilityProps } =
useModalVisibility(); useModalVisibility();
const handleClose = () => { const handleClose = useCallback(() => {
if (needsSync) { setNeedsSync((needSync) => {
onTriggerSyncWithRemote?.(); if (needSync) onTriggerSyncWithRemote?.();
setNeedsSync(false); return false;
} });
onClose(); onClose();
}; }, [onTriggerSyncWithRemote, onClose]);
const handleAnnotate = useCallback( const handleAnnotate = useCallback(
(file: EnteFile) => { (file: EnteFile) => {
@@ -162,19 +163,28 @@ const FileViewer: React.FC<FileViewerProps> = ({
[showFileInfo], [showFileInfo],
); );
const handleSelectCollection = (collectionID: number) => { const handleScheduleUpdate = useCallback(() => setNeedsSync(true), []);
onSelectCollection(collectionID);
onClose();
};
const handleSelectPerson = onSelectPerson const handleSelectCollection = useCallback(
? (personID: string) => { (collectionID: number) => {
onSelectPerson(personID); onSelectCollection(collectionID);
onClose(); onClose();
} },
: undefined; [onSelectCollection, onClose],
);
const handleSelectPerson = useMemo(() => {
return onSelectPerson
? (personID: string) => {
onSelectPerson(personID);
onClose();
}
: undefined;
}, [onSelectPerson, onClose]);
useEffect(() => { useEffect(() => {
log.debug(() => ["viewer", { action: "useEffect", open }]);
if (!open) { if (!open) {
// The close state will be handled by the cleanup function. // The close state will be handled by the cleanup function.
return; return;
@@ -191,6 +201,10 @@ const FileViewer: React.FC<FileViewerProps> = ({
pswpRef.current = pswp; pswpRef.current = pswp;
return () => { return () => {
log.debug(() => [
"viewer",
{ action: "useEffect/cleanup", pswpRef: pswpRef.current },
]);
pswpRef.current?.closeIfNeeded(); pswpRef.current?.closeIfNeeded();
pswpRef.current = undefined; pswpRef.current = undefined;
}; };
@@ -215,6 +229,8 @@ const FileViewer: React.FC<FileViewerProps> = ({
pswpRef.current.refreshCurrentSlideContent(); pswpRef.current.refreshCurrentSlideContent();
}, []); }, []);
log.debug(() => ["viewer", { action: "render", pswpRef: pswpRef.current }]);
return ( return (
<Container> <Container>
<Button>Test</Button> <Button>Test</Button>
@@ -225,7 +241,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
allowEdits={!!activeAnnotatedFile?.annotation.isOwnFile} allowEdits={!!activeAnnotatedFile?.annotation.isOwnFile}
allowMap={!!user} allowMap={!!user}
showCollections={!!user} showCollections={!!user}
scheduleUpdate={() => setNeedsSync(true)} scheduleUpdate={handleScheduleUpdate}
refreshPhotoswipe={handleRefreshPhotoswipe} refreshPhotoswipe={handleRefreshPhotoswipe}
onSelectCollection={handleSelectCollection} onSelectCollection={handleSelectCollection}
onSelectPerson={handleSelectPerson} onSelectPerson={handleSelectPerson}