From 263d601c2538d5af5d5fb8ff1d95034a55c38005 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
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 <claire.github-309c@sitedethib.com>
---
 .../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;
     });
   };