update photo gallery

map/src/context/AppContext.js

@@ -325,6 +325,8 @@ export const AppContextProvider = (props) => {
     const [poiIconCache, setPoiIconCache] = useState({});
 
     const [wikiPlaces, setWikiPlaces] = useState(null);
+    const [photoGallery, setPhotoGallery] = useState(null);
+    const [selectedPhotoInd, setSelectedPhotoInd] = useState(-1);
     const [searchSettings, setSearchSettings] = useState({});
 
     const [routingCache, mutateRoutingCache] = useMutator({});
@@ -564,6 +566,10 @@ export const AppContextProvider = (props) => {
                 setPrevPageUrl,
                 pageParams,
                 setPageParams,
+                photoGallery,
+                setPhotoGallery,
+                selectedPhotoInd,
+                setSelectedPhotoInd,
             }}
         >
             {props.children}

map/src/frame/components/GlobalFrame.js

@@ -24,6 +24,7 @@ import DialogActions from '@mui/material/DialogActions';
 import _, { isEmpty } from 'lodash';
 import TracksManager, { createTrackGroups, getGpxFiles } from '../../manager/track/TracksManager';
 import { addCloseTracksToRecently } from '../../menu/visibletracks/VisibleTracks';
+import PhotosModal from '../../menu/search/PhotosModal';
 
 const GlobalFrame = () => {
     const ctx = useContext(AppContext);
@@ -204,6 +205,9 @@ const GlobalFrame = () => {
                     setMenuInfo={setMenuInfo}
                     setOpenVisibleMenu={setOpenVisibleMenu}
                 />
+                {ctx.selectedPhotoInd !== -1 && (
+                    <PhotosModal photos={ctx.photoGallery} selectedPhotoIndex={ctx.selectedPhotoInd} />
+                )}
             </Box>
             <MainMenu
                 size={MAIN_MENU_SIZE}

map/src/infoblock/components/InformationBlock.jsx

@@ -16,6 +16,7 @@ import styles from '../../menu/trackfavmenu.module.css';
 import { isVisibleTrack } from '../../menu/visibletracks/VisibleTracks';
 import WeatherForecastDetails from '../../menu/weather/WeatherForecastDetails';
 import WptDetails from './wpt/WptDetails';
+import WptPhotoGallery from './wpt/WptPhotoGallery';
 
 const PersistentTabPanel = ({ tabId, selectedTabId, children }) => {
     const [mounted, setMounted] = useState(false);
@@ -201,13 +202,16 @@ export default function InformationBlock({ showInfoBlock, setShowInfoBlock, setC
             {showInfoBlock && (
                 <>
                     {openWeatherForecastDetails && <WeatherForecastDetails setShowInfoBlock={setShowInfoBlock} />}
-                    {openWptDetails && (
-                        <WptDetails
-                            isDetails={ctx.selectedWpt?.trackWptItem || ctx.selectedWpt?.favItem}
-                            setOpenWptTab={setOpenWptTab}
-                            setShowInfoBlock={setShowInfoBlock}
-                        />
-                    )}
+                    {openWptDetails &&
+                        (ctx.photoGallery ? (
+                            <WptPhotoGallery photos={ctx.photoGallery} />
+                        ) : (
+                            <WptDetails
+                                isDetails={ctx.selectedWpt?.trackWptItem || ctx.selectedWpt?.favItem}
+                                setOpenWptTab={setOpenWptTab}
+                                setShowInfoBlock={setShowInfoBlock}
+                            />
+                        ))}
                     {hasOldTabs() && (
                         <Box anchor={'right'} sx={{ height: 'auto', width: getWidth(), overflowX: 'hidden' }}>
                             <div id="se-infoblock-all">

map/src/infoblock/components/wpt/WptPhotoGallery.jsx

@@ -0,0 +1,50 @@
+import { AppBar, Box, IconButton, ImageList, Toolbar, Typography } from '@mui/material';
+import React, { useContext, useState, useCallback } from 'react';
+import headerStyles from '../../../menu/trackfavmenu.module.css';
+import styles from '../../infoblock.module.css';
+import AppContext from '../../../context/AppContext';
+import { ReactComponent as BackIcon } from '../../../assets/icons/ic_arrow_back.svg';
+import ImageItem from '../../../menu/search/ImageItem';
+
+export default function WptPhotoGallery({ photos }) {
+    const ctx = useContext(AppContext);
+    const [loadedImages, setLoadedImages] = useState({});
+
+    const handleImageLoad = useCallback((index) => {
+        setLoadedImages((prevState) => ({
+            ...prevState,
+            [index]: true,
+        }));
+    }, []);
+
+    return (
+        <Box minWidth={ctx.infoBlockWidth} maxWidth={ctx.infoBlockWidth} sx={{ height: 'auto', overflowX: 'hidden' }}>
+            <AppBar position="static" className={headerStyles.appbar}>
+                <Toolbar className={headerStyles.toolbar}>
+                    <IconButton
+                        variant="contained"
+                        type="button"
+                        className={styles.closeIcon}
+                        onClick={() => ctx.setPhotoGallery(null)}
+                    >
+                        <BackIcon />
+                    </IconButton>
+                    <Typography component="div" className={headerStyles.title}>
+                        Photos
+                    </Typography>
+                </Toolbar>
+            </AppBar>
+            <ImageList sx={{ pr: '16px', pl: '16px', overflowX: 'hidden' }} gap={16} cols={2}>
+                {photos.map((photo, index) => (
+                    <ImageItem
+                        key={index}
+                        photo={photo}
+                        index={index}
+                        handleImageLoad={handleImageLoad}
+                        isLoaded={!!loadedImages[index]}
+                    />
+                ))}
+            </ImageList>
+        </Box>
+    );
+}

map/src/menu/search/ImageItem.jsx

@@ -0,0 +1,36 @@
+import { useInView } from 'react-intersection-observer';
+import React, { useCallback, useContext } from 'react';
+import { ImageListItem, Skeleton } from '@mui/material';
+import { WIKI_IMAGE_BASE_URL } from '../../manager/SearchManager';
+import AppContext from '../../context/AppContext';
+
+export default function ImageItem({ photo, index, handleImageLoad, isLoaded }) {
+    const ctx = useContext(AppContext);
+    const { ref, inView } = useInView({
+        triggerOnce: true,
+        threshold: 0.1,
+    });
+
+    const handlePhotoClick = useCallback((index) => {
+        ctx.setSelectedPhotoInd(index);
+    }, []);
+
+    return (
+        <ImageListItem ref={ref} onClick={() => handlePhotoClick(index)}>
+            {!isLoaded && <Skeleton variant="rectangular" width="100%" />}
+            {inView && (
+                <img
+                    src={`${WIKI_IMAGE_BASE_URL}${photo.properties.imageTitle}?width=300`}
+                    alt={`thumbnail-${index}`}
+                    style={{
+                        display: isLoaded ? 'block' : 'none',
+                        width: '156px',
+                        height: '156px',
+                        objectFit: 'cover',
+                    }}
+                    onLoad={() => handleImageLoad(index)}
+                />
+            )}
+        </ImageListItem>
+    );
+}

map/src/menu/search/PhotoGallery.jsx

@@ -1,20 +1,22 @@
-import React, { useState } from 'react';
-import { Box, Button, Divider, Grid, ListItemText, MenuItem, Modal, Typography } from '@mui/material';
-import SwipeableViews from 'react-swipeable-views';
+import React, { useContext, useState } from 'react';
+import { Box, Button, Divider, Grid, ListItemText, MenuItem, Typography } from '@mui/material';
 import { WIKI_IMAGE_BASE_URL } from '../../manager/SearchManager';
 import styles from '../search/search.module.css';
 import { useTranslation } from 'react-i18next';
+import AppContext from '../../context/AppContext';
 
 export default function PhotoGallery({ photos }) {
+    const ctx = useContext(AppContext);
+
     const MAX_PHOTOS = 100;
 
-    const [open, setOpen] = useState(false);
-    const [activeStep, setActiveStep] = useState(0);
     const { t } = useTranslation();
 
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState({});
 
+    const filteredPhotos = filterPhotos(photos).slice(0, MAX_PHOTOS);
+
     const handleImageLoad = () => {
         setLoading(false);
     };
@@ -23,9 +25,7 @@ export default function PhotoGallery({ photos }) {
         setError((prevError) => ({ ...prevError, [index]: true }));
     };
 
-    const handleOpen = () => setOpen(true);
-    const handleClose = () => setOpen(false);
-    const handleStepChange = (step) => setActiveStep(step);
+    const handleOpen = () => ctx.setPhotoGallery(filteredPhotos);
 
     function filterPhotos(photos) {
         const imageExtensions = ['.jpeg', '.jpg', '.png', '.gif'];
@@ -46,8 +46,6 @@ export default function PhotoGallery({ photos }) {
             }, []);
     }
 
-    const filteredPhotos = filterPhotos(photos).slice(0, MAX_PHOTOS);
-
     return (
         <>
             {filteredPhotos.length > 0 && (
@@ -103,70 +101,6 @@ export default function PhotoGallery({ photos }) {
                         </Button>
                     )}
                     <Divider sx={{ marginTop: 2 }} />
-
-                    <Modal
-                        open={open}
-                        onClose={handleClose}
-                        sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-                    >
-                        <Box
-                            sx={{
-                                width: '500px',
-                                height: '500px',
-                                bgcolor: 'background.paper',
-                                p: 2,
-                                overflow: 'hidden',
-                                position: 'relative',
-                            }}
-                        >
-                            <SwipeableViews
-                                axis={'x'}
-                                index={activeStep}
-                                onChangeIndex={handleStepChange}
-                                style={{ height: '100%' }}
-                                containerStyle={{ display: 'block' }}
-                            >
-                                {filteredPhotos.map((photo, index) => (
-                                    <div key={index}>
-                                        <a
-                                            href={`https://commons.wikimedia.org/wiki/File:${photo.properties.imageTitle}`}
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                        >
-                                            {!error[index] && (
-                                                <img
-                                                    onLoad={handleImageLoad}
-                                                    onError={() => handleImageError(index)}
-                                                    src={`${WIKI_IMAGE_BASE_URL}${photo.properties.imageTitle}?width=500`}
-                                                    alt={`Photo ${index + 1}`}
-                                                    style={{
-                                                        display: loading ? 'none' : 'block',
-                                                        maxHeight: '100%',
-                                                        maxWidth: '100%',
-                                                        overflow: 'hidden',
-                                                    }}
-                                                />
-                                            )}
-                                        </a>
-                                    </div>
-                                ))}
-                            </SwipeableViews>
-                            <Box
-                                sx={{
-                                    position: 'absolute',
-                                    bottom: 4,
-                                    left: 4,
-                                    right: 4,
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                }}
-                            >
-                                <Button className={styles.photoCloseButton} component="span" onClick={handleClose}>
-                                    {t('shared_string_close')}
-                                </Button>
-                            </Box>
-                        </Box>
-                    </Modal>
                 </Box>
             )}
         </>