Hack to preserve background of MiniTime while paused/blinking

Fixes #450

css/mini-time.css

@@ -4,12 +4,17 @@
     width: 25px;
 }
 
-#winamp2-js .mini-time.blinking {
+#winamp2-js .mini-time.blinking .character:not(.background-character) {
     animation: blink 2s step-start 1s infinite;
     -webkit-animation: blink 2s step-start 1s infinite;
 }
 
+#winamp2-js .mini-time .background-character {
+    z-index: 1;
+}
+
 #winamp2-js .mini-time .character {
     position: absolute;
     top: 0;
+    z-index: 2;
 }

js/components/MiniTime.js

@@ -7,8 +7,24 @@ import Character from "./Character";
 
 import "../../css/mini-time.css";
 
+// Sigh. When he display is blinking (say when it's paused) we need to
+// alternate between the actual caracter and the space character. Not
+// Possible to that in purce CSS with the background being dynamically generated.
+// All "space" characters is also how Winamp renders no content.
+const Background = () =>
+  [1, 7, 12, 20, 25].map((left, i) => (
+    <Character
+      style={{ left }}
+      key={i}
+      className="background-character"
+      children=" "
+    />
+  ));
+
 const MiniTime = props => {
   let seconds = null;
+  // TODO: Clean this up: If stopped, just render the background, rather than
+  // rendering spaces twice.
   if (props.status !== "STOPPED") {
     seconds =
       props.timeMode === "ELAPSED"
@@ -26,6 +42,7 @@ const MiniTime = props => {
         blinking: props.status === "PAUSED"
       })}
     >
+      <Background />
       <Character style={{ left: 1 }}>{showMinus ? "-" : " "}</Character>
       <Character style={{ left: 7 }}>{timeObj.minutesFirstDigit}</Character>
       <Character style={{ left: 12 }}>{timeObj.minutesSecondDigit}</Character>

js/components/PlaylistWindow/__snapshots__/index.test.js.snap

@@ -301,6 +301,56 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
         className="mini-time countdown"
         onClick={[Function]}
       >
+        <span
+          className="background-character character character-32"
+          style={
+            Object {
+              "left": 1,
+            }
+          }
+        >
+           
+        </span>
+        <span
+          className="background-character character character-32"
+          style={
+            Object {
+              "left": 7,
+            }
+          }
+        >
+           
+        </span>
+        <span
+          className="background-character character character-32"
+          style={
+            Object {
+              "left": 12,
+            }
+          }
+        >
+           
+        </span>
+        <span
+          className="background-character character character-32"
+          style={
+            Object {
+              "left": 20,
+            }
+          }
+        >
+           
+        </span>
+        <span
+          className="background-character character character-32"
+          style={
+            Object {
+              "left": 25,
+            }
+          }
+        >
+           
+        </span>
         <span
           className=" character character-32"
           style={

js/utils.js

@@ -1,5 +1,6 @@
 export const getTimeObj = time => {
   if (time == null) {
+    // If we clean up `<MiniTime />` we don't need to do this any more.
     return {
       minutesFirstDigit: " ",
       minutesSecondDigit: " ",