diff --git a/app/javascript/mastodon/features/audio/index.jsx b/app/javascript/mastodon/features/audio/index.jsx index da0a6523267..103ef578273 100644 --- a/app/javascript/mastodon/features/audio/index.jsx +++ b/app/javascript/mastodon/features/audio/index.jsx @@ -205,11 +205,11 @@ class Audio extends PureComponent { }; toggleMute = () => { - const muted = !this.state.muted; + const muted = !(this.state.muted || this.state.volume === 0); - this.setState({ muted }, () => { + this.setState((state) => ({ muted, volume: Math.max(state.volume || 0.5, 0.05) }), () => { if (this.gainNode) { - this.gainNode.gain.value = muted ? 0 : this.state.volume; + this.gainNode.gain.value = this.state.muted ? 0 : this.state.volume; } }); }; @@ -287,7 +287,7 @@ class Audio extends PureComponent { const { x } = getPointerPosition(this.volume, e); if(!isNaN(x)) { - this.setState({ volume: x }, () => { + this.setState((state) => ({ volume: x, muted: state.muted && x === 0 }), () => { if (this.gainNode) { this.gainNode.gain.value = this.state.muted ? 0 : x; } diff --git a/app/javascript/mastodon/features/video/index.jsx b/app/javascript/mastodon/features/video/index.jsx index 9143619d01d..ec0e7a9095c 100644 --- a/app/javascript/mastodon/features/video/index.jsx +++ b/app/javascript/mastodon/features/video/index.jsx @@ -217,8 +217,9 @@ class Video extends PureComponent { const { x } = getPointerPosition(this.volume, e); if(!isNaN(x)) { - this.setState({ volume: x }, () => { + this.setState((state) => ({ volume: x, muted: state.muted && x === 0 }), () => { this.video.volume = x; + this.video.muted = this.state.muted; }); } }, 15); @@ -425,10 +426,11 @@ class Video extends PureComponent { }; toggleMute = () => { - const muted = !this.video.muted; + const muted = !(this.video.muted || this.state.volume === 0); - this.setState({ muted }, () => { - this.video.muted = muted; + this.setState((state) => ({ muted, volume: Math.max(state.volume || 0.5, 0.05) }), () => { + this.video.volume = this.state.volume; + this.video.muted = this.state.muted; }); };