Merge pull request #26 from Vizzuality/client/bugfix/story-1

Client/bugfix/story 1
Vizzuality · Dec 1, 2023 · 37a6541 · 37a6541
2 parents 341fdb2 + 8bbb650
commit 37a6541
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 23 deletions.
diff --git a/client/src/components/map/legend/item-types/timeline/index.tsx b/client/src/components/map/legend/item-types/timeline/index.tsx
@@ -58,7 +58,7 @@ export const LegendTypeTimeline: React.FC<LegendTypeTimelineProps> = ({
     >
       <Button
         variant="default"
-        className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full px-0 py-0 hover:bg-white"
+        className="relative z-50 flex h-10 w-10 shrink-0 items-center justify-center rounded-full px-0 py-0 hover:bg-white"
         onClick={onPlay}
       >
         {isPlaying ? (
@@ -77,7 +77,7 @@ export const LegendTypeTimeline: React.FC<LegendTypeTimelineProps> = ({
         className={cn('relative flex w-full touch-none select-none items-center', className)}
       >
         <Track className="w-full">
-          <svg width={width} height={height} className="overflow-visible">
+          <svg width={width} height={height} className="cursor-pointer overflow-visible">
             <text x={-textMarginX} y={textMarginY} className="font-open-sans fill-white text-sm">
               {years[0] !== value && years[0]}
             </text>

diff --git a/client/src/containers/home/index.tsx b/client/src/containers/home/index.tsx
@@ -4,9 +4,11 @@ import { useEffect } from 'react';
 
 import Link from 'next/link';
 
-import { useSetRecoilState } from 'recoil';
+import { useResetRecoilState, useSetRecoilState } from 'recoil';
 
-import { tmpBboxAtom } from '@/store';
+import { layersAtom, tmpBboxAtom } from '@/store';
+
+import { stepAtom } from '@/store/stories';
 
 import Sidebar from '@/containers/home/sidebar';
 
@@ -29,12 +31,19 @@ const HOME_MAP_OPTIONS = {
 
 export default function Home() {
   const setTmpBbox = useSetRecoilState(tmpBboxAtom);
+  const resetLayers = useResetRecoilState(layersAtom);
+  const resetStep = useResetRecoilState(stepAtom);
 
   useEffect(() => {
     const tmpbbox: [number, number, number, number] = [-50.45, -66.05, 107.79, 85.05];
     setTmpBbox({ bbox: tmpbbox, options: HOME_MAP_OPTIONS });
   }, [setTmpBbox]);
 
+  useEffect(() => {
+    resetLayers();
+    resetStep();
+  }, []);
+
   return (
     <div className="home text-primary flex h-screen w-screen flex-col justify-between px-12">
       <Header />

diff --git a/client/src/containers/map/markers/story-markers/index.tsx b/client/src/containers/map/markers/story-markers/index.tsx
@@ -29,11 +29,11 @@ const StoryMarkers = () => {
     populate: 'deep',
   });
 
-  const markers: StoryMarker[] = useMemo(
-    () =>
-      storyData?.data?.attributes?.steps?.data?.[step]?.attributes?.layout[0].map?.markers || [],
-    [step, storyData?.data?.attributes?.steps?.data]
-  );
+  const markers: StoryMarker[] = useMemo(() => {
+    return (
+      storyData?.data?.attributes?.steps?.data?.[step]?.attributes?.layout[0].map?.markers || []
+    );
+  }, [step, storyData?.data?.attributes?.steps?.data]);
 
   return (
     <>

diff --git a/client/src/containers/map/markers/story-markers/media.tsx b/client/src/containers/map/markers/story-markers/media.tsx
@@ -27,7 +27,7 @@ const StoryMarker = ({ media, name, isFullScreen, onClickExpand }: StoryMarkerMe
   const [hovered, setHovered] = useState(false);
   const mediaType = media?.mime?.split('/')[0];
 
-  const mediaSrc = `${apiBaseUrl}${(!isFullScreen && media.formats?.thumbnail?.url) || media.url}`;
+  const mediaSrc = `${apiBaseUrl}${media?.url}`;
   const mediaMime = media?.mime;
 
   const handlePlayVideo = useCallback(

diff --git a/client/src/containers/story/steps/controller/scroll-item.tsx b/client/src/containers/story/steps/controller/scroll-item.tsx
@@ -26,7 +26,7 @@ export const ScrollItem = ({ children, step }: ScrollItemProps) => {
   });
 
   return (
-    <section ref={ref} id={`scroll-${step}`} className="pointer-events-none z-20 h-full w-full">
+    <section ref={ref} id={`scroll-${step}`} className="pointer-events-none h-full w-full">
       {children}
     </section>
   );

diff --git a/client/src/containers/story/steps/index.tsx b/client/src/containers/story/steps/index.tsx
@@ -58,8 +58,8 @@ const Step = ({ step, category, index }: StepProps) => {
   }, [category?.data?.attributes, category?.data?.id, step, index, currentStep]);
 
   return (
-    <div className="pointer-events-none z-10 h-screen w-full ">
-      <div className="z-20 h-full w-full px-14">{STEP_COMPONENT}</div>
+    <div className="pointer-events-none h-screen w-full ">
+      <div className="h-full w-full px-14">{STEP_COMPONENT}</div>
     </div>
   );
 };

diff --git a/client/src/containers/story/steps/layouts/map-step.tsx b/client/src/containers/story/steps/layouts/map-step.tsx
@@ -67,13 +67,10 @@ const MapStepLayout = ({ step, category, showContent, stepIndex }: MapStepLayout
             </div>
           )}
           <div
-            className={cn(
-              'pointer-events-auto fixed bottom-14 left-14 min-h-[44px] min-w-[280px]',
-              {
-                'opacity-100': showContent,
-                'opacity-0': !showContent,
-              }
-            )}
+            className={cn('pointer-events-auto fixed bottom-14 left-14 min-h-[44px]', {
+              'w-auto opacity-100': showContent,
+              'w-0 opacity-0': !showContent,
+            })}
           >
             <Legend />
           </div>

diff --git a/client/src/containers/story/steps/layouts/outro-step.tsx b/client/src/containers/story/steps/layouts/outro-step.tsx
@@ -82,7 +82,7 @@ const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => {
   return (
     <div ref={containerRef} className="flex h-[300vh]">
       {showContent && show && (
-        <motion.div className="fixed top-0 flex h-screen w-screen flex-col items-center justify-center 2xl:px-12">
+        <motion.div className="sticky top-0 flex h-screen w-screen flex-col items-center justify-center 2xl:px-12">
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
@@ -91,7 +91,7 @@ const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => {
           >
             <div className="h-full w-full bg-slate-900/60"></div>
           </motion.div>
-          <div className="flex  w-full flex-1 items-center justify-between">
+          <div className="pointer-events-auto flex w-full flex-1 items-center justify-between">
             <div className="flex w-full flex-1 flex-col justify-between gap-12 lg:flex-row">
               {isVideo && (
                 <motion.div
@@ -112,7 +112,6 @@ const OutroStepLayout = ({ step, showContent }: MediaStepLayoutProps) => {
                     autoPlay={true}
                     onMouseEnter={(e) => handlePlayVideo(e, 'play')}
                     onMouseLeave={(e) => handlePlayVideo(e, 'pause')}
-                    controls={true}
                   >
                     <source src={mediaSrc} type={mediaMime} />
                   </video>