[ADD] Removed aspect ratios. Set up foundation for play button preview

visgl · Jul 20, 2021 · 47ebdc0 · 47ebdc0
1 parent 5dd2255
commit 47ebdc0
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 39 deletions.
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
@@ -51,39 +51,45 @@ export const FORMATS = [
 export const RESOLUTIONS = [
   {
     value: '960x540',
-    label: 'Good 16:9 (540p)',
+    label: 'Good (540p)',
     width: 960,
-    height: 540
+    height: 540,
+    aspectRatio: '16:9'
   },
   {
     value: '1280x720',
-    label: 'High 16:9 (720p)',
+    label: 'High (720p)',
     width: 1280,
-    height: 720
+    height: 720,
+    aspectRatio: '16:9'
   },
   {
     value: '1920x1080',
-    label: 'Highest 16:9 (1080p)',
+    label: 'Highest (1080p)',
     width: 1920,
-    height: 1080
+    height: 1080,
+    aspectRatio: '16:9'
   },
   {
     value: '640x480',
-    label: 'Good 4:3 (480p)',
+    label: 'Good (480p)',
     width: 640,
-    height: 480
+    height: 480,
+    aspectRatio: '4:3'
   },
   {
     value: '1280x960',
-    label: 'High 4:3 (960p)',
+    label: 'High (960p)',
     width: 1280,
-    height: 960
+    height: 960,
+    aspectRatio: '4:3'
   },
   {
     value: '1920x1440',
-    label: 'Highest 4:3 (1440p)',
+    label: 'Highest (1440p)',
     width: 1920,
-    height: 1440
+    height: 1440,
+    aspectRatio: '4:3'
   }
 ];
 
@@ -95,5 +101,19 @@ export function getResolutionSetting(value) {
 
 export const deckStyle = {
   width: '100%',
-  height: '100%'
+  height: '100%',
+  position: 'relative'
+};
+
+export const timelineControlStyle = {
+  position: 'relative',
+  display: 'flex',
+  justifyContent: 'center'
+};
+
+export const timelinePlayButtonStyle = {
+  cursor: 'pointer',
+  height: '50px',
+  width: '50px',
+  fill: '#FFF'
 };
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
@@ -21,36 +21,15 @@
 import React from 'react';
 import {withTheme} from 'styled-components';
 
-import {DEFAULT_BUTTON_HEIGHT, DEFAULT_BUTTON_WIDTH} from './constants';
 import {WithKeplerUI} from '../inject-kepler';
 
-import {PanelFooterInner, ButtonGroup} from './styled-components';
+import {PanelFooterInner} from './styled-components';
 
 const ExportVideoPanelFooter = ({handlePreviewVideo, handleRenderVideo, rendering}) => (
   <WithKeplerUI>
-    {({Button}) => (
+    {({}) => (
       <PanelFooterInner className="export-video-panel__footer">
-        <Button
-          width={DEFAULT_BUTTON_WIDTH}
-          height={DEFAULT_BUTTON_HEIGHT}
-          secondary
-          className={'export-video-button'}
-          onClick={handlePreviewVideo}
-          disabled={rendering}
-        >
-          Preview
-        </Button>
-        <ButtonGroup>
-          <Button
-            width={DEFAULT_BUTTON_WIDTH}
-            height={DEFAULT_BUTTON_HEIGHT}
-            className={'export-video-button'}
-            onClick={handleRenderVideo}
-            disabled={rendering}
-          >
-            Render
-          </Button>
-        </ButtonGroup>
+        {/* NOTE RW - Unused for now but didn't delete in case we needed in the future */}
       </PanelFooterInner>
     )}
   </WithKeplerUI>

diff --git a/modules/react/src/components/export-video/export-video-panel.js b/modules/react/src/components/export-video/export-video-panel.js
@@ -82,6 +82,7 @@ const PanelBody = ({
       mapboxLayerBeforeId={mapboxLayerBeforeId}
     />
     <ExportVideoPanelSettings settings={settings} resolution={resolution} />
+    {/* TODO put div for play */}
     {/* TODO: inject additional keyframing tools here */}
   </PanelBodyInner>
 );