Add red flash for fader when playing and muted.

This commit is contained in:
Matthew Stratford 2020-04-19 13:10:24 +01:00
parent 71cd7fb763
commit d29c306c08
2 changed files with 23 additions and 5 deletions

View file

@ -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;
}

View file

@ -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={{