Tracklist 'source' to contain all the meta we need for queue (avoids unnecessary remote lookups)
This commit is contained in:
@ -7,31 +7,16 @@ import {
|
||||
titleCase,
|
||||
uriType,
|
||||
} from '../util/helpers';
|
||||
import {
|
||||
makeItemSelector,
|
||||
makeLoadingSelector,
|
||||
} from '../util/selectors';
|
||||
import { loadUri } from '../services/core/actions';
|
||||
|
||||
export default ({
|
||||
by,
|
||||
uri,
|
||||
from,
|
||||
className = '',
|
||||
inline,
|
||||
}) => {
|
||||
if (!uri) return null;
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const from = useSelector(makeItemSelector(uri));
|
||||
const loading = useSelector(makeLoadingSelector([`(.*)${uri}(.*)`]));
|
||||
|
||||
useEffect(() => {
|
||||
if (uri && !from && !loading) {
|
||||
dispatch(loadUri(uri));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const type = from?.type || uriType(uri);
|
||||
if (!from) return null;
|
||||
const { uri, name } = from;
|
||||
const type = uriType(uri);
|
||||
let link = null;
|
||||
switch (type) {
|
||||
case 'discover':
|
||||
@ -44,7 +29,7 @@ export default ({
|
||||
|
||||
case 'browse':
|
||||
link = (
|
||||
<URILink type={from?.type} uri={uri}>
|
||||
<URILink type={type} uri={uri}>
|
||||
<I18n path="library.browse.title" />
|
||||
</URILink>
|
||||
);
|
||||
@ -52,7 +37,7 @@ export default ({
|
||||
|
||||
case 'search':
|
||||
link = (
|
||||
<URILink type={from?.type} uri={uri}>
|
||||
<URILink type={type} uri={uri}>
|
||||
<I18n path="search.title" />
|
||||
</URILink>
|
||||
);
|
||||
@ -67,7 +52,7 @@ export default ({
|
||||
break;
|
||||
|
||||
default:
|
||||
link = <URILink type={type} uri={uri}>{from?.name || titleCase(type)}</URILink>;
|
||||
link = <URILink type={type} uri={uri}>{name || titleCase(type)}</URILink>;
|
||||
}
|
||||
|
||||
if (inline) {
|
||||
|
||||
@ -334,12 +334,12 @@ class ContextMenu extends React.Component {
|
||||
},
|
||||
menu: {
|
||||
uris,
|
||||
tracklist_uri,
|
||||
source,
|
||||
} = {},
|
||||
} = this.props;
|
||||
|
||||
hideContextMenu();
|
||||
playURIs(uris, tracklist_uri);
|
||||
playURIs(uris, source);
|
||||
}
|
||||
|
||||
playPlaylist = () => {
|
||||
@ -420,12 +420,12 @@ class ContextMenu extends React.Component {
|
||||
},
|
||||
menu: {
|
||||
uris,
|
||||
tracklist_uri,
|
||||
source,
|
||||
} = {},
|
||||
} = this.props;
|
||||
|
||||
hideContextMenu();
|
||||
enqueueURIs(uris, tracklist_uri, play_next);
|
||||
enqueueURIs(uris, source, play_next);
|
||||
}
|
||||
|
||||
addTracksToPlaylist = (e, playlist_uri) => {
|
||||
|
||||
@ -76,7 +76,17 @@ const SearchResults = ({
|
||||
{type === 'artists' && <Grid items={results} show_source_icon mini={all} />}
|
||||
{type === 'albums' && <Grid items={results} show_source_icon mini={all} />}
|
||||
{type === 'playlists' && <Grid items={results} show_source_icon mini={all} />}
|
||||
{type === 'tracks' && <TrackList tracks={results} uri={`iris:search:${query.type}:${encodedTerm}`} show_source_icon />}
|
||||
{type === 'tracks' && (
|
||||
<TrackList
|
||||
source={{
|
||||
uri: `iris:search:${query.type}:${encodedTerm}`,
|
||||
name: 'Search results',
|
||||
type: 'search',
|
||||
}}
|
||||
tracks={results}
|
||||
show_source_icon
|
||||
/>
|
||||
)}
|
||||
{/* <LazyLoadListener enabled={this.props.artists_more && spotify_search_enabled} loadMore={loadMore} /> */}
|
||||
|
||||
{resultsCount > results.length && (
|
||||
|
||||
@ -35,7 +35,7 @@ const MiddleColumn = ({
|
||||
case 'queue': {
|
||||
content = (
|
||||
<AddedFrom
|
||||
uri={added_from}
|
||||
from={added_from}
|
||||
by={added_by}
|
||||
className="list__item__column__item list__item__column__item--added"
|
||||
/>
|
||||
|
||||
@ -11,7 +11,7 @@ import { SmartList } from './SmartList';
|
||||
|
||||
const TrackList = ({
|
||||
uri,
|
||||
track_context,
|
||||
source,
|
||||
className = '',
|
||||
show_source_icon,
|
||||
play_state,
|
||||
@ -113,7 +113,7 @@ const TrackList = ({
|
||||
|
||||
dragStart(
|
||||
e,
|
||||
track_context,
|
||||
source.context,
|
||||
uri,
|
||||
nextSelectedTracks,
|
||||
nextSelectedTracks_indexes,
|
||||
@ -223,8 +223,8 @@ const TrackList = ({
|
||||
|
||||
showContextMenu({
|
||||
e,
|
||||
context: (track_context ? `${track_context}-track` : 'track'),
|
||||
tracklist_uri: uri,
|
||||
context: (source.context ? `${source.context}-track` : 'track'),
|
||||
source,
|
||||
items: selected_tracks_digested,
|
||||
uris: selected_tracks_uris,
|
||||
indexes: selected_tracks_indexes,
|
||||
@ -318,7 +318,7 @@ const TrackList = ({
|
||||
key += `@@${track.tlid || 'none'}`;
|
||||
key += `@@${track.uri}`;
|
||||
key += `@@${uri || 'none'}`;
|
||||
key += `@@${track_context || 'none'}`;
|
||||
key += `@@${source.context || 'none'}`;
|
||||
return key;
|
||||
}
|
||||
|
||||
@ -373,7 +373,7 @@ const TrackList = ({
|
||||
|
||||
return (
|
||||
<SmartList
|
||||
className={`list list--tracks ${track_context} ${className}`}
|
||||
className={`list list--tracks ${source?.context} ${className}`}
|
||||
items={tracks}
|
||||
itemComponent={Track}
|
||||
itemProps={{
|
||||
@ -381,9 +381,9 @@ const TrackList = ({
|
||||
buildTrackKey,
|
||||
play_state,
|
||||
show_source_icon,
|
||||
track_context,
|
||||
track_context: source?.context,
|
||||
selected_tracks,
|
||||
can_sort: track_context === 'queue' || track_context === 'editable-playlist',
|
||||
can_sort: source.context === 'queue' || source.context === 'editable-playlist',
|
||||
mini_zones: slim_mode || isTouchDevice(),
|
||||
handleClick: onClick,
|
||||
handleDoubleClick: onDoubleClick,
|
||||
|
||||
@ -327,11 +327,11 @@ export function changeTrack(tlid) {
|
||||
* Playing assets
|
||||
* */
|
||||
|
||||
export function playURIs(uris = [], from_uri = null, shuffle = false) {
|
||||
export function playURIs(uris = [], from = null, shuffle = false) {
|
||||
return {
|
||||
type: 'MOPIDY_PLAY_URIS',
|
||||
uris,
|
||||
from_uri,
|
||||
from,
|
||||
shuffle,
|
||||
};
|
||||
}
|
||||
@ -351,11 +351,17 @@ export function playPlaylist(uri, shuffle = false) {
|
||||
};
|
||||
}
|
||||
|
||||
export function enqueueURIs(uris = [], from_uri = null, play_next = false, at_position = null, offset = 0) {
|
||||
export function enqueueURIs(
|
||||
uris = [],
|
||||
from = null,
|
||||
play_next = false,
|
||||
at_position = null,
|
||||
offset = 0,
|
||||
) {
|
||||
return {
|
||||
type: 'MOPIDY_ENQUEUE_URIS',
|
||||
uris,
|
||||
from_uri,
|
||||
from,
|
||||
at_position,
|
||||
play_next,
|
||||
offset,
|
||||
|
||||
@ -988,7 +988,7 @@ const MopidyMiddleware = (function () {
|
||||
.then(
|
||||
(response) => {
|
||||
const tlids = response.map((track) => track.tlid);
|
||||
store.dispatch(pusherActions.addQueueMetadata(tlids, action.from_uri));
|
||||
store.dispatch(pusherActions.addQueueMetadata(tlids, action.from));
|
||||
|
||||
// Re-run the batch checker in 100ms. This allows a small window for other server
|
||||
// requests before our next batch. A little crude but it means the server isn't
|
||||
@ -1030,7 +1030,7 @@ const MopidyMiddleware = (function () {
|
||||
}
|
||||
|
||||
case 'MOPIDY_PLAY_URIS':
|
||||
const { from_uri } = action;
|
||||
const { from } = action;
|
||||
let urisToPlay = Object.assign([], action.uris);
|
||||
|
||||
if (!urisToPlay || !urisToPlay.length) {
|
||||
@ -1072,7 +1072,7 @@ const MopidyMiddleware = (function () {
|
||||
for (let i = 0; i < response.length; i++) {
|
||||
tlids.push(response[i].tlid);
|
||||
}
|
||||
store.dispatch(pusherActions.addQueueMetadata(tlids, from_uri));
|
||||
store.dispatch(pusherActions.addQueueMetadata(tlids, from));
|
||||
} else {
|
||||
store.dispatch(coreActions.handleException(
|
||||
'Mopidy: Failed to add some tracks',
|
||||
@ -1089,7 +1089,7 @@ const MopidyMiddleware = (function () {
|
||||
// this means our UI feels snappier as the first track shows up quickly
|
||||
setTimeout(
|
||||
() => {
|
||||
store.dispatch(mopidyActions.enqueueURIs(urisToPlay, from_uri, null, 1));
|
||||
store.dispatch(mopidyActions.enqueueURIs(urisToPlay, from, null, 1));
|
||||
},
|
||||
100,
|
||||
);
|
||||
|
||||
@ -164,11 +164,11 @@ export function toggleSidebar(new_state = 'toggle') {
|
||||
return action;
|
||||
}
|
||||
|
||||
export function dragStart(e, context, from_uri = null, victims, victims_indexes = null) {
|
||||
export function dragStart(e, context, source = null, victims, victims_indexes = null) {
|
||||
return {
|
||||
type: 'DRAG_START',
|
||||
context,
|
||||
from_uri,
|
||||
source,
|
||||
victims,
|
||||
victims_indexes,
|
||||
start_x: e.clientX,
|
||||
|
||||
@ -217,10 +217,14 @@ const Album = () => {
|
||||
</div>
|
||||
</h4>
|
||||
<TrackList
|
||||
source={{
|
||||
uri: album.uri,
|
||||
name: album.name,
|
||||
type: 'album',
|
||||
context: 'album',
|
||||
}}
|
||||
className="album-track-list"
|
||||
tracks={tracks}
|
||||
track_context="album"
|
||||
uri={album.uri}
|
||||
/>
|
||||
</section>
|
||||
|
||||
|
||||
@ -29,6 +29,7 @@ export default ({
|
||||
const [sortField, sortReverse] = useSelector(sortSelector);
|
||||
const {
|
||||
uri,
|
||||
name,
|
||||
tracks,
|
||||
related_artists,
|
||||
} = artist;
|
||||
@ -100,7 +101,17 @@ export default ({
|
||||
<div className={`top-tracks col col--w${related_artists && related_artists.length > 0 ? '70' : '100'}`}>
|
||||
{tracks && <h4><I18n path="artist.overview.top_tracks" /></h4>}
|
||||
<div className="list-wrapper">
|
||||
<TrackList className="artist-track-list" uri={uri} tracks={tracks ? tracks.slice(0, 10) : []} />
|
||||
<TrackList
|
||||
source={{
|
||||
uri,
|
||||
name,
|
||||
type: 'artist',
|
||||
context: 'artist',
|
||||
}}
|
||||
className="artist-track-list"
|
||||
uri={uri}
|
||||
tracks={tracks ? tracks.slice(0, 10) : []}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -469,7 +469,15 @@ class Recommendations extends React.Component {
|
||||
</Button>
|
||||
</div>
|
||||
</h4>
|
||||
<TrackList className="discover-track-list" uri={this.uri()} tracks={tracks} />
|
||||
<TrackList
|
||||
source={{
|
||||
uri: this.uri(),
|
||||
name: 'Recommendations',
|
||||
type: 'recommendations',
|
||||
}}
|
||||
className="discover-track-list"
|
||||
tracks={tracks}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<div className="col col--w5" />
|
||||
|
||||
@ -226,8 +226,12 @@ class BrowseDirectory extends React.Component {
|
||||
<Subdirectories items={subdirectories} view={view} />
|
||||
|
||||
<TrackList
|
||||
source={{
|
||||
uri: `iris:browse:${uri}`,
|
||||
name: 'Browse',
|
||||
type: 'browse',
|
||||
}}
|
||||
tracks={tracks}
|
||||
uri={`iris:browse:${uri}`}
|
||||
className="library-local-track-list"
|
||||
/>
|
||||
|
||||
|
||||
@ -176,7 +176,12 @@ class Tracks extends React.Component {
|
||||
|
||||
return (
|
||||
<section className="content-wrapper">
|
||||
<TrackList tracks={tracks} />
|
||||
<TrackList
|
||||
source={{
|
||||
name: 'Tracks'
|
||||
}}
|
||||
tracks={tracks}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -332,9 +332,13 @@ const Playlist = ({
|
||||
|
||||
<section className="list-wrapper no-top-padding">
|
||||
<TrackList
|
||||
uri={playlist.uri}
|
||||
source={{
|
||||
uri: playlist.uri,
|
||||
name: playlist.name,
|
||||
type: 'playlist',
|
||||
context,
|
||||
}}
|
||||
className="playlist-track-list"
|
||||
track_context={context}
|
||||
tracks={tracks}
|
||||
removeTracks={removeTracks}
|
||||
reorderTracks={reorderTracks}
|
||||
|
||||
@ -241,9 +241,13 @@ const Queue = ({
|
||||
|
||||
<section className="list-wrapper">
|
||||
<TrackList
|
||||
uri="iris:queue"
|
||||
source={{
|
||||
uri: 'iris:queue',
|
||||
name: 'Queue',
|
||||
type: 'queue',
|
||||
context: 'queue',
|
||||
}}
|
||||
show_source_icon
|
||||
track_context="queue"
|
||||
className="queue-track-list"
|
||||
tracks={queue_tracks}
|
||||
removeTracks={onRemoveTracks}
|
||||
|
||||
@ -63,9 +63,12 @@ class QueueHistory extends React.Component {
|
||||
{tracks.length > 0 && (
|
||||
<section className="content-wrapper">
|
||||
<TrackList
|
||||
uri="iris:queue-history"
|
||||
source={{
|
||||
uri: 'iris:queue-history',
|
||||
name: 'Queue history',
|
||||
context: 'history',
|
||||
}}
|
||||
className="queue-history-track-list"
|
||||
track_context="history"
|
||||
tracks={tracks}
|
||||
show_source_icon
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user