about summary refs log tree commit diff
diff options
context:
space:
mode:
authorEugen Rochko <eugen@zeonfederated.com>2016-09-18 12:39:00 +0200
committerEugen Rochko <eugen@zeonfederated.com>2016-09-18 12:39:00 +0200
commitdfd5deacf4211b4736e0981ea2d5d9dfca6abc62 (patch)
tree3bf686779a3a966392b99c4f6e780bbe4cc4a77e
parentadffc7a49527d816f95e34268ebf196d9f020579 (diff)
Volume toggle control in VideoPlayer
-rw-r--r--app/assets/javascripts/components/components/video_player.jsx16
1 files changed, 14 insertions, 2 deletions
diff --git a/app/assets/javascripts/components/components/video_player.jsx b/app/assets/javascripts/components/components/video_player.jsx
index e680fb206..fa0675413 100644
--- a/app/assets/javascripts/components/components/video_player.jsx
+++ b/app/assets/javascripts/components/components/video_player.jsx
@@ -1,17 +1,29 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PureRenderMixin    from 'react-addons-pure-render-mixin';
+import IconButton         from './icon_button';
 
 const VideoPlayer = React.createClass({
   propTypes: {
     media: ImmutablePropTypes.map.isRequired
   },
 
+  getInitialState () {
+    return {
+      muted: true
+    };
+  },
+
   mixins: [PureRenderMixin],
 
+  handleClick () {
+    this.setState({ muted: !this.state.muted });
+  },
+
   render () {
     return (
-      <div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: '196px', height: '110px', boxSizing: 'border-box', background: '#000' }}>
-        <video src={this.props.media.get('url')} autoPlay='true' loop={true} muted={true} style={{ width: '100%', height: '100%' }} />
+      <div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: '196px', height: '110px', boxSizing: 'border-box', background: '#000', position: 'relative' }}>
+        <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>
     );
   }