refactored conditional rendering of thumbnail component
This commit is contained in:
parent
4028601897
commit
d1fca34ab7
3 changed files with 12 additions and 49 deletions
|
@ -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();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in a new issue