handle back button press to open and close photoswipe
This commit is contained in:
parent
8a1bcea4bc
commit
e71fb680ef
|
@ -22,6 +22,7 @@ import { SetFiles, SelectedState, Search, setSearchStats } from 'types/gallery';
|
||||||
import { FILE_TYPE } from 'constants/file';
|
import { FILE_TYPE } from 'constants/file';
|
||||||
import PublicCollectionDownloadManager from 'services/publicCollectionDownloadManager';
|
import PublicCollectionDownloadManager from 'services/publicCollectionDownloadManager';
|
||||||
import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
|
import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
|
||||||
const Container = styled.div`
|
const Container = styled.div`
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -49,6 +50,8 @@ const EmptyScreen = styled.div`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const PHOTOSWIPE_HASH_SUFFIX = '&photoswipe-opened';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
files: EnteFile[];
|
files: EnteFile[];
|
||||||
setFiles: SetFiles;
|
setFiles: SetFiles;
|
||||||
|
@ -97,6 +100,7 @@ const PhotoFrame = ({
|
||||||
const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false);
|
const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false);
|
||||||
const filteredDataRef = useRef([]);
|
const filteredDataRef = useRef([]);
|
||||||
const filteredData = filteredDataRef?.current ?? [];
|
const filteredData = filteredDataRef?.current ?? [];
|
||||||
|
const router = useRouter();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleKeyDown = (e: KeyboardEvent) => {
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
if (e.key === 'Shift') {
|
if (e.key === 'Shift') {
|
||||||
|
@ -110,6 +114,18 @@ const PhotoFrame = ({
|
||||||
};
|
};
|
||||||
document.addEventListener('keydown', handleKeyDown, false);
|
document.addEventListener('keydown', handleKeyDown, false);
|
||||||
document.addEventListener('keyup', handleKeyUp, 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 photoSwipeShouldBeOpened = hash.endsWith(
|
||||||
|
PHOTOSWIPE_HASH_SUFFIX
|
||||||
|
);
|
||||||
|
if (photoSwipeShouldBeOpened) {
|
||||||
|
setOpen(true);
|
||||||
|
} else {
|
||||||
|
setOpen(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
return () => {
|
return () => {
|
||||||
document.addEventListener('keydown', handleKeyDown, false);
|
document.addEventListener('keydown', handleKeyDown, false);
|
||||||
document.addEventListener('keyup', handleKeyUp, false);
|
document.addEventListener('keyup', handleKeyUp, false);
|
||||||
|
@ -210,6 +226,21 @@ const PhotoFrame = ({
|
||||||
});
|
});
|
||||||
}, [files, deleted, search, activeCollection]);
|
}, [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) => {
|
const updateURL = (index: number) => (url: string) => {
|
||||||
files[index] = {
|
files[index] = {
|
||||||
...files[index],
|
...files[index],
|
||||||
|
|
|
@ -119,10 +119,12 @@ export default function LandingPage() {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleAlbumsRedirect = async (currentURL: URL) => {
|
const handleAlbumsRedirect = async (currentURL: URL) => {
|
||||||
|
const end = currentURL.hash.lastIndexOf('&');
|
||||||
|
const hash = currentURL.hash.slice(1, end !== -1 ? end : undefined);
|
||||||
await router.replace({
|
await router.replace({
|
||||||
pathname: PAGES.SHARED_ALBUMS,
|
pathname: PAGES.SHARED_ALBUMS,
|
||||||
search: currentURL.search,
|
search: currentURL.search,
|
||||||
hash: currentURL.hash,
|
hash: hash,
|
||||||
});
|
});
|
||||||
await initLocalForage();
|
await initLocalForage();
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue