refactored conditional rendering of thumbnail component

This commit is contained in:
bill bittner 2018-01-04 14:00:02 -08:00
parent 4028601897
commit d1fca34ab7
3 changed files with 12 additions and 49 deletions

View file

@ -18749,16 +18749,12 @@ var PublishDetails = function (_React$Component6) {
function PublishDetails(props) {
_classCallCheck(this, PublishDetails);
// set defaults
var _this6 = _possibleConstructorReturn(this, (PublishDetails.__proto__ || Object.getPrototypeOf(PublishDetails)).call(this, props));
_this6.state = {
showThumbnailSelector: false
// set defaults
};_this6.updateUploaderState = _this6.updateUploaderState.bind(_this6);
_this6.showThumbnailTool = _this6.showThumbnailTool.bind(_this6);
_this6.hideThumbnailTool = _this6.hideThumbnailTool.bind(_this6);
_this6.publish = _this6.publish.bind(_this6);
_this6.updateUploaderState = _this6.updateUploaderState.bind(_this6);
_this6.clearUploaderState = _this6.clearUploaderState.bind(_this6);
_this6.publish = _this6.publish.bind(_this6);
return _this6;
}
@ -18768,25 +18764,15 @@ var PublishDetails = function (_React$Component6) {
this.props.updateUploaderState(name, value);
}
}, {
key: 'showThumbnailTool',
value: function showThumbnailTool() {
this.setState({ showThumbnailSelector: true });
}
}, {
key: 'hideThumbnailTool',
value: function hideThumbnailTool() {
this.setState({ showThumbnailSelector: false });
key: 'clearUploaderState',
value: function clearUploaderState() {
this.props.clearUploaderState();
}
}, {
key: 'publish',
value: function publish() {
// publish the asset
}
}, {
key: 'clearUploaderState',
value: function clearUploaderState() {
this.props.clearUploaderState();
}
}, {
key: 'render',
value: function render() {
@ -18805,9 +18791,7 @@ var PublishDetails = function (_React$Component6) {
'div',
{ className: 'row row--padded' },
_react2.default.createElement(_preview2.default, {
file: this.props.file,
hideThumbnailTool: this.hideThumbnailTool,
showThumbnailTool: this.showThumbnailTool
file: this.props.file
})
)
),
@ -18819,7 +18803,7 @@ var PublishDetails = function (_React$Component6) {
{ id: 'publish-active-area', className: 'row row--padded' },
_react2.default.createElement(Channel, null),
_react2.default.createElement(Url, { file: this.props.file }),
this.state.showThumbnailSelector && _react2.default.createElement(Thumbnail, { thumbnail: this.props.thumbnail }),
this.props.file.type === 'video/mp4' && _react2.default.createElement(Thumbnail, { thumbnail: this.props.thumbnail }),
_react2.default.createElement(Details, null),
_react2.default.createElement(
'div',
@ -18924,12 +18908,8 @@ var Preview = function (_React$Component) {
previewReader.onloadend = function () {
that.setState({ previewSource: previewReader.result });
};
// clear & hide the thumbnail selection input
this.props.hideThumbnailTool();
} else {
that.setState({ previewSource: '/assets/img/video_thumb_default.png' });
// clear & show the thumbnail selection input
this.props.showThumbnailTool();
}
}
}, {

View file

@ -21,12 +21,8 @@ class Preview extends React.Component {
previewReader.onloadend = function () {
that.setState({previewSource: previewReader.result});
};
// clear & hide the thumbnail selection input
this.props.hideThumbnailTool();
} else {
that.setState({previewSource: '/assets/img/video_thumb_default.png'});
// clear & show the thumbnail selection input
this.props.showThumbnailTool();
}
}
render () {

View file

@ -62,31 +62,20 @@ class Details extends React.Component {
class PublishDetails extends React.Component {
constructor (props) {
super(props);
this.state = {
showThumbnailSelector: false,
}
// set defaults
this.updateUploaderState = this.updateUploaderState.bind(this);
this.showThumbnailTool = this.showThumbnailTool.bind(this);
this.hideThumbnailTool = this.hideThumbnailTool.bind(this);
this.publish = this.publish.bind(this);
this.clearUploaderState = this.clearUploaderState.bind(this);
this.publish = this.publish.bind(this);
}
updateUploaderState (name, value) {
this.props.updateUploaderState(name, value);
}
showThumbnailTool () {
this.setState({showThumbnailSelector: true});
}
hideThumbnailTool () {
this.setState({showThumbnailSelector: false});
clearUploaderState () {
this.props.clearUploaderState();
}
publish () {
// publish the asset
}
clearUploaderState () {
this.props.clearUploaderState();
}
render () {
return (
<div className="row row--no-bottom">
@ -97,8 +86,6 @@ class PublishDetails extends React.Component {
<div className="row row--padded">
<Preview
file={this.props.file}
hideThumbnailTool={this.hideThumbnailTool}
showThumbnailTool={this.showThumbnailTool}
/>
</div>
</div>
@ -106,7 +93,7 @@ class PublishDetails extends React.Component {
<div id="publish-active-area" className="row row--padded">
<Channel />
<Url file={this.props.file}/>
{ this.state.showThumbnailSelector && <Thumbnail thumbnail={this.props.thumbnail}/> }
{ (this.props.file.type === 'video/mp4') && <Thumbnail thumbnail={this.props.thumbnail}/> }
<Details />
<div className="row row--padded row--wide">