1 files changed, 68 insertions, 0 deletions
diff --git a/scraper/client/search/search.meta.js b/scraper/client/search/search.meta.js
new file mode 100644
index 00000000..b4eaeaad
--- /dev/null
+++ b/scraper/client/search/search.meta.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { format } from 'date-fns'
+
+import { timestamp } from '../util'
+import * as searchActions from './search.actions'
+
+class SearchMeta extends Component {
+  render() {
+    const { query, metadata, sugarcube } = this.props
+    if (!query || !metadata || !metadata.mediainfo || metadata.metadata === 'loading') {
+      return <div className='searchMeta'></div>
+    }
+    const sugarcubeId = metadata.mediainfo.sugarcube_id
+    const { video } = metadata.mediainfo.metadata.mediainfo
+    const { x, y, w, h } = query.crop || {}
+    return (
+      <div className='searchMeta'>
+        {'verified' in query && 
+          <span className={query.verified ? 'verified' : 'unverified'}>
+            {query.verified ? 'verified' : 'unverified'}
+          </span>
+        }
+        {query.hash &&
+          <span>
+            {'sha256: '}
+            <Link className="sha256" to={searchActions.publicUrl.browse(query.hash)}>{query.hash}</Link>
+          </span>
+        }
+        {query.frame &&
+          <span>
+            {'Frame: '}
+            {timestamp(query.frame, video.frame_rate)}
+            {' / '}
+            {timestamp(video.duration / 1000, 1)}
+          </span>
+        }
+        {query.crop &&
+          <span>
+            {'Crop: '}{parseInt(w, 10) + 'x' + parseInt(h, 10) + ' @ (' + parseInt(x, 10) + ', ' + parseInt(y, 10) + ')'}
+          </span>
+        }
+        {!!(video && video.encoded_date) &&
+          <span>
+            {'Date: '}{format(new Date(video.encoded_date), "DD-MMM-YYYY")}
+          </span>
+        }
+        {!!(sugarcube && sugarcubeId) && 
+          <span>
+            sugarcube: {sugarcubeId}
+          </span>
+        }
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  metadata: state.metadata,
+})
+
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators({ ...searchActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(SearchMeta)