Ellipsis for playlist shade. Resize playlist shade

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;

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>

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);
     };

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]}

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;

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"],

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],