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 => {
- {name}
+ {trimmedName}
{/* TODO: Ellipisize */}
{getTimeStr(length)}
- {/* TODO: Resize handle */}
+
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
+
{
});
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],