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

More immersive album and playlist mobile layouts + parallax

Browse Source
This commit is contained in:
James Barnsley
2018-10-28 21:14:54 +13:00
parent 97dcc716fb
commit ba1d4295e5
18 changed files with 10578 additions and 13821 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,11 +3,12 @@ import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { hashHistory } from 'react-router'
import Link from '../components/Link';
import ReactGA from 'react-ga'
import Link from '../components/Link';
import TrackList from '../components/TrackList'
import Thumbnail from '../components/Thumbnail'
import Parallax from '../components/Parallax'
import Dater from '../components/Dater'
import ConfirmationButton from '../components/Fields/ConfirmationButton'
import LazyLoadListener from '../components/LazyLoadListener'
@ -200,6 +201,9 @@ class Playlist extends React.Component{
return (
<div className="view playlist-view content-wrapper">
<Parallax image={playlist.images ? playlist.images.huge : null} blur />
<div className="thumbnail-wrapper">
<Thumbnail size="large" canZoom images={playlist.images} />
</div>
@ -210,9 +214,9 @@ class Playlist extends React.Component{
<ul className="details">
{!this.props.slim_mode ? <li className="tooltip"><Icon type="fontawesome" name={helpers.sourceIcon(playlist.uri)} /><span className="tooltip__content">{helpers.uriSource(playlist.uri)} playlist</span></li> : null }
{playlist.user_uri && !this.props.slim_mode ? <li><URILink type="user" uri={playlist.user_uri}>{playlist.user ? playlist.user.name : helpers.getFromUri('userid',playlist.user_uri)}</URILink></li> : null }
{playlist.followers !== undefined ? <li>{playlist.followers.toLocaleString()} followers</li> : null }
{playlist.last_modified_date ? <li>Edited <Dater type="ago" data={playlist.last_modified_date} /></li> : null }
{playlist.user_uri ? <li><URILink type="user" uri={playlist.user_uri}>{playlist.user ? playlist.user.name : helpers.getFromUri('userid',playlist.user_uri)}</URILink></li> : null }
{!this.props.slim_mode && playlist.followers !== undefined ? <li>{playlist.followers.toLocaleString()} followers</li> : null }
{!this.props.slim_mode && playlist.last_modified_date ? <li>Edited <Dater type="ago" data={playlist.last_modified_date} /></li> : null }
<li>
{playlist.tracks_total ? playlist.tracks_total : (playlist.tracks ? playlist.tracks.length : '0')} tracks,&nbsp;
<Dater type="total-time" data={playlist.tracks} />