From d29c306c088210d1c8db632f5e26a2aa7652555f Mon Sep 17 00:00:00 2001
From: Matthew Stratford <hi@mstratford.net>
Date: Sun, 19 Apr 2020 13:10:24 +0100
Subject: [PATCH] Add red flash for fader when playing and muted.

---
 src/App.css                | 22 ++++++++++++++++++----
 src/showplanner/Player.tsx |  6 +++++-
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/App.css b/src/App.css
index 3dd8f14..1eec675 100644
--- a/src/App.css
+++ b/src/App.css
@@ -261,18 +261,32 @@ button{
 
 /* Flash class and keyframe animation */
 .sp-ending-soon {
-	-webkit-animation: flash steps(1) 0.5s infinite;
-	animation: flash steps(1) 0.5s infinite;
+	-webkit-animation: green-flash steps(1) 0.5s infinite;
+	animation: green-flash steps(1) 0.5s infinite;
 }
-@-webkit-keyframes flash {
+@-webkit-keyframes green-flash {
 	0% { }
 	50% { background-color: rgb(199, 255, 199); }
 }
-@keyframes flash {
+@keyframes green-flash {
   0% { }
   50% { background-color: rgb(199, 255, 199); }
 }
 
+/* Flash class and keyframe animation */
+.sp-muted-player {
+	-webkit-animation: red-flash steps(1) 0.5s infinite;
+	animation: red-flash steps(1) 0.5s infinite;
+}
+@-webkit-keyframes red-flash {
+	0% { }
+	50% { background-color: rgb(255, 199, 199); }
+}
+@keyframes red-flash {
+  0% { }
+  50% { background-color: rgb(255, 199, 199); }
+}
+
 .ReactModal__Overlay {
   z-index: 10000;
 }
diff --git a/src/showplanner/Player.tsx b/src/showplanner/Player.tsx
index c1eddaa..6ebfc89 100644
--- a/src/showplanner/Player.tsx
+++ b/src/showplanner/Player.tsx
@@ -172,7 +172,11 @@ export function Player({ id }: { id: number }) {
         </div>
       </div>
 
-      <div className="sp-mixer-buttons">
+      <div className={"sp-mixer-buttons " +
+        (playerState.state === "playing" && playerState.volume === 0
+            ? "sp-muted-player"
+            : "")
+      }>
         <div
           className="sp-mixer-buttons-backdrop"
           style={{