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

Context menu on related artists; Starting breadcrumb for Browse

Browse Source
This commit is contained in:
James Barnsley
2020-05-03 19:55:41 +12:00
parent f1b6ada66b
commit 67fc8c4ee0
10 changed files with 358 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/js/views/Artist.js
View File

@ -117,6 +117,7 @@ class Artist extends React.Component {
}
renderOverview() {
const { uiActions } = this.props;
const artist = collate(
this.props.artist,
{
@ -193,8 +194,19 @@ class Artist extends React.Component {
{artist.related_artists && artist.related_artists.length > 0 && (
<div className="col col--w25 related-artists">
<h4>Related artists</h4>
<div className="list-wrapper"><RelatedArtists artists={artist.related_artists.slice(0, 6)} /></div>
<Link to={`/artist/${encodeURIComponent(this.props.uri)}/related-artists`} scrollTo="#sub-views-menu" className="button button--default">All related artists</Link>
<div className="list-wrapper">
<RelatedArtists
artists={artist.related_artists.slice(0, 6)}
uiActions={uiActions}
/>
</div>
<Link
to={`/artist/${encodeURIComponent(this.props.uri)}/related-artists`}
scrollTo="#sub-views-menu"
className="button button--default"
>
All related artists
</Link>
</div>
)}

2
src/js/views/discover/DiscoverRecommendations.js
View File

@ -472,7 +472,7 @@ class Discover extends React.Component {
<div className="col col--w25 others">
<section>
<h4>Artists</h4>
<RelatedArtists artists={artists} />
<RelatedArtists artists={artists} uiActions={this.props.uiActions} />
</section>
<br />
<br />

77
src/js/views/library/LibraryBrowseDirectory.js
View File

@ -97,29 +97,14 @@ class LibraryBrowseDirectory extends React.Component {
}
if (parent_uri.startsWith('file://')) {
const uri = parent_uri.replace('file:///', '');
const uri_elements = uri.split('/');
parent_uri = parent_uri.substring(0, parent_uri.lastIndexOf('/'));
return (
<h4 className="breadcrumbs">
{uri_elements.map((uri_element, index) => {
// Reconstruct a URL to this element
let uri = 'file://';
for (let i = 0; i <= index; i++) {
uri += `/${uri_elements[i]}`;
}
return (
<span key={uri}>
{index > 0 && (
<Icon type="fontawesome" name="angle-right" />
)}
<URILink type="browse" uri={uri}>
{decodeURI(uri_element)}
</URILink>
</span>
);
})}
<Icon type="fontawesome" name="angle-left" />
<URILink type="browse" uri={parent_uri}>
{decodeURI(parent_uri)}
</URILink>
</h4>
);
}
@ -156,24 +141,38 @@ class LibraryBrowseDirectory extends React.Component {
);
}
render() {
let title = 'Directory';
const uri_exploded = this.props.uri.split(':');
if (uri_exploded.length > 0) {
title = uri_exploded[0];
title = title.charAt(0).toUpperCase() + title.slice(1);
}
render = () => {
const {
uri,
directory,
load_queue,
uiActions,
view,
} = this.props;
const { limit } = this.state;
if (!this.props.directory || isLoading(this.props.load_queue, ['mopidy_browse'])) {
let title = 'Directory';
if (!directory || isLoading(load_queue, ['mopidy_browse'])) {
return (
<div className="view library-local-view">
<Header icon="music" title={title} uiActions={this.props.uiActions} />
<Header icon="music" title={title} uiActions={uiActions} />
<Loader body loading />
</div>
);
}
let subdirectories = (this.props.directory.subdirectories && this.props.directory.subdirectories.length > 0 ? this.props.directory.subdirectories : null);
if (directory.name) {
title = directory.name;
} else {
const uri_exploded = uri.split(':');
if (uri_exploded.length > 0) {
title = uri_exploded[0];
title = title.charAt(0).toUpperCase() + title.slice(1);
}
};
let subdirectories = (directory.subdirectories && directory.subdirectories.length > 0 ? directory.subdirectories : null);
subdirectories = sortItems(subdirectories, 'name');
const total_items = (tracks ? tracks.length : 0) + (subdirectories ? subdirectories.length : 0);
@ -182,7 +181,7 @@ class LibraryBrowseDirectory extends React.Component {
let tracks = null;
let limit_remaining = this.state.limit - subdirectories;
if (limit_remaining > 0) {
all_tracks = (this.props.directory.tracks && this.props.directory.tracks.length > 0 ? this.props.directory.tracks : null);
all_tracks = (directory.tracks && directory.tracks.length > 0 ? directory.tracks : null);
all_tracks = sortItems(all_tracks, 'name');
tracks = all_tracks.slice(0, limit_remaining);
}
@ -203,18 +202,18 @@ class LibraryBrowseDirectory extends React.Component {
<DropdownField
icon="visibility"
name="View"
value={this.props.view}
value={view}
valueAsLabel
options={view_options}
handleChange={(value) => { this.props.uiActions.set({ library_directory_view: value }); this.props.uiActions.hideContextMenu(); }}
handleChange={(value) => { uiActions.set({ library_directory_view: value }); uiActions.hideContextMenu(); }}
/>
{tracks && (
<a className="button button--no-hover" onClick={(e) => { this.props.uiActions.hideContextMenu(); this.playAll(e, all_tracks); }}>
<a className="button button--no-hover" onClick={(e) => { uiActions.hideContextMenu(); this.playAll(e, all_tracks); }}>
<Icon name="play_circle_filled" />
Play all
</a>
)}
<a className="button button--no-hover" onClick={(e) => { this.props.uiActions.hideContextMenu(); this.goBack(e); }}>
<a className="button button--no-hover" onClick={(e) => { uiActions.hideContextMenu(); this.goBack(e); }}>
<Icon name="keyboard_backspace" />
Back
</a>
@ -223,7 +222,7 @@ class LibraryBrowseDirectory extends React.Component {
return (
<div className="view library-local-view">
<Header options={options} uiActions={this.props.uiActions}>
<Header options={options} uiActions={uiActions}>
<Icon name="folder" type="material" />
{title}
</Header>
@ -237,14 +236,14 @@ class LibraryBrowseDirectory extends React.Component {
{tracks && (
<TrackList
tracks={tracks}
uri={`iris:browse:${this.props.uri}`}
uri={`iris:browse:${uri}`}
className="library-local-track-list"
/>
)}
<LazyLoadListener
loadKey={total_items > this.state.limit ? this.state.limit : total_items}
showLoader={this.state.limit < total_items}
loadKey={total_items > limit ? limit : total_items}
showLoader={limit < total_items}
loadMore={() => this.loadMore()}
/>