nexshop-web-contents
Version:
Nexshop Web Contents Project
83 lines (70 loc) • 3.57 kB
JavaScript
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);
if (!isElementInParent(previewListRef.childNodes[index], previewListRef)) {
previewListRef.childNodes[index].scrollIntoView();
}
};
const onClickNext = () => {
let index = selectedPreviewItemIndex + 1;
if (index > contentItems.length -1) {
index = 0;
}
onSelectPreviewItem(index);
if (!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;