feat: swipe view mode support in video export

Signed-off-by: Ihor Dykhta <ihordykhta@Ihors-MacBook-Pro.local>

Author: Ihor Dykhta

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

@@ -4,7 +4,7 @@
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import styled, {ThemeProvider, useTheme} from 'styled-components';
 
-import {DEFAULT_MAPBOX_API_URL, NO_MAP_ID, EMPTY_MAPBOX_STYLE} from '@kepler.gl/constants';
+import {DEFAULT_MAPBOX_API_URL, NO_MAP_ID, EMPTY_MAPBOX_STYLE, MapSplitMode} from '@kepler.gl/constants';
 import {FormattedMessage} from '@kepler.gl/localization';
 import {Viewport, ExportVideo, Effect} from '@kepler.gl/types';
 import {
@@ -30,6 +30,7 @@ import {
   getAnimatableFilters
 } from './hubble-utils';
 import {useFogHeightAnimation} from './fog-height-animation';
+import {SwipeExportVideoPanelContainer} from './swipe-export-video-container';
 
 type HubbleModule = {
   ExportVideoPanelContainer: React.ComponentType<any>;
@@ -184,6 +185,9 @@ export type VideoConfiguration = {
   fileName?: string;
   resolution?: string;
   durationMs?: number;
+  swipeStartPct?: number;
+  swipeEndPct?: number;
+  swipeEasing?: 'linear' | 'ease-in-out';
 };
 
 export interface ExportVideoModalProps {
@@ -311,8 +315,13 @@ const ExportVideoModalFactory = () => {
       ...exportVideo
     });
     const onUpdateVideoConfiguration = useCallback(
-      (values: VideoConfiguration) => setVideoConfiguration(prev => ({...prev, ...values})),
-      []
+      (values: VideoConfiguration) => {
+        setVideoConfiguration(prev => ({...prev, ...values}));
+        if (values.swipeStartPct !== undefined || values.swipeEndPct !== undefined || values.swipeEasing !== undefined) {
+          uiStateActions.setExportVideoSetting(values as any);
+        }
+      },
+      [uiStateActions]
     );
 
     const hubbleContainerRef = useRef<any>(null);
@@ -365,23 +374,11 @@ const ExportVideoModalFactory = () => {
     );
 
     useEffect(() => {
-      const trueDpr = trueDevicePixelRatio.current;
-      const descriptor = Object.getOwnPropertyDescriptor(window, 'devicePixelRatio');
-
-      Object.defineProperty(window, 'devicePixelRatio', {
-        get: () => trueDpr,
-        set: () => {
-          // no-op: prevent hubble.gl from changing DPR
-        },
-        configurable: true
-      });
-
+      // Allow hubble.gl to change DPR for resolution scaling during video export.
+      // On unmount, restore the original DPR value so the rest of the app is unaffected.
       return () => {
-        if (descriptor) {
-          Object.defineProperty(window, 'devicePixelRatio', descriptor);
-        } else {
-          delete (window as any).devicePixelRatio;
-        }
+        // @ts-ignore
+        window.devicePixelRatio = trueDevicePixelRatio.current;
       };
     }, []);
 
@@ -429,27 +426,52 @@ const ExportVideoModalFactory = () => {
 
     const {ExportVideoPanelContainer, KeplerUIContext} = hubble;
 
+    const isSwipeMode = mapState.mapSplitMode === MapSplitMode.SWIPE_COMPARE && mapState.isSplit;
+
     return (
       <KeplerUIContext.Provider value={KEPLER_UI}>
         <StyledExportVideoModalContent className="export-video-modal">
-          <ExportVideoPanelContainer
-            ref={hubbleContainerRef}
-            initialState={videoConfiguration}
-            mapData={keplerState}
-            onSettingsChange={onUpdateVideoConfiguration}
-            header={false}
-            handleClose={onClose}
-            exportVideoWidth={exportVideoWidth}
-            onFilterFrameUpdate={onFilterFrameUpdate}
-            onTripFrameUpdate={onTripFrameUpdate}
-            deckProps={deckPropsWithEffects}
-            mapProps={staticMapProps}
-            disableBaseMap={false}
-            mapboxLayerBeforeId={topLayer?.id}
-            defaultFileName={DEFAULT_FILENAME}
-            animatableFilters={animatableFilters}
-            getTimeRangeFilterKeyframes={getTimeRangeFilterKeyframes}
-          />
+          {isSwipeMode ? (
+            <SwipeExportVideoPanelContainer
+              initialState={videoConfiguration}
+              mapData={keplerState}
+              onSettingsChange={onUpdateVideoConfiguration}
+              header={false}
+              handleClose={onClose}
+              exportVideoWidth={exportVideoWidth}
+              onFilterFrameUpdate={onFilterFrameUpdate}
+              onTripFrameUpdate={onTripFrameUpdate}
+              deckProps={deckPropsWithEffects}
+              mapProps={staticMapProps}
+              disableBaseMap={false}
+              mapboxLayerBeforeId={topLayer?.id}
+              defaultFileName={DEFAULT_FILENAME}
+              animatableFilters={animatableFilters}
+              getTimeRangeFilterKeyframes={getTimeRangeFilterKeyframes}
+              swipeStartPct={exportVideo.swipeStartPct}
+              swipeEndPct={exportVideo.swipeEndPct}
+              swipeEasing={exportVideo.swipeEasing}
+            />
+          ) : (
+            <ExportVideoPanelContainer
+              ref={hubbleContainerRef}
+              initialState={videoConfiguration}
+              mapData={keplerState}
+              onSettingsChange={onUpdateVideoConfiguration}
+              header={false}
+              handleClose={onClose}
+              exportVideoWidth={exportVideoWidth}
+              onFilterFrameUpdate={onFilterFrameUpdate}
+              onTripFrameUpdate={onTripFrameUpdate}
+              deckProps={deckPropsWithEffects}
+              mapProps={staticMapProps}
+              disableBaseMap={false}
+              mapboxLayerBeforeId={topLayer?.id}
+              defaultFileName={DEFAULT_FILENAME}
+              animatableFilters={animatableFilters}
+              getTimeRangeFilterKeyframes={getTimeRangeFilterKeyframes}
+            />
+          )}
         </StyledExportVideoModalContent>
       </KeplerUIContext.Provider>
     );

src/components/src/modals/hubble-utils.ts

@@ -1,10 +1,12 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import {MapView} from '@deck.gl/core';
+import {MapView, WebMercatorViewport, type MapViewState} from '@deck.gl/core';
 import {DEFAULT_MAPBOX_API_URL, FILTER_VIEW_TYPES, FILTER_TYPES} from '@kepler.gl/constants';
 import {getLayerBlendingParameters, getBaseMapLibrary} from '@kepler.gl/utils';
 import {isMapboxURL, transformMapboxUrl} from 'maplibregl-mapbox-request-transformer';
+import {point} from '@turf/helpers';
+import transformTranslate from '@turf/transform-translate';
 import {TimeRangeFilter} from '@kepler.gl/types';
 
 type KeplerState = {
@@ -196,3 +198,74 @@ export function getAnimatableFilters(keplerState: KeplerState): TimeRangeFilter[
       (f.view === FILTER_VIEW_TYPES.enlarged || f.syncedWithLayerTimeline)
   );
 }
+
+// --- Video export utilities (inlined from @hubble.gl internals) ---
+
+export function scaleToVideoExport(
+  viewState: MapViewState,
+  container: {width: number; height: number}
+): MapViewState & {width: number; height: number} {
+  const viewport = new WebMercatorViewport(viewState);
+  const nw = viewport.unproject([0, 0]) as [number, number];
+  const se = viewport.unproject([viewport.width, viewport.height]) as [number, number];
+  const videoViewport = new WebMercatorViewport({
+    ...viewState,
+    width: container.width,
+    height: container.height
+  }).fitBounds([nw, se]);
+  const {height, width, latitude, longitude, zoom, altitude} = videoViewport;
+  return {
+    height,
+    width,
+    latitude,
+    longitude,
+    pitch: viewState.pitch,
+    zoom,
+    bearing: viewState.bearing,
+    altitude
+  } as any;
+}
+
+export function parseSetCameraType(strCameraType: string, viewState: MapViewState): MapViewState {
+  const modifiedViewState: any = {...viewState};
+  const match = strCameraType.match(/\b(?!to)\b\S+\w/g);
+  if (!match) return modifiedViewState;
+
+  const turfPoint = point([modifiedViewState.longitude, modifiedViewState.latitude]);
+
+  if (match[0] === 'Orbit') {
+    modifiedViewState.bearing = modifiedViewState.bearing + parseInt(match[1], 10);
+  }
+
+  const directions = new Set(['East', 'South', 'West', 'North']);
+  if (directions.has(match[0])) {
+    const directionMap: Record<string, number> = {East: 270, South: 0, West: 90, North: 180};
+    const translatedPoly = transformTranslate(turfPoint, 10, directionMap[match[0]]);
+    if (match[0] === 'East' || match[0] === 'West') {
+      modifiedViewState.longitude = translatedPoly.geometry.coordinates[0];
+    } else {
+      modifiedViewState.latitude = translatedPoly.geometry.coordinates[1];
+    }
+  }
+
+  if (match[0] === 'Zoom') {
+    modifiedViewState.zoom += match[1] === 'In' ? 3 : -3;
+  }
+
+  return modifiedViewState;
+}
+
+type Resolution = {value: string; label: string; width: number; height: number};
+
+const RESOLUTIONS: Resolution[] = [
+  {value: '960x540', label: 'Good (540p)', width: 960, height: 540},
+  {value: '1280x720', label: 'High (720p)', width: 1280, height: 720},
+  {value: '1920x1080', label: 'Highest (1080p)', width: 1920, height: 1080},
+  {value: '640x480', label: 'Good (480p)', width: 640, height: 480},
+  {value: '1280x960', label: 'High (960p)', width: 1280, height: 960},
+  {value: '1920x1440', label: 'Highest (1440p)', width: 1920, height: 1440}
+];
+
+export function getResolutionSetting(value: string): Resolution {
+  return RESOLUTIONS.find(r => r.value === value) || RESOLUTIONS[0];
+}

src/components/src/modals/swipe-composite-utils.ts

@@ -0,0 +1,119 @@
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the kepler.gl project
+
+import {easeInOut} from 'popmotion';
+
+export type SwipeEasing = 'linear' | 'ease-in-out';
+
+const linear = (p: number): number => p;
+const EASING_MAP: Record<SwipeEasing, (p: number) => number> = {
+  linear,
+  'ease-in-out': easeInOut
+};
+
+/**
+ * Compute the swipe percentage at a given time.
+ */
+export function getSwipePercentageAtTime(
+  timeMs: number,
+  durationMs: number,
+  startPct: number,
+  endPct: number,
+  easing: SwipeEasing = 'ease-in-out'
+): number {
+  const progress = Math.max(0, Math.min(1, timeMs / durationMs));
+  const easedProgress = EASING_MAP[easing](progress);
+  return startPct + (endPct - startPct) * easedProgress;
+}
+
+const HANDLE_RADIUS = 14;
+const ARROW_SIZE = 6;
+
+/**
+ * Draw a swipe divider (line + circular handle with arrows) onto a 2D canvas context.
+ */
+function drawSwipeDivider(
+  ctx: CanvasRenderingContext2D,
+  splitX: number,
+  height: number
+): void {
+  ctx.save();
+
+  // Divider line
+  ctx.strokeStyle = '#FFFFFF';
+  ctx.lineWidth = 2;
+  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+  ctx.shadowBlur = 4;
+  ctx.beginPath();
+  ctx.moveTo(splitX, 0);
+  ctx.lineTo(splitX, height);
+  ctx.stroke();
+
+  // Handle circle
+  const cy = height / 2;
+  ctx.shadowBlur = 6;
+  ctx.beginPath();
+  ctx.arc(splitX, cy, HANDLE_RADIUS, 0, Math.PI * 2);
+  ctx.fillStyle = '#29323C';
+  ctx.fill();
+  ctx.strokeStyle = '#FFFFFF';
+  ctx.lineWidth = 2;
+  ctx.stroke();
+  ctx.shadowBlur = 0;
+
+  // Left arrow
+  ctx.fillStyle = '#FFFFFF';
+  ctx.beginPath();
+  ctx.moveTo(splitX - ARROW_SIZE - 3, cy);
+  ctx.lineTo(splitX - 3, cy - ARROW_SIZE);
+  ctx.lineTo(splitX - 3, cy + ARROW_SIZE);
+  ctx.closePath();
+  ctx.fill();
+
+  // Right arrow
+  ctx.beginPath();
+  ctx.moveTo(splitX + ARROW_SIZE + 3, cy);
+  ctx.lineTo(splitX + 3, cy - ARROW_SIZE);
+  ctx.lineTo(splitX + 3, cy + ARROW_SIZE);
+  ctx.closePath();
+  ctx.fill();
+
+  ctx.restore();
+}
+
+/**
+ * Composite two canvases (left/right map views) with a swipe divider
+ * into a single output canvas.
+ */
+export function compositeSwipeFrame(
+  leftCanvas: HTMLCanvasElement,
+  rightCanvas: HTMLCanvasElement,
+  outputCanvas: HTMLCanvasElement,
+  percentage: number,
+  showDivider: boolean = true
+): void {
+  const ctx = outputCanvas.getContext('2d');
+  if (!ctx) return;
+
+  const w = outputCanvas.width;
+  const h = outputCanvas.height;
+  const splitX = Math.round((w * percentage) / 100);
+
+  ctx.clearRect(0, 0, w, h);
+
+  // Draw right (background) canvas fully
+  ctx.drawImage(rightCanvas, 0, 0, w, h);
+
+  // Draw left (foreground) canvas clipped to 0..splitX
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(0, 0, splitX, h);
+  ctx.clip();
+  ctx.drawImage(leftCanvas, 0, 0, w, h);
+  ctx.restore();
+
+  // Draw the divider
+  if (showDivider) {
+    drawSwipeDivider(ctx, splitX, h);
+  }
+}