From 263d601c2538d5af5d5fb8ff1d95034a55c38005 Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 8 Sep 2023 20:39:29 +0200 Subject: [PATCH] [Glitch] Fix confusing behavior of mute button and volume slider in web UI Port 91040da871dba71a6eb05cd7ae3ed8b9b255680c to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/features/audio/index.jsx | 8 ++++---- .../flavours/glitch/features/video/index.jsx | 10 ++++++---- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/app/javascript/flavours/glitch/features/audio/index.jsx b/app/javascript/flavours/glitch/features/audio/index.jsx index 1926b02481..80c8af134a 100644 --- a/app/javascript/flavours/glitch/features/audio/index.jsx +++ b/app/javascript/flavours/glitch/features/audio/index.jsx @@ -212,11 +212,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; } }); }; @@ -294,7 +294,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/flavours/glitch/features/video/index.jsx b/app/javascript/flavours/glitch/features/video/index.jsx index b28ccb006f..022f662699 100644 --- a/app/javascript/flavours/glitch/features/video/index.jsx +++ b/app/javascript/flavours/glitch/features/video/index.jsx @@ -220,8 +220,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); @@ -428,10 +429,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; }); };