Merge pull request #36 from NASA-IMPACT/fix-fallbacks

Fallbacks
NASA-IMPACT · Oct 2, 2024 · bb041f3 · bb041f3
2 parents 3d5fe36 + ff02b77
commit bb041f3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
@@ -216,7 +216,7 @@ export default function Home() {
 
                 const fallbackImageUrl = variable.fallbackImage;
 
-                const element = new VideoElement({
+                const videoElement = new VideoElement({
                     video: videoUrl,
                     georeference: new ExtentAndRotationGeoreference({
                         extent: new Extent({
@@ -242,14 +242,21 @@ export default function Home() {
                     })
                 });
 
-                const mediaLayer = new MediaLayer({
-                    source: [imageElement, element],
-                    title: variable.name,
-                    zIndex: index,
+                const imageMediaLayer = new MediaLayer({
+                    source: [imageElement],
+                    title: `${variable.name}_image`,
+                    zIndex: index * 2,
                     opacity: variable.name === '245 - Intermediate' ? 1 : 0
                 });
 
-                layerList.push(mediaLayer);
+                const videoMediaLayer = new MediaLayer({
+                    source: [videoElement],
+                    title: `${variable.name}_video`,
+                    zIndex: index * 2 + 1,
+                    opacity: variable.name === '245 - Intermediate' ? 1 : 0
+                });
+
+                layerList.push(imageMediaLayer, videoMediaLayer);
 
                 console.log(
                     `Initializing video for: ${import.meta.env.BASE_URL}${
@@ -258,10 +265,9 @@ export default function Home() {
                     variable.video
                 );
 
-                element
-                    .when((status) => {
-                        const videoElement = element.content;
-                        videoRefs.current[index] = videoElement;
+                videoElement
+                    .when(() => {
+                        videoRefs.current[index] = videoElement.content;
                         loadedVideos++;
                         console.log(
                             `Video initialized for: ${variable.name}`,
@@ -588,7 +594,7 @@ export default function Home() {
     return (
         <div>
             <Transition
-                show={!allVideosLoaded && showTransition}
+                show={!allVideosLoaded}
                 enter="transition-opacity duration-300"
                 enterFrom="opacity-0"
                 enterTo="opacity-100"

diff --git a/src/components/Panel.jsx b/src/components/Panel.jsx
@@ -70,7 +70,7 @@ export default function Panel() {
         mapView.map.layers.forEach((layer) => {
             if (layer.type !== 'media') return;
 
-            if (layer.title === selectedVariable.name) {
+            if (layer.title.includes(selectedVariable.name)) {
                 layer.opacity = 1;
             } else {
                 layer.opacity = 0;