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
89
90
91
92
93
94
95
96
|
import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { floatLT, floatInRange, capitalize } from 'app/utils'
import ParagraphForm from '../components/paragraph.form'
class ParagraphList extends Component {
state = {
currentParagraph: -1,
currentAnnotation: -1,
}
componentDidUpdate(prevProps) {
if (this.props.audio.play_ts === prevProps.audio.play_ts) return
this.setCurrentParagraph()
}
setCurrentParagraph() {
const { play_ts } = this.props.audio
const insideParagraph = this.props.paragraphs.some(paragraph => {
if (floatInRange(paragraph.start_ts, play_ts, paragraph.end_ts)) {
this.setCurrentAnnotation(paragraph, play_ts)
return true
}
return false
})
if (!insideParagraph) {
this.setState({
currentParagraph: -1,
currentAnnotation: -1,
})
}
}
setCurrentAnnotation(paragraph, play_ts) {
const { id: currentParagraph, annotations } = paragraph
const possibleAnnotations = annotations.filter(a => a.type !== 'footnote')
let currentAnnotation
let annotation
let i = 0, next_i
let len = possibleAnnotations.length
for (let i = 0; i < len - 1; i++) {
next_i = i + 1
if (next_i < len && floatLT(play_ts, possibleAnnotations[next_i].start_ts)) {
currentAnnotation = possibleAnnotations[i].id
break
}
}
if (!currentAnnotation) {
currentAnnotation = possibleAnnotations[len-1].id
}
this.setState({ currentParagraph, currentAnnotation })
}
render() {
const {
paragraphs, media,
paragraphElementLookup, selectedParagraph,
onAnnotationClick, onParagraphDoubleClick,
} = this.props
const { currentParagraph, currentAnnotation } = this.state
return paragraphs.map((paragraph, i) => {
if (selectedParagraph && selectedParagraph.id === paragraph.id) {
paragraph = selectedParagraph
}
if (paragraph.type in paragraphElementLookup) {
const ParagraphElement = paragraphElementLookup[paragraph.type]
return (
<ParagraphElement
key={paragraph.id + "_" + i}
paragraph={paragraph}
media={media}
currentParagraph={paragraph.id === currentParagraph}
currentAnnotation={paragraph.id === currentParagraph && currentAnnotation}
onAnnotationClick={onAnnotationClick}
onDoubleClick={onParagraphDoubleClick}
/>
)
// } else {
// return <div key={paragraph.id}>{'(' + capitalize(paragraph.type) + ')'}</div>
}
})
}
}
const mapStateToProps = state => ({
audio: state.audio,
media: state.media.index,
})
const mapDispatchToProps = dispatch => ({
})
export default connect(mapStateToProps, mapDispatchToProps)(ParagraphList)
|
