secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Refreshing track list

Browse Source
This commit is contained in:
James Barnsley
2018-11-07 17:01:18 +13:00
parent aa32904b9a
commit ccc8ec26c2
8 changed files with 334 additions and 968 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
mopidy_iris/static/app.css
View File

@ -3925,56 +3925,42 @@ input[type="submit"] {
display: block;
position: relative;
margin: 0 -10px 0 -10px;
padding: 14px 30px 13px 10px;
padding: 0 10px;
border-radius: 3px; }
.list__item::after {
content: '';
clear: both;
display: block; }
.list__item:not(.no-click) {
cursor: pointer; }
.list__item:before {
pointer-events: none;
content: '';
display: block;
position: absolute;
top: 0;
top: -5px;
left: 0;
bottom: 0;
right: 0;
border-top: 3px solid transparent;
border-bottom: 1px solid rgba(125, 125, 125, 0.15); }
:root .notouch:not(.dragging) .list__item:not(.header):not(.no-click).hover {
height: 3px;
background: #32b5f2;
opacity: 0; }
:root .notouch:not(.dragging) .list__item:not(.no-click).list__item--hover {
background: rgba(255, 255, 255, 0.03);
cursor: pointer; }
.light-theme :root .notouch:not(.dragging) .list__item:not(.header):not(.no-click).hover {
.light-theme :root .notouch:not(.dragging) .list__item:not(.no-click).list__item--hover {
background: rgba(0, 0, 0, 0.03); }
.list__item.selected {
background: rgba(125, 125, 125, 0.15) !important; }
.list__item.playing {
color: #08d58f; }
.list__item .select-zone,
.list__item .drag-zone {
display: none; }
.list__item .select-zone *,
.list__item .drag-zone * {
pointer-events: none; }
.list__item .context-menu-trigger {
position: absolute;
top: 0;
right: 0;
font-size: 14px;
z-index: 2; }
.list__item .context-menu-trigger:before {
display: none !important; }
.list__item .icon.source {
color: #a3a19f;
position: absolute;
top: 16px;
right: 40px; }
.list__item.header {
font-size: 10px;
color: #383734;
text-transform: uppercase;
padding-bottom: 2px; }
.list__item.field {
padding: 0 !important; }
.list__item.field > label {
@ -3984,22 +3970,45 @@ input[type="submit"] {
cursor: pointer; }
.list__item .uri-placeholder {
word-break: break-all; }
.list__item--selected {
background: rgba(125, 125, 125, 0.15) !important; }
.list__item--playing .list__item__name {
color: #08d58f; }
.list__item__content {
padding: 14px 0; }
.list__item__name {
padding-bottom: 2px; }
.light-theme .list__item__name .flag {
background: #cecac4;
color: #FFFFFF; }
.list__item__details {
padding: 0;
margin: 0;
opacity: 0.5; }
.list__item__details__item {
display: inline-block; }
.list__item__details__item:not(:first-child) {
padding-left: 14px; }
.list__item__details__item:not(:first-child):before {
content: '\2022' !important;
display: inline-block;
margin-left: -8px;
padding-right: 6px; }
.list__item__actions {
float: right;
padding-top: 14px; }
.list__item__actions__item {
padding: 10px 0 0 14px;
display: inline-block; }
.list__item__actions__item--context-menu-trigger {
font-size: 14px; }
.list__item__actions__item--context-menu-trigger:before {
display: none !important; }
.list.track-list .list__item {
cursor: pointer; }
.list.track-list .list__item .col.name {
width: 36%; }
.light-theme .list.track-list .list__item .col.name .flag {
background: #cecac4;
color: #FFFFFF; }
.list.track-list .list__item .col.artists, .list.track-list .list__item .col.album {
width: 25%; }
.list.track-list .list__item .col.duration {
width: 7%; }
.list.track-list .list__item .col.popularity {
width: 3%; }
:root .dragging .list.track-list .list__item.hover:before, .list.track-list .list__item.touch-drag-hover:before {
border-top-color: #32b5f2; }
:root .dragging .list.track-list .list__item--hover:before, .list.track-list .list__item.touch-drag-hover:before {
opacity: 1; }
.list.track-list .list__item.has-touch-drag-zone {
padding-left: 45px; }
.list.track-list .list__item.has-touch-drag-zone .drag-zone {
@ -4018,66 +4027,6 @@ input[type="submit"] {
margin-top: -8px;
pointer-events: none; }
.list.playlist-list .list__item {
cursor: pointer; }
.list.playlist-list .list__item .col.name {
width: 50%; }
.list.playlist-list .list__item .col.owner {
width: 20%; }
.list.playlist-list .list__item .col.source, .list.playlist-list .list__item .col.can_edit, .list.playlist-list .list__item .col.tracks_total, .list.playlist-list .list__item .col.popularity {
width: 10%; }
.list.album-list .list__item {
cursor: pointer; }
.list.album-list .list__item .col.name, .list.album-list .list__item .col.artists {
width: 30%; }
.list.album-list .list__item .col.added_at, .list.album-list .list__item .col.release_date {
width: 15%; }
.list.album-list .list__item .col.tracks_total {
width: 10%; }
.list.library-local-album-list .list__item {
cursor: pointer; }
.list.library-local-album-list .list__item .col.name, .list.library-local-album-list .list__item .col.artists {
width: 45%; }
.list.library-local-album-list .list__item .col.tracks_total {
width: 10%; }
.list.artist-list .list__item {
cursor: pointer; }
.list.artist-list .list__item .col.name {
width: 60%; }
.list.artist-list .list__item .col.followers_total {
width: 25%; }
.list.artist-list .list__item .col.popularity {
width: 10%; }
.list.queue-track-list {
cursor: pointer; }
.list.queue-track-list .list__item {
padding-right: 60px; }
.list.queue-track-list .list__item .col.name, .list.queue-track-list .list__item .col.artists, .list.queue-track-list .list__item .col.album {
width: 25%; }
.list.queue-track-list .list__item .col.added {
width: 20%; }
.list.queue-track-list .list__item .col.added .by {
padding-right: 0.25em; }
.list.queue-track-list .list__item .col.added .from:before {
content: '(';
display: inline-block; }
.list.queue-track-list .list__item .col.added .from:after {
content: ')';
display: inline-block; }
.list.queue-track-list .list__item .col.duration {
width: 5%; }
.list.queue-history-track-list .list__item {
cursor: pointer; }
.list.queue-history-track-list .list__item .col.name, .list.queue-history-track-list .list__item .col.artists, .list.queue-history-track-list .list__item .col.album {
width: 25%; }
.list.queue-history-track-list .list__item .col.played_at {
width: 15%; }
.list.related-artist-list {
padding-bottom: 20px;
cursor: pointer; }
@ -4112,96 +4061,29 @@ input[type="submit"] {
@media (max-width: 800px) {
.list__item {
padding: 12px !important; }
.list__item .source {
position: static;
float: none; }
.list__item .context-zone {
top: 14px; }
.list__item .col.name {
width: auto !important;
padding-right: 10%;
display: block;
float: none; }
.list__item .col.duration {
width: auto !important;
position: absolute;
right: 10px;
text-align: right;
z-index: 1; }
.list__item .col:not(.name):not(.duration):not(.album):not(.added) {
color: #a3a19f;
display: inline;
.list__item__details__item--source {
display: none; }
.list__item__details__item--added {
width: auto !important;
float: none !important;
word-wrap: break-word; }
.list__item .col.followers_total:after {
content: ' followers'; }
.list__item .col.tracks_total:after {
content: ' tracks'; }
.list__item .col.popularity {
padding-left: 14px; }
.list__item .col.popularity:before {
content: '\2022' !important;
display: inline-block;
margin-left: -8px;
padding-right: 6px; }
.list__item .col.popularity .popularity-bars {
margin: 0.1em 0 0 0; }
.list__item .col.album, .list__item .col.can_edit, .list__item .col.release_date {
display: none; }
.list__item.header {
padding: 0 !important; }
.list__item.header:before {
border-top: none; }
.list__item.header .liner {
padding-left: 0.25em; }
.list__item__details__item--added .by,
.list__item__details__item--added .empty {
display: none; }
.list.queue-track-list .list__item .artists {
padding-left: 0 !important; }
.list.queue-track-list .list__item .artists:before {
display: none !important; }
.list.queue-track-list .list__item .source {
display: none !important; }
.list.queue-track-list .list__item .added {
width: auto !important;
float: none !important;
padding-left: 0.25em; }
.list.queue-track-list .list__item .added .by,
.list.queue-track-list .list__item .added .empty {
display: none; }
.list.queue-track-list .list__item .added .from {
padding-left: 14px;
text-transform: capitalize; }
.list.queue-track-list .list__item .added .from:before {
content: '\2022' !important;
display: inline-block;
margin-left: -8px;
padding-right: 6px; }
.list.queue-track-list .list__item .added .from:after {
display: none !important; }
.list.queue-track-list .list__item .added .from .label {
display: none; }
.list.queue-history-track-list .list__item .source {
display: none !important; }
.list.track-list .list__item.can-sort {
padding-left: 40px !important; }
.list.album-list .list__item .col.added_at, .list.album-list .list__item .col.source {
display: none !important; }
.list.album-list .list__item .col.tracks_total {
padding-left: 14px; }
.list.album-list .list__item .col.tracks_total:before {
content: '\2022' !important;
display: inline-block;
margin-left: -8px;
padding-right: 6px; }
.list.playlist-list .list__item .col.can_edit, .list.playlist-list .list__item .col.source {
display: none !important; }
.list.playlist-list .list__item .col.tracks_total {
padding-left: 14px; }
.list.playlist-list .list__item .col.tracks_total:before {
content: '\2022' !important;
display: inline-block;
margin-left: -8px;
padding-right: 6px; } }
.list__item__details__item--added .from {
padding-left: 14px;
text-transform: capitalize; }
.list__item__details__item--added .from:before {
content: '\2022' !important;
display: inline-block;
margin-left: -8px;
padding-right: 6px; }
.list__item__details__item--added .from:after {
display: none !important; }
.list__item__details__item--added .from .label {
display: none; }
.list__item .context-zone {
top: 14px; } }
.loader {
height: 120px;

362
mopidy_iris/static/app.js
View File

@ -18710,118 +18710,14 @@ var TrackList = function (_React$Component) {
return array;
}
}
}, {
key: 'renderHeader',
value: function renderHeader() {
if (this.props.noheader) return null;
switch (this.props.context) {
case 'history':
return _react2.default.createElement(
'div',
{ className: 'list__item header track' },
_react2.default.createElement(
'div',
{ className: 'liner' },
_react2.default.createElement(
'span',
{ className: 'col name' },
'Name'
),
_react2.default.createElement(
'span',
{ className: 'col artists' },
'Artists'
),
_react2.default.createElement(
'span',
{ className: 'col album' },
'Album'
),
_react2.default.createElement(
'span',
{ className: 'col played_at' },
'Started playing'
)
)
);
break;
case 'queue':
return _react2.default.createElement(
'div',
{ className: 'list__item header track' },
_react2.default.createElement(
'div',
{ className: 'liner' },
_react2.default.createElement(
'span',
{ className: 'col name' },
'Name'
),
_react2.default.createElement(
'span',
{ className: 'col artists' },
'Artists'
),
_react2.default.createElement(
'span',
{ className: 'col album' },
'Album'
),
_react2.default.createElement(
'span',
{ className: 'col added' },
'Added by'
),
_react2.default.createElement(
'span',
{ className: 'col duration' },
'Duration'
)
)
);
break;
default:
return _react2.default.createElement(
'div',
{ className: 'list__item header track' },
_react2.default.createElement(
'div',
{ className: 'liner' },
_react2.default.createElement(
'span',
{ className: 'col name' },
'Name'
),
_react2.default.createElement(
'span',
{ className: 'col artists' },
'Artists'
),
_react2.default.createElement(
'span',
{ className: 'col album' },
'Album'
),
_react2.default.createElement(
'span',
{ className: 'col duration' },
'Duration'
),
_react2.default.createElement('span', { className: 'col popularity' })
)
);
}
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
if (!this.props.tracks || Object.prototype.toString.call(this.props.tracks) !== '[object Array]') return null;
if (!this.props.tracks || Object.prototype.toString.call(this.props.tracks) !== '[object Array]') {
return null;
}
var className = 'list track-list ' + this.props.context;
if (this.props.className) {
@ -18831,7 +18727,6 @@ var TrackList = function (_React$Component) {
return _react2.default.createElement(
'div',
{ className: className },
this.renderHeader(),
this.props.tracks.map(function (track, index) {
var track_key = _this2.buildTrackKey(track, index);
track.key = track_key;
@ -21961,28 +21856,6 @@ var List = function (_React$Component) {
this.props.handleContextMenu(e, item);
}
}
}, {
key: 'renderHeader',
value: function renderHeader() {
if (!this.props.columns || this.props.noheader) return null;
return _react2.default.createElement(
'div',
{ className: 'list__item header cf' },
_react2.default.createElement(
'div',
{ className: 'liner' },
this.props.columns.map(function (col, col_index) {
var className = 'col ' + col.name.replace('.', '_');
return _react2.default.createElement(
'div',
{ className: className, key: col_index },
col.label ? col.label : col.name
);
})
)
);
}
}, {
key: 'renderValue',
value: function renderValue(row, key_string) {
@ -22047,7 +21920,6 @@ var List = function (_React$Component) {
return _react2.default.createElement(
'div',
{ className: className },
this.renderHeader(),
this.props.rows.map(function (row, row_index) {
var class_name = 'list__item';
@ -26925,71 +26797,59 @@ var Track = function (_React$Component) {
}
var track = this.props.track;
var className = 'list__item track mouse-draggable mouse-selectable mouse-contextable';
if (this.props.selected) className += ' selected';
if (this.props.can_sort) className += ' can-sort';
if (track.type !== undefined) className += ' ' + track.type;
if (track.playing) className += ' playing';
if (this.state.hover) className += ' hover';
var className = 'list__item list__item--track mouse-draggable mouse-selectable mouse-contextable';
if (this.props.selected) className += ' list__item--selected';
if (this.props.can_sort) className += ' list__item--can-sort';
if (track.type !== undefined) className += ' list__item--' + track.type;
if (track.playing) className += ' list__item--playing';
if (this.state.hover) className += ' list__item--hover';
var track_details = [];
var track_actions = [];
if (track.artists) {
track_details.push(_react2.default.createElement(
'li',
{ className: 'list__item__details__item list__item__details__item--artists', key: 'artists' },
track.artists ? _react2.default.createElement(_ArtistSentence2.default, { artists: track.artists }) : '-'
));
}
var album = '-';
if (track.album) {
if (track.album.uri) {
album = _react2.default.createElement(
var album = _react2.default.createElement(
_URILink2.default,
{ type: 'album', uri: track.album.uri },
track.album.name
);
} else {
album = _react2.default.createElement(
var album = _react2.default.createElement(
'span',
null,
track.album.name
);
}
}
var track_columns = [];
var track_actions = [];
if (this.props.context == 'history') {
track_columns.push(_react2.default.createElement(
'span',
{ className: 'col name', key: 'name' },
track.name ? track.name : _react2.default.createElement(
'span',
{ className: 'mid_grey-text' },
track.uri
),
track.explicit ? _react2.default.createElement(
'span',
{ className: 'flag dark' },
'EXPLICIT'
) : null
));
track_columns.push(_react2.default.createElement(
'span',
{ className: 'col artists', key: 'artists' },
track.artists ? _react2.default.createElement(_ArtistSentence2.default, { artists: track.artists }) : '-'
));
track_columns.push(_react2.default.createElement(
'span',
{ className: 'col album', key: 'album' },
track_details.push(_react2.default.createElement(
'li',
{ className: 'list__item__details__item list__item__details__item--album', key: 'album' },
album
));
track_columns.push(_react2.default.createElement(
}
if (this.props.context == 'history') {
var track_extra_detail = _react2.default.createElement(
'span',
{ className: 'col played_at', key: 'played_at' },
{ className: 'list__item__extra-detail list__item__extra-detail--played_at' },
track.played_at ? _react2.default.createElement(
'span',
null,
_react2.default.createElement(_Dater2.default, { type: 'ago', data: track.played_at }),
' ago'
) : '-'
));
);
} else if (this.props.context == 'queue') {
if (track.added_from && track.added_by) {
var type = track.added_from ? helpers.uriType(track.added_from) : null;
@ -27026,13 +26886,14 @@ var Track = function (_React$Component) {
);
}
var added = _react2.default.createElement(
var track_extra_detail = _react2.default.createElement(
'span',
null,
{ className: 'list__item__actions__item list__item__actions__item--extra-detail list__item__actions__item--added' },
_react2.default.createElement(
'span',
{ className: 'by' },
track.added_by
track.added_by,
' '
),
_react2.default.createElement(
'span',
@ -27046,114 +26907,38 @@ var Track = function (_React$Component) {
)
);
} else if (track.added_by) {
var added = _react2.default.createElement(
var track_extra_detail = _react2.default.createElement(
'span',
{ className: 'by' },
track.added_by
{ className: 'list__item__actions__item list__item__actions__item--extra-detail list__item__actions__item--added' },
_react2.default.createElement(
'span',
{ className: 'by' },
track.added_by
)
);
} else {
var added = _react2.default.createElement(
'span',
{ className: 'empty' },
'-'
);
}
track_columns.push(_react2.default.createElement(
'span',
{ className: 'col name', key: 'name' },
track.name ? track.name : _react2.default.createElement(
'span',
{ className: 'mid_grey-text' },
track.uri
),
track.explicit ? _react2.default.createElement(
'span',
{ className: 'flag dark' },
'EXPLICIT'
) : null
));
if (this.props.show_source_icon) {
track_columns.push(_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: helpers.sourceIcon(track.uri), className: 'source', key: 'source', fixedWidth: true }));
}
track_columns.push(_react2.default.createElement(
'span',
{ className: 'col artists', key: 'artists' },
track.artists ? _react2.default.createElement(_ArtistSentence2.default, { artists: track.artists }) : '-'
));
track_columns.push(_react2.default.createElement(
'span',
{ className: 'col album', key: 'album' },
album
));
track_columns.push(_react2.default.createElement(
'span',
{ className: 'col added', key: 'added' },
added
));
track_columns.push(_react2.default.createElement(
'span',
{ className: 'col duration', key: 'duration' },
track.duration ? _react2.default.createElement(_Dater2.default, { type: 'length', data: track.duration }) : null
));
} else {
track_columns.push(_react2.default.createElement(
'span',
{ className: 'col name', key: 'name' },
track.name ? track.name : _react2.default.createElement(
'span',
{ className: 'mid_grey-text' },
track.uri
),
track.explicit ? _react2.default.createElement(
'span',
{ className: 'flag dark' },
'EXPLICIT'
) : null
));
if (this.props.show_source_icon) {
track_columns.push(_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: helpers.sourceIcon(track.uri), className: 'source', key: 'source', fixedWidth: true }));
}
track_columns.push(_react2.default.createElement(
'span',
{ className: 'col artists', key: 'artists' },
track.artists ? _react2.default.createElement(_ArtistSentence2.default, { artists: track.artists }) : '-'
));
track_columns.push(_react2.default.createElement(
'span',
{ className: 'col album', key: 'album' },
album
));
track_columns.push(_react2.default.createElement(
'span',
{ className: 'col duration', key: 'duration' },
track.duration ? _react2.default.createElement(_Dater2.default, { type: 'length', data: track.duration }) : '-'
));
if (track.popularity !== undefined) {
track_columns.push(_react2.default.createElement(
'span',
{ className: 'col popularity', key: 'popularity' },
_react2.default.createElement(_Popularity2.default, { popularity: track.popularity })
));
}
}
track_actions.push(_react2.default.createElement(_ContextMenuTrigger2.default, { className: 'subtle', key: 'context', onTrigger: function onTrigger(e) {
return _this2.props.handleContextMenu(e);
} }));
if (this.props.show_source_icon) {
track_details.push(_react2.default.createElement(
'li',
{ className: 'list__item__details__item list__item__details__item--source', key: 'source' },
_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: helpers.sourceIcon(track.uri), fixedWidth: true })
));
}
// If we're touchable, and can sort this tracklist
var drag_zone = null;
if (helpers.isTouchDevice() && this.props.can_sort) {
className += " has-touch-drag-zone";
track_actions.push(_react2.default.createElement(
drag_zone = _react2.default.createElement(
'span',
{
className: 'drag-zone touch-draggable mouse-draggable',
className: 'list__item__actions__item list__item__actions__item--drag-zone drag-zone touch-draggable mouse-draggable',
key: 'drag-zone' },
_react2.default.createElement(_Icon2.default, { name: 'drag_indicator' })
));
);
}
return _react2.default.createElement(
@ -27190,8 +26975,43 @@ var Track = function (_React$Component) {
onTouchEnd: function onTouchEnd(e) {
return _this2.handleTouchEnd(e);
} },
track_actions,
track_columns
_react2.default.createElement(
'div',
{ className: 'list__item__actions' },
drag_zone,
track_extra_detail ? track_extra_detail : null,
_react2.default.createElement(
'div',
{ className: 'list__item__actions__item list__item__actions__item--duration' },
track.duration ? _react2.default.createElement(_Dater2.default, { type: 'length', data: track.duration }) : '-'
),
_react2.default.createElement(_ContextMenuTrigger2.default, { className: 'list__item__actions__item list__item__actions__item--context-menu-trigger subtle', key: 'context', onTrigger: function onTrigger(e) {
return _this2.props.handleContextMenu(e);
} })
),
_react2.default.createElement(
'div',
{ className: 'list__item__content' },
_react2.default.createElement(
'div',
{ className: 'list__item__name' },
track.name ? track.name : _react2.default.createElement(
'span',
{ className: 'mid_grey-text' },
track.uri
),
track.explicit ? _react2.default.createElement(
'span',
{ className: 'flag dark' },
'EXPLICIT'
) : null
),
_react2.default.createElement(
'ul',
{ className: 'list__item__details' },
track_details
)
)
)
);
}

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -98,7 +98,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1541447978";
var build = "1541563199";
var version = "3.29.2";
// Construct the script tag

18
src/js/components/List.js
View File

@ -45,23 +45,6 @@ class List extends React.Component{
}
}
renderHeader(){
if (!this.props.columns || this.props.noheader) return null
return (
<div className="list__item header cf">
<div className="liner">
{
this.props.columns.map((col, col_index) => {
var className = 'col '+col.name.replace('.','_')
return <div className={className} key={col_index}>{ col.label ? col.label : col.name }</div>
})
}
</div>
</div>
)
}
renderValue(row, key_string){
var key = key_string.split('.')
var value = row
@ -95,7 +78,6 @@ class List extends React.Component{
return (
<div className={className}>
{ this.renderHeader() }
{
this.props.rows.map((row, row_index) => {

183
src/js/components/Track.js
View File

@ -182,51 +182,47 @@ export default class Track extends React.Component{
}
var track = this.props.track;
var className = 'list__item track mouse-draggable mouse-selectable mouse-contextable';
if (this.props.selected) className += ' selected';
if (this.props.can_sort) className += ' can-sort';
if (track.type !== undefined) className += ' '+track.type;
if (track.playing) className += ' playing';
if (this.state.hover) className += ' hover';
var album = '-';
if (track.album){
if (track.album.uri){
album = <URILink type="album" uri={track.album.uri}>{track.album.name}</URILink>;
} else {
album = <span>{track.album.name}</span>;
}
}
var className = 'list__item list__item--track mouse-draggable mouse-selectable mouse-contextable';
if (this.props.selected) className += ' list__item--selected';
if (this.props.can_sort) className += ' list__item--can-sort';
if (track.type !== undefined) className += ' list__item--'+track.type;
if (track.playing) className += ' list__item--playing';
if (this.state.hover) className += ' list__item--hover';
let track_columns = [];
let track_details = [];
let track_actions = [];
if (this.props.context == 'history'){
track_columns.push(
<span className="col name" key="name">
{track.name ? track.name : <span className="mid_grey-text">{track.uri}</span>}
{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
</span>
)
track_columns.push(
<span className="col artists" key="artists">
if (track.artists){
track_details.push(
<li className="list__item__details__item list__item__details__item--artists" key="artists">
{track.artists ? <ArtistSentence artists={track.artists} /> : '-'}
</span>
</li>
)
track_columns.push(
<span className="col album" key="album">
}
if (track.album){
if (track.album.uri){
var album = <URILink type="album" uri={track.album.uri}>{track.album.name}</URILink>;
} else {
var album = <span>{track.album.name}</span>;
}
track_details.push(
<li className="list__item__details__item list__item__details__item--album" key="album">
{album}
</span>
</li>
)
track_columns.push(
<span className="col played_at" key="played_at">
}
if (this.props.context == 'history'){
var track_extra_detail = (
<span className="list__item__extra-detail list__item__extra-detail--played_at">
{track.played_at ? <span><Dater type="ago" data={track.played_at} /> ago</span> : '-'}
</span>
)
} else if (this.props.context == 'queue'){
if (track.added_from && track.added_by){
var type = (track.added_from ? helpers.uriType(track.added_from) : null);
@ -247,99 +243,45 @@ export default class Track extends React.Component{
var link = <URILink type={type} uri={track.added_from}>{type}</URILink>;
}
var added = <span><span className="by">{track.added_by}</span><span className="mid_grey-text from"><span className="label">from </span>{link}</span></span>
var track_extra_detail = (
<span className="list__item__actions__item list__item__actions__item--extra-detail list__item__actions__item--added">
<span className="by">{track.added_by} </span>
<span className="mid_grey-text from">
<span className="label">from </span>
{link}
</span>
</span>
);
} else if (track.added_by){
var added = <span className="by">{track.added_by}</span>
} else {
var added = <span className="empty">-</span>
}
track_columns.push(
<span className="col name" key="name">
{track.name ? track.name : <span className="mid_grey-text">{track.uri}</span>}
{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
</span>
)
if (this.props.show_source_icon){
track_columns.push(
<Icon type="fontawesome" name={helpers.sourceIcon(track.uri)} className="source" key="source" fixedWidth />
)
}
track_columns.push(
<span className="col artists" key="artists">
{track.artists ? <ArtistSentence artists={track.artists} /> : '-'}
</span>
)
track_columns.push(
<span className="col album" key="album">
{album}
</span>
)
track_columns.push(
<span className="col added" key="added">
{added}
</span>
)
track_columns.push(
<span className="col duration" key="duration">
{track.duration ? <Dater type="length" data={track.duration} /> : null}
</span>
)
} else {
track_columns.push(
<span className="col name" key="name">
{track.name ? track.name : <span className="mid_grey-text">{track.uri}</span>}
{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
</span>
)
if (this.props.show_source_icon){
track_columns.push(
<Icon type="fontawesome" name={helpers.sourceIcon(track.uri)} className="source" key="source" fixedWidth />
)
}
track_columns.push(
<span className="col artists" key="artists">
{track.artists ? <ArtistSentence artists={track.artists} /> : '-'}
</span>
)
track_columns.push(
<span className="col album" key="album">
{album}
</span>
)
track_columns.push(
<span className="col duration" key="duration">
{track.duration ? <Dater type="length" data={track.duration} /> : '-'}
</span>
)
if (track.popularity !== undefined){
track_columns.push(
<span className="col popularity" key="popularity">
<Popularity popularity={track.popularity} />
var track_extra_detail = (
<span className="list__item__actions__item list__item__actions__item--extra-detail list__item__actions__item--added">
<span className="by">{track.added_by}</span>
</span>
)
);
}
}
track_actions.push(
<ContextMenuTrigger className="subtle" key="context" onTrigger={e => this.props.handleContextMenu(e)} />
)
if (this.props.show_source_icon){
track_details.push(
<li className="list__item__details__item list__item__details__item--source" key="source">
<Icon type="fontawesome" name={helpers.sourceIcon(track.uri)} fixedWidth />
</li>
)
}
// If we're touchable, and can sort this tracklist
var drag_zone = null;
if (helpers.isTouchDevice() && this.props.can_sort){
className += " has-touch-drag-zone"
track_actions.push(
drag_zone = (
<span
className="drag-zone touch-draggable mouse-draggable"
className="list__item__actions__item list__item__actions__item--drag-zone drag-zone touch-draggable mouse-draggable"
key="drag-zone">
<Icon name="drag_indicator" />
</span>
)
);
}
return (
@ -355,8 +297,23 @@ export default class Track extends React.Component{
onContextMenu={e => this.props.handleContextMenu(e)}
onTouchStart={e => this.handleTouchStart(e)}
onTouchEnd={e => this.handleTouchEnd(e)}>
{track_actions}
{track_columns}
<div className="list__item__actions">
{drag_zone}
{track_extra_detail ? track_extra_detail : null}
<div className="list__item__actions__item list__item__actions__item--duration">
{track.duration ? <Dater type="length" data={track.duration} /> : '-'}
</div>
<ContextMenuTrigger className="list__item__actions__item list__item__actions__item--context-menu-trigger subtle" key="context" onTrigger={e => this.props.handleContextMenu(e)} />
</div>
<div className="list__item__content">
<div className="list__item__name">
{track.name ? track.name : <span className="mid_grey-text">{track.uri}</span>}
{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
</div>
<ul className="list__item__details">
{track_details}
</ul>
</div>
</div>
</ErrorBoundary>
);

51
src/js/components/TrackList.js
View File

@ -383,55 +383,11 @@ class TrackList extends React.Component{
}
}
renderHeader(){
if (this.props.noheader ) return null
switch (this.props.context){
case 'history':
return (
<div className="list__item header track">
<div className="liner">
<span className="col name">Name</span>
<span className="col artists">Artists</span>
<span className="col album">Album</span>
<span className="col played_at">Started playing</span>
</div>
</div>
)
break
case 'queue':
return (
<div className="list__item header track">
<div className="liner">
<span className="col name">Name</span>
<span className="col artists">Artists</span>
<span className="col album">Album</span>
<span className="col added">Added by</span>
<span className="col duration">Duration</span>
</div>
</div>
)
break
default:
return (
<div className="list__item header track">
<div className="liner">
<span className="col name">Name</span>
<span className="col artists">Artists</span>
<span className="col album">Album</span>
<span className="col duration">Duration</span>
<span className="col popularity"></span>
</div>
</div>
)
}
}
render(){
if (!this.props.tracks || Object.prototype.toString.call(this.props.tracks) !== '[object Array]' ) return null
if (!this.props.tracks || Object.prototype.toString.call(this.props.tracks) !== '[object Array]' ){
return null;
}
var className = 'list track-list '+this.props.context
if (this.props.className){
@ -440,7 +396,6 @@ class TrackList extends React.Component{
return (
<div className={className}>
{ this.renderHeader() }
{
this.props.tracks.map(
(track, index) => {

436
src/scss/components/_lists.scss
View File

@ -12,23 +12,28 @@
display: block;
position: relative;
margin: 0 -10px 0 -10px;
padding: 14px 30px 13px 10px;
padding: 0 10px;
border-radius: 3px;
&:not(.no-click){
cursor: pointer;
}
&:before {
pointer-events: none;
content: '';
display: block;
position: absolute;
top: 0;
top: -5px;
left: 0;
bottom: 0;
right: 0;
border-top: 3px solid transparent;
border-bottom: 1px solid rgba(125,125,125,0.15);
height: 3px;
background: colour(blue);
opacity: 0;
}
:root .notouch:not(.dragging) &:not(.header):not(.no-click).hover {
:root .notouch:not(.dragging) &:not(.no-click).list__item--hover {
background: rgba(255,255,255,0.03);
cursor: pointer;
@ -37,14 +42,6 @@
}
}
&.selected {
background: rgba(125,125,125,0.15) !important;
}
&.playing {
color: colour(turquoise);
}
.select-zone,
.drag-zone {
display: none;
@ -54,18 +51,6 @@
}
}
.context-menu-trigger {
position: absolute;
top: 0;
right: 0;
font-size: 14px;
z-index: 2;
&:before {
display: none !important;
}
}
.icon.source {
color: colour(mid_grey);
position: absolute;
@ -73,13 +58,6 @@
right: 40px;
}
&.header {
font-size: 10px;
color: colour(grey);
text-transform: uppercase;
padding-bottom: 2px;
}
&.field {
padding: 0 !important;
@ -94,37 +72,76 @@
.uri-placeholder {
word-break: break-all;
}
&--selected {
background: rgba(125,125,125,0.15) !important;
}
&--playing {
.list__item {
&__name {
color: colour(turquoise);
}
}
}
&__content {
padding: 14px 0;
}
&__name {
padding-bottom: 2px;
.light-theme & .flag {
background: colour(light_grey);
color: colour(white);
}
}
&__details {
padding: 0;
margin: 0;
opacity: 0.5;
&__item {
display: inline-block;
&:not(:first-child) {
@include bullet();
}
}
}
&__actions {
float: right;
padding-top: 14px;
&__item {
padding: 10px 0 0 14px;
display: inline-block;
&--context-menu-trigger {
font-size: 14px;
&:before {
display: none !important;
}
}
&--added {
}
}
}
}
&.track-list {
.list__item {
cursor: pointer;
.col {
&.name {
width: 36%;
.light-theme & .flag {
background: colour(light_grey);
color: colour(white);
}
}
&.artists,
&.album {
width: 25%;
}
&.duration {
width: 7%;
}
&.popularity {
width: 3%;
}
}
:root .dragging &.hover,
:root .dragging &--hover,
&.touch-drag-hover {
&:before {
border-top-color: colour(blue);
opacity: 1;
}
}
@ -153,134 +170,6 @@
}
}
&.playlist-list {
.list__item {
cursor: pointer;
.col {
&.name {
width: 50%;
}
&.owner {
width: 20%
}
&.source,
&.can_edit,
&.tracks_total,
&.popularity {
width: 10%;
}
}
}
}
&.album-list {
.list__item {
cursor: pointer;
.col {
&.name,
&.artists {
width: 30%;
}
&.added_at,
&.release_date {
width: 15%;
}
&.tracks_total {
width: 10%;
}
}
}
}
&.library-local-album-list {
.list__item {
cursor: pointer;
.col {
&.name,
&.artists {
width: 45%;
}
&.tracks_total {
width: 10%;
}
}
}
}
&.artist-list {
.list__item {
cursor: pointer;
.col {
&.name {
width: 60%;
}
&.followers_total {
width: 25%;
}
&.popularity {
width: 10%;
}
}
}
}
&.queue-track-list {
cursor: pointer;
.list__item {
padding-right: 60px;
.col {
&.name,
&.artists,
&.album {
width: 25%;
}
&.added {
width: 20%;
.by {
padding-right: 0.25em;
}
.from {
&:before {
content: '(';
display: inline-block;
}
&:after {
content: ')';
display: inline-block;
}
}
}
&.duration {
width: 5%;
}
}
}
}
&.queue-history-track-list {
.list__item {
cursor: pointer;
.col {
&.name,
&.artists,
&.album {
width: 25%;
}
&.played_at {
width: 15%;
}
}
}
}
&.related-artist-list {
padding-bottom: 20px;
cursor: pointer;
@ -326,161 +215,42 @@
&__item {
padding: 12px !important;
.source {
position: static;
float: none;
&__details {
&__item {
&--source {
display: none;
}
&--added {
width: auto !important;
float: none !important;
padding-left: 0.25em;
.by,
.empty {
display: none;
}
.from {
@include bullet();
text-transform: capitalize;
&:after {
display: none !important;
}
.label {
display: none;
}
}
}
}
}
.context-zone {
top: 14px;
}
.col {
&.name {
width: auto !important;
padding-right: 10%;
display: block;
float: none;
}
&.duration {
width: auto !important;
position: absolute;
right: 10px;
text-align: right;
z-index: 1;
}
&:not(.name):not(.duration):not(.album):not(.added){
color: colour(mid_grey);
display: inline;
width: auto !important;
float: none !important;
word-wrap: break-word;
}
&.followers_total:after {
content: ' followers';
}
&.tracks_total:after {
content: ' tracks';
}
&.popularity {
@include bullet();
.popularity {
&-bars {
margin: 0.1em 0 0 0;
}
}
}
&.album,
&.can_edit,
&.release_date {
display: none;
}
}
&.header {
padding: 0 !important;
&:before {
border-top: none;
}
.liner {
display: none;
}
}
}
&.queue-track-list {
.list__item {
.artists {
padding-left: 0 !important;
&:before {
display: none !important;
}
}
.source {
display: none !important;
}
.added {
width: auto !important;
float: none !important;
padding-left: 0.25em;
.by,
.empty {
display: none;
}
.from {
@include bullet();
text-transform: capitalize;
&:after {
display: none !important;
}
.label {
display: none;
}
}
}
}
}
&.queue-history-track-list {
.list__item {
.source {
display: none !important;
}
}
}
&.track-list {
.list__item {
&.can-sort {
padding-left: 40px !important;
}
}
}
&.album-list {
.list__item {
.col {
&.added_at,
&.source {
display: none !important;
}
&.tracks_total {
@include bullet();
}
}
}
}
&.playlist-list {
.list__item {
.col {
&.can_edit,
&.source {
display: none !important;
}
&.tracks_total {
@include bullet();
}
}
}
}
}
}