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
|
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/utils/annotation.utils'
import { PlayIcon } from '../nav/viewer.icons'
class ChecklistContent extends Component {
handleMediaSelection(section, mediaItem, i) {
// when clicking a work in the checklist,
// if it's the first work in the section, seek to the beginning of the section
// OTHERWISE seek to the work itself. might have to add this as another option on sections
// since the first "work" in Animism pt 1 starts about a minute in...
if (i === 0 && section.index !== 0) {
actions.viewer.hideNavComponent('checklist')
actions.viewer.seekToSection(section)
} else {
actions.viewer.seekToMediaItem(section, mediaItem)
}
}
render() {
const { sections, checklistSection } = this.props
let mediaIndex = 1
return (
<div className="checklist-content">
<div className="checklist-table">
{sections.map(section => {
if ((checklistSection !== "all" && section.index !== checklistSection) || !section.media.length) {
return <div key={section.index} />
}
return (
<div className="checklist-section" key={section.index}>
{section.media.map((mediaItem, i) => (
<div
className="checklist-row"
key={section.index + "_" + i}
onClick={() => this.handleMediaSelection(section, mediaItem, i)}
>
<div className="media-id">
{pad(mediaIndex++, 2)}
</div>
<div className="media-section">
{ROMAN_NUMERALS[section.index]}
<br />
{section.title}
</div>
<div className="media-about">
{mediaItem.media.author}
<br />
{mediaItem.media.pre_title && (mediaItem.media.pre_title + ' ')}
<i>{mediaItem.media.title}</i>
{mediaItem.media.post_title && (' ' + mediaItem.media.post_title)}
<br />
{mediaItem.media.title.indexOf(String(mediaItem.media.date)) !== -1 && mediaItem.media.date}
<div className='media-type'>
{mediaItem.media.medium}
{mediaItem.media.settings.duration && (', ' + mediaItem.media.settings.duration)}
</div>
</div>
<div className="media-image">
<div className="media-thumbnail">
<img src={thumbnailURL(mediaItem.media)} alt={mediaItem.media.title} />
{mediaItem.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)
|
