~cytrogen/masto-fe

91040da871dba71a6eb05cd7ae3ed8b9b255680c — Claire 2 years ago 33c8708
Fix confusing behavior of mute button and volume slider in web UI (#26860)

M app/javascript/mastodon/features/audio/index.jsx => app/javascript/mastodon/features/audio/index.jsx +4 -4
@@ 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;
        }

M app/javascript/mastodon/features/video/index.jsx => app/javascript/mastodon/features/video/index.jsx +6 -4
@@ 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;
    });
  };