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

Adding ability to blur parallax; Overlay header; Discover Featured intro playlist

Browse Source
This commit is contained in:
James Barnsley
2017-05-26 09:04:58 +12:00
parent 89acad7822
commit d9b501cd51
10 changed files with 105 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,7 +69,6 @@ class Playlist extends React.Component{
}
play(){
ReactGA.event({ category: 'Playlist', action: 'Play', label: this.props.playlist.uri })
this.props.mopidyActions.playPlaylist(this.props.playlist.uri)
}
@ -86,17 +85,14 @@ class Playlist extends React.Component{
// TODO: Once deletion occurs, remove playlist from global playlists list
delete(){
ReactGA.event({ category: 'Playlist', action: 'Delete', label: this.props.playlist.uri })
this.props.mopidyActions.deletePlaylist( this.props.playlist.uri )
}
reorderTracks( indexes, index ){
ReactGA.event({ category: 'Playlist', action: 'Reorder tracks', label: this.props.playlist.uri })
this.props.uiActions.reorderPlaylistTracks( this.props.playlist.uri, indexes, index, this.props.playlist.snapshot_id )
}
removeTracks( tracks_indexes ){
ReactGA.event({ category: 'Playlist', action: 'Remove tracks', label: this.props.playlist.uri })
this.props.uiActions.removeTracksFromPlaylist( this.props.playlist.uri, tracks_indexes )
}

6
src/js/views/discover/Discover.js
View File

@ -4,7 +4,7 @@ import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import SidebarToggleButton from '../../components/SidebarToggleButton'
import Header from '../../components/Header'
import ArtistSentence from '../../components/ArtistSentence'
import ArtistGrid from '../../components/ArtistGrid'
import AlbumGrid from '../../components/AlbumGrid'
@ -153,11 +153,11 @@ class Discover extends React.Component{
render(){
return (
<div className="view discover-view">
<SidebarToggleButton />
<Header icon="compass" title="Discover" className="overlay" />
<div className="intro">
<Parallax image="/iris/assets/backgrounds/discover.jpg" />
<div className="liner">
<h1>Discover new music</h1>
<h1>Explore new music</h1>
<h3>
Add seeds below to build your sound. Let's start with
{this.props.authorized ? " two of your favorite artists" : " the chill genre"}.

29
src/js/views/discover/DiscoverFeatured.js
View File

@ -2,12 +2,15 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import PlaylistGrid from '../../components/PlaylistGrid'
import SidebarToggleButton from '../../components/SidebarToggleButton'
import Header from '../../components/Header'
import Parallax from '../../components/Parallax'
import Thumbnail from '../../components/Thumbnail'
import * as helpers from '../../helpers'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
class DiscoverFeatured extends React.Component{
@ -16,20 +19,30 @@ class DiscoverFeatured extends React.Component{
super(props);
}
// on render
componentDidMount(){
this.props.spotifyActions.getFeaturedPlaylists();
}
playPlaylist(e,playlist){
this.props.mopidyActions.playPlaylist(playlist.uri)
}
renderIntro(playlist = null){
if (playlist){
return (
<div className="intro">
<Parallax image={helpers.sizedImages(playlist.images).huge} />
<Parallax image={helpers.sizedImages(playlist.images).huge} blur="25"/>
<div className="content cf">
<Thumbnail images={playlist.images} />
<h1>{playlist.name}</h1>
<h3>{playlist.tracks_total} tracks</h3>
<Link to={global.baseURL+'playlist/'+playlist.uri}>
<Thumbnail images={playlist.images} />
</Link>
<Link to={global.baseURL+'playlist/'+playlist.uri}>
<h1>{playlist.name}</h1>
</Link>
{playlist.description ? <h3 dangerouslySetInnerHTML={{__html: playlist.description}}></h3> : null}
<div className="actions">
<button className="primary" onClick={e => this.playPlaylist(e,playlist)}>Play</button>
</div>
</div>
</div>
)
@ -46,6 +59,7 @@ class DiscoverFeatured extends React.Component{
if (helpers.isLoading(this.props.load_queue,['spotify_browse/featured-playlists'])){
return (
<div className="view discover-featured-view">
<Header icon="star" title="Featured playlists" />
<div className="body-loader">
<div className="loader"></div>
</div>
@ -71,7 +85,7 @@ class DiscoverFeatured extends React.Component{
return (
<div className="view discover-featured-view">
<SidebarToggleButton />
<Header className="overlay" icon="star" title="Featured playlists" />
{this.renderIntro(first_playlist)}
<section className="grid-wrapper">
{playlists ? <PlaylistGrid playlists={playlists} /> : null }
@ -98,6 +112,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}
}