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

5
src/js/components/Link.js
View File

@ -32,6 +32,9 @@ export default ({
{
...location.state,
scroll_position: main.scrollTop,
previous: {
pathname: location.pathname,
},
},
);
@ -53,7 +56,7 @@ export default ({
return (
<Link
onClick={onClick}
onContextMenu={onContextMenu || null}
onContextMenu={onContextMenu}
className={`${className} ${active}`}
to={to}
>

73
src/js/components/RelatedArtists.js
View File

@ -3,36 +3,55 @@ import React, { memo } from 'react';
import Thumbnail from './Thumbnail';
import URILink from './URILink';
export default memo((props) => {
if (!props.artists) {
return null;
}
export default memo(({ artists, uiActions: { showContextMenu } = {} }) => {
if (!artists) return null;
const onContextMenu = (e, item) => {
if (showContextMenu){
e.preventDefault();
showContextMenu({
e,
context: 'artist',
uris: [item.uri],
items: [item],
});
}
};
return (
<div className="related-artists">
{
props.artists.map((artist, index) => {
let { images } = artist;
if (Array.isArray(images)) {
images = images[0];
}
{artists.map((artist) => {
let { images } = artist;
if (Array.isArray(images)) {
images = images[0];
}
if (artist.uri) {
return (
<URILink type="artist" uri={artist.uri} key={artist.uri} className="related-artists__item related-artists__item--link">
<Thumbnail className="related-artists__item__thumbnail" circle size="small" images={images} />
<span className="related-artists__item__name">{ artist.name }</span>
</URILink>
);
}
return (
<span key={artist.uri} className="related-artists__item">
<Thumbnail className="related-artists__item__thumbnail" circle size="small" images={images} />
<span className="related-artists__item__name">{ artist.name }</span>
</span>
);
})
}
if (artist.uri) {
return (
<URILink
type="artist"
uri={artist.uri}
key={artist.uri}
className="related-artists__item related-artists__item--link"
handleContextMenu={(e) => onContextMenu(e, artist)}
>
<Thumbnail className="related-artists__item__thumbnail" circle size="small" images={images} />
<span className="related-artists__item__name">{ artist.name }</span>
</URILink>
);
}
return (
<span key={artist.uri} className="related-artists__item">
<Thumbnail
className="related-artists__item__thumbnail"
circle
size="small"
images={images}
/>
<span className="related-artists__item__name">{ artist.name }</span>
</span>
);
})}
</div>
);
});
});