From 5ac89badfc0dbce5855cdae3c26ccc30486296b6 Mon Sep 17 00:00:00 2001 From: barbara-chaves Date: Tue, 6 Aug 2024 12:44:59 +0200 Subject: [PATCH 1/2] Delete unused types, fix home zoom --- client/src/containers/home/index.tsx | 13 +- client/src/containers/map/index.tsx | 38 +- .../map/markers/story-markers/carousel.tsx | 7 +- client/src/types/generated/strapi.schemas.ts | 3540 +++++++++-------- cms/src/components/step-layout/map-step.json | 6 - .../components/step-layout/outro-step.json | 6 - 6 files changed, 2024 insertions(+), 1586 deletions(-) diff --git a/client/src/containers/home/index.tsx b/client/src/containers/home/index.tsx index 112f13f..d8b8422 100644 --- a/client/src/containers/home/index.tsx +++ b/client/src/containers/home/index.tsx @@ -58,7 +58,7 @@ const Home = () => { map?.easeTo({ bearing: 0, pitch: 0, - zoom: size.width >= getThemeSize('3xl') ? 2 : 1.5, + zoom: 2, center: { lng: nextLng, lat }, duration: 5000, padding: { @@ -76,8 +76,7 @@ const Home = () => { map?.easeTo({ bearing: 0, pitch: 0, - zoom: size.width >= getThemeSize('3xl') ? 2 : 1.5, - center: { lng: 0, lat: 0 }, + zoom: 2, duration: 500, padding: { left: size.width * 0.45, @@ -125,7 +124,7 @@ const Home = () => { }; return ( -
+
@@ -178,11 +177,11 @@ const Home = () => { variants={variants} transition={{ duration: 2, delay: 1, ease: 'easeIn' }} style={{ width: w, height: '100%', right: w * -0.045, top: 0 }} - className="3xl:scale-80 absolute z-50 hidden max-h-screen scale-125 items-center overflow-hidden xl:flex xl:scale-100" + className="3xl:scale-100 absolute z-50 hidden max-h-screen scale-125 items-center overflow-hidden xl:flex xl:scale-110" >
-
-
+
+
import('@/containers/map/layer-manager'), { ssr: false, }); +type StoryMarker = { + markers: { + lat: number; + lng: number; + }[]; +}; + export default function MapContainer() { const { id, initialViewState, minZoom, maxZoom } = DEFAULT_PROPS; @@ -125,13 +135,37 @@ export default function MapContainer() { } }, [map, tmpBbox]); + const { data: storiesData } = useStories(); + + const bounds = useMemo(() => { + const b = new mapboxgl.LngLatBounds(); + storiesData?.data?.forEach(({ attributes }) => { + if (!(attributes?.marker as StoryMarker)?.markers?.length) return; + const { lat, lng } = (attributes?.marker as StoryMarker)?.markers?.[0] || {}; + if (typeof lat != 'number' || typeof lng != 'number') return; + b.extend([lng, lat]); + }); + if (b.isEmpty() || !map) return; + const center = b.getCenter(); + return { + bbox: b.toArray().flat() as [number, number, number, number], + options: { ...DEFAULT_VIEW_STATE, latitude: center.lat, longitude: center.lng }, + }; + }, [map, storiesData?.data]); + + useMemo(() => { + if (bounds) { + setTmpBbox(bounds); + } + }, [bounds]); + return (
{ const videoRef = useRef(null); + const mediaSrc = getImageSrc(media?.url); + useEffect(() => { if (!isCurrentMedia && videoRef.current) { videoRef.current?.pause(); @@ -33,7 +36,7 @@ const CarouselMedia = ({ media, isCurrentMedia }: CarouselMediaProps) => { ref={videoRef} width="100%" height="100%" - src={media?.url} + src={mediaSrc} muted={!isCurrentMedia} loop controls={isCurrentMedia} @@ -49,7 +52,7 @@ const CarouselMedia = ({ media, isCurrentMedia }: CarouselMediaProps) => { } return ( Date: Tue, 6 Aug 2024 15:44:02 +0200 Subject: [PATCH 2/2] Fix home first render globe position Fix about modal size --- client/src/containers/home/index.tsx | 20 ++-------- .../src/containers/home/satellite-content.tsx | 2 +- client/src/containers/map/index.tsx | 38 +------------------ .../map/markers/globe-markers/index.tsx | 30 +-------------- 4 files changed, 9 insertions(+), 81 deletions(-) diff --git a/client/src/containers/home/index.tsx b/client/src/containers/home/index.tsx index d8b8422..5f55438 100644 --- a/client/src/containers/home/index.tsx +++ b/client/src/containers/home/index.tsx @@ -51,8 +51,8 @@ const Home = () => { if (!map) return; const currCenter = map.getCenter(); - const nextLng = (currCenter.lng + 5) % 360; - const nextLat = currCenter.lat + 3; + const nextLng = (currCenter.lng + 0.5) % 360; + const nextLat = currCenter.lat + 0.3; const lat = nextLat < -90 ? nextLat + 180 : nextLat > 90 ? nextLat - 180 : nextLat; map?.easeTo({ @@ -60,7 +60,7 @@ const Home = () => { pitch: 0, zoom: 2, center: { lng: nextLng, lat }, - duration: 5000, + duration: 500, padding: { left: size.width * 0.45, right: 0, @@ -73,19 +73,7 @@ const Home = () => { useEffect(() => { if (map) { - map?.easeTo({ - bearing: 0, - pitch: 0, - zoom: 2, - duration: 500, - padding: { - left: size.width * 0.45, - right: 0, - top: 0, - bottom: size.width >= getThemeSize('xl') ? 0 : size.height * 0.5, - }, - easing: (n) => n, - }); + spin(); map.on('moveend', spin); return () => { map.stop(); diff --git a/client/src/containers/home/satellite-content.tsx b/client/src/containers/home/satellite-content.tsx index df45a8e..b888b8e 100644 --- a/client/src/containers/home/satellite-content.tsx +++ b/client/src/containers/home/satellite-content.tsx @@ -32,7 +32,7 @@ const SatelliteContent = ({ id, handleSelectSatellite }: SatelliteContentProps) height={169} />
- +