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