Merge 9e6579c into c594d78

visgl · Aug 7, 2021 · b4061e1 · b4061e1
2 parents c594d78 + 9e6579c
commit b4061e1
Show file tree

Hide file tree

Showing 11 changed files with 211 additions and 197 deletions.
diff --git a/examples/kepler-integration/src/app.js b/examples/kepler-integration/src/app.js
@@ -107,8 +107,8 @@ const WindowSize = styled.div`
 `;
 
 // Custom localizations needed for export video modal
-messages.en['exportVideoModal.edit'] = 'Edit';
-messages.en['exportVideoModal.export'] = 'Export';
+messages.en['exportVideoModal.animation'] = 'Animation';
+messages.en['exportVideoModal.settings'] = 'Settings';
 messages.en['toolbar.exportVideoModal'] = 'Export Video';
 
 class App extends Component {

diff --git a/examples/kepler-integration/src/components/export-video.js b/examples/kepler-integration/src/components/export-video.js
@@ -35,7 +35,8 @@ import {
   ItemSelector,
   Slider,
   LoadingSpinner,
-  ModalTabsFactory
+  ModalTabsFactory,
+  Play
 } from 'kepler.gl/components';
 
 const IconButton = styled(Button)`
@@ -53,7 +54,8 @@ const KEPLER_UI = {
   ItemSelector,
   Slider,
   LoadingSpinner,
-  ModalTabsFactory
+  ModalTabsFactory,
+  Play
 };
 
 const mapStateToProps = state => {

diff --git a/modules/react/src/components/export-video/constants.js b/modules/react/src/components/export-video/constants.js
@@ -22,11 +22,13 @@ export const DEFAULT_ICON_BUTTON_HEIGHT = '16px';
 export const DEFAULT_BUTTON_HEIGHT = '32px';
 export const DEFAULT_BUTTON_WIDTH = '64px';
 export const DEFAULT_PADDING = 32;
-export const DEFAULT_ROW_GAP = 16;
+export const DEFAULT_ROW_GAP = 24;
 export const DEFAULT_SETTINGS_WIDTH = 280;
 
 export const DEFAULT_FILENAME = 'kepler.gl';
 
+export const DEFAULT_PREVIEW_RESOLUTIONS = {'16:9': '1280x720', '4:3': '1280x960'};
+
 export const SIDEPANEL_WIDTH = 300;
 
 export const FORMATS = [
@@ -48,42 +50,50 @@ export const FORMATS = [
   }
 ];
 
+export const ASPECT_RATIOS = {'4_3': '4:3', '16_9': '16:9'};
+
 export const RESOLUTIONS = [
   {
     value: '960x540',
-    label: 'Good 16:9 (540p)',
+    label: 'Good (540p)',
     width: 960,
-    height: 540
+    height: 540,
+    aspectRatio: ASPECT_RATIOS['16_9']
   },
   {
     value: '1280x720',
-    label: 'High 16:9 (720p)',
+    label: 'High (720p)',
     width: 1280,
-    height: 720
+    height: 720,
+    aspectRatio: ASPECT_RATIOS['16_9']
   },
   {
     value: '1920x1080',
-    label: 'Highest 16:9 (1080p)',
+    label: 'Highest (1080p)',
     width: 1920,
-    height: 1080
+    height: 1080,
+    aspectRatio: ASPECT_RATIOS['16_9']
   },
   {
     value: '640x480',
-    label: 'Good 4:3 (480p)',
+    label: 'Good (480p)',
     width: 640,
-    height: 480
+    height: 480,
+    aspectRatio: ASPECT_RATIOS['4_3']
   },
   {
     value: '1280x960',
-    label: 'High 4:3 (960p)',
+    label: 'High (960p)',
     width: 1280,
-    height: 960
+    height: 960,
+    aspectRatio: ASPECT_RATIOS['4_3']
   },
   {
     value: '1920x1440',
-    label: 'Highest 4:3 (1440p)',
+    label: 'Highest (1440p)',
     width: 1920,
-    height: 1440
+    height: 1440,
+    aspectRatio: ASPECT_RATIOS['4_3']
   }
 ];
 
@@ -92,8 +102,3 @@ export const isResolution = value => option => option.value === value;
 export function getResolutionSetting(value) {
   return RESOLUTIONS.find(isResolution(value)) || RESOLUTIONS[0];
 }
-
-export const deckStyle = {
-  width: '100%',
-  height: '100%'
-};
diff --git a/modules/react/src/components/export-video/export-video-panel-footer.js b/modules/react/src/components/export-video/export-video-panel-footer.js
diff --git a/modules/react/src/components/export-video/export-video-panel-preview.js b/modules/react/src/components/export-video/export-video-panel-preview.js
@@ -24,7 +24,7 @@ import {StaticMap} from 'react-map-gl';
 import {MapboxLayer} from '@deck.gl/mapbox';
 import isEqual from 'lodash.isequal';
 
-import {deckStyle} from './constants';
+import {deckStyle, DeckCanvas} from './styled-components';
 import {RenderingSpinner} from './rendering-spinner';
 import {createKeplerLayers} from '../../kepler-layers';
 
@@ -138,17 +138,11 @@ export class ExportVideoPanelPreview extends Component {
     } = this.props;
     const {glContext, mapStyle} = this.state;
     const deck = this.deckRef.current && this.deckRef.current.deck;
-
     const {width, height} = this._getContainer();
-    const containerStyle = {
-      width: `${width}px`,
-      height: `${height}px`,
-      position: 'relative'
-    };
 
     return (
       <>
-        <div id="deck-canvas" style={containerStyle}>
+        <DeckCanvas id="deck-canvas" width={width} height={height}>
           <DeckGL
             ref={this.deckRef}
             viewState={viewState}
@@ -175,7 +169,7 @@ export class ExportVideoPanelPreview extends Component {
               />
             )}
           </DeckGL>
-        </div>
+        </DeckCanvas>
         {rendering && (
           <RenderingSpinner
             rendering={rendering}

diff --git a/modules/react/src/components/export-video/export-video-panel-settings.js b/modules/react/src/components/export-video/export-video-panel-settings.js
@@ -23,8 +23,8 @@ import {withTheme} from 'styled-components';
 
 import {WithKeplerUI} from '../inject-kepler';
 
-import EditTab from './modal-tab-edit';
-import ExportTab from './modal-tab-export';
+import AnimationTab from './modal-tab-animation';
+import SettingsTab from './modal-tab-settings';
 import get from 'lodash.get';
 
 function ExportVideoPanelSettings({settings, resolution}) {
@@ -34,14 +34,14 @@ function ExportVideoPanelSettings({settings, resolution}) {
     // label: What the text of the tab will be
     // elementType: The component to render
     {
-      id: 'export-modal-tab-edit',
-      label: 'exportVideoModal.edit',
-      elementType: EditTab
+      id: 'export-modal-tab-animation',
+      label: 'exportVideoModal.animation',
+      elementType: AnimationTab
     },
     {
-      id: 'export-modal-tab-export',
-      label: 'exportVideoModal.export',
-      elementType: ExportTab
+      id: 'export-modal-tab-settings',
+      label: 'exportVideoModal.settings',
+      elementType: SettingsTab
     }
   ];
   const getDefaultMethod = methods => (Array.isArray(methods) ? get(methods, [0]) : null);
@@ -53,7 +53,7 @@ function ExportVideoPanelSettings({settings, resolution}) {
       {({ModalTabsFactory}) => {
         const ModalTabs = ModalTabsFactory();
         return (
-          <div>
+          <div className="export-video-modal-tab-container">
             <ModalTabs
               currentMethod={currentMethod.id}
               loadingMethods={loadingMethods}