Merge pull request #34 from Vizzuality/client/bugfix/media-url

Fix timeline, add use client to components

client/src/components/map/layers/animated-tile-layer/index.tsx

@@ -26,7 +26,7 @@ const AnimatedTileLayer = <T,>({ id = '', c }: DeckLayerProps<T>) => {
 
   const { minZoom, maxZoom, data } = c;
 
-  const { frames = 0, interval = 1000, start, end, autoplay = false, delay = 3000 } = c.timeline;
+  const { interval = 1000, start, end, autoplay = false, delay = 3000 } = c.timeline;
 
   const createLayer = useCallback(
     (data: { visible: boolean; url: string; opacity: number }, id: string, beforeId: string) => {
@@ -43,7 +43,6 @@ const AnimatedTileLayer = <T,>({ id = '', c }: DeckLayerProps<T>) => {
             index: { x, y, z },
             signal,
           } = tile;
-
           const tileUrl = url.replace('{z}', z).replace('{x}', x).replace('{y}', y);
 
           const response = fetch(tileUrl, { signal });
@@ -57,7 +56,7 @@ const AnimatedTileLayer = <T,>({ id = '', c }: DeckLayerProps<T>) => {
             .then((buffer) => {
               const apng = parseAPNG(buffer);
               if (apng instanceof Error) {
-                throw apng;
+                return null;
               }
               return apng.frames.map((f: any) => {
                 return {
@@ -75,6 +74,7 @@ const AnimatedTileLayer = <T,>({ id = '', c }: DeckLayerProps<T>) => {
           if (!sl) return null;
 
           const { id: subLayerId, data, tile, visible, opacity = 1, frame: f } = sl;
+
           if (!tile || !data) return null;
 
           const {
@@ -124,19 +124,19 @@ const AnimatedTileLayer = <T,>({ id = '', c }: DeckLayerProps<T>) => {
     if (isPlaying) {
       return;
     }
-    const lastFrame = frames;
+    const lastFrame = end - start;
     let newFrame = frame === lastFrame ? 0 : frame + 1;
     setFrame(newFrame);
     intervalRef.current = setInterval(() => {
-      if (newFrame + 1 === lastFrame + 1) {
+      if (newFrame === lastFrame) {
         clearInterval(intervalRef.current);
         setIsPlaying(false);
       } else {
         setFrame(newFrame + 1);
         newFrame++;
       }
     }, interval);
-  }, [frame, frames, interval, isPlaying]);
+  }, [end, frame, interval, isPlaying, start]);
 
   const handleChangeFrame = (_frame: number) => {
     setIsPlaying(false);
@@ -184,7 +184,7 @@ const AnimatedTileLayer = <T,>({ id = '', c }: DeckLayerProps<T>) => {
           timeline={{
             start: start,
             end: end,
-            current: frame,
+            currentFrame: frame,
           }}
           onChangeCurrent={handleChangeFrame}
           onPlay={handlePlay}

client/src/components/map/legend/item-types/timeline/index.tsx

@@ -11,7 +11,7 @@ type LegendTypeTimelineProps = {
   timeline: {
     start: number;
     end: number;
-    current: number;
+    currentFrame: number;
   };
   onChangeCurrent: (year: number) => void;
   onPlay: () => void;
@@ -40,7 +40,7 @@ export const LegendTypeTimeline: React.FC<LegendTypeTimelineProps> = ({
   );
 
   const lastYear = years[years.length - 1];
-  const value = years[timeline?.current];
+  const value = years[timeline?.currentFrame];
 
   const yearScale = useCallback(
     (year: number) =>
@@ -69,10 +69,10 @@ export const LegendTypeTimeline: React.FC<LegendTypeTimelineProps> = ({
       </Button>
 
       <Root
-        max={22}
+        max={timeline.end - timeline.start}
         min={0}
         step={1}
-        value={[timeline.current]}
+        value={[timeline.currentFrame]}
         onValueChange={([v]) => onChangeCurrent(v)}
         className={cn('relative flex w-full touch-none select-none items-center', className)}
       >

client/src/containers/home/index.tsx

@@ -2,8 +2,6 @@
 
 import { useEffect } from 'react';
 
-import Link from 'next/link';
-
 import { useResetRecoilState, useSetRecoilState } from 'recoil';
 
 import { layersAtom, tmpBboxAtom } from '@/store';
@@ -15,13 +13,13 @@ import { DEFAULT_MAP_BBOX, DEFAULT_MAP_STATE } from '@/constants/map';
 import Sidebar from '@/containers/home/sidebar';
 
 import Card from '@/components/ui/card';
-// import GradientLine from '@/components/ui/gradient-line';
+import GradientLine from '@/components/ui/gradient-line';
 
 import Categories from './categories';
 import Dashboard from './dashboard';
 import { Filters } from './filters';
 import Header from './header';
-// import TopStories from './top-stories';
+import TopStories from './top-stories';
 
 export default function Home() {
   const setTmpBbox = useSetRecoilState(tmpBboxAtom);
@@ -51,12 +49,17 @@ export default function Home() {
         <Sidebar>
           <div className="2xl:w-70 w-64">
             <Card title="Impact indicator">
-              <Link href="#">View links</Link>
+              <a
+                target="_blank"
+                href="https://lookerstudio.google.com/reporting/b6d8f54c-558e-48dc-bc79-a7eca193da6f/page/p_2ehvdzg47c"
+              >
+                View links
+              </a>
             </Card>
-            {/* <GradientLine />
+            <GradientLine />
             <Card title="Top stories (6)">
               <TopStories />
-            </Card> */}
+            </Card>
           </div>
         </Sidebar>
       </div>

client/src/containers/home/top-stories/index.tsx

@@ -47,7 +47,7 @@ const topStories = [
 
 const TopStories = () => {
   return (
-    <div className="max-h-[250px] space-y-4 overflow-y-auto">
+    <div className="max-h-[45vh] space-y-4 overflow-y-auto">
       {topStories.map((story) => (
         <TopStoriesItem key={story.id} story={story} />
       ))}

client/src/containers/map/markers/home-markers/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useMemo } from 'react';
 
 import { Layer, Source } from 'react-map-gl';

client/src/containers/map/markers/story-markers/marker.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useState } from 'react';
 
 import { Marker } from 'react-map-gl';

client/src/containers/map/markers/story-markers/media.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import Image from 'next/image';

client/src/containers/story/steps/controller/controller-item.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback } from 'react';
 
 import { useRecoilValue } from 'recoil';

client/src/containers/story/steps/controller/scroll-item.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { PropsWithChildren, useRef } from 'react';
 
 import { useScroll } from 'framer-motion';

client/src/containers/story/steps/index.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { PropsWithChildren, useMemo } from 'react';
 
 import { useRecoilValue } from 'recoil';

client/src/containers/story/steps/layouts/map-step.tsx

@@ -1,3 +1,4 @@
+'use client';
 import dynamic from 'next/dynamic';
 
 import { InfoIcon } from 'lucide-react';