Link

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

@@ -1,3 +1,4 @@
+import { useModalVisibility } from "@/base/components/utils/modal";
 import log from "@/base/log";
 import {
     downloadManager,
@@ -159,6 +160,9 @@ const PhotoFrame = ({
     const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false);
     const router = useRouter();
 
+    const { show: showPhotoSwipe, props: photoSwipeVisibilityProps } =
+        useModalVisibility();
+
     const [displayFiles, setDisplayFiles] = useState<DisplayFile[] | undefined>(
         undefined,
     );
@@ -262,8 +266,12 @@ const PhotoFrame = ({
 
     const onThumbnailClick = (index: number) => () => {
         setCurrentIndex(index);
-        setOpen(true);
-        setIsPhotoSwipeOpen?.(true);
+        if (process.env.NEXT_PUBLIC_ENTE_WIP_PS5) {
+            showPhotoSwipe();
+        } else {
+            setOpen(true);
+            setIsPhotoSwipeOpen?.(true);
+        }
     };
 
     const handleSelect = handleSelectCreator(
@@ -504,8 +512,12 @@ const PhotoFrame = ({
     return (
         <Container>
             {process.env.NEXT_PUBLIC_ENTE_WIP_PS5 && (
-                /* @ts-expect-error TODO(PS): test */
-                <FileViewer files={files} index={currentIndex} />
+                <FileViewer
+                    {...photoSwipeVisibilityProps}
+                    /* @ts-expect-error TODO(PS): test */
+                    files={files}
+                    index={currentIndex}
+                />
             )}
             <AutoSizer>
                 {({ height, width }) => (

web/packages/new/photos/components/FileViewer5.tsx

@@ -62,7 +62,7 @@ interface FileViewerProps {
  *
  * The documentation for PhotoSwipe is at https://photoswipe.com/.
  */
-const FileViewer: React.FC<FileViewerProps> = ({ files, index }) => {
+const FileViewer: React.FC<FileViewerProps> = ({ open, files, index }) => {
     const pswpRef = useRef<PhotoSwipe | undefined>();
 
     useEffect(() => {
@@ -86,16 +86,30 @@ const FileViewer: React.FC<FileViewerProps> = ({ files, index }) => {
                 height: 100,
             };
         });
-        // initializing PhotoSwipe Core adds it to the DOM.
-        pswp.init();
         pswpRef.current = pswp;
 
         return () => {
-            pswp.destroy();
+            if (pswpRef.current.isOpen) pswpRef.current.destroy();
             pswpRef.current = undefined;
         };
     }, []);
 
+    useEffect(() => {
+        const pswp = pswpRef.current!;
+        if (open) {
+            if (!pswp.isOpen) {
+                // Initializing PhotoSwipe adds it to the DOM as a "dialog" div
+                // with the class "pswp" (and others).
+                pswp.init();
+            }
+        } else {
+            if (pswp.isOpen) {
+                // Closing PhotoSwipe removes it from the DOM.
+                pswp.close();
+            }
+        }
+    }, [open]);
+
     return (
         <Container>
             <Button>Test</Button>