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) => (
+
+ ));
+
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"
})}
>
+
{showMinus ? "-" : " "}
{timeObj.minutesFirstDigit}
{timeObj.minutesSecondDigit}
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]}
>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
if (time == null) {
+ // If we clean up `` we don't need to do this any more.
return {
minutesFirstDigit: " ",
minutesSecondDigit: " ",