All files / nexshop-web-contents/src/component/preview/playlist playlist-preview-list-view.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
1x
1x
1x
1x
1x
1x
 
1x
16x
 
 
 
16x
3x
 
3x
1x
 
 
3x
 
3x
3x
 
 
 
16x
3x
 
3x
2x
 
 
3x
 
3x
3x
 
 
 
16x
 
20x
 
 
32x
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
import {EFFECT_TYPES} from "../../../constants/effect-types";
import {isElementInParent} from "../../../helpers/dom-helper";
import {formatSeconds} from "../../../helpers/time-helper";
import {getTextByValue} from "../../../helpers/string-helper";
 
const PlaylistPreviewListView = (props) => {
    const {contentItems, onSelectPreviewItem, selectedPreviewItemIndex} = props;
 
    let previewListRef;
 
    const onClickPrevious = () => {
        let index = selectedPreviewItemIndex - 1;
 
        if (index < 0) {
            index = contentItems.length -1;
        }
 
        onSelectPreviewItem(index);
 
        Eif (!isElementInParent(previewListRef.childNodes[index], previewListRef)) {
            previewListRef.childNodes[index].scrollIntoView();
        }
    };
 
    const onClickNext = () => {
        let index = selectedPreviewItemIndex + 1;
 
        if (index > contentItems.length -1) {
            index = 0;
        }
 
        onSelectPreviewItem(index);
 
        Eif (!isElementInParent(previewListRef.childNodes[index], previewListRef)) {
            previewListRef.childNodes[index].scrollIntoView(false);
        }
    };
 
    return (
        <div className="preview-list">
            <div className="preview-list-body" ref={div => previewListRef = div}>
                {
                    contentItems.map(({contents, durationSeconds, transitionEffect}, index) => (
                        <div key={index}
                             className="preview-item"
                             onClick={() => {onSelectPreviewItem(index)}}
                        >
                            <div className="preview-item__thumbnail" style={{backgroundImage: `url(${contents.thumbnailUrls.thumbnail ? contents.thumbnailUrls.thumbnail : ''})`}}/>
                            <div className={`preview-item-text${selectedPreviewItemIndex === index ? '--selected': ''}`}>
                                <div style={{display: 'flex'}}>
                                    <div className="preview-item-name__prefix">{contents.name.substring(0,contents.name.length-8)}</div>
                                    <div className="preview-item-name__suffix">{contents.name.substring(contents.name.length-8 ,contents.name.length)}</div>
                                </div>
                                <div style={{display: 'flex', marginTop: '3px'}}>
                                    <div className="preview-item__duration">{formatSeconds(durationSeconds, durationSeconds >= 3600 ? 'hh:mm:ss' : 'mm:ss')}</div>
                                    <div className="preview-item__effect">{getTextByValue(transitionEffect,EFFECT_TYPES)}</div>
                                </div>
                            </div>
                        </div>
                    ))
                }
            </div>
            <div className="preview-list-bottom">
                <div className="preview-list-bottom__button" onClick={onClickPrevious}>
                    <div className="preview-list-bottom__previous" />
                </div>
                <div className="preview-list-bottom__button" onClick={onClickNext}>
                    <div className="preview-list-bottom__next"/>
                </div>
            </div>
        </div>
    );
};
 
PlaylistPreviewListView.prototype = {
    contentItems: PropTypes.array.isRequired,
    selectedPreviewItemIndex: PropTypes.number.isRequired,
    onSelectPreviewItem: PropTypes.func.isRequired,
};
 
export default PlaylistPreviewListView;