blob: 41cb2aae2ae89cb6618238e5e2a1773a8af8dbf1 (
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
|
import React, { Component } from 'react'
import { connect } from 'react-redux'
import './captions.css'
import { MEDIA_ANNOTATION_TYPES } from 'app/constants'
import CaptionForm from './components/caption.form'
class CaptionsContainer extends Component {
render() {
const { annotation, media, episode } = this.props
const { order, lookup: annotationLookup } = annotation
const { lookup: mediaLookup } = media
const mediaItems = order.map(id => annotationLookup[id])
.filter(annotation => (
MEDIA_ANNOTATION_TYPES.has(annotation.type)
&& !annotation.settings.hideCitation
&& annotation.settings.media_id in mediaLookup
))
.map(annotation => annotation.settings.media_id)
.reduce((dedupe, media_id) => {
if (dedupe.indexOf(media_id) === -1) {
dedupe.push(media_id)
}
return dedupe
}, [])
.map(media_id => mediaLookup[media_id])
// console.log(mediaItems)
return (
<div className='overview'>
<div className='project-top'>
<div className='project-heading'>
<h2>Captions</h2>
</div>
{mediaItems.map((item, index) => (
<CaptionForm
key={item.id}
episode={episode}
media={item}
index={index+1}
/>
))}
</div>
</div>
)
}
}
const mapStateToProps = state => ({
project: state.site.project,
episode: state.site.episode,
annotation: state.annotation.index,
media: state.media.index,
})
export default connect(mapStateToProps)(CaptionsContainer)
|
