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
|
import React, { Component } from 'react'
import { Link, withRouter } from 'react-router-dom'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Loader, Keyframes, Video } from '../common'
// import { Coco } from '../metadata'
import * as searchActions from './search.actions'
import * as metadataActions from '../metadata/metadata.actions'
import SearchMeta from './search.meta'
class Browse extends Component {
componentDidMount() {
this.browse()
}
componentDidUpdate(prevProps) {
if (prevProps.match.params !== this.props.match.params) {
this.browse()
}
}
browse() {
const { hash } = this.props.match.params
if (hash) {
this.props.searchActions.browse(hash)
}
if (hash) {
this.props.metadataActions.fetchMetadata(hash)
}
}
render() {
const { browse, options } = this.props
console.log('browse', browse)
if (!browse || browse.reset || browse.loading) {
return <div className="browseComponent column"><h3>Loading keyframes...</h3><Loader /></div>
}
return (
<div className="browseComponent column">
<h3>Video Preview</h3>
<Video size={'md'} />
<SearchMeta query={browse} sugarcube />
<div className='row buttons'>
<Link
to={'/metadata/' + browse.hash}
className='btn'
>
View Full Metadata
</Link>
</div>
<h3>Keyframes</h3>
<Keyframes
frames={browse.frames}
showHash
showTimestamp
showSearchButton
showSaveButton
/>
</div>
)
}
}
const mapStateToProps = state => ({
browse: state.search.browse,
options: state.search.options,
metadata: state.metadata,
})
const mapDispatchToProps = dispatch => ({
searchActions: bindActionCreators({ ...searchActions }, dispatch),
metadataActions: bindActionCreators({ ...metadataActions }, dispatch),
})
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Browse))
|
