1 files changed, 47 insertions, 0 deletions
diff --git a/client/common/video.component.js b/client/common/video.component.js
new file mode 100644
index 00000000..e5525bf6
--- /dev/null
+++ b/client/common/video.component.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { imageUrl, widths } from '../util'
+
+import { Gate } from '.'
+
+class Video extends Component {
+  state = {
+    playing: false,
+  }
+
+  render() {
+    const { app, data, size } = this.props
+    const { playing } = this.state
+    const { sugarcube } = data.metadata
+    const url = sugarcube.fp.replace('/var/www/files/', 'https://cube.syrianarchive.org/')
+    const { sha256, verified } = app.mediainfo
+    const { video } = app.mediainfo.metadata.mediainfo
+    const keyframe = app.keyframe.metadata.keyframe.basic[0]
+    return (
+      <div className='video'>
+        {playing
+          ? <video src={url} autoPlay controls muted />
+          : <div
+              className='bg'
+              style={{
+                width: widths[size || 'sm'],
+                height: widths[size || 'sm'] / video.aspect_ratio,
+                backgroundImage: 'url(' + imageUrl(verified, sha256, keyframe, size) + ')',
+              }}
+              onClick={() => this.setState({ playing: true })}
+            >
+              <div className='play'></div>
+            </div>
+        }
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = () => ({
+  tag: 'sugarcube',
+})
+
+export default connect(mapStateToProps)(props => (
+  <Gate View={Video} {...props} />
+))