diff --git a/src/components/PhotoFrame.tsx b/src/components/PhotoFrame.tsx index 662daf521..0f416abd5 100644 --- a/src/components/PhotoFrame.tsx +++ b/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], diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c0ced3619..3d2c4a9e8 100644 --- a/src/pages/index.tsx +++ b/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(); };