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
|
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} />
))
|
