Merge pull request #706 from viaregio/master
Fix for a black screen while searching
This commit is contained in:
James Barnsley
GitHub
@ -1,147 +1,147 @@
|
|||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
import { scrollTo, sourceIcon } from '../util/helpers';
|
import { scrollTo, sourceIcon } from '../util/helpers';
|
||||||
import Link from './Link';
|
import Link from './Link';
|
||||||
import Icon from './Icon';
|
import Icon from './Icon';
|
||||||
import Thumbnail from './Thumbnail';
|
import Thumbnail from './Thumbnail';
|
||||||
import LinksSentence from './LinksSentence';
|
import LinksSentence from './LinksSentence';
|
||||||
import { I18n } from '../locale';
|
import { I18n } from '../locale';
|
||||||
import { encodeUri } from '../util/format';
|
import { encodeUri } from '../util/format';
|
||||||
|
|
||||||
import * as uiActions from '../services/ui/actions';
|
import * as uiActions from '../services/ui/actions';
|
||||||
import * as mopidyActions from '../services/mopidy/actions';
|
import * as mopidyActions from '../services/mopidy/actions';
|
||||||
import * as spotifyActions from '../services/spotify/actions';
|
import * as spotifyActions from '../services/spotify/actions';
|
||||||
|
|
||||||
const SecondaryLine = ({
|
const SecondaryLine = ({
|
||||||
item: {
|
item: {
|
||||||
type,
|
type,
|
||||||
tracks_total,
|
tracks_total,
|
||||||
tracks = [],
|
tracks = [],
|
||||||
followers,
|
followers,
|
||||||
albums_uris,
|
albums_uris,
|
||||||
artists,
|
artists,
|
||||||
} = {},
|
} = {},
|
||||||
}) => {
|
}) => {
|
||||||
let trackCount = 0;
|
let trackCount = 0;
|
||||||
if (tracks) trackCount = tracks.length;
|
if (tracks) trackCount = tracks.length;
|
||||||
if (tracks_total) trackCount = tracks_total;
|
if (tracks_total) trackCount = tracks_total;
|
||||||
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'playlist':
|
case 'playlist':
|
||||||
return (
|
return (
|
||||||
<ul className="grid__item__secondary__content details">
|
<ul className="grid__item__secondary__content details">
|
||||||
<li><I18n path="specs.tracks" count={trackCount} /></li>
|
<li><I18n path="specs.tracks" count={trackCount} /></li>
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
|
|
||||||
case 'artist':
|
case 'artist':
|
||||||
return (
|
return (
|
||||||
<ul className="grid__item__secondary__content details">
|
<ul className="grid__item__secondary__content details">
|
||||||
{followers && <li><I18n path="specs.followers" count={followers.toLocaleString()} /></li>}
|
{followers && <li><I18n path="specs.followers" count={followers.toLocaleString()} /></li>}
|
||||||
{albums_uris && <li><I18n path="specs.albums" count={albums_uris.length} /></li>}
|
{albums_uris && <li><I18n path="specs.albums" count={albums_uris.length} /></li>}
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
|
|
||||||
case 'album':
|
case 'album':
|
||||||
return (
|
return (
|
||||||
<ul className="grid__item__secondary__content details">
|
<ul className="grid__item__secondary__content details">
|
||||||
<li>{artists && <LinksSentence nolinks items={artists} type="artist" />}</li>
|
<li>{artists && <LinksSentence nolinks items={artists} type="artist" />}</li>
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return (
|
return (
|
||||||
<ul className="grid__item__secondary__content details">
|
<ul className="grid__item__secondary__content details">
|
||||||
{artists && <li><LinksSentence nolinks items={artists} type="artist" /></li> }
|
{artists && <li><LinksSentence nolinks items={artists} type="artist" /></li> }
|
||||||
{followers && <li><I18n path="specs.followers" count={followers.toLocaleString()} /></li>}
|
{followers && <li><I18n path="specs.followers" count={followers.toLocaleString()} /></li>}
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const GridItem = ({
|
const GridItem = ({
|
||||||
item: itemProp,
|
item: itemProp,
|
||||||
getLink,
|
getLink,
|
||||||
show_source_icon,
|
show_source_icon,
|
||||||
}) => {
|
}) => {
|
||||||
let item = itemProp;
|
let item = itemProp;
|
||||||
if (item.album) item = { ...item, ...item.album };
|
if (item.album) item = { ...item, ...item.album };
|
||||||
|
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const grid_glow_enabled = useSelector((state) => state.ui.grid_glow_enabled);
|
const grid_glow_enabled = useSelector((state) => state.ui.grid_glow_enabled);
|
||||||
const spotify_available = useSelector((state) => state.spotify.access_token);
|
const spotify_available = useSelector((state) => state.spotify.access_token);
|
||||||
|
|
||||||
const onContextMenu = (e) => {
|
const onContextMenu = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
dispatch(
|
dispatch(
|
||||||
uiActions.showContextMenu({
|
uiActions.showContextMenu({
|
||||||
e,
|
e,
|
||||||
context: item.type,
|
context: item.type,
|
||||||
uris: [item.uri],
|
uris: [item.uri],
|
||||||
items: [item],
|
items: [item],
|
||||||
tracklist_uri: item.uri, // not needed?
|
tracklist_uri: item.uri, // not needed?
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Load images
|
// Load images
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!item.images) {
|
if (!item.images) {
|
||||||
switch (item.type) {
|
switch (item.type) {
|
||||||
case 'artist':
|
case 'artist':
|
||||||
if (spotify_available) {
|
if (spotify_available) {
|
||||||
dispatch(spotifyActions.getArtistImages(item));
|
dispatch(spotifyActions.getArtistImages(item));
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'album':
|
case 'album':
|
||||||
dispatch(mopidyActions.getImages([item.uri]));
|
dispatch(mopidyActions.getImages([item.uri]));
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [item.images]);
|
}, [item.images]);
|
||||||
|
|
||||||
// Build link
|
// Build link
|
||||||
let to = '';
|
let to = '';
|
||||||
if (getLink) {
|
if (getLink) {
|
||||||
to = getLink(item);
|
to = getLink(item);
|
||||||
} else if (item.link) {
|
} else if (item.link) {
|
||||||
to = item.link;
|
to = item.link;
|
||||||
} else {
|
} else {
|
||||||
to = `/${item.type}/${encodeUri(item.uri)}`;
|
to = `/${item.type}/${encodeUri(item.uri)}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
to={to}
|
to={to}
|
||||||
onContextMenu={onContextMenu}
|
onContextMenu={onContextMenu}
|
||||||
className={`grid__item grid__item--${itemProp.type}`}
|
className={`grid__item grid__item--${itemProp.type}`}
|
||||||
>
|
>
|
||||||
<Thumbnail
|
<Thumbnail
|
||||||
glow={grid_glow_enabled}
|
glow={grid_glow_enabled}
|
||||||
size="medium"
|
size="medium"
|
||||||
className="grid__item__thumbnail"
|
className="grid__item__thumbnail"
|
||||||
images={item.images || item.icons}
|
images={item.images || item.icons}
|
||||||
type={item.type}
|
type={item.type}
|
||||||
/>
|
/>
|
||||||
<div className="grid__item__name">
|
<div className="grid__item__name">
|
||||||
{item.name ? item.name : <span className="opaque-text">{item.uri}</span>}
|
{item.name ? item.name : <span className="opaque-text">{item.uri}</span>}
|
||||||
</div>
|
</div>
|
||||||
<div className="grid__item__secondary">
|
<div className="grid__item__secondary">
|
||||||
{show_source_icon && (
|
{show_source_icon && (
|
||||||
<Icon name={sourceIcon(item.uri)} type="fontawesome" className="source" />
|
<Icon name={sourceIcon(item.uri)} type="fontawesome" className="source" />
|
||||||
)}
|
)}
|
||||||
<SecondaryLine item={item} />
|
<SecondaryLine item={item} />
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export {
|
export {
|
||||||
GridItem,
|
GridItem,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
GridItem,
|
GridItem,
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user