From 9b47eb38c32448b70e65e31c85a8d72e4d7ac56e Mon Sep 17 00:00:00 2001 From: barbara-chaves Date: Mon, 11 Dec 2023 18:46:49 +0100 Subject: [PATCH 1/2] Fix media urls and comment carousel --- client/next.config.mjs | 8 +- client/src/components/map/index.tsx | 8 ++ .../map/markers/story-markers/marker.tsx | 113 ++---------------- .../map/markers/story-markers/media.tsx | 4 +- .../story/steps/layouts/outro-step.tsx | 8 +- 5 files changed, 27 insertions(+), 114 deletions(-) diff --git a/client/next.config.mjs b/client/next.config.mjs index e7410e7..27f3f4e 100644 --- a/client/next.config.mjs +++ b/client/next.config.mjs @@ -5,7 +5,13 @@ const nextConfig = { basePath: process.env.NEXT_PUBLIC_BASE_PATH || '', transpilePackages: ['@esa/types'], images: { - domains: ['api.mapbox.com', 'localhost', process.env.NEXT_PUBLIC_API_URL], + domains: [ + 'api.mapbox.com', + 'localhost', + process.env.NEXT_PUBLIC_API_URL, + 'esa-gda-comms-staging-cms.fra1.digitaloceanspaces.com', + 'fra1.digitaloceanspaces.com', + ], }, env: { RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED: 'false', diff --git a/client/src/components/map/index.tsx b/client/src/components/map/index.tsx index 30b31d3..c7573df 100644 --- a/client/src/components/map/index.tsx +++ b/client/src/components/map/index.tsx @@ -31,6 +31,10 @@ export const MapMapbox: FC = ({ bounds, onMapViewStateChange, onLoad, + dragPan, + dragRotate, + scrollZoom, + doubleClickZoom, ...mapboxProps }: CustomMapProps) => { /** @@ -140,6 +144,10 @@ export const MapMapbox: FC = ({ mapboxAccessToken={env.NEXT_PUBLIC_MAPBOX_API_TOKEN} onMove={handleMapMove} onLoad={handleMapLoad} + dragPan={!isFlying && dragPan} + dragRotate={!isFlying && dragRotate} + scrollZoom={!isFlying && scrollZoom} + doubleClickZoom={!isFlying && doubleClickZoom} {...mapboxProps} {...localViewState} > diff --git a/client/src/containers/map/markers/story-markers/marker.tsx b/client/src/containers/map/markers/story-markers/marker.tsx index 851e6a9..d1fad57 100644 --- a/client/src/containers/map/markers/story-markers/marker.tsx +++ b/client/src/containers/map/markers/story-markers/marker.tsx @@ -2,10 +2,6 @@ import { useState } from 'react'; import { Marker } from 'react-map-gl'; -import Image from 'next/image'; - -import { motion } from 'framer-motion'; - import { StoryStepMapMarker } from '@/types/story'; import { Dialog, DialogContent } from '@/components/ui/dialog'; @@ -16,50 +12,10 @@ type StoryMarkerProps = { marker: StoryStepMapMarker; }; -const MOCK_IMAGES = [ - { - id: 0, - img: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/mock/carousel.png`, - legend: 'Summary of GDA Urban EO Information and Use Cases 1', - }, - { - id: 1, - img: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/mock/carousel.png`, - legend: 'Summary of GDA Urban EO Information and Use Cases 2', - }, - { - id: 2, - img: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/mock/carousel.png`, - legend: 'Summary of GDA Urban EO Information and Use Cases 3', - }, -]; - const StoryMarker = ({ marker: { media, name, id, lat, lng } }: StoryMarkerProps) => { const [isFullScreen, setIsFullScreen] = useState(false); const handleClickExpand = () => setIsFullScreen((prev) => !prev); - const [currentImage, setCurrentImage] = useState(MOCK_IMAGES[1]); - - const setPrevImage = () => { - setCurrentImage(MOCK_IMAGES[currentImage.id - 1]); - }; - - const setNextImage = () => { - setCurrentImage(MOCK_IMAGES[currentImage.id + 1]); - }; - - const variants = { - show: { - opacity: 1, - transition: { - ease: 'easeOut', - duration: 0.3, - }, - }, - hide: { - opacity: 0, - }, - }; return ( <> @@ -73,68 +29,13 @@ const StoryMarker = ({ marker: { media, name, id, lat, lng } }: StoryMarkerProps setIsFullScreen(open)} open={isFullScreen}> - -

- {currentImage.id + 1} of {MOCK_IMAGES.length} -

-
-
- {MOCK_IMAGES[currentImage.id - 1] && ( - - )} -
- - mock -

{MOCK_IMAGES[currentImage.id].legend}

- - - {MOCK_IMAGES[currentImage.id + 1] && ( - - )} - -
+ + diff --git a/client/src/containers/map/markers/story-markers/media.tsx b/client/src/containers/map/markers/story-markers/media.tsx index 199c28f..abf0b72 100644 --- a/client/src/containers/map/markers/story-markers/media.tsx +++ b/client/src/containers/map/markers/story-markers/media.tsx @@ -30,9 +30,7 @@ const StoryMarker = ({ media, name, isFullScreen, onClickExpand }: StoryMarkerMe const mediaMime = media?.mime; // MOCKUP IMAGE FOR STORY 1 STEP 1 !! REMOVE WHEN REAL IMAGE IS AVAILABLE - const mediaSrc = mediaMime.includes('image') - ? `${process.env.NEXT_PUBLIC_BASE_PATH}/images/story-1-image-mockup.png` - : `${apiBaseUrl}${media?.url}`; + const mediaSrc = media?.url; const handlePlayVideo = useCallback( (e: React.MouseEvent, action: 'play' | 'pause') => { diff --git a/client/src/containers/story/steps/layouts/outro-step.tsx b/client/src/containers/story/steps/layouts/outro-step.tsx index 3d2d226..7ead2c7 100644 --- a/client/src/containers/story/steps/layouts/outro-step.tsx +++ b/client/src/containers/story/steps/layouts/outro-step.tsx @@ -63,7 +63,7 @@ const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => { const mediaType = media?.mime?.split('/')[0]; - const mediaSrc = `${apiBaseUrl}${media.url}`; + const mediaSrc = media?.url; const mediaMime = media?.mime; const isVideo = mediaType.includes('video'); @@ -86,7 +86,7 @@ const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => {
@@ -98,7 +98,7 @@ const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => { initial={{ opacity: 0, x: '-300%' }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0 }} - transition={{ duration: 2 }} + transition={{ duration: 1.5 }} style={{ scale: scaleContent }} className="relative z-50 w-full flex-1" > @@ -122,7 +122,7 @@ const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => { initial={{ opacity: 0, x: '300%' }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0 }} - transition={{ duration: 2.5 }} + transition={{ duration: 1.5 }} style={{ scale: scaleContent }} >
From 661410882d1f02949b9bca263cf34c18560a63ed Mon Sep 17 00:00:00 2001 From: barbara-chaves Date: Mon, 11 Dec 2023 20:21:28 +0100 Subject: [PATCH 2/2] Fix map tooltip style, add media carousel commented --- client/src/components/map/index.tsx | 2 +- .../components/map/layers/marker/index.tsx | 9 +- .../map/markers/story-markers/carousel.tsx | 143 ++++++++++++++++++ .../map/markers/story-markers/index.tsx | 36 ++++- .../map/markers/story-markers/media.tsx | 2 +- 5 files changed, 184 insertions(+), 8 deletions(-) create mode 100644 client/src/containers/map/markers/story-markers/carousel.tsx diff --git a/client/src/components/map/index.tsx b/client/src/components/map/index.tsx index c7573df..d75a4be 100644 --- a/client/src/components/map/index.tsx +++ b/client/src/components/map/index.tsx @@ -120,7 +120,7 @@ export const MapMapbox: FC = ({ if (!bounds) return undefined; const { options } = bounds; - const animationDuration = options?.duration || 0; + const animationDuration = options?.duration || 1000; let timeoutId: number; if (isFlying) { diff --git a/client/src/components/map/layers/marker/index.tsx b/client/src/components/map/layers/marker/index.tsx index 4cd54bc..a9f55a0 100644 --- a/client/src/components/map/layers/marker/index.tsx +++ b/client/src/components/map/layers/marker/index.tsx @@ -17,7 +17,7 @@ const Marker = (props: MarkerProps) => { const { properties, onClick } = props; return ( - +
{
- +
e.stopPropagation()}>
{ + )} + + + + + + {currentMedia + 1 && ( + + )} + +
+
+ ); +}; + +export default Carousel; diff --git a/client/src/containers/map/markers/story-markers/index.tsx b/client/src/containers/map/markers/story-markers/index.tsx index 7793b9e..e40c807 100644 --- a/client/src/containers/map/markers/story-markers/index.tsx +++ b/client/src/containers/map/markers/story-markers/index.tsx @@ -1,4 +1,6 @@ -import { useMemo } from 'react'; +'use client'; + +import { useMemo, useState } from 'react'; import { useParams } from 'next/navigation'; @@ -9,6 +11,8 @@ import { stepAtom } from '@/store/stories'; import { useGetStoriesId } from '@/types/generated/story'; import StoryMarkerMedia from './marker'; +// import Carousel from './carousel'; +// import { Dialog, DialogContent } from '@/components/ui/dialog'; type StoryMarker = { id: number; @@ -28,6 +32,7 @@ const StoryMarkers = () => { const { data: storyData } = useGetStoriesId(+id, { populate: 'deep', }); + // const [currentMedia, setCurrentMedia] = useState(); const markers: StoryMarker[] = useMemo(() => { return ( @@ -35,11 +40,36 @@ const StoryMarkers = () => { ); }, [step, storyData?.data?.attributes?.steps?.data]); + // const medias = useMemo(() => { + // return markers?.map((marker) => ({ + // id: marker?.id, + // url: marker?.media?.url, + // mime: marker?.media?.mime, + // type: marker?.media?.mime?.includes('video') ? 'video' : 'image', + // })); + // }, [markers]); + + // const handleClickMarker = (markerIndex: number) => { + // setCurrentMedia(markerIndex); + // }; + return ( <> - {markers?.map((marker) => ( - + {markers?.map((marker, index) => ( + handleClickMarker(index)} + /> ))} + {/* setCurrentMedia(undefined)} + open={typeof currentMedia === 'number'} + > + + + + */} ); }; diff --git a/client/src/containers/map/markers/story-markers/media.tsx b/client/src/containers/map/markers/story-markers/media.tsx index abf0b72..b03b900 100644 --- a/client/src/containers/map/markers/story-markers/media.tsx +++ b/client/src/containers/map/markers/story-markers/media.tsx @@ -89,7 +89,7 @@ const StoryMarker = ({ media, name, isFullScreen, onClickExpand }: StoryMarkerMe height="100%" src={mediaSrc} ref={videoRef} - muted + muted={!isFullScreen} loop controls={isFullScreen} autoPlay={isFullScreen}