Videos tests

src/components/globe-map/data.ts

@@ -9,8 +9,9 @@ export const markers: MarkerType[] = [
 
 export const BACKGROUND_VIDEOS = [
   "videos/phase-3/bg/tp_global_100km.mp4",
-  "videos/phase-3/bg/cloud_cover_global_100km.mp4",
-  "videos/phase-3/bg/tas_100km.mp4",
+  // "videos/phase-3/bg/cloud_cover_global_100km.webm",
+  "videos/phase-3/originals/bg/cloud_cover_global_100km.mp4",
+  "videos/phase-3/bg/tas_global_100km.mp4",
   "videos/phase-3/bg/sst_global_100km.mp4",
 ];
 

src/components/globe-map/globe.tsx

@@ -1,14 +1,20 @@
 import { useTexture, useVideoTexture } from "@react-three/drei";
 import { Suspense } from "react";
-import { ShaderMaterial, DoubleSide } from "three";
+import { ShaderMaterial, DoubleSide, NearestFilter } from "three";
 import { useRef, useMemo } from "react";
 
 
 function VideoMaterial({ url }: { url: string }) {
-  const texture = useVideoTexture(url)
-  return <meshBasicMaterial map={texture} toneMapped={false} />
+  const texture = useVideoTexture(url, {});
+  texture.minFilter = NearestFilter;
+  texture.magFilter = NearestFilter;
+  return <meshBasicMaterial map={texture} toneMapped={false} opacity={0.4} transparent />
 }
 
+function ImageMaterial({ url }: { url: string }) {
+  const texture = useTexture(url);
+  return <meshBasicMaterial map={texture} toneMapped={false} />
+}
 
 const GlobeShaderMaterial = ({ url }: { url: string }) => {
   const texture = useTexture(url);

src/components/globe-map/popup.tsx

@@ -4,6 +4,7 @@ import { cn } from "@/lib/utils";
 import ArrowRight from '@/svgs/arrow-right.svg';
 import Close from '@/svgs/close.svg';
 import { popupContent } from './data';
+
 const Corners = () => (
   <>
     <div className="absolute -top-1 -left-1">
@@ -39,7 +40,7 @@ const Popup = ({ closePopup, setSelectedMarker, index }: {
       "relative -mt-[140px] -ml-[140px] xl:-ml-[140px]": !isMobile,
       "fixed top-0 xs:left-[calc(50%-250px)] sm:left-[calc(50%-325px)] z-50 px-4 w-full h-full items-center justify-center xs:max-w-[500px] sm:max-w-[650px]": isMobile
     })}>
-    <div className={cn('relative w-full xl:w-[662px] h-[350px] pl-8 pr-4 py-8  backdrop-blur-[15px] text-white gap-6 inline-flex',
+    <div className={cn('relative w-fit xl:w-[662px] xl:h-[350px] pl-8 pr-4 py-8  backdrop-blur-[15px] text-white gap-6 inline-flex',
       {
         'bg-white/20': index !== 0,
         'bg-green-700/60': index === 0

src/components/section-2/index.tsx

@@ -98,7 +98,7 @@ export default function Section2() {
 
   const [mobileGlobeTextIndex, setMobileGlobeTextIndex] = useState(0);
   return (
-    <section className="relative bg-green-700" id="section-2">
+    <section className="relative bg-green-800" id="section-2">
       <div className='relative pointer-events-none'>
         <Lines verticalClassName="left-8" sectionName="section-2" columns={[100]} rows={[100]} colorClass="bg-blue-900/10" />
       </div>
@@ -142,7 +142,7 @@ export default function Section2() {
                     hasMarkers={globePhase > 1}
                     rotate={globePhase === 1}
                     videoMaterial={
-                      globePhase === 0 ? "videos/wind_speed_global_100km.webm" : (globePhase === 1 ? "videos/wind_speed_global_10km.webm" : undefined)
+                      globePhase === 0 ? "videos/wind_speed_global_100km.mp4" : (globePhase === 1 ? "videos/wind_speed_global_10km.webm" : undefined)
                     }
                     globePhase={globePhase}
                   />