nexshop-web-contents/src/component/playlist/playlist.js

Nexshop Web Contents Project

import React, {Component} from 'react';
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import {playlistActions, previewActions, discardConfirmActions} from "nexshop-web-store";
import {actions as dialogActions} from 'nexshop-web-dialog';
import {ContentsMini} from "nexshop-web-contents-mini-view";
import PlayListTitleView from "./playlist-title-view";
import PlaylistEditor from "./playlist-editor/playlist-editor";
import {createPlaylist} from "../../model-factory/playlist";
import ConfirmUpdateContentsItem from "../dialog/confirm-update-contents-item/confirm-update-contents-item"

class Playlist extends Component {
    constructor(props) {
        super(props);

        this.moveToPreview = this.moveToPreview.bind(this);
        this.onSavePlaylist = this.onSavePlaylist.bind(this);
        this.getRelatedContents = this.getRelatedContents.bind(this);
    }

    moveToPreview(selectedIndex = 0) {
        this.props.actions.unblockNavigation();
        const previewWindowRects = document.getElementsByClassName('playlist')[0].getClientRects()[0];
        const previewWindowSize = {width: previewWindowRects.width, height: previewWindowRects.height};

        this.props.actions.createPlaylistPreview(this.props.name, this.props.contentItems, selectedIndex, previewWindowSize, this.props.resolution);

        setTimeout(() => {
            this.props.history.push('/contents/playlist-preview');
        });
    }

    onSavePlaylist() {
        this.props.actions.unblockNavigation();
        const {resolution, contentItems, id, name, breadcrumb, actions: {savePlaylistAsync, updatePlaylistAsync, openDialog}} = this.props;
        const relatedContents = this.getRelatedContents(contentItems);
        const currentFolderId = breadcrumb[breadcrumb.length - 1].id;
        if (id) {
            updatePlaylistAsync(createPlaylist(name, contentItems, currentFolderId, resolution, relatedContents), id)
                .then(response => {
                    if (response.occupied) {
                        openDialog('update-contents-item');
                    }
                });
        } else {
            savePlaylistAsync(createPlaylist(name, contentItems, currentFolderId, resolution, relatedContents));
        }
    }

    getRelatedContents(contentItems) {
        let relatedContentsSet = new Set();
        contentItems.forEach((contentItem) => {
            let {contents} = contentItem;
            relatedContentsSet.add(contents.id);
            if (contents.relatedContents) {
                contents.relatedContents.forEach((relatedContent) => relatedContentsSet.add(relatedContent.id));
            }
        });

        return Array.from(relatedContentsSet).map((id) => {
            return {id}
        });
    }

    componentWillMount() {
        const {name, resolution, history} = this.props;
        if (!name || !resolution) {
            history.push('/contents/main');
        }
    }

    componentDidMount() {
        this.props.actions.blockNavigation('Your work has not been saved.', playlistActions.discardPlaylist());
    }

    componentWillUnmount() {
        this.props.actions.unblockNavigation();
    }

    render() {
        return (
            <div className="playlist">
                <PlayListTitleView name={this.props.name}
                                   hasPlaylistItem={this.props.contentItems.length > 0}
                                   onPreviewClick={this.moveToPreview}
                                   onSavePlaylist={this.onSavePlaylist}
                />
                <div className="playlist-body">
                    <PlaylistEditor moveToPreview={this.moveToPreview}/>
                    <ContentsMini className="playlist-contents-mini"
                                  contentsIgnore={['playlist']}/>
                </div>
                <ConfirmUpdateContentsItem name={this.props.name}/>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    let {playlist: {id, name, contentItems, resolution}, contents: {breadcrumb}} = state;

    return {id, name, contentItems, resolution, breadcrumb};
};

const mapDispatchToProps = (dispatch) => {
    const {blockNavigation, unblockNavigation} = discardConfirmActions;
    const {savePlaylistAsync, updatePlaylistAsync} = playlistActions;
    const {createPlaylistPreview} = previewActions;
    const {openDialog} = dialogActions;
    return {
        actions: bindActionCreators({
            savePlaylistAsync, updatePlaylistAsync, openDialog,
            createPlaylistPreview, blockNavigation, unblockNavigation
        }, dispatch)
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Playlist);