Skip to content

Commit

Permalink
[chore] consolidate form setting props into an object
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisgervang
chrisgervang committed Jul 9, 2021
1 parent a5018d9 commit 71c8291
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 106 deletions.
26 changes: 15 additions & 11 deletions modules/react/src/components/export-video/export-video-panel-container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,9 +316,21 @@ export class ExportVideoPanelContainer extends Component {
rendering
} = this.state;

const settingsData = {mediaType, cameraPreset, fileName, resolution};

const timecode = this.getTimecode();
const settings = {
mediaType,
setMediaType: this.setMediaType,
cameraPreset,
setCameraPreset: this.setCameraPreset,
fileName,
setFileName: this.setFileName,
resolution,
setResolution: this.setResolution,
durationMs,
setDuration: this.setDuration,
frameRate: timecode.framerate
};

const {width, height} = this.getCanvasSize();

return (
Expand All @@ -335,20 +347,12 @@ export class ExportVideoPanelContainer extends Component {
staticMapProps={staticMapProps}
mapboxLayerBeforeId={mapboxLayerBeforeId}
// Settings Props
settingsData={settingsData}
setMediaType={this.setMediaType}
setCameraPreset={this.setCameraPreset}
setFileName={this.setFileName}
setResolution={this.setResolution}
settings={settings}
// Hubble Props
adapter={adapter}
handlePreviewVideo={this.onPreviewVideo}
handleRenderVideo={this.onRenderVideo}
durationMs={durationMs}
setDuration={this.setDuration}
frameRate={timecode.framerate}
resolution={[width, height]}
mediaType={mediaType}
rendering={rendering}
/>
);
Expand Down
30 changes: 2 additions & 28 deletions modules/react/src/components/export-video/export-video-panel-settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,7 @@ import EditTab from './modal-tab-edit';
import ExportTab from './modal-tab-export';
import get from 'lodash.get';

const getOptionValue = r => r.value;
const displayOption = r => r.label;
const getSelectedItems = (options, value) => options.find(o => o.value === value);

function ExportVideoPanelSettings({
setMediaType,
setCameraPreset,
setFileName,
setResolution,
settingsData,
durationMs,
frameRate,
resolution,
mediaType,
setDuration
}) {
function ExportVideoPanelSettings({settings, resolution}) {
const loadingMethods = [
// Each entry creates new tabs with ModalTabsFactory
// id: The tab id in state
Expand Down Expand Up @@ -76,19 +61,8 @@ function ExportVideoPanelSettings({
/>
{currentMethod && (
<ModalTab // Represents all the params needed across all tabs
settingsData={settingsData}
setFileName={setFileName}
getSelectedItems={getSelectedItems}
getOptionValue={getOptionValue}
displayOption={displayOption}
setMediaType={setMediaType}
setResolution={setResolution}
durationMs={durationMs}
setDuration={setDuration}
frameRate={frameRate}
settings={settings}
resolution={resolution}
mediaType={mediaType}
setCameraPreset={setCameraPreset}
/>
)}
</div>
Expand Down
46 changes: 5 additions & 41 deletions modules/react/src/components/export-video/export-video-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,17 +59,9 @@ const PanelBody = ({
mapData,
adapter,
setViewState,
setMediaType,
setCameraPreset,
setFileName,
setResolution,
settingsData,
durationMs,
frameRate,
settings,
resolution,
mediaType,
viewState,
setDuration,
rendering,
deckProps,
staticMapProps,
Expand All @@ -84,23 +76,12 @@ const PanelBody = ({
resolution={resolution}
viewState={viewState}
rendering={rendering}
durationMs={durationMs}
durationMs={settings.durationMs}
deckProps={deckProps}
staticMapProps={staticMapProps}
mapboxLayerBeforeId={mapboxLayerBeforeId}
/>
<ExportVideoPanelSettings
setMediaType={setMediaType}
setCameraPreset={setCameraPreset}
setFileName={setFileName}
setResolution={setResolution}
settingsData={settingsData}
durationMs={durationMs}
frameRate={frameRate}
resolution={resolution}
mediaType={mediaType}
setDuration={setDuration}
/>
<ExportVideoPanelSettings settings={settings} resolution={resolution} />
{/* TODO: inject additional keyframing tools here */}
</PanelBodyInner>
);
Expand All @@ -120,21 +101,13 @@ const ExportVideoPanel = ({
setViewState,
mapboxLayerBeforeId,
// Settings Props
settingsData,
setMediaType,
setCameraPreset,
setFileName,
setResolution,
settings,
// Hubble Props
adapter,
handlePreviewVideo,
handleRenderVideo,
durationMs,
frameRate,
resolution,
mediaType,
viewState,
setDuration,
rendering,
deckProps,
staticMapProps
Expand All @@ -151,25 +124,16 @@ const ExportVideoPanel = ({
exportVideoWidth={exportVideoWidth}
mapData={mapData}
adapter={adapter}
setMediaType={setMediaType}
setCameraPreset={setCameraPreset}
setFileName={setFileName}
setResolution={setResolution}
settingsData={settingsData}
settings={settings}
setViewState={setViewState}
durationMs={durationMs}
frameRate={frameRate}
resolution={resolution}
mediaType={mediaType}
viewState={viewState}
setDuration={setDuration}
rendering={rendering}
deckProps={deckProps}
staticMapProps={staticMapProps}
mapboxLayerBeforeId={mapboxLayerBeforeId}
/>
<ExportVideoPanelFooter
handleClose={handleClose}
handlePreviewVideo={handlePreviewVideo}
handleRenderVideo={handleRenderVideo}
rendering={rendering}
Expand Down
12 changes: 6 additions & 6 deletions modules/react/src/components/export-video/modal-tab-edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {msConversion} from './utils';
import {SliderWrapper, StyledLabelCell, StyledValueCell, InputGrid} from './styled-components';
import {WithKeplerUI} from '../inject-kepler';

function EditTab({durationMs, setDuration, setCameraPreset, settingsData}) {
function EditTab({settings}) {
return (
<WithKeplerUI>
{({Slider, ItemSelector}) => (
Expand All @@ -29,23 +29,23 @@ function EditTab({durationMs, setDuration, setCameraPreset, settingsData}) {
showValues={false}
enableBarDrag={true}
isRanged={false}
value1={durationMs}
value1={settings.durationMs}
step={100}
minValue={100}
maxValue={10000}
style={{width: '70px'}}
onSlider1Change={val => {
setDuration(val);
settings.setDuration(val);
}}
/>
<div style={{alignSelf: 'center', paddingLeft: '8px', width: '56px'}}>
{msConversion(durationMs)}
{msConversion(settings.durationMs)}
</div>
</SliderWrapper>
</StyledValueCell>
<StyledLabelCell>Camera</StyledLabelCell>
<ItemSelector
selectedItems={settingsData.cameraPreset}
selectedItems={settings.cameraPreset}
options={[
'None',
'Orbit (90º)',
Expand All @@ -60,7 +60,7 @@ function EditTab({durationMs, setDuration, setCameraPreset, settingsData}) {
]}
multiSelect={false}
searchable={false}
onChange={setCameraPreset}
onChange={settings.setCameraPreset}
/>
</InputGrid>
</>
Expand Down
38 changes: 18 additions & 20 deletions modules/react/src/components/export-video/modal-tab-export.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,53 +5,51 @@ import {StyledLabelCell, StyledValueCell, InputGrid} from './styled-components';
import {DEFAULT_FILENAME, FORMATS, RESOLUTIONS} from './constants';
import {WithKeplerUI} from '../inject-kepler';

function ExportTab({
settingsData,
setFileName,
getSelectedItems,
getOptionValue,
displayOption,
setMediaType,
setResolution,
durationMs,
frameRate,
resolution,
mediaType
}) {
const getOptionValue = r => r.value;
const displayOption = r => r.label;
const getSelectedItems = (options, value) => options.find(o => o.value === value);

function ExportTab({settings, resolution}) {
return (
<WithKeplerUI>
{({Input, ItemSelector}) => (
<>
<InputGrid rows={5}>
<StyledLabelCell>File Name</StyledLabelCell>
<Input
value={settingsData.fileName}
value={settings.fileName}
placeholder={DEFAULT_FILENAME}
onChange={e => setFileName(e.target.value)}
onChange={e => settings.setFileName(e.target.value)}
/>
<StyledLabelCell>Media Type</StyledLabelCell>
<ItemSelector
selectedItems={getSelectedItems(FORMATS, settingsData.mediaType)}
selectedItems={getSelectedItems(FORMATS, settings.mediaType)}
options={FORMATS}
getOptionValue={getOptionValue}
displayOption={displayOption}
multiSelect={false}
searchable={false}
onChange={setMediaType}
onChange={settings.setMediaType}
/>
<StyledLabelCell>Resolution</StyledLabelCell>
<ItemSelector
selectedItems={getSelectedItems(RESOLUTIONS, settingsData.resolution)}
selectedItems={getSelectedItems(RESOLUTIONS, settings.resolution)}
options={RESOLUTIONS}
getOptionValue={getOptionValue}
displayOption={displayOption}
multiSelect={false}
searchable={false}
onChange={setResolution}
onChange={settings.setResolution}
/>
<StyledLabelCell>File Size</StyledLabelCell>
<StyledValueCell>
~{estimateFileSize(frameRate, resolution, durationMs, mediaType)}
~
{estimateFileSize(
settings.frameRate,
resolution,
settings.durationMs,
settings.mediaType
)}
</StyledValueCell>
</InputGrid>
</>
Expand Down

0 comments on commit 71c8291

Please sign in to comment.