fix: video export fixes (#3378)

* fix: video export fixes

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

* cleanup; patch on mount

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

* tests

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

---------

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

Author: igorDykhta

src/components/src/modals/export-video-modal.spec.tsx

@@ -19,6 +19,25 @@ jest.mock('@hubble.gl/react', () => ({
   KeplerUIContext: MockKeplerUIContext
 }));
 
+const mockComputeDeckEffects = jest.fn(() => []);
+
+jest.mock('@kepler.gl/utils', () => {
+  const actual = jest.requireActual('@kepler.gl/utils');
+  return {
+    ...actual,
+    computeDeckEffects: (...args) => mockComputeDeckEffects(...args),
+    patchDeckRendererForPostProcessing: jest.fn()
+  };
+});
+
+jest.mock('@kepler.gl/effects', () => ({
+  DeckShadowCompositingEffect: jest.fn().mockImplementation(() => ({
+    id: 'shadow-compositing-effect',
+    postRender: jest.fn(),
+    cleanup: jest.fn()
+  }))
+}));
+
 jest.mock('./hubble-utils', () => ({
   getStaticMapProps: jest.fn((_state, _onChange, _token) => ({
     latitude: 37.7,
@@ -39,6 +58,7 @@ jest.mock('./hubble-utils', () => ({
 }));
 
 import ExportVideoModalFactory from './export-video-modal';
+import {DeckShadowCompositingEffect} from '@kepler.gl/effects';
 
 function renderWithThemeLocal(component) {
   return render(
@@ -97,6 +117,7 @@ async function renderAndWaitForPanel(props = DEFAULT_PROPS) {
 describe('ExportVideoModal', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockComputeDeckEffects.mockReturnValue([]);
   });
 
   test('renders without crashing', async () => {
@@ -186,4 +207,131 @@ describe('ExportVideoModal', () => {
     panelProps.onTripFrameUpdate(42);
     expect(DEFAULT_PROPS.visStateActions.setLayerAnimationTime).toHaveBeenCalledWith(42);
   });
+
+  describe('NO_MAP_ID handling', () => {
+    const NO_MAP_PROPS = {
+      ...DEFAULT_PROPS,
+      mapStyle: {
+        styleType: 'no_map',
+        mapStyles: {
+          no_map: {
+            id: 'no_map',
+            label: 'No Basemap',
+            // url is intentionally missing to exercise the data-URI patch
+            icon: '',
+            layerGroups: [],
+            colorMode: 'NONE',
+            style: {version: 8, sources: {}, layers: []}
+          }
+        },
+        bottomMapStyle: null,
+        topMapStyle: null
+      }
+    };
+
+    test('renders without crashing when styleType is NO_MAP_ID', async () => {
+      const {container} = await renderAndWaitForPanel(NO_MAP_PROPS);
+      expect(container.querySelector('.export-video-modal')).toBeInTheDocument();
+    });
+
+    test('injects data-URI empty style URL into mapData when NO_MAP_ID entry has no url', async () => {
+      await renderAndWaitForPanel(NO_MAP_PROPS);
+
+      const panelProps = mockExportVideoPanelContainer.mock.calls[0][0];
+      const noMapEntry = panelProps.mapData.mapStyle.mapStyles.no_map;
+
+      expect(noMapEntry.url).toBeDefined();
+      expect(noMapEntry.url).toMatch(/^data:application\/json,/);
+
+      const encoded = noMapEntry.url.replace('data:application/json,', '');
+      const decoded = JSON.parse(decodeURIComponent(encoded));
+      expect(decoded).toEqual({version: 8, sources: {}, layers: []});
+    });
+
+    test('preserves original mapStyle when NO_MAP_ID entry already has a url', async () => {
+      const propsWithUrl = {
+        ...DEFAULT_PROPS,
+        mapStyle: {
+          styleType: 'no_map',
+          mapStyles: {
+            no_map: {
+              id: 'no_map',
+              url: 'https://existing-style.json'
+            }
+          },
+          bottomMapStyle: null,
+          topMapStyle: null
+        }
+      };
+
+      await renderAndWaitForPanel(propsWithUrl);
+
+      const panelProps = mockExportVideoPanelContainer.mock.calls[0][0];
+      expect(panelProps.mapData.mapStyle).toBe(propsWithUrl.mapStyle);
+    });
+  });
+
+  describe('shadow compositing fallback', () => {
+    const mockEffect = {
+      id: 'light-shadow-1',
+      type: 'light-and-shadow',
+      isEnabled: true,
+      clone: jest.fn(() => ({...mockEffect, clone: mockEffect.clone}))
+    };
+
+    function propsWithEffects(effects) {
+      return {
+        ...DEFAULT_PROPS,
+        visState: {
+          ...DEFAULT_PROPS.visState,
+          effects,
+          effectOrder: effects.map(e => e.id)
+        }
+      };
+    }
+
+    test('adds DeckShadowCompositingEffect when shadows exist but no postRender effect', async () => {
+      const shadowDeckEffect = {id: 'lighting', shadow: true};
+      mockComputeDeckEffects.mockReturnValue([shadowDeckEffect]);
+
+      await renderAndWaitForPanel(propsWithEffects([mockEffect]));
+
+      const panelProps = mockExportVideoPanelContainer.mock.calls[0][0];
+      const effects = panelProps.deckProps.effects;
+
+      expect(effects.length).toBe(2);
+      expect(effects[0]).toBe(shadowDeckEffect);
+      expect(effects[1].id).toBe('shadow-compositing-effect');
+      expect(DeckShadowCompositingEffect).toHaveBeenCalled();
+    });
+
+    test('does not add DeckShadowCompositingEffect when a postRender effect already exists', async () => {
+      const shadowDeckEffect = {id: 'lighting', shadow: true};
+      const postProcessEffect = {id: 'fog', postRender: jest.fn()};
+      mockComputeDeckEffects.mockReturnValue([shadowDeckEffect, postProcessEffect]);
+
+      await renderAndWaitForPanel(propsWithEffects([mockEffect]));
+
+      const panelProps = mockExportVideoPanelContainer.mock.calls[0][0];
+      const effects = panelProps.deckProps.effects;
+
+      expect(effects.length).toBe(2);
+      expect(effects[0]).toBe(shadowDeckEffect);
+      expect(effects[1]).toBe(postProcessEffect);
+      expect(effects.every(e => e.id !== 'shadow-compositing-effect')).toBe(true);
+    });
+
+    test('does not add DeckShadowCompositingEffect when no shadow effect exists', async () => {
+      const nonShadowEffect = {id: 'lighting', shadow: false};
+      mockComputeDeckEffects.mockReturnValue([nonShadowEffect]);
+
+      await renderAndWaitForPanel(propsWithEffects([mockEffect]));
+
+      const panelProps = mockExportVideoPanelContainer.mock.calls[0][0];
+      const effects = panelProps.deckProps.effects;
+
+      expect(effects.length).toBe(1);
+      expect(effects[0]).toBe(nonShadowEffect);
+    });
+  });
 });

src/components/src/modals/export-video-modal.tsx

@@ -4,10 +4,15 @@
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import styled, {ThemeProvider, useTheme} from 'styled-components';
 
-import {DEFAULT_MAPBOX_API_URL} from '@kepler.gl/constants';
+import {DEFAULT_MAPBOX_API_URL, NO_MAP_ID, EMPTY_MAPBOX_STYLE} from '@kepler.gl/constants';
 import {FormattedMessage} from '@kepler.gl/localization';
 import {Viewport, ExportVideo, Effect} from '@kepler.gl/types';
-import {onViewPortChange, computeDeckEffects} from '@kepler.gl/utils';
+import {
+  onViewPortChange,
+  computeDeckEffects,
+  patchDeckRendererForPostProcessing
+} from '@kepler.gl/utils';
+import {DeckShadowCompositingEffect} from '@kepler.gl/effects';
 import {MapStyle} from '@kepler.gl/reducers';
 import {UIStateActions, VisStateActions} from '@kepler.gl/actions';
 
@@ -191,6 +196,8 @@ const HUBBLE_PANEL_OVERHEAD = 2 * 32 + 24 + 280;
 const EXPORT_VIDEO_MODAL_MAX_WIDTH = 1080;
 const MODAL_HORIZONTAL_PADDING = 144;
 
+let _shadowCompositingEffect: InstanceType<typeof DeckShadowCompositingEffect> | null = null;
+
 const ExportVideoModalFactory = () => {
   const ExportVideoModal: React.FC<ExportVideoModalProps> = ({
     mapboxApiAccessToken,
@@ -206,23 +213,53 @@ const ExportVideoModalFactory = () => {
   }) => {
     const [hubble, setHubble] = useState<HubbleModule | null>(_hubbleModule);
 
+    useEffect(() => {
+      patchDeckRendererForPostProcessing();
+    }, []);
+
     useEffect(() => {
       if (!hubble) {
         loadHubble().then(setHubble);
       }
     }, [hubble]);
 
+    useEffect(() => {
+      return () => {
+        if (_shadowCompositingEffect) {
+          _shadowCompositingEffect.cleanup();
+          _shadowCompositingEffect = null;
+        }
+      };
+    }, []);
+
     const exportVideoWidth = useMemo(() => {
       const modalInnerW =
         Math.min(EXPORT_VIDEO_MODAL_MAX_WIDTH, containerW * 0.7, containerW) -
         MODAL_HORIZONTAL_PADDING;
       return Math.max(320, Math.min(540, modalInnerW - HUBBLE_PANEL_OVERHEAD));
     }, [containerW]);
 
-    const keplerState = useMemo(
-      () => ({visState, mapState, mapStyle}),
-      [visState, mapState, mapStyle]
-    );
+    const keplerState = useMemo(() => {
+      if (mapStyle?.styleType === NO_MAP_ID) {
+        const noMapEntry = mapStyle.mapStyles?.[NO_MAP_ID];
+        if (noMapEntry && !noMapEntry.url) {
+          const emptyStyleUrl =
+            'data:application/json,' + encodeURIComponent(JSON.stringify(EMPTY_MAPBOX_STYLE));
+          return {
+            visState,
+            mapState,
+            mapStyle: {
+              ...mapStyle,
+              mapStyles: {
+                ...mapStyle.mapStyles,
+                [NO_MAP_ID]: {...noMapEntry, url: emptyStyleUrl}
+              }
+            }
+          };
+        }
+      }
+      return {visState, mapState, mapStyle};
+    }, [visState, mapState, mapStyle]);
 
     const onUpdateMap = useCallback(
       (viewPort: Viewport) => {
@@ -243,15 +280,29 @@ const ExportVideoModalFactory = () => {
     const deckEffects = useMemo(() => {
       if (videoEffects.length === 0) return [];
       const effectOrder = visState.effectOrder || videoEffects.map((e: Effect) => e.id);
-      return computeDeckEffects({
+      const effects = computeDeckEffects({
         visState: {...visState, effects: videoEffects, effectOrder},
         mapState,
         isExport: true
       });
+
+      const hasShadow = effects.some((e: any) => e.shadow === true);
+      const hasPostProcess = effects.some((e: any) => typeof e.postRender === 'function');
+      if (hasShadow && !hasPostProcess) {
+        if (!_shadowCompositingEffect) {
+          _shadowCompositingEffect = new DeckShadowCompositingEffect();
+        }
+        effects.push(_shadowCompositingEffect as any);
+      }
+
+      return effects;
     }, [visState, videoEffects, mapState]);
 
     const deckPropsWithEffects = useMemo(
-      () => ({...hubbleDeckGlProps, effects: deckEffects}),
+      () => ({
+        ...hubbleDeckGlProps,
+        effects: deckEffects
+      }),
       [hubbleDeckGlProps, deckEffects]
     );
 

src/effects/src/index.ts

@@ -3,3 +3,4 @@
 
 export {default as Effect} from './effect';
 export {createEffect} from './utils';
+export {DeckShadowCompositingEffect} from './shader-passes/shadow-compositing';