diff --git a/modules/react/src/components/export-video/constants.js b/modules/react/src/components/export-video/constants.js
index 922fcbbd..1f97ca6a 100644
--- a/modules/react/src/components/export-video/constants.js
+++ b/modules/react/src/components/export-video/constants.js
@@ -92,3 +92,8 @@ 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-preview.js b/modules/react/src/components/export-video/export-video-panel-preview.js
index c642df41..14ef5c32 100644
--- a/modules/react/src/components/export-video/export-video-panel-preview.js
+++ b/modules/react/src/components/export-video/export-video-panel-preview.js
@@ -23,7 +23,8 @@ import DeckGL from '@deck.gl/react';
import {StaticMap} from 'react-map-gl';
import {MapboxLayer} from '@deck.gl/mapbox';
-import {WithKeplerUI} from '../inject-kepler';
+import {deckStyle} from './constants';
+import {RenderingSpinner} from './rendering-spinner';
export class ExportVideoPanelPreview extends Component {
constructor(props) {
@@ -177,72 +178,54 @@ export class ExportVideoPanelPreview extends Component {
}
render() {
- const deckStyle = {
- width: '100%',
- height: '100%'
- };
+ const {exportVideoWidth, rendering, viewState, setViewState, adapter, durationMs} = this.props;
+ const {glContext, mapStyle} = this.state;
const containerStyle = {
- width: `${this.props.exportVideoWidth}px`,
+ width: `${exportVideoWidth}px`,
height: `${this._getContainerHeight()}px`,
position: 'relative'
};
const loaderStyle = {
- display: this.props.rendering === false ? 'none' : 'flex',
+ display: rendering === false ? 'none' : 'flex',
position: 'absolute',
background: 'rgba(0, 0, 0, 0.5)',
- width: `${this.props.exportVideoWidth}px`,
+ width: `${exportVideoWidth}px`,
height: `${this._getContainerHeight()}px`,
alignItems: 'center',
justifyContent: 'center'
};
return (
-