From 58514651c330824ff3f533334ac53d3b32771402 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Thu, 7 Sep 2023 04:24:24 +0200
Subject: [PATCH] [Glitch] Fix mute button and volume slider feeling
 disconnected in web UI

Port f3a2e15f8e0274b5fdf28e3ce062084dc142cb2e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/features/audio/index.jsx | 7 ++++---
 app/javascript/flavours/glitch/features/video/index.jsx | 8 +++++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/audio/index.jsx b/app/javascript/flavours/glitch/features/audio/index.jsx
index ceb9775b58..1926b02481 100644
--- a/app/javascript/flavours/glitch/features/audio/index.jsx
+++ b/app/javascript/flavours/glitch/features/audio/index.jsx
@@ -473,8 +473,9 @@ class Audio extends PureComponent {
 
   render () {
     const { src, intl, alt, lang, editable, autoPlay, sensitive, blurhash } = this.props;
-    const { paused, muted, volume, currentTime, duration, buffer, dragging, revealed } = this.state;
+    const { paused, volume, currentTime, duration, buffer, dragging, revealed } = this.state;
     const progress = Math.min((currentTime / duration) * 100, 100);
+    const muted = this.state.muted || volume === 0;
 
     let warning;
 
@@ -564,12 +565,12 @@ class Audio extends PureComponent {
               <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button>
 
               <div className={classNames('video-player__volume', { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}>
-                <div className='video-player__volume__current' style={{ width: `${volume * 100}%`, backgroundColor: this._getAccentColor() }} />
+                <div className='video-player__volume__current' style={{ width: `${muted ? 0 : volume * 100}%`, backgroundColor: this._getAccentColor() }} />
 
                 <span
                   className='video-player__volume__handle'
                   tabIndex={0}
-                  style={{ left: `${volume * 100}%`, backgroundColor: this._getAccentColor() }}
+                  style={{ left: `${muted ? 0 : volume * 100}%`, backgroundColor: this._getAccentColor() }}
                 />
               </div>
 
diff --git a/app/javascript/flavours/glitch/features/video/index.jsx b/app/javascript/flavours/glitch/features/video/index.jsx
index f5318689fc..b28ccb006f 100644
--- a/app/javascript/flavours/glitch/features/video/index.jsx
+++ b/app/javascript/flavours/glitch/features/video/index.jsx
@@ -508,8 +508,10 @@ class Video extends PureComponent {
 
   render () {
     const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, lang, letterbox, fullwidth, detailed, sensitive, editable, blurhash, autoFocus } = this.props;
-    const { currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
+    const { currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, revealed } = this.state;
     const progress = Math.min((currentTime / duration) * 100, 100);
+    const muted = this.state.muted || volume === 0;
+
     const playerStyle = {};
 
     if (inline) {
@@ -603,12 +605,12 @@ class Video extends PureComponent {
               <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button>
 
               <div className={classNames('video-player__volume', { active: this.state.hovered })} onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
-                <div className='video-player__volume__current' style={{ width: `${volume * 100}%` }} />
+                <div className='video-player__volume__current' style={{ width: `${muted ? 0 : volume * 100}%` }} />
 
                 <span
                   className={classNames('video-player__volume__handle')}
                   tabIndex={0}
-                  style={{ left: `${volume * 100}%` }}
+                  style={{ left: `${muted ? 0 : volume * 100}%` }}
                 />
               </div>