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

Adding queue specs (prototype), fixes #439

Browse Source
This commit is contained in:
James Barnsley
2019-09-27 16:23:33 +12:00
parent 99f7ee0dde
commit c0e8a64e37
8 changed files with 160 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
mopidy_iris/static/app.css
View File

@ -6950,6 +6950,8 @@ main .track-view {
border: 0 !important; }
.queue-view .current-track__added-from__thumbnail .thumbnail {
width: 30px; }
.queue-view .current-track__queue-details {
padding-top: 2rem; }
@media (max-width: 799px) {
.queue-view .current-track {
display: block;

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

File diff suppressed because one or more lines are too long

131
mopidy_iris/static/app.js
View File

@ -84936,20 +84936,23 @@ var Queue = function (_React$Component) {
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var added_from_uri = nextProps.added_from_uri;
var next_added_from_uri = nextProps.added_from_uri;
var _props = this.props,
coreActions = _props.coreActions,
added_from_uri = _props.added_from_uri;
if (added_from_uri && this.props.added_from_uri !== added_from_uri) {
var item_type = helpers.uriType(added_from_uri);
if (next_added_from_uri && next_added_from_uri !== added_from_uri) {
var item_type = helpers.uriType(next_added_from_uri);
switch (item_type) {
case 'album':
this.props.coreActions.loadAlbum(added_from_uri);
coreActions.loadAlbum(next_added_from_uri);
break;
case 'artist':
this.props.coreActions.loadArtist(added_from_uri);
coreActions.loadArtist(next_added_from_uri);
break;
case 'playlist':
this.props.coreActions.loadPlaylist(added_from_uri);
coreActions.loadPlaylist(next_added_from_uri);
break;
}
}
@ -84957,28 +84960,37 @@ var Queue = function (_React$Component) {
}, {
key: 'loadMore',
value: function loadMore() {
var new_limit = this.state.limit + this.state.per_page;
var _state = this.state,
limit = _state.limit,
per_page = _state.per_page;
var location = this.props.location;
var new_limit = limit + per_page;
this.setState({ limit: new_limit });
// Set our pagination to location state
var state = this.props.location && this.props.location.state ? this.props.location.state : {};
var state = tlocation && location.state ? location.state : {};
state.limit = new_limit;
this.props.history.replace({ state: state });
history.replace({ state: state });
}
}, {
key: 'removeTracks',
value: function removeTracks(track_indexes) {
var _props2 = this.props,
queue_tracks = _props2.queue_tracks,
mopidyActions = _props2.mopidyActions;
var tlids = [];
for (var i = 0; i < track_indexes.length; i++) {
var track = this.props.queue_tracks[track_indexes[i]];
var track = queue_tracks[track_indexes[i]];
if (track.tlid !== undefined) {
tlids.push(track.tlid);
}
}
if (tlids.length > 0) {
this.props.mopidyActions.removeTracks(tlids);
mopidyActions.removeTracks(tlids);
}
}
}, {
@ -84999,6 +85011,8 @@ var Queue = function (_React$Component) {
}, {
key: 'renderQueueStats',
value: function renderQueueStats() {
var current_tracklist = this.props.current_tracklist;
var total_time = 0;
return _react2.default.createElement(
@ -85007,12 +85021,10 @@ var Queue = function (_React$Component) {
_react2.default.createElement(
'span',
null,
this.props.current_tracklist.length,
' ',
'tracks'
current_tracklist.length + ' tracks'
),
'\xA0\xA0|\xA0\xA0',
this.props.current_tracklist.length > 0 ? _react2.default.createElement(_Dater2.default, { type: 'total-time', data: this.props.current_tracklist }) : _react2.default.createElement(
current_tracklist.length > 0 ? _react2.default.createElement(_Dater2.default, { type: 'total-time', data: current_tracklist }) : _react2.default.createElement(
'span',
null,
'0 mins'
@ -85022,37 +85034,44 @@ var Queue = function (_React$Component) {
}, {
key: 'renderArtwork',
value: function renderArtwork(image) {
var _props3 = this.props,
radio_enabled = _props3.radio_enabled,
current_track = _props3.current_track;
if (!image) {
return _react2.default.createElement(
'div',
{
className: 'current-track__artwork ' + (this.props.radio_enabled ? 'current-track__artwork--radio-enabled' : '')
className: 'current-track__artwork ' + (radio_enabled ? 'current-track__artwork--radio-enabled' : '')
},
this.props.radio_enabled ? _react2.default.createElement('img', {
radio_enabled ? _react2.default.createElement('img', {
className: 'radio-overlay',
src: '/iris/assets/radio-overlay.png'
src: '/iris/assets/radio-overlay.png',
alt: ''
}) : null,
_react2.default.createElement(_Thumbnail2.default, { glow: true, circle: this.props.radio_enabled })
_react2.default.createElement(_Thumbnail2.default, { glow: true, circle: radio_enabled })
);
}
var uri = null;
if (this.props.current_track.album && this.props.current_track.album.uri) {
uri = this.props.current_track.album.uri;
if (current_track.album && current_track.album.uri) {
uri = current_track.album.uri;
}
return _react2.default.createElement(
'div',
{
className: 'current-track__artwork ' + (this.props.radio_enabled ? 'current-track__artwork--radio-enabled' : '')
className: 'current-track__artwork ' + (radio_enabled ? 'current-track__artwork--radio-enabled' : '')
},
_react2.default.createElement(
_URILink2.default,
{ type: 'album', uri: uri },
this.props.radio_enabled ? _react2.default.createElement('img', {
radio_enabled ? _react2.default.createElement('img', {
className: 'radio-overlay',
src: '/iris/assets/radio-overlay.png'
src: '/iris/assets/radio-overlay.png',
alt: ''
}) : null,
_react2.default.createElement(_Thumbnail2.default, { glow: true, image: image, circle: this.props.radio_enabled })
_react2.default.createElement(_Thumbnail2.default, { glow: true, image: image, circle: radio_enabled })
)
);
}
@ -85083,7 +85102,7 @@ var Queue = function (_React$Component) {
_react2.default.createElement(_Thumbnail2.default, {
images: item.images,
size: 'small',
circle: item_type == 'artist'
circle: item_type === 'artist'
})
),
_react2.default.createElement(
@ -85103,12 +85122,13 @@ var Queue = function (_React$Component) {
value: function render() {
var _this2 = this;
var _props = this.props,
current_track = _props.current_track,
queue_tracks = _props.queue_tracks;
var _props4 = this.props,
current_track = _props4.current_track,
queue_tracks = _props4.queue_tracks;
var limit = this.state.limit;
var total_queue_tracks = queue_tracks.length;
var tracks = queue_tracks.slice(0, this.state.limit);
var tracks = queue_tracks.slice(0, limit);
var current_track_image = null;
if (current_track && this.props.current_track_uri) {
@ -85137,18 +85157,6 @@ var Queue = function (_React$Component) {
_react2.default.createElement(_Icon2.default, { name: 'history' }),
'History'
),
_react2.default.createElement(
'a',
{
className: 'button button--no-hover',
onClick: function onClick(e) {
_this2.props.mopidyActions.clearTracklist();
_this2.props.uiActions.hideContextMenu();
}
},
_react2.default.createElement(_Icon2.default, { name: 'delete_sweep' }),
'Clear'
),
_react2.default.createElement(
_Link2.default,
{ className: 'button button--no-hover', to: '/queue/add-uri' },
@ -85194,7 +85202,40 @@ var Queue = function (_React$Component) {
className: 'current-track__artists',
artists: current_track.artists
}) : _react2.default.createElement(_ArtistSentence2.default, { className: 'current-track__artists' }),
this.renderAddedFrom()
this.renderAddedFrom(),
_react2.default.createElement(
'div',
{ className: 'current-track__queue-details' },
_react2.default.createElement(
'ul',
{ className: 'details' },
_react2.default.createElement(
'li',
null,
queue_tracks.length + ' tracks'
),
_react2.default.createElement(
'li',
null,
_react2.default.createElement(_Dater2.default, { type: 'total-time', data: queue_tracks })
),
_react2.default.createElement(
'li',
null,
_react2.default.createElement(
'a',
{
onClick: function onClick(e) {
_this2.props.mopidyActions.clearTracklist();
_this2.props.uiActions.hideContextMenu();
}
},
_react2.default.createElement(_Icon2.default, { name: 'delete_sweep' }),
'Clear queue'
)
)
)
)
)
),
_react2.default.createElement(
@ -85220,8 +85261,8 @@ var Queue = function (_React$Component) {
})
),
_react2.default.createElement(_LazyLoadListener2.default, {
loadKey: total_queue_tracks > this.state.limit ? this.state.limit : total_queue_tracks,
showLoader: this.state.limit < total_queue_tracks,
loadKey: total_queue_tracks > limit ? limit : total_queue_tracks,
showLoader: limit < total_queue_tracks,
loadMore: function loadMore() {
return _this2.loadMore();
}

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

@ -100,7 +100,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1569459339";
var build = "1569534560";
var version = "3.40.0";
// Construct the script tag

10
src/js/components/Dater.js
View File

@ -11,7 +11,7 @@ const durationTime = (milliseconds = null) => {
if (!milliseconds) return null;
let string = '';
let total_hours; let total_minutes; let total_seconds; let minutes; let
let total_hours; let total_minutes; let total_seconds; let minutes; let
seconds;
// get total values for each
@ -46,7 +46,7 @@ const durationSentence = (milliseconds = null) => {
if (!milliseconds) return null;
const string = '';
let total_hours; let total_minutes; let total_seconds; let minutes; let
let total_hours; let total_minutes; let total_seconds; let minutes; let
seconds;
// get total values for each
@ -59,12 +59,12 @@ const durationSentence = (milliseconds = null) => {
if (total_seconds) return `${total_seconds} sec`;
};
export default memo((props) => {
export default memo((props) => {
if (!props.data) {
return null;
}
switch (props.type) {
switch (props.type) {
case 'total-time':
var duration = 0;
var tracks = props.data;
@ -106,7 +106,7 @@ export default memo((props) => {
} if (hours < 24) {
return `${hours} hours`;
}
return `${days} days`;
return `${days} days`;
default:
return null;
}

101
src/js/views/Queue.js
View File

@ -49,48 +49,52 @@ class Queue extends React.Component {
}
componentWillReceiveProps(nextProps) {
const { added_from_uri } = nextProps;
const { added_from_uri: next_added_from_uri } = nextProps;
const { coreActions, added_from_uri } = this.props;
if (added_from_uri && this.props.added_from_uri !== added_from_uri) {
const item_type = helpers.uriType(added_from_uri);
if (next_added_from_uri && next_added_from_uri !== added_from_uri) {
const item_type = helpers.uriType(next_added_from_uri);
switch (item_type) {
case 'album':
this.props.coreActions.loadAlbum(added_from_uri);
coreActions.loadAlbum(next_added_from_uri);
break;
case 'artist':
this.props.coreActions.loadArtist(added_from_uri);
coreActions.loadArtist(next_added_from_uri);
break;
case 'playlist':
this.props.coreActions.loadPlaylist(added_from_uri);
coreActions.loadPlaylist(next_added_from_uri);
break;
}
}
}
loadMore() {
const new_limit = this.state.limit + this.state.per_page;
const { limit, per_page } = this.state;
const { location } = this.props;
const new_limit = limit + per_page;
this.setState({ limit: new_limit });
// Set our pagination to location state
const state = this.props.location && this.props.location.state
? this.props.location.state
const state = tlocation && location.state
? location.state
: {};
state.limit = new_limit;
this.props.history.replace({ state });
history.replace({ state });
}
removeTracks(track_indexes) {
const { queue_tracks, mopidyActions } = this.props;
const tlids = [];
for (let i = 0; i < track_indexes.length; i++) {
const track = this.props.queue_tracks[track_indexes[i]];
const track = queue_tracks[track_indexes[i]];
if (track.tlid !== undefined) {
tlids.push(track.tlid);
}
}
if (tlids.length > 0) {
this.props.mopidyActions.removeTracks(tlids);
mopidyActions.removeTracks(tlids);
}
}
@ -107,18 +111,17 @@ class Queue extends React.Component {
}
renderQueueStats() {
const { current_tracklist } = this.props;
const total_time = 0;
return (
<div className="queue-stats mid_grey-text">
<span>
{this.props.current_tracklist.length}
{' '}
tracks
{`${current_tracklist.length} tracks`}
</span>
&nbsp;&nbsp;|&nbsp;&nbsp;
{this.props.current_tracklist.length > 0 ? (
<Dater type="total-time" data={this.props.current_tracklist} />
{current_tracklist.length > 0 ? (
<Dater type="total-time" data={current_tracklist} />
) : (
<span>0 mins</span>
)}
@ -127,46 +130,53 @@ tracks
}
renderArtwork(image) {
const {
radio_enabled,
current_track,
} = this.props;
if (!image) {
return (
<div
className={`current-track__artwork ${
this.props.radio_enabled
radio_enabled
? 'current-track__artwork--radio-enabled'
: ''
}`}
>
{this.props.radio_enabled ? (
{radio_enabled ? (
<img
className="radio-overlay"
src="/iris/assets/radio-overlay.png"
alt=""
/>
) : null}
<Thumbnail glow circle={this.props.radio_enabled} />
<Thumbnail glow circle={radio_enabled} />
</div>
);
}
let uri = null;
if (this.props.current_track.album && this.props.current_track.album.uri) {
uri = this.props.current_track.album.uri;
if (current_track.album && current_track.album.uri) {
uri = current_track.album.uri;
}
return (
<div
className={`current-track__artwork ${
this.props.radio_enabled
radio_enabled
? 'current-track__artwork--radio-enabled'
: ''
}`}
>
<URILink type="album" uri={uri}>
{this.props.radio_enabled ? (
{radio_enabled ? (
<img
className="radio-overlay"
src="/iris/assets/radio-overlay.png"
alt=""
/>
) : null}
<Thumbnail glow image={image} circle={this.props.radio_enabled} />
<Thumbnail glow image={image} circle={radio_enabled} />
</URILink>
</div>
);
@ -193,11 +203,11 @@ tracks
<Thumbnail
images={item.images}
size="small"
circle={item_type == 'artist'}
circle={item_type === 'artist'}
/>
</URILink>
<div className="current-track__added-from__text">
{`Playing from `}
{'Playing from '}
<URILink type={item_type} uri={item.uri}>
{item.name}
</URILink>
@ -208,8 +218,9 @@ tracks
render() {
const { current_track, queue_tracks } = this.props;
const { limit } = this.state;
const total_queue_tracks = queue_tracks.length;
const tracks = queue_tracks.slice(0, this.state.limit);
const tracks = queue_tracks.slice(0, limit);
let current_track_image = null;
if (current_track && this.props.current_track_uri) {
@ -233,16 +244,6 @@ tracks
<Icon name="history" />
History
</Link>
<a
className="button button--no-hover"
onClick={(e) => {
this.props.mopidyActions.clearTracklist();
this.props.uiActions.hideContextMenu();
}}
>
<Icon name="delete_sweep" />
Clear
</a>
<Link className="button button--no-hover" to="/queue/add-uri">
<Icon name="playlist_add" />
Add URI
@ -281,6 +282,24 @@ tracks
)}
{this.renderAddedFrom()}
<div className="current-track__queue-details">
<ul className="details">
<li>{`${queue_tracks.length} tracks`}</li>
<li><Dater type="total-time" data={queue_tracks} /></li>
<li>
<a
onClick={(e) => {
this.props.mopidyActions.clearTracklist();
this.props.uiActions.hideContextMenu();
}}
>
<Icon name="delete_sweep" />
Clear queue
</a>
</li>
</ul>
</div>
</div>
</div>
@ -299,11 +318,11 @@ tracks
<LazyLoadListener
loadKey={
total_queue_tracks > this.state.limit
? this.state.limit
total_queue_tracks > limit
? limit
: total_queue_tracks
}
showLoader={this.state.limit < total_queue_tracks}
showLoader={limit < total_queue_tracks}
loadMore={() => this.loadMore()}
/>
</div>

4
src/scss/views/_queue.scss
View File

@ -79,6 +79,10 @@
}
}
&__queue-details {
padding-top: 2rem;
}
@include responsive($bp_medium) {
display: block;
text-align: center;