blob: e4e47ecb88951a486a5bb3b34e2a463005078d0c (
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
71
72
73
74
75
76
77
78
79
|
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(mediaItem) {
actions.audio.seek(mediaItem.start_ts)
actions.viewer.hideSection('nav')
actions.viewer.hideSection('checklist')
}
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((mediaItem, i) => (
<div
className="checklist-row"
key={section.index + "_" + i}
onClick={() => this.handleMediaSelection(mediaItem)}
>
<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">
{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.year}
<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)
|
