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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
1x
 
 
 
19x
 
19x
19x
19x
 
 
 
3x
3x
3x
 
3x
 
3x
1x
 
 
 
 
3x
3x
3x
3x
3x
1x
 
1x
1x
 
 
 
2x
 
 
 
 
4x
4x
8x
8x
8x
2x
 
 
 
4x
6x
 
 
 
 
21x
21x
1x
 
 
 
 
1x
 
 
 
1x
 
 
 
23x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
19x
 
19x
 
 
1x
19x
19x
19x
19x
19x
 
 
 
 
 
 
 
 
import React, {Component} from 'react';
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import {actions as alertActions, DiscardRefresh} from 'nexshop-web-alert';
import {playlistActions, previewActions} 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 => {
                    Eif (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>
                <DiscardRefresh/>
                <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} = alertActions;
    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);