Track list to have leaner bindings for better performance and better hybrid devices
This commit is contained in:
James Barnsley
@ -4218,16 +4218,15 @@ aside {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0 -10px -1px -10px;
|
||||
padding: 14px 30px 13px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05); }
|
||||
.list .list-item .liner {
|
||||
padding: 14px 30px 13px 10px; }
|
||||
.list .list-item .liner::after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block; }
|
||||
.list .list-item::after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block; }
|
||||
.list .list-item.selected {
|
||||
background: rgba(255, 255, 255, 0.08) !important; }
|
||||
.list .list-item.selected .select-zone::after {
|
||||
@ -4238,6 +4237,9 @@ aside {
|
||||
.list .list-item .select-zone,
|
||||
.list .list-item .drag-zone {
|
||||
display: none; }
|
||||
.list .list-item .select-zone *,
|
||||
.list .list-item .drag-zone * {
|
||||
pointer-events: none; }
|
||||
.list .list-item .context-menu-trigger {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
@ -4270,6 +4272,8 @@ aside {
|
||||
position: relative;
|
||||
padding: 12px 10px 12px 20px;
|
||||
cursor: pointer; }
|
||||
.list .list-item .uri-placeholder {
|
||||
word-break: break-all; }
|
||||
|
||||
.list.track-list .list-item .col.name {
|
||||
width: 40%; }
|
||||
@ -4357,13 +4361,13 @@ aside {
|
||||
border-color: #08d58f;
|
||||
opacity: 1; }
|
||||
|
||||
.list.track-list.mini-zones .list-item.can-sort {
|
||||
padding-left: 60px !important; }
|
||||
.touch .list.track-list .list-item.can-sort {
|
||||
padding-left: 70px !important; }
|
||||
|
||||
.list.track-list.mini-zones .list-item:not(.can-sort) {
|
||||
padding-left: 35px !important; }
|
||||
.touch .list.track-list .list-item:not(.can-sort) {
|
||||
padding-left: 45px !important; }
|
||||
|
||||
.list.track-list.mini-zones .list-item .select-zone {
|
||||
.touch .list.track-list .list-item .select-zone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -4371,7 +4375,7 @@ aside {
|
||||
width: 34px;
|
||||
font-size: 8px;
|
||||
display: block; }
|
||||
.list.track-list.mini-zones .list-item .select-zone .fa {
|
||||
.touch .list.track-list .list-item .select-zone .fa {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 17px;
|
||||
@ -4379,7 +4383,7 @@ aside {
|
||||
pointer-events: none;
|
||||
color: #FFFFFF;
|
||||
z-index: 1; }
|
||||
.list.track-list.mini-zones .list-item .select-zone:after {
|
||||
.touch .list.track-list .list-item .select-zone:after {
|
||||
display: block;
|
||||
content: '';
|
||||
border: 1px solid #a3a19f;
|
||||
@ -4391,7 +4395,7 @@ aside {
|
||||
left: 14px;
|
||||
margin-top: -7px; }
|
||||
|
||||
.list.track-list.mini-zones .list-item .drag-zone {
|
||||
.touch .list.track-list .list-item .drag-zone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 34px;
|
||||
@ -4400,7 +4404,7 @@ aside {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
color: #a3a19f; }
|
||||
.list.track-list.mini-zones .list-item .drag-zone .fa {
|
||||
.touch .list.track-list .list-item .drag-zone .fa {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 6px;
|
||||
@ -4408,78 +4412,78 @@ aside {
|
||||
pointer-events: none; }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.list .list-item .liner {
|
||||
.list .list-item {
|
||||
padding: 12px !important; }
|
||||
.list .list-item .source {
|
||||
position: static;
|
||||
float: none; }
|
||||
.list .list-item .select-zone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 34px;
|
||||
font-size: 8px;
|
||||
display: block; }
|
||||
.list .list-item .select-zone .fa {
|
||||
.list .list-item .source {
|
||||
position: static;
|
||||
float: none; }
|
||||
.list .list-item .select-zone {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
left: 17px;
|
||||
pointer-events: none;
|
||||
color: #FFFFFF;
|
||||
z-index: 1; }
|
||||
.list .list-item .select-zone:after {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 34px;
|
||||
font-size: 8px;
|
||||
display: block; }
|
||||
.list .list-item .select-zone .fa {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
left: 17px;
|
||||
pointer-events: none;
|
||||
color: #FFFFFF;
|
||||
z-index: 1; }
|
||||
.list .list-item .select-zone:after {
|
||||
display: block;
|
||||
content: '';
|
||||
border: 1px solid #a3a19f;
|
||||
border-radius: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 14px; }
|
||||
.list .list-item .drag-zone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 34px;
|
||||
height: 100%;
|
||||
width: 34px;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
content: '';
|
||||
border: 1px solid #a3a19f;
|
||||
border-radius: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: #a3a19f; }
|
||||
.list .list-item .drag-zone .fa {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 6px;
|
||||
pointer-events: none; }
|
||||
.list .list-item .context-zone {
|
||||
top: 14px; }
|
||||
.list .list-item .col.name {
|
||||
width: auto !important;
|
||||
padding-right: 10%;
|
||||
display: block;
|
||||
float: none; }
|
||||
.list .list-item .col.duration {
|
||||
width: auto !important;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 14px; }
|
||||
.list .list-item .drag-zone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 34px;
|
||||
height: 100%;
|
||||
width: 34px;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
color: #a3a19f; }
|
||||
.list .list-item .drag-zone .fa {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 6px;
|
||||
pointer-events: none; }
|
||||
.list .list-item .context-zone {
|
||||
top: 14px; }
|
||||
.list .list-item .col.name {
|
||||
width: auto !important;
|
||||
padding-right: 10%;
|
||||
display: block;
|
||||
float: none; }
|
||||
.list .list-item .col.duration {
|
||||
width: auto !important;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
text-align: right; }
|
||||
.list .list-item .col:not(.name):not(.duration):not(.album) {
|
||||
color: #a3a19f;
|
||||
display: inline;
|
||||
width: auto !important;
|
||||
float: none !important;
|
||||
word-wrap: break-word; }
|
||||
.list .list-item .col.followers_total:after {
|
||||
content: ' followers'; }
|
||||
.list .list-item .col.tracks_total:after {
|
||||
content: ' tracks'; }
|
||||
.list .list-item .col.popularity:after {
|
||||
content: '% popularity'; }
|
||||
.list .list-item .col.album, .list .list-item .col.can_edit, .list .list-item .col.release_date {
|
||||
display: none; }
|
||||
.list .list-item.header {
|
||||
display: none; }
|
||||
right: 10px;
|
||||
text-align: right; }
|
||||
.list .list-item .col:not(.name):not(.duration):not(.album) {
|
||||
color: #a3a19f;
|
||||
display: inline;
|
||||
width: auto !important;
|
||||
float: none !important;
|
||||
word-wrap: break-word; }
|
||||
.list .list-item .col.followers_total:after {
|
||||
content: ' followers'; }
|
||||
.list .list-item .col.tracks_total:after {
|
||||
content: ' tracks'; }
|
||||
.list .list-item .col.popularity:after {
|
||||
content: '% popularity'; }
|
||||
.list .list-item .col.album, .list .list-item .col.can_edit, .list .list-item .col.release_date {
|
||||
display: none; }
|
||||
.list .list-item.header {
|
||||
display: none; }
|
||||
.list.queue-track-list .list-item .artists {
|
||||
padding-left: 0 !important; }
|
||||
.list.queue-track-list .list-item .artists:before {
|
||||
|
||||
@ -2234,7 +2234,7 @@ function getSearchResults(type, query) {
|
||||
dispatch({
|
||||
type: 'SPOTIFY_SEARCH_RESULTS_LOADED',
|
||||
context: 'tracks',
|
||||
results: response.tracks.items,
|
||||
results: helpers.formatTracks(response.tracks.items),
|
||||
more: response.tracks.next
|
||||
});
|
||||
}
|
||||
@ -18584,7 +18584,7 @@ var ContextMenuTrigger = function (_React$Component) {
|
||||
value: function render() {
|
||||
var _this2 = this;
|
||||
|
||||
var className = 'context-menu-trigger';
|
||||
var className = 'context-menu-trigger mouse-contextable touch-contextable';
|
||||
if (this.props.className) {
|
||||
className += ' ' + this.props.className;
|
||||
}
|
||||
@ -23603,26 +23603,23 @@ var List = function (_React$Component) {
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ className: class_name, key: row_index },
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{
|
||||
className: 'liner',
|
||||
onClick: function onClick(e) {
|
||||
return _this2.handleClick(e, row.uri);
|
||||
},
|
||||
onContextMenu: function onContextMenu(e) {
|
||||
return _this2.handleContextMenu(e, row);
|
||||
} },
|
||||
_this2.props.columns.map(function (col, col_index) {
|
||||
var className = 'col ' + col.name.replace('.', '_');
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ className: className, key: col_index },
|
||||
_this2.renderValue(row, col.name)
|
||||
);
|
||||
})
|
||||
),
|
||||
{
|
||||
className: class_name,
|
||||
key: row_index,
|
||||
onClick: function onClick(e) {
|
||||
return _this2.handleClick(e, row.uri);
|
||||
},
|
||||
onContextMenu: function onContextMenu(e) {
|
||||
return _this2.handleContextMenu(e, row);
|
||||
} },
|
||||
_this2.props.columns.map(function (col, col_index) {
|
||||
var className = 'col ' + col.name.replace('.', '_');
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ className: className, key: col_index },
|
||||
_this2.renderValue(row, col.name)
|
||||
);
|
||||
}),
|
||||
_this2.props.nocontext ? null : _react2.default.createElement(_ContextMenuTrigger2.default, { onTrigger: function onTrigger(e) {
|
||||
return _this2.handleContextMenu(e, row);
|
||||
} })
|
||||
@ -33092,11 +33089,27 @@ var Track = function (_React$Component) {
|
||||
}
|
||||
|
||||
_createClass(Track, [{
|
||||
key: 'handleMouseEnter',
|
||||
value: function handleMouseEnter(e) {
|
||||
console.log("handleMouseEnter");
|
||||
this.setState({ hover: true });
|
||||
}
|
||||
}, {
|
||||
key: 'handleMouseLeave',
|
||||
value: function handleMouseLeave(e) {
|
||||
console.log("handleMouseLeave");
|
||||
this.setState({ hover: false });
|
||||
}
|
||||
}, {
|
||||
key: 'handleMouseDown',
|
||||
value: function handleMouseDown(e) {
|
||||
console.log("handleMouseDown");
|
||||
var target = $(e.target);
|
||||
|
||||
console.log(e.type);
|
||||
|
||||
// Clicked a nested link (ie Artist name), so no dragging required
|
||||
if (e.target.tagName.toLowerCase() === 'a') {
|
||||
if (target.is('a')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -33115,6 +33128,8 @@ var Track = function (_React$Component) {
|
||||
}, {
|
||||
key: 'handleMouseMove',
|
||||
value: function handleMouseMove(e) {
|
||||
console.log("handleMouseMove");
|
||||
var target = $(e.target);
|
||||
|
||||
// No drag handling means NO
|
||||
if (this.props.handleDrag === undefined) {
|
||||
@ -33138,6 +33153,8 @@ var Track = function (_React$Component) {
|
||||
}, {
|
||||
key: 'handleMouseUp',
|
||||
value: function handleMouseUp(e) {
|
||||
console.log("handleMouseUp");
|
||||
var target = $(e.target);
|
||||
|
||||
// Only listen for left clicks
|
||||
if (e.button === 0) {
|
||||
@ -33148,7 +33165,6 @@ var Track = function (_React$Component) {
|
||||
this.props.handleDrop(e);
|
||||
}
|
||||
} else {
|
||||
var target = $(e.target);
|
||||
if (!target.is('a') && target.closest('a').length <= 0) {
|
||||
this.props.handleSelection(e);
|
||||
this.start_position = false;
|
||||
@ -33161,20 +33177,48 @@ var Track = function (_React$Component) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'handleDoubleClick',
|
||||
value: function handleDoubleClick(e) {
|
||||
console.log("handleDoubleClick");
|
||||
var target = $(e.target);
|
||||
}
|
||||
}, {
|
||||
key: 'handleTouchStart',
|
||||
value: function handleTouchStart(e) {
|
||||
console.log("handleTouchStart");
|
||||
e.preventDefault();
|
||||
var target = $(e.target);
|
||||
|
||||
// Clicked a nested link (ie Artist name), so no dragging required
|
||||
if (e.target.tagName.toLowerCase() === 'a') {
|
||||
// Touch-drag zone
|
||||
if (target.hasClass('drag-zone')) {
|
||||
this.props.handleTouchDrag(e);
|
||||
|
||||
// Select zone
|
||||
} else if (target.hasClass('select-zone')) {
|
||||
this.props.handleSelection(e);
|
||||
|
||||
// Clicked a nested link (ie Artist name), so no dragging required
|
||||
} else if (target.is('a')) {
|
||||
return false;
|
||||
|
||||
// Touch contextable
|
||||
} else if (target.hasClass('touch-contextable')) {
|
||||
this.props.handleContextMenu(e);
|
||||
}
|
||||
|
||||
this.props.handleTouchDrag(e);
|
||||
return false;
|
||||
}
|
||||
}, {
|
||||
key: 'handleTouchEnd',
|
||||
value: function handleTouchEnd(e) {
|
||||
console.log("handleTouchEnd");
|
||||
e.preventDefault();
|
||||
}
|
||||
}, {
|
||||
key: 'handleContextMenu',
|
||||
value: function handleContextMenu(e) {
|
||||
console.log("handleContextMenu");
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.cancelBubble = true;
|
||||
@ -33190,7 +33234,7 @@ var Track = function (_React$Component) {
|
||||
}
|
||||
|
||||
var track = this.props.track;
|
||||
var className = 'list-item 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;
|
||||
@ -33224,7 +33268,7 @@ var Track = function (_React$Component) {
|
||||
{ className: 'col name', key: 'name' },
|
||||
track.name ? track.name : _react2.default.createElement(
|
||||
'span',
|
||||
{ className: 'grey-text' },
|
||||
{ className: 'uri-placeholder grey-text' },
|
||||
track.uri
|
||||
)
|
||||
));
|
||||
@ -33348,7 +33392,7 @@ var Track = function (_React$Component) {
|
||||
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
|
||||
track.duration ? _react2.default.createElement(_Dater2.default, { type: 'length', data: track.duration }) : '-'
|
||||
));
|
||||
}
|
||||
|
||||
@ -33363,11 +33407,8 @@ var Track = function (_React$Component) {
|
||||
track_actions.push(_react2.default.createElement(
|
||||
'span',
|
||||
{
|
||||
className: 'select-zone',
|
||||
key: 'select-zone',
|
||||
onClick: function onClick(e) {
|
||||
return _this2.props.handleSelection(e);
|
||||
} },
|
||||
className: 'select-zone touch-selectable mouse-selectable',
|
||||
key: 'select-zone' },
|
||||
this.props.selected ? _react2.default.createElement(_reactFontawesome2.default, { name: 'check', className: 'selected', fixedWidth: true }) : null
|
||||
));
|
||||
|
||||
@ -33375,62 +33416,49 @@ var Track = function (_React$Component) {
|
||||
track_actions.push(_react2.default.createElement(
|
||||
'span',
|
||||
{
|
||||
className: 'drag-zone',
|
||||
key: 'drag-zone',
|
||||
onTouchStart: function onTouchStart(e) {
|
||||
return _this2.handleTouchStart(e);
|
||||
} },
|
||||
className: 'drag-zone touch-draggable mouse-draggable',
|
||||
key: 'drag-zone' },
|
||||
_react2.default.createElement(_reactFontawesome2.default, { name: 'bars', fixedWidth: true })
|
||||
));
|
||||
}
|
||||
|
||||
// No events attached directly to the track. Instead events are attached to
|
||||
// the appropriate select/drag zone sub-elements
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ className: className },
|
||||
track_actions,
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: 'liner' },
|
||||
track_columns
|
||||
)
|
||||
);
|
||||
} else {
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{
|
||||
className: className,
|
||||
onMouseEnter: function onMouseEnter(e) {
|
||||
return _this2.setState({ hover: true });
|
||||
},
|
||||
onMouseLeave: function onMouseLeave(e) {
|
||||
return _this2.setState({ hover: false });
|
||||
} },
|
||||
track_actions,
|
||||
_react2.default.createElement(
|
||||
'div',
|
||||
{ className: 'liner'
|
||||
//onTouchEnd={e => this.handleTouchEnd(e)} // When touch dragging is dropped on me
|
||||
, onMouseDown: function onMouseDown(e) {
|
||||
return _this2.handleMouseDown(e);
|
||||
} // Click (or potentially a mouse drag start)
|
||||
, onMouseMove: function onMouseMove(e) {
|
||||
return _this2.handleMouseMove(e);
|
||||
} // Any movement over me
|
||||
, onMouseUp: function onMouseUp(e) {
|
||||
return _this2.handleMouseUp(e);
|
||||
} // End of click, or potentially a dragging drop event
|
||||
, onDoubleClick: function onDoubleClick(e) {
|
||||
return _this2.props.handleDoubleClick(e);
|
||||
},
|
||||
onContextMenu: function onContextMenu(e) {
|
||||
_this2.handleContextMenu(e);
|
||||
} },
|
||||
track_columns
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{
|
||||
className: className,
|
||||
onMouseEnter: function onMouseEnter(e) {
|
||||
return _this2.handleMouseEnter(e);
|
||||
},
|
||||
onMouseLeave: function onMouseLeave(e) {
|
||||
return _this2.handleMouseLeave(e);
|
||||
},
|
||||
onMouseDown: function onMouseDown(e) {
|
||||
return _this2.handleMouseDown(e);
|
||||
},
|
||||
onMouseUp: function onMouseUp(e) {
|
||||
return _this2.handleMouseUp(e);
|
||||
},
|
||||
onMouseMove: function onMouseMove(e) {
|
||||
return _this2.handleMouseMove(e);
|
||||
},
|
||||
|
||||
onDoubleClick: function onDoubleClick(e) {
|
||||
return _this2.handleDoubleClick(e);
|
||||
},
|
||||
onContextMenu: function onContextMenu(e) {
|
||||
return _this2.handleContextMenu(e);
|
||||
},
|
||||
|
||||
onTouchStart: function onTouchStart(e) {
|
||||
return _this2.handleTouchStart(e);
|
||||
},
|
||||
onTouchEnd: function onTouchEnd(e) {
|
||||
return _this2.handleTouchEnd(e);
|
||||
} },
|
||||
track_actions,
|
||||
track_columns
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
@ -52018,7 +52046,7 @@ var MopidyMiddleware = function () {
|
||||
store.dispatch({
|
||||
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
|
||||
context: action.data.context,
|
||||
results: tracks
|
||||
results: helpers.formatTracks(tracks)
|
||||
});
|
||||
}
|
||||
continue_process();
|
||||
@ -52042,7 +52070,7 @@ var MopidyMiddleware = function () {
|
||||
store.dispatch({
|
||||
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
|
||||
context: 'tracks',
|
||||
results: tracks
|
||||
results: helpers.formatTracks(tracks)
|
||||
});
|
||||
}
|
||||
|
||||
@ -56046,7 +56074,7 @@ var SpotifyMiddleware = function () {
|
||||
store.dispatch({
|
||||
type: 'SPOTIFY_SEARCH_RESULTS_LOADED',
|
||||
context: 'tracks',
|
||||
results: action.data.tracks.items,
|
||||
results: helpers.formatTracks(action.data.tracks.items),
|
||||
more: action.data.tracks.next
|
||||
});
|
||||
break;
|
||||
@ -66644,6 +66672,18 @@ var Search = function (_React$Component) {
|
||||
alert('load more: ' + type);
|
||||
//this.props.spotifyActions.getURL(this.props['spotify_'+type+'_more'], 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_'+type.toUpperCase());
|
||||
}
|
||||
}, {
|
||||
key: 'setSort',
|
||||
value: function setSort(value) {
|
||||
var reverse = false;
|
||||
if (this.props.sort == value) reverse = !this.props.sort_reverse;
|
||||
|
||||
var data = {
|
||||
search_results_sort_reverse: reverse,
|
||||
search_results_sort: value
|
||||
};
|
||||
this.props.uiActions.set(data);
|
||||
}
|
||||
}, {
|
||||
key: 'renderResults',
|
||||
value: function renderResults() {
|
||||
@ -66658,6 +66698,7 @@ var Search = function (_React$Component) {
|
||||
if (this.props.spotify_search_results.artists) {
|
||||
artists = [].concat(_toConsumableArray(artists), _toConsumableArray(helpers.getIndexedRecords(this.props.artists, this.props.spotify_search_results.artists)));
|
||||
}
|
||||
artists = helpers.sortItems(artists, this.props.sort, this.props.sort_reverse);
|
||||
|
||||
var albums = [];
|
||||
if (this.props.mopidy_search_results.albums) {
|
||||
@ -66666,6 +66707,7 @@ var Search = function (_React$Component) {
|
||||
if (this.props.spotify_search_results.albums) {
|
||||
albums = [].concat(_toConsumableArray(albums), _toConsumableArray(helpers.getIndexedRecords(this.props.albums, this.props.spotify_search_results.albums)));
|
||||
}
|
||||
albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse);
|
||||
|
||||
var playlists = [];
|
||||
if (this.props.mopidy_search_results.playlists) {
|
||||
@ -66674,6 +66716,7 @@ var Search = function (_React$Component) {
|
||||
if (this.props.spotify_search_results.playlists) {
|
||||
playlists = [].concat(_toConsumableArray(playlists), _toConsumableArray(helpers.getIndexedRecords(this.props.playlists, this.props.spotify_search_results.playlists)));
|
||||
}
|
||||
playlists = helpers.sortItems(playlists, this.props.sort, this.props.sort_reverse);
|
||||
|
||||
var tracks = [];
|
||||
if (this.props.mopidy_search_results.tracks) {
|
||||
@ -66682,6 +66725,7 @@ var Search = function (_React$Component) {
|
||||
if (this.props.spotify_search_results.tracks) {
|
||||
tracks = [].concat(_toConsumableArray(tracks), _toConsumableArray(this.props.spotify_search_results.tracks));
|
||||
}
|
||||
tracks = helpers.sortItems(tracks, this.props.sort, this.props.sort_reverse);
|
||||
|
||||
switch (this.props.view) {
|
||||
|
||||
@ -66858,9 +66902,26 @@ var Search = function (_React$Component) {
|
||||
label: 'Tracks'
|
||||
}];
|
||||
|
||||
var sort_options = [{
|
||||
value: 'name',
|
||||
label: 'Name'
|
||||
}, {
|
||||
value: 'artists.name',
|
||||
label: 'Artist'
|
||||
}, {
|
||||
value: 'duration',
|
||||
label: 'Duration'
|
||||
}, {
|
||||
value: 'source',
|
||||
label: 'Source'
|
||||
}];
|
||||
|
||||
var options = _react2.default.createElement(
|
||||
'span',
|
||||
null,
|
||||
_react2.default.createElement(_DropdownField2.default, { icon: 'sort', name: 'Sort', value: this.props.sort, options: sort_options, reverse: this.props.sort_reverse, handleChange: function handleChange(val) {
|
||||
_this3.setSort(val);_this3.props.uiActions.hideContextMenu();
|
||||
} }),
|
||||
_react2.default.createElement(_DropdownField2.default, { icon: 'eye', name: 'View', value: this.props.view, options: view_options, handleChange: function handleChange(val) {
|
||||
_this3.props.uiActions.set({ search_view: val });_this3.props.uiActions.hideContextMenu();
|
||||
} }),
|
||||
@ -66902,7 +66963,9 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
|
||||
tracks: state.core.tracks ? state.core.tracks : [],
|
||||
search_uri_schemes: state.ui.search_uri_schemes ? state.ui.search_uri_schemes : [],
|
||||
mopidy_search_results: state.mopidy.search_results ? state.mopidy.search_results : {},
|
||||
spotify_search_results: state.spotify.search_results ? state.spotify.search_results : {}
|
||||
spotify_search_results: state.spotify.search_results ? state.spotify.search_results : {},
|
||||
sort: state.ui.search_results_sort ? state.ui.search_results_sort : 'name',
|
||||
sort_reverse: state.ui.search_results_sort_reverse ? true : false
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
170
mopidy_iris/static/app.min.css
vendored
170
mopidy_iris/static/app.min.css
vendored
@ -4218,16 +4218,15 @@ aside {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0 -10px -1px -10px;
|
||||
padding: 14px 30px 13px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05); }
|
||||
.list .list-item .liner {
|
||||
padding: 14px 30px 13px 10px; }
|
||||
.list .list-item .liner::after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block; }
|
||||
.list .list-item::after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block; }
|
||||
.list .list-item.selected {
|
||||
background: rgba(255, 255, 255, 0.08) !important; }
|
||||
.list .list-item.selected .select-zone::after {
|
||||
@ -4238,6 +4237,9 @@ aside {
|
||||
.list .list-item .select-zone,
|
||||
.list .list-item .drag-zone {
|
||||
display: none; }
|
||||
.list .list-item .select-zone *,
|
||||
.list .list-item .drag-zone * {
|
||||
pointer-events: none; }
|
||||
.list .list-item .context-menu-trigger {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
@ -4270,6 +4272,8 @@ aside {
|
||||
position: relative;
|
||||
padding: 12px 10px 12px 20px;
|
||||
cursor: pointer; }
|
||||
.list .list-item .uri-placeholder {
|
||||
word-break: break-all; }
|
||||
|
||||
.list.track-list .list-item .col.name {
|
||||
width: 40%; }
|
||||
@ -4357,13 +4361,13 @@ aside {
|
||||
border-color: #08d58f;
|
||||
opacity: 1; }
|
||||
|
||||
.list.track-list.mini-zones .list-item.can-sort {
|
||||
padding-left: 60px !important; }
|
||||
.touch .list.track-list .list-item.can-sort {
|
||||
padding-left: 70px !important; }
|
||||
|
||||
.list.track-list.mini-zones .list-item:not(.can-sort) {
|
||||
padding-left: 35px !important; }
|
||||
.touch .list.track-list .list-item:not(.can-sort) {
|
||||
padding-left: 45px !important; }
|
||||
|
||||
.list.track-list.mini-zones .list-item .select-zone {
|
||||
.touch .list.track-list .list-item .select-zone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -4371,7 +4375,7 @@ aside {
|
||||
width: 34px;
|
||||
font-size: 8px;
|
||||
display: block; }
|
||||
.list.track-list.mini-zones .list-item .select-zone .fa {
|
||||
.touch .list.track-list .list-item .select-zone .fa {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 17px;
|
||||
@ -4379,7 +4383,7 @@ aside {
|
||||
pointer-events: none;
|
||||
color: #FFFFFF;
|
||||
z-index: 1; }
|
||||
.list.track-list.mini-zones .list-item .select-zone:after {
|
||||
.touch .list.track-list .list-item .select-zone:after {
|
||||
display: block;
|
||||
content: '';
|
||||
border: 1px solid #a3a19f;
|
||||
@ -4391,7 +4395,7 @@ aside {
|
||||
left: 14px;
|
||||
margin-top: -7px; }
|
||||
|
||||
.list.track-list.mini-zones .list-item .drag-zone {
|
||||
.touch .list.track-list .list-item .drag-zone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 34px;
|
||||
@ -4400,7 +4404,7 @@ aside {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
color: #a3a19f; }
|
||||
.list.track-list.mini-zones .list-item .drag-zone .fa {
|
||||
.touch .list.track-list .list-item .drag-zone .fa {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 6px;
|
||||
@ -4408,78 +4412,78 @@ aside {
|
||||
pointer-events: none; }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.list .list-item .liner {
|
||||
.list .list-item {
|
||||
padding: 12px !important; }
|
||||
.list .list-item .source {
|
||||
position: static;
|
||||
float: none; }
|
||||
.list .list-item .select-zone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 34px;
|
||||
font-size: 8px;
|
||||
display: block; }
|
||||
.list .list-item .select-zone .fa {
|
||||
.list .list-item .source {
|
||||
position: static;
|
||||
float: none; }
|
||||
.list .list-item .select-zone {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
left: 17px;
|
||||
pointer-events: none;
|
||||
color: #FFFFFF;
|
||||
z-index: 1; }
|
||||
.list .list-item .select-zone:after {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 34px;
|
||||
font-size: 8px;
|
||||
display: block; }
|
||||
.list .list-item .select-zone .fa {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
left: 17px;
|
||||
pointer-events: none;
|
||||
color: #FFFFFF;
|
||||
z-index: 1; }
|
||||
.list .list-item .select-zone:after {
|
||||
display: block;
|
||||
content: '';
|
||||
border: 1px solid #a3a19f;
|
||||
border-radius: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 14px; }
|
||||
.list .list-item .drag-zone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 34px;
|
||||
height: 100%;
|
||||
width: 34px;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
content: '';
|
||||
border: 1px solid #a3a19f;
|
||||
border-radius: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: #a3a19f; }
|
||||
.list .list-item .drag-zone .fa {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 6px;
|
||||
pointer-events: none; }
|
||||
.list .list-item .context-zone {
|
||||
top: 14px; }
|
||||
.list .list-item .col.name {
|
||||
width: auto !important;
|
||||
padding-right: 10%;
|
||||
display: block;
|
||||
float: none; }
|
||||
.list .list-item .col.duration {
|
||||
width: auto !important;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 14px; }
|
||||
.list .list-item .drag-zone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 34px;
|
||||
height: 100%;
|
||||
width: 34px;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
color: #a3a19f; }
|
||||
.list .list-item .drag-zone .fa {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 6px;
|
||||
pointer-events: none; }
|
||||
.list .list-item .context-zone {
|
||||
top: 14px; }
|
||||
.list .list-item .col.name {
|
||||
width: auto !important;
|
||||
padding-right: 10%;
|
||||
display: block;
|
||||
float: none; }
|
||||
.list .list-item .col.duration {
|
||||
width: auto !important;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
text-align: right; }
|
||||
.list .list-item .col:not(.name):not(.duration):not(.album) {
|
||||
color: #a3a19f;
|
||||
display: inline;
|
||||
width: auto !important;
|
||||
float: none !important;
|
||||
word-wrap: break-word; }
|
||||
.list .list-item .col.followers_total:after {
|
||||
content: ' followers'; }
|
||||
.list .list-item .col.tracks_total:after {
|
||||
content: ' tracks'; }
|
||||
.list .list-item .col.popularity:after {
|
||||
content: '% popularity'; }
|
||||
.list .list-item .col.album, .list .list-item .col.can_edit, .list .list-item .col.release_date {
|
||||
display: none; }
|
||||
.list .list-item.header {
|
||||
display: none; }
|
||||
right: 10px;
|
||||
text-align: right; }
|
||||
.list .list-item .col:not(.name):not(.duration):not(.album) {
|
||||
color: #a3a19f;
|
||||
display: inline;
|
||||
width: auto !important;
|
||||
float: none !important;
|
||||
word-wrap: break-word; }
|
||||
.list .list-item .col.followers_total:after {
|
||||
content: ' followers'; }
|
||||
.list .list-item .col.tracks_total:after {
|
||||
content: ' tracks'; }
|
||||
.list .list-item .col.popularity:after {
|
||||
content: '% popularity'; }
|
||||
.list .list-item .col.album, .list .list-item .col.can_edit, .list .list-item .col.release_date {
|
||||
display: none; }
|
||||
.list .list-item.header {
|
||||
display: none; }
|
||||
.list.queue-track-list .list-item .artists {
|
||||
padding-left: 0 !important; }
|
||||
.list.queue-track-list .list-item .artists:before {
|
||||
|
||||
8
mopidy_iris/static/app.min.js
vendored
8
mopidy_iris/static/app.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -38,7 +38,7 @@
|
||||
|
||||
// Release details
|
||||
// These are automatically injected to built HTML
|
||||
var build = "1512327748";
|
||||
var build = "1512444391";
|
||||
var version = "3.8.9";
|
||||
|
||||
// Construct the script tag
|
||||
|
||||
Reference in New Issue
Block a user