From a53dcaa29869e808707efcba541b02ee8d799e75 Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Sun, 27 Jan 2019 21:18:15 +0100
Subject: [PATCH] Fix initial value of volume slider in video player and handle
volume changes (#9929)
* Fix initial value of volume slider in video player and handle volume changes
* Clean up dead/incorrect code
---
app/javascript/mastodon/features/video/index.js | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/app/javascript/mastodon/features/video/index.js b/app/javascript/mastodon/features/video/index.js
index 3650fddb630..0d0c24d7194 100644
--- a/app/javascript/mastodon/features/video/index.js
+++ b/app/javascript/mastodon/features/video/index.js
@@ -136,6 +136,9 @@ 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 => {
@@ -302,6 +305,10 @@ 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({
@@ -387,6 +394,7 @@ 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}>
@@ -409,7 +417,7 @@ 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