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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
import React from 'react'
import { Link } from 'react-router-dom'
import { imageUrl, timestamp, keyframeUri, widths, verify } from '../util'
import { DetectionBoxes } from '.'
import * as searchActions from '../search/search.actions'
export default function Keyframe({
verified,
sha256,
frame,
score,
isSaved,
fps = 25,
size = 'th',
className,
showHash,
showFrame,
showTimestamp,
showScore,
showSearchButton,
showSaveButton,
to,
children,
detectionList = [],
aspectRatio = 1.777,
onClick,
reviewActions,
}) {
if (!sha256) return null
const width = widths[size]
const height = Math.round(width / aspectRatio)
return (
<div className={(className || 'keyframe') + (isSaved ? ' isSaved' : '')}>
<div className="thumbnail">
<PossiblyExternalLink to={to || keyframeUri(sha256, frame)} onClick={onClick}>
<img
alt={'Frame #' + frame}
src={imageUrl(verified, sha256, frame, size)}
width={width}
height={height}
onClick={onClick}
/>
{detectionList.map(({ labels, detections }, i) => (
<DetectionBoxes
key={i}
labels={labels}
detections={detections}
width={width}
height={height}
/>
))}
</PossiblyExternalLink>
{(reviewActions && (showSearchButton || showSaveButton)) &&
<label className='searchButtons'>
{showSearchButton &&
<Link
to={searchActions.publicUrl.searchByVerifiedFrame(verified, sha256, frame)}
className='btn'
>
Search
</Link>
}
{showSaveButton && (isSaved
? <button
onClick={() => reviewActions.unsave({ hash: sha256, frame, verified })}
className={'btn btn-primary saved'}
>
{'Saved'}
</button>
: <button
onClick={() => reviewActions.save({ hash: sha256, frame, verified })}
className={'btn btn save'}
>
{'Save'}
</button>
)}
</label>
}
</div>
{(showHash || showFrame || showTimestamp || showScore) &&
<label>
{showHash &&
<small>
<Link to={searchActions.publicUrl.browse(sha256)}>
<span
title={sha256}
className={'sha256 ' + verify(verified)}
>
{'▶ '}
{sha256.substr(0, 6)}
</span>
</Link>
</small>
}
{showFrame &&
<small>
<span>{'Frame #'}{frame}</span>
</small>
}
{showTimestamp && <small>{timestamp(frame, fps)}</small>}
{showScore && !!score && <small>{score}</small>}
</label>
}
{children}
</div>
)
}
const PossiblyExternalLink = props => {
if (props.onClick) {
return props.children
}
if (props.to.match(/^http/)) {
return <a href={props.to} target='_blank' rel='noopener noreferrer'>{props.children}</a>
}
return <Link {...props} />
}
|
