blob: 3eadaca7e766de0efef0fde8cbfd0f5fde1bfe9f (
plain)
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
|
import React, { Component } from 'react'
import { connect } from 'react-redux'
import actions from 'app/actions'
import { ROMAN_NUMERALS } from 'app/constants'
import { pad } from 'app/utils'
import { thumbnailURL } from 'app/views/align/align.util'
import { PlayIcon } from '../nav/viewer.icons'
class ChecklistContent extends Component {
render() {
const { sections, currentSection } = this.props
return (
<div className="checklist-content">
<div className="checklist-table">
{sections.map(section => {
if ((currentSection !== "all" && section.index !== currentSection) || !section.media.length) {
return <div key={section.index} />
}
return (
<div className="checklist-section" key={section.index}>
{section.media.map((media, i) => (
<div className="checklist-row" key={section.index + "_" + i}>
<div className="media-id">
{pad(section.mediaIndex + i + 1, 2)}
</div>
<div className="media-section">
{ROMAN_NUMERALS[section.index]}
<br />
{section.title}
</div>
<div className="media-about">
{media.author}
<br />
{media.pre_title && (media.pre_title + ' ')}
<i>{media.title}</i>
{media.post_title && (' ' + media.post_title)}
<br />
{media.year}
<div className='media-type'>
{media.medium}
{media.settings.duration && (', ' + media.settings.duration)}
</div>
</div>
<div className="media-image">
<div className="media-thumbnail">
<img src={thumbnailURL(media)} alt={media.title} />
{media.type === 'video' &&
<span className='play-button'>
{PlayIcon}
</span>
}
</div>
</div>
</div>
))}
</div>
)
})}
</div>
</div>
)
}
}
const mapStateToProps = state => ({
sections: state.viewer.sections,
})
export default connect(mapStateToProps)(ChecklistContent)
|
