kikobar/mastodon
1
0
Fork 0
mirror of https://github.com/kikobar/mastodon.git synced 2024-11-17 21:04:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Volume toggle control in VideoPlayer

Browse source
This commit is contained in:
Eugen Rochko 2016-09-18 12:39:00 +02:00
parent adffc7a495
commit dfd5deacf4
1 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/javascripts/components/components/video_player.jsx
View file

@ -1,17 +1,29 @@
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
import IconButton from './icon_button';
const VideoPlayer = React.createClass({ const VideoPlayer = React.createClass({
propTypes: { propTypes: {
media: ImmutablePropTypes.map.isRequired media: ImmutablePropTypes.map.isRequired
}, },
getInitialState () {
return {
muted: true
};
},
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
handleClick () {
this.setState({ muted: !this.state.muted });
},
render () { render () {
return ( return (
<div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: '196px', height: '110px', boxSizing: 'border-box', background: '#000' }}> <div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: '196px', height: '110px', boxSizing: 'border-box', background: '#000', position: 'relative' }}>
<video src={this.props.media.get('url')} autoPlay='true' loop={true} muted={true} style={{ width: '100%', height: '100%' }} /> <div style={{ position: 'absolute', top: '10px', left: '10px', opacity: '0.8' }}><IconButton title='Toggle sound' icon={this.state.muted ? 'volume-up' : 'volume-off'} onClick={this.handleClick} /></div>
<video src={this.props.media.get('url')} autoPlay='true' loop={true} muted={this.state.muted} style={{ width: '100%', height: '100%' }} />
</div> </div>
); );
} }