Merge pull request #349 from ente-io/handle-back-press

back button press to open and close photoswipe

src/components/PhotoFrame.tsx

@@ -22,6 +22,7 @@ import { SetFiles, SelectedState, Search, setSearchStats } from 'types/gallery';
 import { FILE_TYPE } from 'constants/file';
 import PublicCollectionDownloadManager from 'services/publicCollectionDownloadManager';
 import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
+import { useRouter } from 'next/router';
 
 const Container = styled.div`
     display: block;
@@ -49,6 +50,8 @@ const EmptyScreen = styled.div`
     }
 `;
 
+const PHOTOSWIPE_HASH_SUFFIX = '&photoswipe-opened';
+
 interface Props {
     files: EnteFile[];
     setFiles: SetFiles;
@@ -97,6 +100,7 @@ const PhotoFrame = ({
     const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false);
     const filteredDataRef = useRef([]);
     const filteredData = filteredDataRef?.current ?? [];
+    const router = useRouter();
     useEffect(() => {
         const handleKeyDown = (e: KeyboardEvent) => {
             if (e.key === 'Shift') {
@@ -110,6 +114,18 @@ const PhotoFrame = ({
         };
         document.addEventListener('keydown', handleKeyDown, false);
         document.addEventListener('keyup', handleKeyUp, false);
+        router.events.on('hashChangeComplete', (url: string) => {
+            const start = url.indexOf('#');
+            const hash = url.slice(start !== -1 ? start : url.length);
+            const shouldPhotoSwipeBeOpened = hash.endsWith(
+                PHOTOSWIPE_HASH_SUFFIX
+            );
+            if (shouldPhotoSwipeBeOpened) {
+                setOpen(true);
+            } else {
+                setOpen(false);
+            }
+        });
         return () => {
             document.addEventListener('keydown', handleKeyDown, false);
             document.addEventListener('keyup', handleKeyUp, false);
@@ -210,6 +226,21 @@ const PhotoFrame = ({
             });
     }, [files, deleted, search, activeCollection]);
 
+    useEffect(() => {
+        const currentURL = new URL(window.location.href);
+        const end = currentURL.hash.lastIndexOf('&');
+        const hash = currentURL.hash.slice(1, end !== -1 ? end : undefined);
+        if (open) {
+            router.push({
+                hash: hash + PHOTOSWIPE_HASH_SUFFIX,
+            });
+        } else {
+            router.push({
+                hash: hash,
+            });
+        }
+    }, [open]);
+
     const updateURL = (index: number) => (url: string) => {
         files[index] = {
             ...files[index],

src/pages/index.tsx

@@ -119,10 +119,12 @@ export default function LandingPage() {
     }, []);
 
     const handleAlbumsRedirect = async (currentURL: URL) => {
+        const end = currentURL.hash.lastIndexOf('&');
+        const hash = currentURL.hash.slice(1, end !== -1 ? end : undefined);
         await router.replace({
             pathname: PAGES.SHARED_ALBUMS,
             search: currentURL.search,
-            hash: currentURL.hash,
+            hash: hash,
         });
         await initLocalForage();
     };