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

3
src/js/App.js
View File

@ -312,6 +312,9 @@ class App extends React.Component{
if (this.props.touch_dragging){
className += ' touch-dragging';
}
if (this.props.context_menu){
className += ' context-menu-open';
}
if (this.props.slim_mode){
className += ' slim-mode';
}

7
src/js/components/ContextMenu.js
View File

@ -44,8 +44,7 @@ class ContextMenu extends React.Component{
// if we've been given a menu object (ie activated) when we didn't have one prior
if (nextProps.menu && !this.props.menu){
this.setState({ submenu_expanded: false })
$('body').addClass('context-menu-open')
this.setState({ submenu_expanded: false });
var context = this.getContext(nextProps);
@ -66,10 +65,6 @@ class ContextMenu extends React.Component{
this.props.lastfmActions.getTrack(nextProps.menu.items[0].uri);
}
}
// we DID have one prior, and now we don't
} else if (this.props.menu && !nextProps.menu){
$('body').removeClass('context-menu-open')
}
}

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

@ -128,7 +128,10 @@ class Album extends React.Component{
}
return (
<div className="view album-view content-wrapper">
<div className="view album-view content-wrapper preserve-3d">
<Parallax image={album.images ? album.images.huge : null} blur />
<div className="thumbnail-wrapper">
<Thumbnail size="large" canZoom images={album.images} />
</div>
@ -139,11 +142,11 @@ class Album extends React.Component{
<ul className="details">
{!this.props.slim_mode ? <li className="tooltip"><Icon type="fontawesome" name={helpers.sourceIcon(album.uri )} /><span className="tooltip__content">{helpers.uriSource(this.props.params.uri )} {album.type ? album.type : 'album'}</span></li> : null}
{!this.props.slim_mode && album.artists && album.artists.length > 0 ? <li><ArtistSentence artists={album.artists} /></li> : null}
{album.artists && album.artists.length > 0 ? <li><ArtistSentence artists={album.artists} /></li> : null}
{album.release_date ? <li><Dater type="date" data={album.release_date} /></li> : null}
<li>
{!this.props.slim_mode ? <li>
{album.tracks ? <span>{album.tracks.length} tracks, <Dater type="total-time" data={album.tracks} /></span> : '0 tracks, 0 mins' }
</li>
</li> : null }
</ul>
</div>

3
src/js/views/Artist.js
View File

@ -296,7 +296,7 @@ class Artist extends React.Component{
<div className="view artist-view preserve-3d">
<div className="intro preserve-3d">
<Parallax image={image} theme={this.props.theme} disabled={this.props.disable_parallax} />
<Parallax image={image} />
<div className="liner">
<h1>{this.props.artist ? this.props.artist.name : null}</h1>
@ -326,7 +326,6 @@ class Artist extends React.Component{
const mapStateToProps = (state, ownProps) => {
var uri = ownProps.params.uri;
return {
disable_parallax: state.ui.disable_parallax,
theme: state.ui.theme,
slim_mode: state.ui.slim_mode,
load_queue: state.ui.load_queue,

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} />

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

@ -162,7 +162,7 @@ class Queue extends React.Component{
return (
<div className="view queue-view preserve-3d">
<Header className="overlay" options={options} uiActions={this.props.uiActions}>
<Header options={options} uiActions={this.props.uiActions}>
<Icon name="play_arrow" type="material" />
Now playing
</Header>