diff options
| -rw-r--r-- | app/javascript/flavours/glitch/features/video/index.js | 10 |
1 files changed, 9 insertions, 1 deletions
diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index 30592707c..d8e8791a7 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -139,6 +139,9 @@ export default class Video extends React.PureComponent { setVideoRef = c => { this.video = c; + if (this.video) { + this.setState({ volume: this.video.volume, muted: this.video.muted }); + } } setSeekRef = c => { @@ -319,6 +322,10 @@ export default class Video extends React.PureComponent { } } + handleVolumeChange = () => { + this.setState({ volume: this.video.volume, muted: this.video.muted }); + } + handleOpenVideo = () => { const { src, preview, width, height, alt } = this.props; const media = fromJS({ @@ -407,6 +414,7 @@ export default class Video extends React.PureComponent { onTimeUpdate={this.handleTimeUpdate} onLoadedData={this.handleLoadedData} onProgress={this.handleProgress} + onVolumeChange={this.handleVolumeChange} /> <button type='button' className={classNames('video-player__spoiler', { active: !revealed })} onClick={this.toggleReveal}> @@ -429,7 +437,7 @@ export default class Video extends React.PureComponent { <div className='video-player__buttons-bar'> <div className='video-player__buttons left'> <button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><i className={classNames('fa fa-fw', { 'fa-play': paused, 'fa-pause': !paused })} /></button> - <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onMouseEnter={this.volumeSlider} onMouseLeave={this.volumeSlider} onClick={this.toggleMute}><i className={classNames('fa fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button> + <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><i className={classNames('fa fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button> <div className='video-player__volume' onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}> <div className='video-player__volume__current' style={{ width: `${volumeWidth}px` }} /> <span |