RouteList: Switch photos automatically

zbycz · Sep 17, 2024 · da68787 · da68787
1 parent 212d72c
commit da68787
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 10 deletions.
diff --git a/src/components/FeaturePanel/Climbing/ClimbingView.tsx b/src/components/FeaturePanel/Climbing/ClimbingView.tsx
@@ -22,6 +22,9 @@ import { getCommonsImageUrl } from '../../../services/images/getCommonsImageUrl'
 import { useUserSettingsContext } from '../../utils/UserSettingsContext';
 import { CLIMBING_ROUTE_ROW_HEIGHT, SPLIT_PANE_DEFAULT_HEIGHT } from './config';
 import { ClimbingViewContent } from './ClimbingViewContent';
+import { getOsmappLink } from '../../../services/helpers';
+import { useRouter } from 'next/router';
+import { GalleryControls } from './Editor/GalleryControls';
 
 const Container = styled.div`
   position: relative;
@@ -191,6 +194,8 @@ export const ClimbingView = ({ photo }: { photo?: string }) => {
     loadedPhotos,
     routeListTopOffsets,
     setRouteSelectedIndex,
+    routes,
+    setPhotoPath,
   } = useClimbingContext();
   const { feature } = useFeatureContext();
 
@@ -295,6 +300,9 @@ export const ClimbingView = ({ photo }: { photo?: string }) => {
     ShadowBottom,
   } = useScrollShadow([areRoutesLoading]);
   const theme = useTheme();
+  const router = useRouter();
+  const [isPhotoLoading, setIsPhotoLoading] = useState(false);
+
   const { userSettings } = useUserSettingsContext();
 
   const isResolutionLoaded =
@@ -305,6 +313,16 @@ export const ClimbingView = ({ photo }: { photo?: string }) => {
     Object.keys(resolutions).filter((key) => resolutions[key] === true).length >
       0;
 
+  const replacePhotoIfNeeded = (photos: string[], selectedIndex: number) => {
+    if (!photos.includes(photoPath) && selectedIndex > -1 && !isPhotoLoading) {
+      if (photos.length > 0) {
+        const featureLink = getOsmappLink(feature);
+        router.replace(`${featureLink}/climbing/photo/${photos[0]}`);
+        setIsPhotoLoading(true);
+      }
+    }
+  };
+
   const selectRouteByScroll = (e) => {
     const { scrollTop } = e.target;
     const scrollTopWithOffset = scrollTop + 20 + CLIMBING_ROUTE_ROW_HEIGHT;
@@ -315,6 +333,10 @@ export const ClimbingView = ({ photo }: { photo?: string }) => {
         offset + CLIMBING_ROUTE_ROW_HEIGHT >= scrollTopWithOffset,
     );
 
+    const selectedRoute = routes[selectedIndex];
+    const photos = selectedRoute?.paths ? Object.keys(selectedRoute.paths) : [];
+
+    replacePhotoIfNeeded(photos, selectedIndex);
     if (selectedIndex !== -1) setRouteSelectedIndex(selectedIndex);
   };
 
@@ -359,7 +381,7 @@ export const ClimbingView = ({ photo }: { photo?: string }) => {
             $imageUrl={backgroundImageUrl}
           >
             <>
-              {!isResolutionLoaded && (
+              {(!isResolutionLoaded || isPhotoLoading) && (
                 <MiniLoadingContainer>
                   <CircularProgress color="primary" size={14} thickness={6} />
                 </MiniLoadingContainer>
@@ -377,6 +399,8 @@ export const ClimbingView = ({ photo }: { photo?: string }) => {
                   >
                     <>
                       <RoutesEditor
+                        setIsPhotoLoading={setIsPhotoLoading}
+                        isPhotoLoading={isPhotoLoading}
                         isRoutesLayerVisible={
                           !isSplitViewDragging && !areRoutesLoading
                         }
@@ -385,6 +409,7 @@ export const ClimbingView = ({ photo }: { photo?: string }) => {
                       />
                     </>
                   </TransformComponent>
+                  {photoZoom.scale < 1.2 && <GalleryControls />}
                 </TransformWrapper>
                 {isEditMode && (
                   <>

diff --git a/src/components/FeaturePanel/Climbing/Editor/RoutesEditor.tsx b/src/components/FeaturePanel/Climbing/Editor/RoutesEditor.tsx
@@ -5,7 +5,6 @@ import { useClimbingContext } from '../contexts/ClimbingContext';
 import { updateElementOnIndex } from '../utils/array';
 import { PositionPx } from '../types';
 import { getPositionInImageFromMouse } from '../utils/mousePositionUtils';
-import { GalleryControls } from './GalleryControls';
 import { getCommonsImageUrl } from '../../../../services/images/getCommonsImageUrl';
 
 const EditorContainer = styled.div<{ imageHeight: number }>`
@@ -43,6 +42,8 @@ export const RoutesEditor = ({
   isRoutesLayerVisible = true,
   photoResolution,
   imageUrl,
+  isPhotoLoading,
+  setIsPhotoLoading,
 }) => {
   const {
     imageSize,
@@ -154,21 +155,23 @@ export const RoutesEditor = ({
     });
     loadPhotoRelatedData();
     preloadOtherPhotos();
+    setIsPhotoLoading(false);
   };
 
   return (
     <EditorContainer imageHeight={imageSize.height}>
       <ImageContainer>
         <ImageElement src={imageUrl} onLoad={onPhotoLoad} ref={photoRef} />
       </ImageContainer>
-      <RoutesLayer
-        isVisible={isRoutesLayerVisible}
-        onClick={onCanvasClick}
-        onEditorMouseMove={onMouseMove}
-        onEditorTouchMove={onTouchMove}
-        transformOrigin={transformOrigin}
-      />
-      <GalleryControls />
+      {!isPhotoLoading && (
+        <RoutesLayer
+          isVisible={isRoutesLayerVisible}
+          onClick={onCanvasClick}
+          onEditorMouseMove={onMouseMove}
+          onEditorTouchMove={onTouchMove}
+          transformOrigin={transformOrigin}
+        />
+      )}
     </EditorContainer>
   );
 };