keplergl
diff --git a/‎jest.config.js‎
Lines changed: 1 addition & 1 deletion b/‎jest.config.js‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎package.json‎
Lines changed: 3 additions & 0 deletions b/‎package.json‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎src/actions/src/ui-state-actions.ts‎
Lines changed: 21 additions & 1 deletion b/‎src/actions/src/ui-state-actions.ts‎
Lines changed: 21 additions & 1 deletion
diff --git a/‎src/components/package.json‎
Lines changed: 3 additions & 0 deletions b/‎src/components/package.json‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎src/components/src/bottom-widget.tsx‎
Lines changed: 6 additions & 1 deletion b/‎src/components/src/bottom-widget.tsx‎
Lines changed: 6 additions & 1 deletion
diff --git a/‎src/components/src/common/animation-control/animation-control.tsx‎
Lines changed: 3 additions & 0 deletions b/‎src/components/src/common/animation-control/animation-control.tsx‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎src/components/src/common/animation-control/export-video-control.tsx‎
Lines changed: 38 additions & 0 deletions b/‎src/components/src/common/animation-control/export-video-control.tsx‎
Lines changed: 38 additions & 0 deletions
diff --git a/‎src/components/src/common/animation-control/playback-controls.tsx‎
Lines changed: 10 additions & 3 deletions b/‎src/components/src/common/animation-control/playback-controls.tsx‎
Lines changed: 10 additions & 3 deletions
diff --git a/‎src/components/src/common/time-range-slider.tsx‎
Lines changed: 9 additions & 3 deletions b/‎src/components/src/common/time-range-slider.tsx‎
Lines changed: 9 additions & 3 deletions
diff --git a/‎src/components/src/filters/time-range-filter.tsx‎
Lines changed: 2 additions & 0 deletions b/‎src/components/src/filters/time-range-filter.tsx‎
Lines changed: 2 additions & 0 deletions
@@ -22,7 +22,7 @@ const config = {
   // Some libraries (even if transitive) are transitioning to ESM and need additional transpilation. Relevant issues:
   // - tiny-sdf: https://github.com/visgl/deck.gl/issues/7735
   transformIgnorePatterns: [
-    '/node_modules\\/(?!(.*@mapbox\\/tiny-sdf\\.*|@loaders\\.gl|@deck\\.gl|@deck\\.gl-community|@luma\\.gl|preact))',
+    '/node_modules\\/(?!(.*@mapbox\\/tiny-sdf\\.*|@loaders\\.gl|@deck\\.gl|@deck\\.gl-community|@luma\\.gl|@hubble\\.gl|preact))',
     '\\.pnp\\.[^\\/]+$'
   ]
 };
 
@@ -234,6 +234,7 @@
     "@deck.gl/react": "9.2.11",
     "@deck.gl/widgets": "9.2.11",
     "@loaders.gl/core": "4.3.4",
+    "@loaders.gl/compression": "4.3.4",
     "@loaders.gl/csv": "4.3.4",
     "@loaders.gl/draco": "4.3.4",
     "@loaders.gl/gltf": "4.3.4",
@@ -244,8 +245,10 @@
     "@loaders.gl/parquet": "4.3.4",
     "@loaders.gl/gis": "4.3.4",
     "@loaders.gl/schema": "4.3.4",
+    "@loaders.gl/video": "4.3.4",
     "@loaders.gl/wkt": "4.3.4",
     "@loaders.gl/wms": "4.3.4",
+    "@loaders.gl/zip": "4.3.4",
     "@luma.gl/constants": "9.2.6",
     "@luma.gl/core": "9.2.6",
     "@luma.gl/effects": "9.2.6",
 
@@ -3,7 +3,7 @@
 
 import {createAction} from '@reduxjs/toolkit';
 import {default as ActionTypes} from './action-types';
-import {Merge, ExportImage} from '@kepler.gl/types';
+import {Merge, ExportImage, ExportVideo} from '@kepler.gl/types';
 
 /** TOGGLE_SIDE_PANEL */
 export type ToggleSidePanelUpdaterAction = {
@@ -314,6 +314,26 @@ export const cleanupExportImage: () => {
   type: typeof ActionTypes.CLEANUP_EXPORT_IMAGE;
 } = createAction(ActionTypes.CLEANUP_EXPORT_IMAGE);
 
+/** SET_EXPORT_VIDEO_SETTING */
+export type SetExportVideoSettingUpdaterAction = {
+  payload: Partial<ExportVideo>;
+};
+/**
+ * Set `exportVideo` settings: mediaType, cameraPreset, fileName, resolution, durationMs
+ * @memberof uiStateActions
+ * @param newSetting - {mediaType: 'webm'}
+ * @public
+ */
+export const setExportVideoSetting: (
+  newSetting: SetExportVideoSettingUpdaterAction['payload']
+) => Merge<
+  SetExportVideoSettingUpdaterAction,
+  {type: typeof ActionTypes.SET_EXPORT_VIDEO_SETTING}
+> = createAction(
+  ActionTypes.SET_EXPORT_VIDEO_SETTING,
+  (newSetting: SetExportVideoSettingUpdaterAction['payload']) => ({payload: newSetting})
+);
+
 /** SET_EXPORT_SELECTED_DATASET */
 export type SetExportSelectedDatasetUpdaterAction = {
   payload: string;
 
@@ -40,6 +40,8 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/is-prop-valid": "^1.2.1",
     "@floating-ui/react": "0.25.1",
+    "@hubble.gl/core": "2.0.0-alpha.4",
+    "@hubble.gl/react": "2.0.0-alpha.4",
     "@kepler.gl/actions": "3.3.0-alpha.0",
     "@kepler.gl/cloud-providers": "3.3.0-alpha.0",
     "@kepler.gl/common-utils": "3.3.0-alpha.0",
@@ -91,6 +93,7 @@
     "lodash": "4.17.21",
     "mapbox-gl": "1.13.1",
     "maplibre-gl": "^3.6.2",
+    "maplibregl-mapbox-request-transformer": "^0.0.2",
     "markdown-to-jsx": "^7.7.6",
     "mjolnir.js": "^3.0.0",
     "moment": "^2.10.6",
 
@@ -4,7 +4,7 @@
 import React, {forwardRef, useMemo, useCallback} from 'react';
 import styled, {withTheme, IStyledComponent} from 'styled-components';
 
-import {FILTER_VIEW_TYPES} from '@kepler.gl/constants';
+import {FILTER_VIEW_TYPES, EXPORT_VIDEO_ID} from '@kepler.gl/constants';
 import {hasPortableWidth, isSideFilter, mergeFilterWithTimeline} from '@kepler.gl/utils';
 import {media, breakPointValues} from '@kepler.gl/styles';
 import {TimeRangeFilter} from '@kepler.gl/types';
@@ -76,6 +76,7 @@ export default function BottomWidgetFactory(
       datasets,
       filters,
       animationConfig,
+      toggleModal,
       visStateActions,
       containerW,
       uiState,
@@ -145,6 +146,8 @@ export default function BottomWidgetFactory(
       [filter, animationConfig]
     );
 
+    const exportAnimation = useCallback(() => toggleModal(EXPORT_VIDEO_ID), [toggleModal]);
+
     const onClose = useCallback(
       () => visStateActions.setFilterView(enlargedFilterIdx, FILTER_VIEW_TYPES.side),
       [visStateActions, enlargedFilterIdx]
@@ -179,6 +182,7 @@ export default function BottomWidgetFactory(
                 <LayerAnimationControl
                   updateAnimationSpeed={visStateActions.updateLayerAnimationSpeed}
                   toggleAnimation={visStateActions.toggleLayerAnimation}
+                  exportAnimation={exportAnimation}
                   isAnimatable={!animatedFilter}
                   isAnimating={isAnimating}
                   resetAnimation={resetAnimation}
@@ -211,6 +215,7 @@ export default function BottomWidgetFactory(
                   setFilterAnimationWindow={visStateActions.setFilterAnimationWindow}
                   setFilterSyncTimelineMode={visStateActions.setTimeFilterSyncTimelineMode}
                   toggleAnimation={visStateActions.toggleFilterAnimation}
+                  exportAnimation={exportAnimation}
                   updateAnimationSpeed={visStateActions.updateFilterAnimationSpeed}
                   resetAnimation={resetAnimation}
                   isAnimatable={!animationConfig || !animationConfig.isAnimating}
 
@@ -75,6 +75,7 @@ export type AnimationControlProps = {
   updateAnimationSpeed?: (val: number) => void;
   setAnimationWindow?: (id: string) => void;
   toggleAnimation: () => void;
+  exportAnimation?: () => void;
   resetAnimation?: () => void;
   setTimelineValue: (value: number[]) => void;
   showTimeDisplay?: boolean;
@@ -105,6 +106,7 @@ function AnimationControlFactory(
     toggleAnimation = () => {
       return;
     },
+    exportAnimation,
     updateAnimationSpeed = () => {
       return;
     },
@@ -143,6 +145,7 @@ function AnimationControlFactory(
               isAnimating={isAnimating}
               pauseAnimation={toggleAnimation}
               resetAnimation={resetAnimation}
+              exportAnimation={exportAnimation}
               speed={speed}
               updateAnimationSpeed={updateAnimationSpeed}
               setFilterAnimationWindow={setAnimationWindow}
 
@@ -0,0 +1,38 @@
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the kepler.gl project
+
+import React from 'react';
+import {FormattedMessage} from '@kepler.gl/localization';
+import {Tooltip} from '../styled-components';
+import IconButton from '../icon-button';
+
+const DELAY_SHOW = 500;
+
+function ExportVideoControlFactory() {
+  const ExportVideoControl = ({
+    showAnimationWindowControl,
+    btnStyle,
+    buttonHeight,
+    playbackIcons,
+    exportAnimation
+  }) => {
+    return showAnimationWindowControl || !exportAnimation ? null : (
+      <IconButton
+        data-tip
+        data-for="animate-export"
+        className="playback-control-button"
+        onClick={exportAnimation}
+        {...btnStyle}
+      >
+        <playbackIcons.export height={buttonHeight} />
+        <Tooltip id="animate-export" place="top" delayShow={DELAY_SHOW} effect="solid">
+          <FormattedMessage id="tooltip.export" />
+        </Tooltip>
+      </IconButton>
+    );
+  };
+
+  return ExportVideoControl;
+}
+
+export default ExportVideoControlFactory;
@@ -13,6 +13,7 @@ import AnimationWindowControlFactory, {AnimationItem} from './animation-window-c
 import ResetControlFactory from './reset-control';
 import PlayControlFactory from './play-control';
 import SpeedControlFactory from './speed-control';
+import ExportVideoControlFactory from './export-video-control';
 import {BaseComponentProps} from '../../types';
 
 const DEFAULT_BUTTON_HEIGHT = '20px';
@@ -74,6 +75,7 @@ export interface PlaybackControlsProps {
   pauseAnimation?: () => void;
   resetAnimation?: () => void;
   startAnimation: () => void;
+  exportAnimation?: () => void;
   playbackIcons?: Record<string, React.FC<{height: number}>>;
   animationItems?: {[key: string]: AnimationItem};
   buttonStyle?: string;
@@ -88,22 +90,25 @@ PlaybackControlsFactory.deps = [
   WindowActionControlFactory,
   AnimationWindowControlFactory,
   ResetControlFactory,
-  PlayControlFactory
+  PlayControlFactory,
+  ExportVideoControlFactory
 ];
 
 function PlaybackControlsFactory(
   AnimationSpeedSlider: ReturnType<typeof AnimationSpeedSliderFactory>,
   WindowActionControl,
   AnimationWindowControl,
   ResetControl,
-  PlayControl
+  PlayControl,
+  ExportVideoControl
 ) {
   const PLAYBACK_CONTROLS_DEFAULT_ACTION_COMPONENTS = [
     PlayControl,
     SpeedControlFactory(AnimationSpeedSlider),
     ResetControl,
     WindowActionControl,
-    AnimationWindowControl
+    AnimationWindowControl,
+    ExportVideoControl
   ];
 
   // eslint-disable-next-line complexity
@@ -119,6 +124,7 @@ function PlaybackControlsFactory(
     pauseAnimation = nop,
     resetAnimation = nop,
     startAnimation = nop,
+    exportAnimation,
     playbackIcons = DEFAULT_ICONS,
     animationItems = DEFAULT_ANIMATE_ITEMS,
     buttonStyle = 'secondary',
@@ -168,6 +174,7 @@ function PlaybackControlsFactory(
             pauseAnimation={pauseAnimation}
             resetAnimation={resetAnimation}
             startAnimation={startAnimation}
+            exportAnimation={exportAnimation}
             playbackIcons={playbackIcons}
             isSpeedControlVisible={isSpeedControlVisible}
             speed={speed}
 
@@ -15,6 +15,7 @@ import AnimationControlFactory from './animation-control/animation-control';
 import {BaseComponentProps} from '../types';
 
 const animationControlWidth = 176;
+const animationControlExportWidth = 19;
 
 type TimeRangeSliderProps = {
   domain?: [number, number];
@@ -36,6 +37,7 @@ type TimeRangeSliderProps = {
   animationWindow: string;
   resetAnimation?: () => void;
   toggleAnimation: () => void;
+  exportAnimation?: () => void;
   updateAnimationSpeed?: (val: number) => void;
   setFilterAnimationWindow?: (id: string) => void;
   setFilterPlot?: ActionHandler<typeof setFilterPlot>;
@@ -115,6 +117,7 @@ export default function TimeRangeSliderFactory(
       updateAnimationSpeed,
       setFilterAnimationWindow,
       toggleAnimation,
+      exportAnimation,
       onChange,
       setFilterPlot,
       timeline
@@ -125,12 +128,13 @@ export default function TimeRangeSliderFactory(
       () => getTimeBinsForInterval(timeBins, plotType?.interval),
       [timeBins, plotType?.interval]
     );
+    const width = animationControlWidth + (exportAnimation ? animationControlExportWidth : 0);
 
     const style = useMemo(
       () => ({
-        width: isEnlarged ? `calc(100% - ${animationControlWidth}px)` : '100%'
+        width: isEnlarged ? `calc(100% - ${width}px)` : '100%'
       }),
-      [isEnlarged]
+      [isEnlarged, width]
     );
 
     return (
@@ -176,20 +180,22 @@ export default function TimeRangeSliderFactory(
               updateAnimationSpeed={updateAnimationSpeed}
               setTimelineValue={throttledOnchange}
               setAnimationWindow={setFilterAnimationWindow}
+              exportAnimation={exportAnimation}
               showTimeDisplay={false}
               timeline={timeline}
             />
           )}
           {isEnlarged && !isMinified ? (
             <PlaybackControls
               isAnimatable={isAnimatable}
-              width={animationControlWidth}
+              width={width}
               speed={speed}
               animationWindow={animationWindow}
               updateAnimationSpeed={updateAnimationSpeed}
               setFilterAnimationWindow={setFilterAnimationWindow}
               pauseAnimation={toggleAnimation}
               resetAnimation={resetAnimation}
+              exportAnimation={exportAnimation}
               isAnimating={isAnimating}
               startAnimation={toggleAnimation}
             />
 
@@ -53,6 +53,7 @@ function TimeRangeFilterFactory(TimeRangeSlider: ReturnType<typeof TimeRangeSlid
     setFilterPlot,
     isAnimatable,
     toggleAnimation,
+    exportAnimation,
     hideTimeTitle,
     timeline
   }) => (
@@ -61,6 +62,7 @@ function TimeRangeFilterFactory(TimeRangeSlider: ReturnType<typeof TimeRangeSlid
       onChange={setFilter}
       setFilterPlot={setFilterPlot}
       toggleAnimation={toggleAnimation}
+      exportAnimation={exportAnimation}
       isAnimatable={isAnimatable}
       hideTimeTitle={hideTimeTitle}
       timeline={timeline}
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ const config = {`
`22`	`22`	`// Some libraries (even if transitive) are transitioning to ESM and need additional transpilation. Relevant issues:`
`23`	`23`	`// - tiny-sdf: https://github.com/visgl/deck.gl/issues/7735`
`24`	`24`	`transformIgnorePatterns: [`
`25`		`- '/node_modules\\/(?!(.@mapbox\\/tiny-sdf\\.\|@loaders\\.gl\|@deck\\.gl\|@deck\\.gl-community\|@luma\\.gl\|preact))',`
	`25`	`+ '/node_modules\\/(?!(.@mapbox\\/tiny-sdf\\.\|@loaders\\.gl\|@deck\\.gl\|@deck\\.gl-community\|@luma\\.gl\|@hubble\\.gl\|preact))',`
`26`	`26`	`'\\.pnp\\.[^\\/]+$'`
`27`	`27`	`]`
`28`	`28`	`};`