From 3ac165a6492d3a173bf128c2b81dda0aa1cd176e Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 21 Jan 2018 21:14:38 -0800
Subject: [PATCH] Hack to preserve background of MiniTime while paused/blinking

Fixes #450
---
 css/mini-time.css                             |  7 ++-
 js/components/MiniTime.js                     | 17 +++++++
 .../__snapshots__/index.test.js.snap          | 50 +++++++++++++++++++
 js/utils.js                                   |  1 +
 4 files changed, 74 insertions(+), 1 deletion(-)

diff --git a/css/mini-time.css b/css/mini-time.css
index 7b5ddaab..63fe5e95 100644
--- a/css/mini-time.css
+++ b/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;
 }
diff --git a/js/components/MiniTime.js b/js/components/MiniTime.js
index a69f993f..a75f2c87 100644
--- a/js/components/MiniTime.js
+++ b/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>
diff --git a/js/components/PlaylistWindow/__snapshots__/index.test.js.snap b/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
index 39ced4b3..0bda5113 100644
--- a/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
+++ b/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={
diff --git a/js/utils.js b/js/utils.js
index eda3ae29..1e1e733f 100644
--- a/js/utils.js
+++ b/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: " ",