Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-21 09:09:01 +00:00
Code Issues Projects Releases Wiki Activity

Handle empty playlist in playlist shade

Browse source
This commit is contained in:
Jordan Eldredge 2017-12-19 07:29:02 -08:00
parent 2a43de28cb
commit 0615fb3d8f
3 changed files with 78 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

94
js/components/PlaylistWindow/PlaylistShade.js
View file

@ -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: () =>

164
js/components/PlaylistWindow/__snapshots__/PlaylistShade.test.js.snap
View file

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

4
js/selectors.js
View file

@ -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;