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

Thumbnail placeholder as icon; Fixing non-loading categories on refresh

Browse Source
This commit is contained in:
James Barnsley
2020-04-17 21:44:49 +12:00
parent 0021883913
commit 67855d207d
18 changed files with 84 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/components/PlaybackControls.js
View File

@ -210,7 +210,7 @@ class PlaybackControls extends React.Component {
tabIndex="-1"
>
<Link className="thumbnail-wrapper" to="/kiosk-mode" tabIndex="-1">
<Thumbnail size="small" images={images} />
<Thumbnail size="small" images={images} type="track" />
</Link>
<div className="text">
<div className="title">

54
src/js/components/Thumbnail.js
View File

@ -36,43 +36,31 @@ export default memo((props) => {
const image = mapImageSizes();
let class_name = 'thumbnail thumbnail--loaded';
if (props.size) class_name += ` thumbnail--${props.size}`;
if (props.circle) class_name += ' thumbnail--circle';
if (props.className) class_name += ` ${props.className}`;
if (props.size) {
class_name += ` thumbnail--${props.size}`;
}
if (props.circle) {
class_name += ' thumbnail--circle';
}
if (props.className) {
class_name += ` ${props.className}`;
}
let zoom_icon = null;
if (props.canZoom && image) {
zoom_icon = <Link className="thumbnail__zoom" to={`/image-zoom?url=${image}`}><Icon name="search" /></Link>;
}
const placeholderIcon = () => {
const iconName = () => {
switch (props.type) {
case 'directory':
return 'folder';
case 'artist':
case 'user':
return 'person';
case 'album':
return 'album';
return 'perm_identity';
case 'playlist':
return 'queue_music';
case 'album':
return 'album';
case 'track':
return 'audio_track';
return 'audiotrack';
default:
return 'image';
};
}
let placeholder = 'image';
}
};
return (
<div className={class_name}>
{!image && (
<Icon className="thumbnail__placeholder" name={placeholderIcon()} />
<Icon className="thumbnail__placeholder" name={iconName()} />
)}
{props.useImageTag && image ? (
<img
@ -86,9 +74,21 @@ export default memo((props) => {
style={{ backgroundImage: `url("${image}")` }}
/>
)}
{props.glow && image && <div className="thumbnail__image thumbnail__image--glow" style={{ backgroundImage: `url("${image}")` }} />}
{props.glow && image && (
<div
className="thumbnail__image thumbnail__image--glow"
style={{ backgroundImage: `url("${image}")`}}
/>
)}
<div className="thumbnail__actions">
{props.canZoom && image && <Link className="thumbnail__actions__item thumbnail__actions__item--zoom" to={`/image-zoom?url=${image}`}><Icon name="search" /></Link>}
{props.canZoom && image && (
<Link
className="thumbnail__actions__item thumbnail__actions__item--zoom"
to={`/image-zoom?url=${image}`}
>
<Icon name="search" />
</Link>
)}
{props.children}
</div>
</div>

2
src/js/services/spotify/actions.js
View File

@ -442,7 +442,7 @@ export function getCategory(id) {
type: 'SPOTIFY_CATEGORY_LOADED',
category: {
uri: `category:${response.id}`,
playlist_uris: [],
playlist_uris: null,
...response,
},
});

3
src/js/services/spotify/reducer.js
View File

@ -176,12 +176,11 @@ export default function reducer(spotify = {}, action) {
var categories = { ...spotify.categories };
var playlists_uris = [];
if (categories[action.uri].playlists_uris) {
if (categories[action.uri] && categories[action.uri].playlists_uris) {
playlists_uris = categories[action.uri].playlists_uris;
}
var category = {
...categories[action.uri],
playlists_uris: [...playlists_uris, ...action.uris],
playlists_more: action.more,

2
src/js/views/Album.js
View File

@ -212,7 +212,7 @@ export class Album extends React.Component {
return (
<div className="view album-view content-wrapper preserve-3d">
<div className="thumbnail-wrapper">
<Thumbnail size="large" glow canZoom images={album.images} />
<Thumbnail size="large" glow canZoom images={album.images} type="album" />
</div>
<div className="title">

2
src/js/views/Playlist.js
View File

@ -220,7 +220,7 @@ Could not find playlist with URI "
<div className="view playlist-view content-wrapper preserve-3d">
<div className="thumbnail-wrapper">
<Thumbnail size="large" glow canZoom images={playlist.images} />
<Thumbnail size="large" glow canZoom images={playlist.images} type="playlist" />
</div>
<div className="title">

5
src/js/views/Queue.js
View File

@ -126,14 +126,14 @@ class Queue extends React.Component {
if (!image) {
return (
<div className="current-track__artwork">
<Thumbnail glow />
<Thumbnail glow type="track" />
</div>
);
}
return (
<div className="current-track__artwork">
<Thumbnail glow image={image}>
<Thumbnail glow image={image} type="track">
<URILink uri={uri} className="thumbnail__actions__item">
<Icon name="art_track" />
</URILink>
@ -194,6 +194,7 @@ class Queue extends React.Component {
images={items[0].images}
size="small"
circle={uriType(items[0].uri) === 'artist'}
type="artist"
/>
</URILink>
)}

2
src/js/views/Track.js
View File

@ -215,7 +215,7 @@ class Track extends React.Component {
) : null}
<div className="thumbnail-wrapper">
<Thumbnail size="large" canZoom images={track.images} />
<Thumbnail size="large" canZoom images={track.images} type="album" />
</div>
<div className="title">

2
src/js/views/User.js
View File

@ -109,7 +109,7 @@ Could not find user with URI "
<div className="heading">
<div className="heading__thumbnail">
<Thumbnail size="medium" circle canZoom image={image} />
<Thumbnail size="medium" circle canZoom image={image} type="user" />
</div>
<div className="heading__content">

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

@ -115,7 +115,7 @@ class LibraryBrowseDirectory extends React.Component {
subdirectories.map((subdirectory) => (
<GridItem
key={subdirectory.uri}
type="browse"
type="directory"
link={`/library/browse/${encodeURIComponent(subdirectory.uri)}`}
item={subdirectory}
nocontext

4
src/scss/components/_images.scss
View File

@ -12,8 +12,8 @@
top: 50%;
left: 50%;
transform: translate(-0.5em, -0.5em);
opacity: 0.15;
font-size: 3rem;
opacity: 0.05;
font-size: 4rem;
line-height: 1em;
width: 1em;
}