1 files changed, 95 insertions, 0 deletions
diff --git a/scraper/client/common/keyframes.component.js b/scraper/client/common/keyframes.component.js
new file mode 100644
index 00000000..62eda45e
--- /dev/null
+++ b/scraper/client/common/keyframes.component.js
@@ -0,0 +1,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)