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

Lists with thumbnails; Sensible classes

Browse Source
This commit is contained in:
James Barnsley
2018-11-08 22:00:03 +13:00
parent 5c885f3ccb
commit b6fca3974b
16 changed files with 10696 additions and 13992 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/js/components/List.js
View File

@ -9,6 +9,7 @@ import Dater from './Dater'
import URILink from './URILink'
import ContextMenuTrigger from './ContextMenuTrigger'
import Icon from './Icon'
import Thumbnail from './Thumbnail'
import Popularity from './Popularity'
import * as helpers from '../helpers'
@ -59,9 +60,9 @@ class List extends React.Component{
}
}
if (key_string === 'tracks_total') return <span>{value} tracks</span>
if (key_string === 'tracks_total' || key_string === 'tracks_uris.length') return <span>{value} tracks</span>
if (key_string === 'followers') return <span>{value.toLocaleString()} followers</span>
if (key_string === 'added_at') return <span><Dater type="ago" data={value} /> ago</span>
if (key_string === 'added_at') return <span>Added <Dater type="ago" data={value} /> ago</span>
if (key_string === 'owner') return <URILink type="user" uri={value.uri}>{value.id}</URILink>
if (key_string === 'popularity') return <Popularity full popularity={value} />
if (key[0] === 'artists') return <ArtistSentence artists={value} />
@ -84,10 +85,14 @@ class List extends React.Component{
this.props.rows.map((row, row_index) => {
var class_name = 'list__item'
if (row.type ){
if (row.type){
class_name += ' list__item--'+row.type;
}
if (this.props.middle_column){
class_name += " list__item--has-middle-column";
}
return (
<div
className={class_name}
@ -95,45 +100,59 @@ class List extends React.Component{
onClick={e => this.handleClick(e, row.uri)}
onContextMenu={e => this.handleContextMenu(e,row)}>
<div className="list__item__actions">
<div className="list__item__column list__item__column--right">
{
(this.props.actions ? this.props.actions.map((action, index) => {
(this.props.right_column ? this.props.right_column.map((item, index) => {
return (
<li className={'list__item__actions__item list__item__actions__item--'+action.replace('.','_')} key={index}>
{this.renderValue(row, action)}
</li>
<span className={'list__item__column__item list__item__column__item--'+item.replace('.','_')} key={index}>
{this.renderValue(row, item)}
</span>
)
}) : null)
}
{this.props.nocontext ? null : <ContextMenuTrigger className="list__item__actions__item list__item__actions__item--context-menu-trigger subtle" key="context" onTrigger={e => this.handleContextMenu(e, row)} />}
{this.props.nocontext ? null : <ContextMenuTrigger className="list__item__column__item list__item__column__item--context-menu-trigger subtle" onTrigger={e => this.handleContextMenu(e, row)} />}
</div>
<div className="list__item__content">
<div className="list__item__column list__item__column--name">
<div className="list__item__name">
{this.props.thumbnail ? <Thumbnail className="list__item__column__item list__item__column__item--thumbnail" images={(row.images ? row.images : null)} size="small" /> : null}
<div className="list__item__column__item list__item__column__item--name">
{this.renderValue(row, 'name')}
</div>
<ul className="list__item__details">
{
this.props.details.map((detail, index) => {
var value = this.renderValue(row, detail);
{this.props.details ?<ul className="list__item__column__item list__item__column__item--details details">
{
this.props.details.map((item, index) => {
var value = this.renderValue(row, item);
if (!value){
return null;
}
return (
<li className={'list__item__details__item list__item__details__item--'+detail.replace('.','_')} key={index}>
<li className={'details__item details__item--'+item.replace('.','_')} key={index}>
{value}
</li>
)
})
}
</ul>
</ul> : null}
</div>
{this.props.middle_column ? <div className="list__item__column list__item__column--middle">
{
(this.props.middle_column ? this.props.middle_column.map((item, index) => {
return (
<span className={'list__item__column__item list__item__column__item--'+item.replace('.','_')} key={index}>
{this.renderValue(row, item)}
</span>
)
}) : null)
}
</div> : null}
</div>
)
})

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

@ -42,7 +42,7 @@ class Thumbnail extends React.Component{
}
*/
mapImageSizes(props = this.props){
mapImageSizes(){
// Single image
if (this.props.image){
@ -50,6 +50,12 @@ class Thumbnail extends React.Component{
// Multiple images
} else if (this.props.images){
var images = this.props.images;
// An array of image objects (eg Artists), so just pick the first one
if (Array.isArray(images)){
images = images[0];
}
// Default to medium-sized image, but accept size property as override
var size = 'medium';
@ -57,7 +63,7 @@ class Thumbnail extends React.Component{
size = this.props.size;
}
return this.props.images[size];
return images[size];
}
// No images

38
src/js/components/Track.js
View File

@ -194,7 +194,7 @@ export default class Track extends React.Component{
if (track.artists){
track_details.push(
<li className="list__item__details__item list__item__details__item--artists" key="artists">
<li className="details__item details__item--artists" key="artists">
{track.artists ? <ArtistSentence artists={track.artists} /> : '-'}
</li>
)
@ -209,15 +209,15 @@ export default class Track extends React.Component{
}
track_details.push(
<li className="list__item__details__item list__item__details__item--album" key="album">
<li className="details__item details__item--album" key="album">
{album}
</li>
)
}
if (this.props.context == 'history'){
var track_extra_detail = (
<div className="list__item__extra-detail list__item__extra-detail--played_at">
var track_middle_column = (
<div className="list__item__column__item list__item__column__item--played_at">
{track.played_at ? <span><Dater type="ago" data={track.played_at} /> ago</span> : '-'}
</div>
)
@ -243,16 +243,16 @@ export default class Track extends React.Component{
var link = <URILink type={type} uri={track.added_from}>{type}</URILink>;
}
var track_extra_detail = (
<div className="list__item__extra-detail list__item__extra-detail--added">
var track_middle_column = (
<div className="list__item__column__item list__item__column__item--added">
<span className="by">{track.added_by} </span>
<span className="from">(from {link})</span>
</div>
);
} else if (track.added_by){
var track_extra_detail = (
<div className="list__item__extra-detail list__item__extra-detail--added">
var track_middle_column = (
<div className="list__item__column__item list__item__column__item--added">
<span className="by">{track.added_by}</span>
</div>
);
@ -275,15 +275,15 @@ export default class Track extends React.Component{
drag_zone = (
<span
className="list__item__actions__item list__item__actions__item--drag-zone drag-zone touch-draggable mouse-draggable"
className="list__item__column__item list__item__column__item--drag-zone drag-zone touch-draggable mouse-draggable"
key="drag-zone">
<Icon name="drag_indicator" />
</span>
);
}
if (track_extra_detail){
className += " list__item--has-extra-detail";
if (track_middle_column){
className += " list__item--has-middle-column";
}
return (
@ -299,24 +299,24 @@ export default class Track extends React.Component{
onContextMenu={e => this.props.handleContextMenu(e)}
onTouchStart={e => this.handleTouchStart(e)}
onTouchEnd={e => this.handleTouchEnd(e)}>
<div className="list__item__actions">
<div className="list__item__column list__item__column--right">
{drag_zone}
<div className="list__item__actions__item list__item__actions__item--duration">
<span className="list__item__column__item list__item__column__item--duration">
{track.duration ? <Dater type="length" data={track.duration} /> : '-'}
</div>
<ContextMenuTrigger className="list__item__actions__item list__item__actions__item--context-menu-trigger subtle" key="context" onTrigger={e => this.props.handleContextMenu(e)} />
</span>
<ContextMenuTrigger className="list__item__column__item--context-menu-trigger subtle" onTrigger={e => this.props.handleContextMenu(e)} />
</div>
<div className="list__item__content">
<div className="list__item__name">
<div className="list__item__column list__item__column--name">
<div className="list__item__column__item--name">
{track.name ? track.name : <span className="mid_grey-text">{track.uri}</span>}
{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
{track.playing ? <Icon name="equalizer"></Icon> : null}
</div>
<ul className="list__item__details">
<ul className="list__item__column__item--details">
{track_details}
</ul>
</div>
{track_extra_detail ? track_extra_detail : null}
{track_middle_column ? track_middle_column : null}
</div>
</ErrorBoundary>
);

7
src/js/views/library/LibraryAlbums.js
View File

@ -215,9 +215,10 @@ class LibraryAlbums extends React.Component{
<section className="content-wrapper">
<List
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
rows={albums}
details={['artists','tracks_total']}
extra_detail={['added_at']}
rows={albums}
thumbnail={true}
details={['artists','tracks_uris.length']}
right_column={['added_at']}
className="albums"
link_prefix={global.baseURL+"album/"} />
<LazyLoadListener

5
src/js/views/library/LibraryArtists.js
View File

@ -179,8 +179,9 @@ class LibraryArtists extends React.Component{
<List
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
rows={artists}
details={['followers','popularity']}
extra_detail={['source']}
thumbnail={true}
details={['followers']}
middle_column={['source']}
className="artists"
link_prefix={global.baseURL+"artist/"} />
<LazyLoadListener

3
src/js/views/library/LibraryBrowse.js
View File

@ -107,8 +107,7 @@ class LibraryBrowse extends React.Component{
return (
<List
nocontext
columns={[{ name: 'name', width: '100'}]}
rows={subdirectories}
rows={subdirectories}
className="library-local-directory-list"
link_prefix={global.baseURL+'library/browse/'}
/>

3
src/js/views/library/LibraryPlaylists.js
View File

@ -129,8 +129,9 @@ class LibraryPlaylists extends React.Component{
<List
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
rows={playlists}
thumbnail={true}
details={['owner','tracks_total']}
extra_detail={['source']}
right_column={['source']}
className="playlists"
link_prefix={global.baseURL+"playlist/"} />
<LazyLoadListener