From 0615fb3d8f2684880f8de7fa73d0c985bc169cd1 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Tue, 19 Dec 2017 07:29:02 -0800
Subject: [PATCH] Handle empty playlist in playlist shade

---
 js/components/PlaylistWindow/PlaylistShade.js |  94 +++++-----
 .../__snapshots__/PlaylistShade.test.js.snap  | 164 +++---------------
 js/selectors.js                               |   4 +-
 3 files changed, 78 insertions(+), 184 deletions(-)

diff --git a/js/components/PlaylistWindow/PlaylistShade.js b/js/components/PlaylistWindow/PlaylistShade.js
index 5f622d07..bc020da2 100644
--- a/js/components/PlaylistWindow/PlaylistShade.js
+++ b/js/components/PlaylistWindow/PlaylistShade.js
@@ -20,57 +20,65 @@ import ResizeTarget from "./ResizeTarget";
 
 import { getOrderedTracks, getMediaText } from "../../selectors";
 
-const PlaylistShade = props => {
-  const {
-    toggleShade,
-    close,
-    focusPlaylist,
-    playlistSize,
-    focused,
-    name,
-    length
-  } = props;
+class PlaylistShade extends React.Component {
+  _addedWidth() {
+    return this.props.playlistSize[0] * PLAYLIST_RESIZE_SEGMENT_WIDTH;
+  }
+  _trimmedName() {
+    const { name } = this.props;
+    if (name == null) {
+      return "[No file]";
+    }
 
-  const addedWidth = playlistSize[0] * PLAYLIST_RESIZE_SEGMENT_WIDTH;
-  const style = {
-    width: `${MIN_PLAYLIST_WINDOW_WIDTH + addedWidth}px`
-  };
-  const MIN_NAME_WIDTH = 205;
+    const MIN_NAME_WIDTH = 205;
 
-  const nameLength = (MIN_NAME_WIDTH + addedWidth) / CHARACTER_WIDTH;
-  const trimmedName =
-    name.length > nameLength
+    const nameLength = (MIN_NAME_WIDTH + this._addedWidth()) / CHARACTER_WIDTH;
+    return name.length > nameLength
       ? name.slice(0, nameLength - 1) + UTF8_ELLIPSIS
       : name;
+  }
 
-  const classes = classnames("window", "draggable", {
-    selected: focused === WINDOWS.PLAYLIST
-  });
+  _time() {
+    const { length, name } = this.props;
+    return name == null ? "" : getTimeStr(length);
+  }
 
-  return (
-    <div
-      id="playlist-window-shade"
-      className={classes}
-      style={{ width: style.width }}
-      onMouseDown={focusPlaylist}
-    >
-      <div className="left">
-        <div className="right draggable">
-          <CharacterString id="playlist-shade-track-title">
-            {trimmedName}
-          </CharacterString>
-          {/* TODO: Ellipisize */}
-          <CharacterString id="playlist-shade-time">
-            {getTimeStr(length)}
-          </CharacterString>
-          <ResizeTarget widthOnly />
-          <div id="playlist-shade-button" onClick={toggleShade} />
-          <div id="playlist-close-button" onClick={close} />
+  render() {
+    const { toggleShade, close, focusPlaylist, focused } = this.props;
+
+    const style = {
+      width: `${MIN_PLAYLIST_WINDOW_WIDTH + this._addedWidth()}px`
+    };
+
+    const classes = classnames("window", "draggable", {
+      selected: focused === WINDOWS.PLAYLIST
+    });
+
+    return (
+      <div
+        id="playlist-window-shade"
+        className={classes}
+        style={{ width: style.width }}
+        onMouseDown={focusPlaylist}
+      >
+        <div className="left">
+          <div className="right draggable">
+            <CharacterString id="playlist-shade-track-title">
+              {this._trimmedName()}
+            </CharacterString>
+            {/* TODO: Ellipisize */}
+            <CharacterString id="playlist-shade-time">
+              {this._time()}
+            </CharacterString>
+            <ResizeTarget widthOnly />
+            <div id="playlist-shade-button" onClick={toggleShade} />
+            <div id="playlist-close-button" onClick={close} />
+          </div>
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+}
 
 const mapDispatchToProps = dispatch => ({
   focusPlaylist: () =>
diff --git a/js/components/PlaylistWindow/__snapshots__/PlaylistShade.test.js.snap b/js/components/PlaylistWindow/__snapshots__/PlaylistShade.test.js.snap
index f2354c40..573542e2 100644
--- a/js/components/PlaylistWindow/__snapshots__/PlaylistShade.test.js.snap
+++ b/js/components/PlaylistWindow/__snapshots__/PlaylistShade.test.js.snap
@@ -21,44 +21,9 @@ exports[`PlaylistShade renders to snapshot 1`] = `
         id="playlist-shade-track-title"
       >
         <div
-          className=" character character-49"
+          className=" character character-91"
         >
-          1
-        </div>
-        <div
-          className=" character character-46"
-        >
-          .
-        </div>
-        <div
-          className=" character character-32"
-        >
-           
-        </div>
-        <div
-          className=" character character-115"
-        >
-          S
-        </div>
-        <div
-          className=" character character-111"
-        >
-          o
-        </div>
-        <div
-          className=" character character-109"
-        >
-          m
-        </div>
-        <div
-          className=" character character-101"
-        >
-          e
-        </div>
-        <div
-          className=" character character-32"
-        >
-           
+          [
         </div>
         <div
           className=" character character-110"
@@ -66,14 +31,29 @@ exports[`PlaylistShade renders to snapshot 1`] = `
           N
         </div>
         <div
-          className=" character character-97"
+          className=" character character-111"
         >
-          a
+          o
         </div>
         <div
-          className=" character character-109"
+          className=" character character-32"
         >
-          m
+           
+        </div>
+        <div
+          className=" character character-102"
+        >
+          f
+        </div>
+        <div
+          className=" character character-105"
+        >
+          i
+        </div>
+        <div
+          className=" character character-108"
+        >
+          l
         </div>
         <div
           className=" character character-101"
@@ -81,110 +61,14 @@ exports[`PlaylistShade renders to snapshot 1`] = `
           e
         </div>
         <div
-          className=" character character-32"
+          className=" character character-93"
         >
-           
-        </div>
-        <div
-          className=" character character-40"
-        >
-          (
-        </div>
-        <div
-          className=" character character-48"
-        >
-          0
-        </div>
-        <div
-          className=" character character-48"
-        >
-          0
-        </div>
-        <div
-          className=" character character-58"
-        >
-          :
-        </div>
-        <div
-          className=" character character-48"
-        >
-          0
-        </div>
-        <div
-          className=" character character-48"
-        >
-          0
-        </div>
-        <div
-          className=" character character-41"
-        >
-          )
-        </div>
-        <div
-          className=" character character-32"
-        >
-           
-        </div>
-        <div
-          className=" character character-32"
-        >
-           
-        </div>
-        <div
-          className=" character character-42"
-        >
-          *
-        </div>
-        <div
-          className=" character character-42"
-        >
-          *
-        </div>
-        <div
-          className=" character character-42"
-        >
-          *
-        </div>
-        <div
-          className=" character character-32"
-        >
-           
-        </div>
-        <div
-          className=" character character-32"
-        >
-           
+          ]
         </div>
       </div>
       <div
         id="playlist-shade-time"
-      >
-        <div
-          className=" character character-48"
-        >
-          0
-        </div>
-        <div
-          className=" character character-48"
-        >
-          0
-        </div>
-        <div
-          className=" character character-58"
-        >
-          :
-        </div>
-        <div
-          className=" character character-48"
-        >
-          0
-        </div>
-        <div
-          className=" character character-48"
-        >
-          0
-        </div>
-      </div>
+      />
       <div
         id="playlist-resize-target"
         onMouseDown={[Function]}
diff --git a/js/selectors.js b/js/selectors.js
index c56505c6..43fc235d 100644
--- a/js/selectors.js
+++ b/js/selectors.js
@@ -155,7 +155,9 @@ export const getMediaText = createSelector(
   getCurrentTrackDisplayName,
   getDuration,
   (trackNumber, name, duration) =>
-    `${trackNumber}. ${name} (${getTimeStr(duration)})  ***  `
+    name == null
+      ? null
+      : `${trackNumber}. ${name} (${getTimeStr(duration)})  ***  `
 );
 
 const getNumberOfTracks = state => getTrackOrder(state).length;