Skip to content

Commit bce568b

Browse files
alexjenningsalexjennings
committed
Sidecar upload
1 parent 7c3bd2f commit bce568b

File tree

9 files changed

+385
-87
lines changed

9 files changed

+385
-87
lines changed

‎src/components/import/ImportSidecarForm.jsx‎

Lines changed: 83 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,96 @@
11
import React from 'react';
22
import Typography from '@material-ui/core/Typography';
3-
import { reduxForm, Field, FieldArray } from 'redux-form';
4-
import Grid from '@material-ui/core/Grid';
3+
import { reduxForm } from 'redux-form';
54
import FormControl from '@material-ui/core/FormControl';
65
import MenuItem from '@material-ui/core/MenuItem';
76
import InputLabel from '@material-ui/core/InputLabel';
7+
import FormControlLabel from '@material-ui/core/FormControlLabel';
88
import { TextField, Select } from '../form';
9+
import FormSection from '../ui/FormSection';
910

10-
import SimpleMetadataField from '../ui/SimpleMetadataField';
11+
import Field from '../ui/Field';
1112
import { required } from '../../utils/FieldValidation';
13+
import BoolCheckbox from '../ui/BoolCheckbox';
14+
import JobPriority from '../../const/JobPriority';
15+
import { KeyValuePairType } from '../ui/FormType';
16+
import FieldTypeArray from '../ui/FieldTypeArray';
1217

13-
function ImportSidecarForm({
14-
error,
15-
handleSubmit,
16-
}) {
18+
const queryParams = () => (
19+
<>
20+
<Field
21+
name="sidecar"
22+
label="FileId / URI"
23+
component={TextField}
24+
helperText="Either the id of the sidecar file or a URL for locating it"
25+
required
26+
fullWidth
27+
/>
28+
<Field
29+
name="startTimeCode"
30+
label="Start TimeCode"
31+
component={TextField}
32+
helperText="Expected start time code of the content"
33+
fullWidth
34+
/>
35+
<FormControlLabel
36+
control={<Field name="componentImport" component={BoolCheckbox} />}
37+
label="Component Import"
38+
helperText="Import sidecar file as a subtitle component."
39+
/>
40+
<FormControl fullWidth>
41+
<InputLabel htmlFor="priority">Priority</InputLabel>
42+
<Field name="priority" component={Select}>
43+
{JobPriority.map((priority) => (
44+
<MenuItem key={priority} value={priority}>
45+
{priority}
46+
</MenuItem>
47+
))}
48+
</Field>
49+
</FormControl>
50+
<FieldTypeArray
51+
name="jobmetadata"
52+
component={KeyValuePairType}
53+
label="Job Metadata"
54+
withHeader={false}
55+
arrayHeader
56+
dense
57+
/>
58+
<Field
59+
name="notification"
60+
label="Notification ID"
61+
component={TextField}
62+
helperText="The placeholder job notification to use for this job"
63+
fullWidth
64+
/>
65+
<FieldTypeArray
66+
name="notificationData"
67+
component={KeyValuePairType}
68+
label="Notification Metadata"
69+
arrayHeader
70+
withHeader={false}
71+
dense
72+
/>
73+
</>
74+
);
75+
76+
function ImportSidecarForm({ error, handleSubmit, itemId }) {
1777
return (
18-
<form onSubmit={handleSubmit} style={{ padding: '10px' }}>
19-
<Grid container direction="row" alignItems="center">
20-
{error
21-
&& (
22-
<Grid item xs={12}>
23-
<Typography color="error">{error}</Typography>
24-
</Grid>
25-
)}
26-
<Grid item xs={12}>
27-
<Field
28-
name="itemId"
29-
label="Item Id"
30-
component={TextField}
31-
validate={[required]}
32-
required
33-
fullWidth
34-
/>
35-
</Grid>
36-
<Grid item xs={12}>
37-
<Field
38-
name="queryParams.sidecar"
39-
label="FileId / URI"
40-
component={TextField}
41-
helperText="Either the id of the sidecar file or a URL for locating it"
42-
required
43-
fullWidth
44-
/>
45-
</Grid>
46-
<Grid item xs={12}>
47-
<Field
48-
name="queryParams.startTimeCode"
49-
label="Start TimeCode"
50-
component={TextField}
51-
helperText="Expected start time code of the content"
52-
fullWidth
53-
/>
54-
</Grid>
55-
<Grid item xs={12}>
56-
<FormControl fullWidth>
57-
<InputLabel htmlFor="priority">Priority</InputLabel>
58-
<Field name="queryParams.priority" component={Select}>
59-
<MenuItem value="HIGHEST">HIGHEST</MenuItem>
60-
<MenuItem value="HIGH">HIGH</MenuItem>
61-
<MenuItem value="MEDIUM">MEDIUM</MenuItem>
62-
<MenuItem value="LOW">LOW</MenuItem>
63-
<MenuItem value="LOWEST">LOWEST</MenuItem>
64-
</Field>
65-
</FormControl>
66-
</Grid>
67-
<Grid item xs={12}>
68-
<FieldArray
69-
name="queryParams.jobmetadata"
70-
label="Job Metadata"
71-
component={SimpleMetadataField}
72-
buttonLabel="Add Job Metadata"
73-
/>
74-
</Grid>
75-
<Grid item xs={12}>
76-
<Field
77-
name="queryParams.notification"
78-
label="Notification ID"
79-
component={TextField}
80-
helperText="The placeholder job notification to use for this job"
81-
fullWidth
82-
/>
83-
</Grid>
84-
<Grid item xs={12}>
85-
<FieldArray
86-
name="queryParams.notificationData"
87-
label="Notification Data"
88-
component={SimpleMetadataField}
89-
buttonLabel="Add Notification Data"
90-
/>
91-
</Grid>
92-
</Grid>
78+
<form onSubmit={handleSubmit}>
79+
{error && <Typography color="error">{error}</Typography>}
80+
{!itemId && (
81+
<Field
82+
name="itemId"
83+
component={TextField}
84+
validate={[required]}
85+
fullWidth
86+
/>
87+
)}
88+
<FormSection
89+
name="queryParams"
90+
label="queryParams"
91+
component={queryParams}
92+
/>
93+
<button type="submit" hidden />
9394
</form>
9495
);
9596
}

‎src/components/import/ImportSidecarRawForm.jsx‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import React from 'react';
2+
import Typography from '@material-ui/core/Typography';
3+
import { reduxForm } from 'redux-form';
4+
import FormControl from '@material-ui/core/FormControl';
5+
import MenuItem from '@material-ui/core/MenuItem';
6+
import InputLabel from '@material-ui/core/InputLabel';
7+
import FormControlLabel from '@material-ui/core/FormControlLabel';
8+
import { TextField, Select } from '../form';
9+
import FormSection from '../ui/FormSection';
10+
11+
import Field from '../ui/Field';
12+
import { required } from '../../utils/FieldValidation';
13+
import BoolCheckbox from '../ui/BoolCheckbox';
14+
import JobPriority from '../../const/JobPriority';
15+
import { KeyValuePairType } from '../ui/FormType';
16+
import FieldTypeArray from '../ui/FieldTypeArray';
17+
import { StatefulAsyncSelect } from '../ui/Select';
18+
import { loadStorageOptions } from '../storage/StorageSelect';
19+
import UploadButton from '../ui/UploadButton';
20+
21+
const queryParams = () => (
22+
<>
23+
<Field
24+
name="fileExtension"
25+
label="File Extension"
26+
component={TextField}
27+
helperText="Used to identify the sidecar media type. Example: srt"
28+
required
29+
validate={[required]}
30+
fullWidth
31+
/>
32+
<Field
33+
name="startTimeCode"
34+
label="Start TimeCode"
35+
component={TextField}
36+
helperText="Expected start time code of the content"
37+
fullWidth
38+
/>
39+
<FormControlLabel
40+
control={<Field name="componentImport" component={BoolCheckbox} />}
41+
label="Component Import"
42+
helperText="Import sidecar file as a subtitle component."
43+
/>
44+
<Field
45+
name="storageId"
46+
label="Storage ID"
47+
component={StatefulAsyncSelect}
48+
loadOptions={loadStorageOptions}
49+
cacheOptions
50+
isClearable
51+
fullWidth
52+
/>
53+
54+
<FormControl fullWidth>
55+
<InputLabel htmlFor="priority">Priority</InputLabel>
56+
<Field name="priority" component={Select}>
57+
{JobPriority.map((priority) => (
58+
<MenuItem key={priority} value={priority}>
59+
{priority}
60+
</MenuItem>
61+
))}
62+
</Field>
63+
</FormControl>
64+
<FieldTypeArray
65+
name="jobmetadata"
66+
component={KeyValuePairType}
67+
label="Job Metadata"
68+
withHeader={false}
69+
arrayHeader
70+
dense
71+
/>
72+
<Field
73+
name="notification"
74+
label="Notification ID"
75+
component={TextField}
76+
helperText="The placeholder job notification to use for this job"
77+
fullWidth
78+
/>
79+
<FieldTypeArray
80+
name="notificationData"
81+
component={KeyValuePairType}
82+
label="Notification Metadata"
83+
arrayHeader
84+
withHeader={false}
85+
dense
86+
/>
87+
</>
88+
);
89+
90+
function ImportSidecarRawForm({ error, handleSubmit, itemId }) {
91+
return (
92+
<form onSubmit={handleSubmit}>
93+
{error && <Typography color="error">{error}</Typography>}
94+
<Field
95+
name="upload"
96+
label="Choose File"
97+
component={UploadButton}
98+
validate={[required]}
99+
fullWidth
100+
/>
101+
102+
{!itemId && (
103+
<Field
104+
name="itemId"
105+
component={TextField}
106+
validate={[required]}
107+
fullWidth
108+
/>
109+
)}
110+
<FormSection
111+
name="queryParams"
112+
label="queryParams"
113+
component={queryParams}
114+
/>
115+
<button type="submit" hidden />
116+
</form>
117+
);
118+
}
119+
120+
export default reduxForm()(ImportSidecarRawForm);

‎src/components/import/ImportSidecarRawWizard.jsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React from 'react';
2+
import { compose } from 'redux';
3+
4+
import CardContent from '@material-ui/core/CardContent';
5+
import Button from '@material-ui/core/Button';
6+
import Stepper from '@material-ui/core/Stepper';
7+
import Step from '@material-ui/core/Step';
8+
import StepLabel from '@material-ui/core/StepLabel';
9+
import StepContent from '@material-ui/core/StepContent';
10+
import AccordionActions from '@material-ui/core/AccordionActions';
11+
12+
import SquareCard from '../ui/SquareCard';
13+
import ImportSidecarRawForm from './ImportSidecarRawForm';
14+
import * as formActions from '../../formactions/import';
15+
import withFormActions from '../../hoc/withFormActions';
16+
import withUI from '../../hoc/withUI';
17+
import withStepper from '../../hoc/withStepper';
18+
import TitleHeader from '../ui/TitleHeader';
19+
20+
export const EDIT_IMPORTSIDECARRAW_FORM = 'EDIT_IMPORTSIDECARRAW_FORM';
21+
22+
function ImportSidecarRawWizard({
23+
initialValues,
24+
onSuccess,
25+
onFail,
26+
submitForm,
27+
activeStep,
28+
openSnackBar,
29+
itemId,
30+
}) {
31+
const onSubmitSuccess = (response, dispatch, props) => {
32+
const messageContent = 'Job Started';
33+
openSnackBar({ messageContent });
34+
if (onSuccess) { onSuccess(response, dispatch, props); }
35+
};
36+
const onSubmitFail = (error, dispatch, props) => {
37+
const messageContent = 'Error Starting Job';
38+
openSnackBar({ messageContent, messageColor: 'secondary' });
39+
if (onFail) { onFail(error, dispatch, props); }
40+
};
41+
return (
42+
<>
43+
<TitleHeader
44+
parentTitle="Import"
45+
title="Essence"
46+
style={{ paddingTop: 10, paddingBottom: 10 }}
47+
actionComponent={(
48+
<Button
49+
color="primary"
50+
variant="text"
51+
size="large"
52+
onClick={() => submitForm(EDIT_IMPORTSIDECARRAW_FORM)}
53+
>
54+
Start
55+
</Button>
56+
)}
57+
/>
58+
<Stepper activeStep={activeStep} orientation="vertical">
59+
<Step>
60+
<StepLabel>Sidecar Upload</StepLabel>
61+
<StepContent>
62+
<SquareCard>
63+
<CardContent>
64+
<ImportSidecarRawForm
65+
onSubmit={formActions.onImportSidecarRaw}
66+
initialValues={initialValues}
67+
onSubmitSuccess={onSubmitSuccess}
68+
onSubmitFail={onSubmitFail}
69+
form={EDIT_IMPORTSIDECARRAW_FORM}
70+
destroyOnUnmount={false}
71+
itemId={itemId}
72+
/>
73+
</CardContent>
74+
<AccordionActions>
75+
<Button
76+
color="primary"
77+
variant="text"
78+
size="large"
79+
onClick={() => submitForm(EDIT_IMPORTSIDECARRAW_FORM)}
80+
>
81+
Start
82+
</Button>
83+
</AccordionActions>
84+
</SquareCard>
85+
</StepContent>
86+
</Step>
87+
</Stepper>
88+
</>
89+
);
90+
}
91+
92+
export default compose(
93+
withStepper,
94+
withUI,
95+
withFormActions,
96+
)(ImportSidecarRawWizard);

0 commit comments

Comments
 (0)