import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from "redux";
import {DiscardRefresh} from 'nexshop-web-alert';
import {previewActions} from "nexshop-web-store";
import PlaylistPreviewDetailView from "./playlist-preview-detail-view";
import PlaylistPreviewHeaderView from "./playlist-preview-header-view";
import PlaylistPreviewListView from "./playlist-preview-list-view";
class PlaylistPreview extends Component {
constructor(props) {
super(props);
this.onClickClose = this.onClickClose.bind(this);
}
onClickClose() {
this.props.history.goBack();
this.props.actions.selectPreviewItem(0);
this.props.actions.deletePreviewPreviousIndex();
}
render() {
let {name, contentItems, selectedPreviewItemIndex, selectedPreviewPreviousItemIndex, previewWindowSize, resolution,
actions: {selectPreviewItem}} = this.props;
return (
<div className="preview">
<PlaylistPreviewHeaderView name={name} onClickClose={this.onClickClose}/>
{
this.props.name &&
<div className="preview-body">
<PlaylistPreviewListView contentItems={contentItems}
selectedPreviewItemIndex={selectedPreviewItemIndex}
onSelectPreviewItem={selectPreviewItem}/>
<PlaylistPreviewDetailView contentItem={contentItems[selectedPreviewItemIndex]}
previousContentItem={contentItems[selectedPreviewPreviousItemIndex]}
previewWindowSize={previewWindowSize}
resolution={resolution}
/>
</div>
}
<DiscardRefresh/>
</div>
);
}
}
const mapStateToProps = (state) => {
const {preview: {name, contentItems, selectedPreviewItemIndex, selectedPreviewPreviousItemIndex, previewWindowSize, resolution}} = state;
return {name, contentItems, selectedPreviewItemIndex, selectedPreviewPreviousItemIndex,
previewWindowSize, resolution};
};
const mapDispatchToProps = (dispatch) => {
const {selectPreviewItem, deletePreviewPreviousIndex} = previewActions;
return {
actions: bindActionCreators({selectPreviewItem, deletePreviewPreviousIndex}, dispatch)
}
};
export default connect(mapStateToProps, mapDispatchToProps)(PlaylistPreview); |