From 0e773a0d317e8e6411e84f3fe9778d3432bdf183 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 18 Nov 2017 14:10:14 -0800
Subject: [PATCH] Add playlist window visualizer

---
 css/playlist-window.css                                     | 6 +++++-
 .../PlaylistWindow/__snapshots__/index.test.js.snap         | 3 +++
 js/components/PlaylistWindow/index.js                       | 4 +++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/css/playlist-window.css b/css/playlist-window.css
index 16479788..74825f50 100644
--- a/css/playlist-window.css
+++ b/css/playlist-window.css
@@ -234,7 +234,7 @@
   width: 10px;
 }
 
-#winamp2-js .playlist-visualizer {
+#winamp2-js #playlist-window .playlist-visualizer {
   width: 75px;
   height: 100%;
   position: absolute;
@@ -242,6 +242,10 @@
   display: none; /* Only show if the window is wide enough */
 }
 
+#winamp2-js #playlist-window.wide .playlist-visualizer {
+  display: block;
+}
+
 #winamp2-js #playlist-window .mini-time {
   position: absolute;
   top: 23px;
diff --git a/js/components/PlaylistWindow/__snapshots__/index.test.js.snap b/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
index a179c547..5f8169e2 100644
--- a/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
+++ b/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
@@ -265,6 +265,9 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
     <div
       className="playlist-bottom-right draggable"
     >
+      <div
+        className="playlist-visualizer"
+      />
       <div
         className="playlist-running-time-display draggable"
       >
diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js
index 79795c92..5d22e89e 100644
--- a/js/components/PlaylistWindow/index.js
+++ b/js/components/PlaylistWindow/index.js
@@ -64,7 +64,8 @@ const PlaylistWindow = props => {
   };
 
   const classes = classnames("window", "draggable", {
-    selected: focused === WINDOWS.PLAYLIST
+    selected: focused === WINDOWS.PLAYLIST,
+    wide: playlistSize[0] > 2
   });
 
   const BASE_WINDOW_HEIGHT = 52;
@@ -133,6 +134,7 @@ const PlaylistWindow = props => {
         </div>
         <div className="playlist-bottom-center draggable" />
         <div className="playlist-bottom-right draggable">
+          <div className="playlist-visualizer" />
           <RunningTimeDisplay />
           <div className="playlist-action-buttons">
             <div className="playlist-previous-button" />