Merge pull request #73 from Vizzuality/client/fix/home-styles

Delete unused types, fix home zoom
Vizzuality · Aug 6, 2024 · 12a01b6 · 12a01b6
2 parents a322d0d + f8ff70c
commit 12a01b6
Show file tree

Hide file tree

Showing 7 changed files with 1,994 additions and 1,628 deletions.
diff --git a/client/src/containers/home/index.tsx b/client/src/containers/home/index.tsx
@@ -51,16 +51,16 @@ 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({
       bearing: 0,
       pitch: 0,
-      zoom: size.width >= getThemeSize('3xl') ? 2 : 1.5,
+      zoom: 2,
       center: { lng: nextLng, lat },
-      duration: 5000,
+      duration: 500,
       padding: {
         left: size.width * 0.45,
         right: 0,
@@ -73,20 +73,7 @@ const Home = () => {
 
   useEffect(() => {
     if (map) {
-      map?.easeTo({
-        bearing: 0,
-        pitch: 0,
-        zoom: size.width >= getThemeSize('3xl') ? 2 : 1.5,
-        center: { lng: 0, lat: 0 },
-        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();
@@ -125,7 +112,7 @@ const Home = () => {
   };
 
   return (
-    <div className="text-primary font-notes pointer-events-none flex h-screen w-screen flex-col justify-between overflow-hidden">
+    <div className="text-primary font-notes pointer-events-none relative flex h-screen w-screen flex-col justify-between overflow-hidden">
       <div className="z-50 flex h-full flex-col">
         <div className="mx-12">
           <Header pathname="home" />
@@ -178,11 +165,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"
         >
           <div style={{ height: w }} className="w-full">
-            <div className="3xl:rotate-[55deg] flex h-full rotate-45 items-end justify-center rounded-full border border-dashed border-slate-600 p-[50px] xl:p-[70px]">
-              <div className="3xl:rotate-[-100deg] relative flex h-full w-full -rotate-90 justify-center rounded-full border border-dashed border-slate-600">
+            <div className="flex h-full rotate-45 items-end justify-center rounded-full border border-dashed border-slate-600 p-[50px] xl:rotate-[55deg] xl:p-[70px]">
+              <div className="relative flex h-full w-full -rotate-90 justify-center rounded-full border border-dashed border-slate-600 xl:rotate-[-100deg]">
                 <SatelliteButton
                   handleSelectMarker={handleSelectMarker}
                   satellite={SATELLITE_MARKERS[0]}

diff --git 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}
           />
         </div>
-        <ScrollArea className="h-[calc(90vh-133px)] max-h-fit px-10">
+        <ScrollArea type="always" className="flex h-[calc(90vh-133px)] px-10 2xl:h-fit">
           <div className="my-10 space-y-5">
             <button
               className="text-primary font-bold opacity-40"

diff --git a/client/src/containers/map/markers/globe-markers/index.tsx b/client/src/containers/map/markers/globe-markers/index.tsx
@@ -1,28 +1,16 @@
 'use client';
 
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 
-import { Layer, Source, useMap } from 'react-map-gl';
-
-import mapboxgl from 'mapbox-gl';
+import { Layer, Source } from 'react-map-gl';
 
 import { StoryStepMap } from '@/types/story';
 
 import { useMapImage } from '@/hooks/map';
 import useStories from '@/hooks/stories/useStories';
 
-import { DEFAULT_VIEW_STATE } from '@/components/map/constants';
-
-type StoryMarker = {
-  markers: {
-    lat: number;
-    lng: number;
-  }[];
-};
-
 const GlobeMarkers = () => {
   const { data: stories } = useStories();
-  const { current: map } = useMap();
 
   const FeatureCollection = useMemo(
     () => ({
@@ -54,20 +42,6 @@ const GlobeMarkers = () => {
     url: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/map/story-marker.png`,
   });
 
-  useEffect(() => {
-    const bounds = new mapboxgl.LngLatBounds();
-    stories?.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;
-      bounds.extend([lng, lat]);
-    });
-
-    if (bounds.isEmpty() || !map) return;
-
-    map.fitBounds(bounds, { ...DEFAULT_VIEW_STATE, duration: 500 });
-  }, [map, stories?.data]);
-
   return (
     <Source id="story-markers" type="geojson" data={FeatureCollection}>
       <Layer

diff --git a/client/src/containers/map/markers/story-markers/carousel.tsx b/client/src/containers/map/markers/story-markers/carousel.tsx
@@ -6,6 +6,7 @@ import Image from 'next/image';
 import { motion } from 'framer-motion';
 
 import { cn } from '@/lib/classnames';
+import { getImageSrc } from '@/lib/image-src';
 
 type CarouselMediaProps = {
   media: {
@@ -21,6 +22,8 @@ type CarouselMediaProps = {
 const CarouselMedia = ({ media, isCurrentMedia }: CarouselMediaProps) => {
   const videoRef = useRef<HTMLVideoElement>(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 (
     <Image
-      src={media?.url}
+      src={mediaSrc}
       className={cn(
         'h-full max-h-[calc(100vh-152px)] w-full',
         isCurrentMedia ? 'object-contain' : 'object-cover'