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
|
import React from 'react'
import { Link } from 'react-router-dom'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Keyframe } from '.'
import * as reviewActions from '../review/review.actions'
import * as searchActions from '../search/search.actions'
function Keyframes(props) {
// console.log(props)
let {
frames,
groupByHash,
} = props
let minDistance = 0
if (frames && frames.length) {
minDistance = frames[0].distance || 0
}
if (!groupByHash) {
return (
<KeyframeList
minDistance={minDistance}
{...props}
/>
)
}
const frameGroups = frames.reduce((a, b) => {
if (a[b.hash]) {
a[b.hash].push(b)
} else {
a[b.hash] = [b]
}
return a
}, {})
return Object.keys(frameGroups)
.map(hash => [frameGroups[hash].length, hash])
.sort((a, b) => b[0] - a[0])
.map(([count, hash]) => (
<KeyframeList
{...props}
count={count}
key={hash}
minDistance={minDistance}
frames={frameGroups[hash]}
label={hash}
/>
))
}
function KeyframeList(props) {
let {
saved = {},
frames,
options,
review,
search,
minDistance,
label,
count,
...frameProps
} = props
if (!frames) return null
return (
<div className={label ? 'keyframes keyframeGroup' : 'keyframes'}>
{label && <h4><Link to={searchActions.publicUrl.browse(label)}>{label}</Link> ({count})</h4>}
{frames.map(({ hash, frame, verified, distance }) => (
<Keyframe
key={hash + '_' + frame}
sha256={hash}
frame={frame}
score={100 - Math.round(distance - minDistance) + '%'}
verified={verified}
isSaved={!!saved[hash] && !!saved[hash].frames && !!saved[hash].frames[parseInt(frame, 10)]}
size={options.thumbnailSize}
onClick={() => review.toggleSaved({ verified, hash, frame })}
reviewActions={review}
{...frameProps}
/>
))}
</div>
)
}
const mapStateToProps = state => ({
saved: state.review.saved,
options: state.search.options,
})
const mapDispatchToProps = dispatch => ({
review: bindActionCreators({ ...reviewActions }, dispatch),
search: bindActionCreators({ ...searchActions }, dispatch),
})
export default connect(mapStateToProps, mapDispatchToProps)(Keyframes)
|
