Generic Grid with viewport hook working well; need better way to fetch first item's height (error)
This commit is contained in:
James Barnsley
@ -1,67 +0,0 @@
|
||||
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import * as uiActions from '../services/ui/actions';
|
||||
import * as mopidyActions from '../services/mopidy/actions';
|
||||
import * as lastfmActions from '../services/lastfm/actions';
|
||||
|
||||
import GridItem from './GridItem';
|
||||
|
||||
class AlbumGrid extends React.Component {
|
||||
handleContextMenu = (e, item) => {
|
||||
const { uiActions: { showContextMenu } } = this.props;
|
||||
e.preventDefault();
|
||||
showContextMenu({
|
||||
e,
|
||||
context: 'album',
|
||||
uris: [item.uri],
|
||||
items: [item],
|
||||
tracklist_uri: item.uri,
|
||||
});
|
||||
}
|
||||
|
||||
render = () => {
|
||||
const {
|
||||
albums,
|
||||
className,
|
||||
mini,
|
||||
lastfmActions,
|
||||
mopidyActions,
|
||||
show_source_icon,
|
||||
} = this.props;
|
||||
|
||||
if (!albums) return null;
|
||||
|
||||
return (
|
||||
<div className={`grid grid--albums ${className} ${mini ? ' grid--mini' : ''}`}>
|
||||
{
|
||||
albums.map((album) => (
|
||||
<GridItem
|
||||
key={album.uri}
|
||||
type="album"
|
||||
item={album}
|
||||
lastfmActions={lastfmActions}
|
||||
mopidyActions={mopidyActions}
|
||||
show_source_icon={show_source_icon}
|
||||
onContextMenu={(e) => this.handleContextMenu(e, album)}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
artists: state.core.artists,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
uiActions: bindActionCreators(uiActions, dispatch),
|
||||
lastfmActions: bindActionCreators(lastfmActions, dispatch),
|
||||
mopidyActions: bindActionCreators(mopidyActions, dispatch),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(AlbumGrid);
|
||||
@ -1,75 +0,0 @@
|
||||
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import GridItem from './GridItem';
|
||||
import { collate, encodeUri } from '../util/format';
|
||||
import * as uiActions from '../services/ui/actions';
|
||||
import * as lastfmActions from '../services/lastfm/actions';
|
||||
import * as spotifyActions from '../services/spotify/actions';
|
||||
|
||||
class ArtistGrid extends React.Component {
|
||||
handleContextMenu = (e, item) => {
|
||||
const { uiActions: { showContextMenu } } = this.props;
|
||||
e.preventDefault();
|
||||
showContextMenu({
|
||||
e,
|
||||
context: 'artist',
|
||||
uris: [item.uri],
|
||||
items: [item],
|
||||
});
|
||||
}
|
||||
|
||||
render = () => {
|
||||
const {
|
||||
artists,
|
||||
albums,
|
||||
className,
|
||||
single_row,
|
||||
mini,
|
||||
show_source_icon,
|
||||
history,
|
||||
spotifyActions,
|
||||
spotifyAvailable,
|
||||
lastfmActions,
|
||||
} = this.props;
|
||||
|
||||
if (!artists) return null;
|
||||
|
||||
return (
|
||||
<div className={`grid grid--artists ${className} ${mini ? 'grid--mini' : ''}`}>
|
||||
{
|
||||
artists.map((item) => {
|
||||
const artist = collate(item, { albums });
|
||||
return (
|
||||
<GridItem
|
||||
key={artist.uri}
|
||||
type="artist"
|
||||
item={artist}
|
||||
show_source_icon={show_source_icon}
|
||||
onClick={() => { history.push(`/artist/${encodeUri(artist.uri)}`); }}
|
||||
lastfmActions={lastfmActions}
|
||||
spotifyActions={spotifyActions}
|
||||
spotifyAvailable={spotifyAvailable}
|
||||
onContextMenu={(e) => this.handleContextMenu(e, artist)}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
albums: state.core.albums,
|
||||
spotifyAvailable: state.spotify.enabled,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
uiActions: bindActionCreators(uiActions, dispatch),
|
||||
lastfmActions: bindActionCreators(lastfmActions, dispatch),
|
||||
spotifyActions: bindActionCreators(spotifyActions, dispatch),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ArtistGrid);
|
||||
40
src/js/components/Grid.js
Normal file
40
src/js/components/Grid.js
Normal file
@ -0,0 +1,40 @@
|
||||
import React, { memo, useState } from 'react';
|
||||
import { GridItem } from './GridItem';
|
||||
import ErrorBoundary from './ErrorBoundary';
|
||||
|
||||
const Grid = memo(({
|
||||
items,
|
||||
className = '',
|
||||
mini = false,
|
||||
getLink,
|
||||
}) => {
|
||||
if (!items || !items.length) return null;
|
||||
const [itemHeight, setItemHeight] = useState(0);
|
||||
|
||||
return (
|
||||
<div className={`grid grid--${items[0].type}s ${className} ${mini ? 'grid--mini' : ''}`}>
|
||||
<ErrorBoundary>
|
||||
{
|
||||
items.map((item, index) => (
|
||||
<GridItem
|
||||
key={`${index}_${item.uri || item.name}`}
|
||||
item={item}
|
||||
getLink={getLink}
|
||||
itemHeight={itemHeight || '300px'}
|
||||
isFirstInGrid={index === 0}
|
||||
setItemHeight={setItemHeight}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default {
|
||||
Grid,
|
||||
};
|
||||
|
||||
export {
|
||||
Grid,
|
||||
};
|
||||
@ -1,10 +1,8 @@
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
import handleViewport from 'react-in-viewport';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
uriType,
|
||||
scrollTo,
|
||||
sourceIcon,
|
||||
} from '../util/helpers';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { scrollTo, sourceIcon } from '../util/helpers';
|
||||
import Link from './Link';
|
||||
import Icon from './Icon';
|
||||
import Thumbnail from './Thumbnail';
|
||||
@ -12,153 +10,190 @@ import LinksSentence from './LinksSentence';
|
||||
import { I18n } from '../locale';
|
||||
import { encodeUri } from '../util/format';
|
||||
|
||||
class GridItem extends React.Component {
|
||||
componentDidMount() {
|
||||
const {
|
||||
mopidyActions,
|
||||
spotifyActions,
|
||||
spotifyAvailable,
|
||||
item,
|
||||
} = this.props;
|
||||
import * as uiActions from '../services/ui/actions';
|
||||
import * as lastfmActions from '../services/lastfm/actions';
|
||||
import * as mopidyActions from '../services/mopidy/actions';
|
||||
import * as spotifyActions from '../services/spotify/actions';
|
||||
|
||||
if (!item || item.images) return;
|
||||
|
||||
switch (uriType(item.uri)) {
|
||||
case 'artist':
|
||||
if (spotifyActions && spotifyAvailable) {
|
||||
//spotifyActions.getArtistImages(item);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'album':
|
||||
// If Mopidy doesn't find any images, then it will pass on the call to LastFM
|
||||
if (mopidyActions) {
|
||||
mopidyActions.getImages([item.uri]);
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
shouldComponentUpdate = (nextProps) => {
|
||||
const { item } = this.props;
|
||||
return nextProps.item !== item;
|
||||
}
|
||||
|
||||
onContextMenu = (e) => {
|
||||
const { onContextMenu } = this.props;
|
||||
if (onContextMenu) {
|
||||
onContextMenu(e);
|
||||
}
|
||||
}
|
||||
|
||||
renderSecondary = ({
|
||||
uri,
|
||||
const SecondaryLine = ({
|
||||
item: {
|
||||
type,
|
||||
tracks_total,
|
||||
tracks = [],
|
||||
followers,
|
||||
albums_uris,
|
||||
artists,
|
||||
}) => {
|
||||
let trackCount = 0;
|
||||
if (tracks) trackCount = tracks.length;
|
||||
if (tracks_total) trackCount = tracks_total;
|
||||
} = {},
|
||||
}) => {
|
||||
let trackCount = 0;
|
||||
if (tracks) trackCount = tracks.length;
|
||||
if (tracks_total) trackCount = tracks_total;
|
||||
|
||||
switch (uriType(uri)) {
|
||||
case 'playlist':
|
||||
return (
|
||||
<span className="grid__item__secondary__content">
|
||||
<I18n path="specs.tracks" count={trackCount} />
|
||||
</span>
|
||||
);
|
||||
switch (type) {
|
||||
case 'playlist':
|
||||
return (
|
||||
<span className="grid__item__secondary__content">
|
||||
<I18n path="specs.tracks" count={trackCount} />
|
||||
</span>
|
||||
);
|
||||
|
||||
case 'artist':
|
||||
return (
|
||||
<span className="grid__item__secondary__content">
|
||||
{followers && <I18n path="specs.followers" count={followers.toLocaleString()} />}
|
||||
{albums_uris && <I18n path="specs.albums" count={albums_uris.length} />}
|
||||
</span>
|
||||
);
|
||||
case 'artist':
|
||||
return (
|
||||
<span className="grid__item__secondary__content">
|
||||
{followers && <I18n path="specs.followers" count={followers.toLocaleString()} />}
|
||||
{albums_uris && <I18n path="specs.albums" count={albums_uris.length} />}
|
||||
</span>
|
||||
);
|
||||
|
||||
case 'album':
|
||||
return (
|
||||
<span className="grid__item__secondary__content">
|
||||
{artists && <LinksSentence nolinks items={artists} type="artist" />}
|
||||
</span>
|
||||
);
|
||||
case 'album':
|
||||
return (
|
||||
<span className="grid__item__secondary__content">
|
||||
{artists && <LinksSentence nolinks items={artists} type="artist" />}
|
||||
</span>
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<span className="grid__item__secondary__content">
|
||||
{artists && <LinksSentence nolinks items={item.artists} type="artist" /> }
|
||||
{followers && <I18n path="specs.followers" count={followers.toLocaleString()} />}
|
||||
</span>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<span className="grid__item__secondary__content">
|
||||
{artists && <LinksSentence nolinks items={artists} type="artist" /> }
|
||||
{followers && <I18n path="specs.followers" count={followers.toLocaleString()} />}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const GridItemComponent = ({
|
||||
item: itemProp,
|
||||
itemHeight,
|
||||
getLink,
|
||||
show_source_icon,
|
||||
grid_glow_enabled,
|
||||
spotify_available,
|
||||
isFirstInGrid,
|
||||
uiActions: {
|
||||
showContextMenu,
|
||||
},
|
||||
mopidyActions: {
|
||||
getImages: getMopidyImages,
|
||||
},
|
||||
spotifyActions: {
|
||||
getArtistImages: getSpotifyImages,
|
||||
},
|
||||
inViewport,
|
||||
forwardedRef,
|
||||
setItemHeight,
|
||||
}) => {
|
||||
if (!itemProp) return null;
|
||||
let item = itemProp;
|
||||
if (item.album) item = { ...item, ...item.album };
|
||||
|
||||
// Listen for changes to our height, and pass it up to our Grid. This is then used to build the
|
||||
// placeholder elements when out of viewport. We only care about the first item because this
|
||||
// represents the same heights for everything else (in almost all circumstances).
|
||||
if (isFirstInGrid && forwardedRef.current) {
|
||||
const { current: { clientHeight } } = forwardedRef;
|
||||
if (clientHeight !== itemHeight) {
|
||||
setItemHeight(clientHeight);
|
||||
}
|
||||
}
|
||||
|
||||
render = () => {
|
||||
const {
|
||||
item: {
|
||||
album,
|
||||
} = {},
|
||||
link: customLink,
|
||||
type,
|
||||
show_source_icon,
|
||||
grid_glow_enabled,
|
||||
} = this.props;
|
||||
const onContextMenu = (e) => {
|
||||
e.preventDefault();
|
||||
showContextMenu({
|
||||
e,
|
||||
context: item.type,
|
||||
uris: [item.uri],
|
||||
items: [item],
|
||||
tracklist_uri: item.uri, // not needed?
|
||||
});
|
||||
};
|
||||
|
||||
let { item } = this.props;
|
||||
|
||||
if (!item) return null;
|
||||
if (album) item = { ...item, ...album };
|
||||
|
||||
const link = customLink || `/${type}/${encodeUri(item.uri)}`;
|
||||
|
||||
return (
|
||||
<Link
|
||||
className={`grid__item grid__item--${type}`}
|
||||
to={link}
|
||||
onClick={scrollTo}
|
||||
onContextMenu={this.onContextMenu}
|
||||
>
|
||||
<Thumbnail
|
||||
glow={grid_glow_enabled}
|
||||
size="medium"
|
||||
className="grid__item__thumbnail"
|
||||
images={item.images || item.icons}
|
||||
type={type}
|
||||
/>
|
||||
<div className="grid__item__name">
|
||||
{item.name ? item.name : <span className="opaque-text">{item.uri}</span>}
|
||||
</div>
|
||||
<div className="grid__item__secondary">
|
||||
{show_source_icon && (
|
||||
<Icon name={sourceIcon(item.uri)} type="fontawesome" className="source" />
|
||||
)}
|
||||
{this.renderSecondary(item)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
// Load images
|
||||
if (!item.images && inViewport) {
|
||||
switch (item.type) {
|
||||
case 'artist':
|
||||
if (spotify_available) getSpotifyImages(item);
|
||||
break;
|
||||
case 'album':
|
||||
getMopidyImages([item.uri]);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Build link
|
||||
let to = '';
|
||||
if (getLink) {
|
||||
to = getLink(item);
|
||||
} else if (item.link) {
|
||||
to = item.link;
|
||||
} else {
|
||||
to = `/${item.type}/${encodeUri(item.uri)}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={`grid__item grid__item--${item.type}`} ref={forwardedRef}>
|
||||
{inViewport || isFirstInGrid ? (
|
||||
<Link
|
||||
to={to}
|
||||
onClick={scrollTo}
|
||||
onContextMenu={onContextMenu}
|
||||
className="grid__item__inner"
|
||||
>
|
||||
<Thumbnail
|
||||
glow={grid_glow_enabled}
|
||||
size="medium"
|
||||
className="grid__item__thumbnail"
|
||||
images={item.images || item.icons}
|
||||
type={item.type}
|
||||
/>
|
||||
<div className="grid__item__name">
|
||||
{item.name ? item.name : <span className="opaque-text">{item.uri}</span>}
|
||||
</div>
|
||||
<div className="grid__item__secondary">
|
||||
{show_source_icon && (
|
||||
<Icon name={sourceIcon(item.uri)} type="fontawesome" className="source" />
|
||||
)}
|
||||
<SecondaryLine item={item} />
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
<div style={{ height: itemHeight }} />
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
const {
|
||||
ui: {
|
||||
grid_glow_enabled,
|
||||
},
|
||||
spotify: {
|
||||
access_token: spotify_available,
|
||||
},
|
||||
} = state;
|
||||
|
||||
return {
|
||||
grid_glow_enabled,
|
||||
spotify_available,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
uiActions: bindActionCreators(uiActions, dispatch),
|
||||
lastfmActions: bindActionCreators(lastfmActions, dispatch),
|
||||
mopidyActions: bindActionCreators(mopidyActions, dispatch),
|
||||
spotifyActions: bindActionCreators(spotifyActions, dispatch),
|
||||
});
|
||||
|
||||
const GridItem = connect(mapStateToProps, mapDispatchToProps)(handleViewport(GridItemComponent));
|
||||
|
||||
export {
|
||||
GridItem,
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps)(GridItem);
|
||||
export default {
|
||||
GridItem,
|
||||
};
|
||||
|
||||
@ -1,63 +0,0 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import * as uiActions from '../services/ui/actions';
|
||||
import GridItem from './GridItem';
|
||||
import { encodeUri } from '../util/format';
|
||||
|
||||
class PlaylistGrid extends React.Component {
|
||||
handleContextMenu(e, item) {
|
||||
const { uiActions: { showContextMenu } } = this.props;
|
||||
|
||||
e.preventDefault();
|
||||
showContextMenu({
|
||||
e,
|
||||
context: 'playlist',
|
||||
uris: [item.uri],
|
||||
items: [item],
|
||||
tracklist_uri: item.uri,
|
||||
});
|
||||
}
|
||||
|
||||
render = () => {
|
||||
const {
|
||||
playlists,
|
||||
single_row,
|
||||
mini,
|
||||
show_source_icon,
|
||||
} = this.props;
|
||||
let {
|
||||
className = '',
|
||||
} = this.props;
|
||||
|
||||
if (!playlists) return null;
|
||||
|
||||
className += 'grid grid--playlists';
|
||||
if (single_row) className += ' grid--single-row';
|
||||
if (mini) className += ' grid--mini';
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{
|
||||
playlists.map((playlist) => (
|
||||
<GridItem
|
||||
key={playlist.uri}
|
||||
type="playlist"
|
||||
item={playlist}
|
||||
show_source_icon={show_source_icon}
|
||||
onContextMenu={(e) => this.handleContextMenu(e, playlist)}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = () => ({});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
uiActions: bindActionCreators(uiActions, dispatch),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(PlaylistGrid);
|
||||
@ -3,10 +3,8 @@ import { connect } from 'react-redux';
|
||||
import { sortItems } from '../util/arrays';
|
||||
import URILink from './URILink';
|
||||
import Icon from './Icon';
|
||||
import AlbumGrid from './AlbumGrid';
|
||||
import ArtistGrid from './ArtistGrid';
|
||||
import PlaylistGrid from './PlaylistGrid';
|
||||
import TrackList from './TrackList';
|
||||
import { Grid } from './Grid';
|
||||
import { I18n } from '../locale';
|
||||
import Button from './Button';
|
||||
import { makeSearchResultsSelector } from '../util/selectors';
|
||||
@ -74,9 +72,9 @@ const SearchResults = ({
|
||||
)}
|
||||
</h4>
|
||||
<section className="grid-wrapper">
|
||||
{type === 'artists' && <ArtistGrid artists={results} show_source_icon mini={all} />}
|
||||
{type === 'albums' && <AlbumGrid albums={results} show_source_icon mini={all} />}
|
||||
{type === 'playlists' && <PlaylistGrid playlists={results} show_source_icon mini={all} />}
|
||||
{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 />}
|
||||
{/*<LazyLoadListener enabled={this.props.artists_more && spotify_search_enabled} loadMore={loadMore} />*/}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user