diff --git a/src/components/globe-map/data.ts b/src/components/globe-map/data.ts
index 373d2fd..bd2d162 100644
--- a/src/components/globe-map/data.ts
+++ b/src/components/globe-map/data.ts
@@ -14,7 +14,7 @@ export const popupContent = [
subtitle: "Diurnal precipitation cycle",
description:
"The diurnal precipitation cycle over the Amazon rainforest highlights the complex interactions and feedbacks between atmosphere and land. The diurnal rainfall, maintained by moisture inflow from the Atlantic ocean into the Amazon basin, arises due to evapotranspiration and moisture recycling from the dense forest. This self-sustained cycle is in turn driven by sharp contrasts in temperature between day and night.",
- video: "/videos/phase-3/tooltip/tp_amazonia_10km_square.mp4",
+ video: "/videos/stream-videos/tooltip-tp_amazonia_10km_square/index.m3u8",
legend: {
image: "/images/home-legend-1.svg",
low: "0.0 m³/m²",
@@ -27,7 +27,7 @@ export const popupContent = [
subtitle: "Tropical cyclone track",
description:
"Tropical cyclones in the North Atlantic Ocean typically form near the equator and propogate westward, often curving northward as they approach the Caribbean or the east coast of the US. These powerful storms are steered by trade winds and ocean currents, impacting coastal regions with strong winds, heavy rainfall, and storm surges.",
- video: "/videos/phase-3/tooltip/cloud_cover_10km_square.mp4",
+ video: "/videos/stream-videos/tooltip-cloud_cover_10km_square/index.m3u8",
legend: {
image: "/images/home-legend-2.svg",
low: "0%",
@@ -40,7 +40,7 @@ export const popupContent = [
subtitle: "Diurnal temperature cycle",
description:
"The diurnal temperature cycle over the Pyrenees in the Iberian Peninsula describes the significant temperature fluctuations between day and night. During the day, sunlight heats the region, while at night, temperatures drop rapidly due to clear skies and high altitude, creating a marked difference in daily and nightly temperatures.",
- video: "videos/phase-3/tooltip/tas_10km_square.mp4",
+ video: "videos/stream-videos/tooltip-tas_10km_square/index.m3u8",
legend: {
image: "/images/home-legend-3.svg",
low: "4º",
@@ -53,11 +53,11 @@ export const popupContent = [
subtitle: "Ocean eddies and currents",
description:
"Ocean eddies and currents off the coast of Ecuador in the Pacific Ocean play a key role in shaping local marine ecosystems. The warm waters of the equatorial current interact with cooler, nutrient-rich upwellings (deep water), creating swirling currents, known as eddies, that support diverse marine life and influence weather patterns.",
- video: "videos/phase-3/tooltip/sst_10km_square.mp4",
+ video: "videos/stream-videos/tooltip-sst_10km_square/index.m3u8",
legend: {
image: "/images/home-legend-4.svg",
- low: "19º",
- high: "31º",
+ low: "20º",
+ high: "30º",
},
},
];
diff --git a/src/components/globe-map/globe.tsx b/src/components/globe-map/globe.tsx
index cf685b7..d1dc4c1 100644
--- a/src/components/globe-map/globe.tsx
+++ b/src/components/globe-map/globe.tsx
@@ -5,17 +5,24 @@ import { useRef, useMemo } from "react";
function VideoMaterial({ url }: { url: string }) {
- const texture = useVideoTexture(url, {});
+ const texture = useVideoTexture(url, {
+ playsInline: true,
+ hls: {
+ maxBufferLength: 30, // Maximum buffer length in seconds
+ maxMaxBufferLength: 60, // Maximum buffer size
+ backBufferLength: 10, // How much to keep in buffer behind current time
+ levelLoadingTimeOut: 10000, // Timeout for loading segments
+ fragLoadingTimeOut: 20000, // Timeout for loading fragments
+ enableWorker: true, // Enable web worker for better performance
+ startLevel: -1, // Start with lowest quality
+ abrEwmaDefaultEstimate: 500000, // Conservative bandwidth estimate
+ }
+ });
texture.minFilter = NearestFilter;
texture.magFilter = NearestFilter;
return
}
-function ImageMaterial({ url }: { url: string }) {
- const texture = useTexture(url);
- return
-}
-
const GlobeShaderMaterial = ({ url }: { url: string }) => {
const texture = useTexture(url);
const materialRef = useRef(null);
diff --git a/src/components/globe-map/index.tsx b/src/components/globe-map/index.tsx
index 93f0b04..6aef571 100644
--- a/src/components/globe-map/index.tsx
+++ b/src/components/globe-map/index.tsx
@@ -57,10 +57,13 @@ export default function GlobeMap({ videoMaterial, className, style, hasMarkers =
const { event, direction, delta } = props;
if (direction[1] !== 0) {
event.stopPropagation();
- event.preventDefault();
+ // event.preventDefault();
window.scrollBy(0, delta[1]);
}
}
+ },
+ {
+ eventOptions: { passive: false }
}
)
const { onWheel } = bind();
diff --git a/src/components/globe-map/popup.tsx b/src/components/globe-map/popup.tsx
index 0819519..9e52d66 100644
--- a/src/components/globe-map/popup.tsx
+++ b/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';
+import VideoPlayer from "@/components/video-player";
const Corners = () => (
<>
@@ -50,9 +51,7 @@ const Popup = ({ closePopup, setSelectedMarker, index }: {