From 4f3ff48a3eaf7f99c3f330e5151c63b66f90a1df Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 19 Nov 2017 15:25:44 -0800
Subject: [PATCH] Ellipsis for playlist shade. Resize playlist shade

---
 css/playlist-window.css                       |  8 ++++++++
 js/components/PlaylistWindow/PlaylistShade.js | 20 ++++++++++++++-----
 js/components/PlaylistWindow/ResizeTarget.js  | 14 +++++++++----
 .../__snapshots__/PlaylistShade.test.js.snap  |  4 ++++
 js/constants.js                               |  2 ++
 js/skinSelectors.js                           |  2 +-
 js/skinSprites.js                             |  2 ++
 7 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/css/playlist-window.css b/css/playlist-window.css
index 213879d0..3a8356c8 100644
--- a/css/playlist-window.css
+++ b/css/playlist-window.css
@@ -271,6 +271,14 @@
   background-position-x: right;
 }
 
+#winamp2-js #playlist-window-shade #playlist-resize-target {
+  position: absolute;
+  right: 20px;
+  top: 3px;
+  height: 9px;
+  width: 9px;
+}
+
 #winamp2-js #playlist-shade-track-title {
   position: absolute;
   top: 4px;
diff --git a/js/components/PlaylistWindow/PlaylistShade.js b/js/components/PlaylistWindow/PlaylistShade.js
index 869f7d54..6291a4d7 100644
--- a/js/components/PlaylistWindow/PlaylistShade.js
+++ b/js/components/PlaylistWindow/PlaylistShade.js
@@ -11,9 +11,12 @@ import {
 import {
   WINDOWS,
   PLAYLIST_RESIZE_SEGMENT_WIDTH,
-  MIN_PLAYLIST_WINDOW_WIDTH
+  MIN_PLAYLIST_WINDOW_WIDTH,
+  CHARACTER_WIDTH,
+  UTF8_ELLIPSIS
 } from "../../constants";
 import CharacterString from "../CharacterString";
+import ResizeTarget from "./ResizeTarget";
 
 import { getOrderedTracks } from "../../selectors";
 
@@ -28,10 +31,17 @@ const PlaylistShade = props => {
     length
   } = props;
 
+  const addedWidth = playlistSize[0] * PLAYLIST_RESIZE_SEGMENT_WIDTH;
   const style = {
-    width: `${MIN_PLAYLIST_WINDOW_WIDTH +
-      playlistSize[0] * PLAYLIST_RESIZE_SEGMENT_WIDTH}px`
+    width: `${MIN_PLAYLIST_WINDOW_WIDTH + addedWidth}px`
   };
+  const MIN_NAME_WIDTH = 205;
+
+  const nameLength = (MIN_NAME_WIDTH + addedWidth) / CHARACTER_WIDTH;
+  const trimmedName =
+    name.length > nameLength
+      ? name.slice(0, nameLength - 1) + UTF8_ELLIPSIS
+      : name;
 
   const classes = classnames("window", "draggable", {
     selected: focused === WINDOWS.PLAYLIST
@@ -47,13 +57,13 @@ const PlaylistShade = props => {
       <div className="left">
         <div className="right draggable">
           <CharacterString id="playlist-shade-track-title">
-            {name}
+            {trimmedName}
           </CharacterString>
           {/* TODO: Ellipisize */}
           <CharacterString id="playlist-shade-time">
             {getTimeStr(length)}
           </CharacterString>
-          {/* TODO: Resize handle */}
+          <ResizeTarget widthOnly />
           <div id="playlist-shade-button" onClick={toggleShade} />
           <div id="playlist-close-button" onClick={close} />
         </div>
diff --git a/js/components/PlaylistWindow/ResizeTarget.js b/js/components/PlaylistWindow/ResizeTarget.js
index f9f6c1c7..0b99a62e 100644
--- a/js/components/PlaylistWindow/ResizeTarget.js
+++ b/js/components/PlaylistWindow/ResizeTarget.js
@@ -24,10 +24,16 @@ class ResizeTarget extends React.Component {
       const x = ee.clientX - mouseStart.x;
       const y = ee.clientY - mouseStart.y;
 
-      const newSize = [
-        Math.max(0, width + Math.round(x / PLAYLIST_RESIZE_SEGMENT_WIDTH)),
-        Math.max(0, height + Math.round(y / PLAYLIST_RESIZE_SEGMENT_HEIGHT))
-      ];
+      const newWidth = Math.max(
+        0,
+        width + Math.round(x / PLAYLIST_RESIZE_SEGMENT_WIDTH)
+      );
+
+      const newHeight = this.props.widthOnly
+        ? width
+        : Math.max(0, height + Math.round(y / PLAYLIST_RESIZE_SEGMENT_HEIGHT));
+
+      const newSize = [newWidth, newHeight];
 
       this.props.setPlaylistSize(newSize);
     };
diff --git a/js/components/PlaylistWindow/__snapshots__/PlaylistShade.test.js.snap b/js/components/PlaylistWindow/__snapshots__/PlaylistShade.test.js.snap
index bb7e9728..628342ab 100644
--- a/js/components/PlaylistWindow/__snapshots__/PlaylistShade.test.js.snap
+++ b/js/components/PlaylistWindow/__snapshots__/PlaylistShade.test.js.snap
@@ -49,6 +49,10 @@ exports[`PlaylistShade renders to snapshot 1`] = `
           0
         </div>
       </div>
+      <div
+        id="playlist-resize-target"
+        onMouseDown={[Function]}
+      />
       <div
         id="playlist-shade-button"
         onClick={[Function]}
diff --git a/js/constants.js b/js/constants.js
index 2eb0203d..79dae3fa 100644
--- a/js/constants.js
+++ b/js/constants.js
@@ -6,6 +6,8 @@ export const WINDOWS = {
   EQUALIZER: "EQUALIZER"
 };
 
+export const UTF8_ELLIPSIS = "\u2026";
+export const CHARACTER_WIDTH = 5;
 export const PLAYLIST_RESIZE_SEGMENT_WIDTH = 25;
 export const PLAYLIST_RESIZE_SEGMENT_HEIGHT = 29;
 export const MIN_PLAYLIST_WINDOW_WIDTH = 275;
diff --git a/js/skinSelectors.js b/js/skinSelectors.js
index 63cd8d72..a3892d2a 100644
--- a/js/skinSelectors.js
+++ b/js/skinSelectors.js
@@ -281,7 +281,7 @@ Object.keys(FONT_LOOKUP).forEach(character => {
 });
 
 export const cursorSelectors = {
-  PSIZE: ["#playlist-resize-target"],
+  PSIZE: ["#playlist-window #playlist-resize-target"],
   CLOSE: ["#title-bar #close"],
   MAINMENU: ["#main-window", "#main-window.shade #title-bar"],
   TITLEBAR: ["#main-window #title-bar"],
diff --git a/js/skinSprites.js b/js/skinSprites.js
index a4167c87..910a7057 100644
--- a/js/skinSprites.js
+++ b/js/skinSprites.js
@@ -1,3 +1,4 @@
+import { UTF8_ELLIPSIS } from "./constants";
 /* TODO: There are too many " " and "_" characters */
 export const FONT_LOOKUP = {
   a: [0, 0],
@@ -38,6 +39,7 @@ export const FONT_LOOKUP = {
   "7": [1, 7],
   "8": [1, 8],
   "9": [1, 9],
+  [UTF8_ELLIPSIS]: [1, 10],
   _: [1, 11],
   ":": [1, 12],
   "(": [1, 13],