style: Added small indications for muted mic tally

tv2 · Nov 10, 2021 · c9a266f · c9a266f
1 parent 803ffda
commit c9a266f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/client/assets/css/MicTally.css b/client/assets/css/MicTally.css
@@ -44,7 +44,7 @@ body.v-mic-tally {
     cursor: pointer;
 }
 
-.c-mic-tally__status:active {
+.c-mic-tally__status:active:not(.muted) {
     background-color: #888888;
 }
 
@@ -60,6 +60,10 @@ body.v-mic-tally {
     color: white;
 }
 
+.c-mic-tally__status.muted {
+    cursor: not-allowed;
+}
+
 .c-mic-tally__label {
     display: block;
     color: white;

diff --git a/client/components/MicTally.tsx b/client/components/MicTally.tsx
@@ -60,7 +60,7 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
                         const isOn = (fader.pgmOn || fader.voOn) && !fader.muteOn
                         return (
                             <li className="c-mic-tally" key={index}>
-                                <div onClick={() => this.toggleFader(index)} className={`c-mic-tally__status${isOn ? ' on': ''} `}>
+                                <div onClick={() => this.toggleFader(index)} className={`c-mic-tally__status${isOn ? ' on': ''}${fader.muteOn ? ' muted' : ''}`}>
                                   <div className="c-mic-tally__status__content">
                                     { isOn ? 'ON' : 'OFF' }
                                   </div>