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

src/js/components/Header.js

@@ -44,7 +44,7 @@ export default class Header extends React.Component{
 
 	render(){
 		return (
-			<header>
+			<header className={(this.props.className ? this.props.className : null)}>
 				<Icon name={ this.props.icon } />
 				<SidebarToggleButton />
 				<h1>{ this.props.title }</h1>

src/js/components/Parallax.js

@@ -92,8 +92,9 @@ export default class Parallax extends React.Component{
 	loadImage( url ){
 		return new Promise( (resolve, reject) => {
 
-			var imageObject = new Image();
-			imageObject.src = url;
+			var imageObject = new Image()
+			imageObject.src = url
+			imageObject.crossOrigin = 'anonymous'
 
 			imageObject.onload = function(){
 				var image = {
@@ -161,14 +162,18 @@ export default class Parallax extends React.Component{
 
 	render(){
 		return (
-			<div className="parallax">
+			<div className={this.props.blur ? "parallax blur" : "parallax"}>
+
 				<canvas 
 					id="parallax-canvas" 
-					className={ !this.state.loading ? 'loaded' : null } 
+					className={!this.state.loading ? 'loaded' : null} 
 					width={this.state.canvas.width} 
 					height={this.state.canvas.height}>
 				</canvas>
 			</div>
 		);
 	}
-}
+}
+
+
+

src/js/services/spotify/actions.js

@@ -316,10 +316,15 @@ export function getFeaturedPlaylists(){
                     ))
                 }
 
+                // Pick the first playlist, and get the full playlist object
+                // We use this as in our introduction parallax panel, and need the full playlist
+                dispatch(getPlaylist(playlists[0].uri))
+
                 dispatch({
                     type: 'PLAYLISTS_LOADED',
                     playlists: playlists
-                });  
+                });
+
                 dispatch({
                     type: 'SPOTIFY_FEATURED_PLAYLISTS_LOADED',
                     data: {

src/js/services/ui/middleware.js

@@ -116,6 +116,11 @@ const UIMiddleware = (function(){
                 next(action)
                 break
 
+            case 'MOPIDY_PLAY_PLAYLIST':
+                ReactGA.event({ category: 'Playlist', action: 'Play', label: action.uri })
+                next(action)
+                break
+
             case 'MOPIDY_SAVE_PLAYLIST':
             case 'SPOTIFY_SAVE_PLAYLIST':
                 ReactGA.event({ category: 'Playlist', action: 'Save', label: action.key })
@@ -150,6 +155,11 @@ const UIMiddleware = (function(){
                 next(action)
                 break
 
+            case 'MOPIDY_DELETE_PLAYLIST':
+                ReactGA.event({ category: 'Playlist', action: 'Delete', label: action.uri })
+                next(action)
+                break
+
             case 'PUSHER_ERROR':
                 ReactGA.event({ category: 'Pusher', action: 'Error', label: action.message })
                 next(action)

src/js/views/Playlist.js

@@ -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 )
 	}
 

src/js/views/discover/Discover.js

@@ -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"}.

src/js/views/discover/DiscoverFeatured.js

@@ -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)
 	}
 }

src/scss/components/_header.scss

@@ -4,6 +4,7 @@ main {
 		padding: 14px 20px;
 		background: #EEEEEE;
 		line-height: 24px;
+		box-sizing: border-box;
 
 		h1 {
 			font-size: 22px;
@@ -17,12 +18,6 @@ main {
 			height: 16px;
 		}
 
-		@include responsive( $bp_medium ){
-			.icon {
-				visibility: hidden;
-			}
-		}
-
 		.options {
 			position: absolute;
 			top: 0;
@@ -53,7 +48,27 @@ main {
 			}
 		}
 
+		&.overlay {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			background: rgba(0,0,0,0.1);
+			color: $white;
+			z-index: 95;
+
+			.icon {
+				-webkit-filter: invert(1);
+				-moz-filter: invert(1);
+				filter: invert(1);
+			}
+		}
+
 		@include responsive( $bp_medium ){
+			.icon {
+				visibility: hidden;
+			}
+
 			.options {
 				right: 0;
 

src/scss/components/_images.scss

@@ -62,16 +62,26 @@
 	width: 100%;
 	overflow: hidden;
 	background: #111111;
+	position: relative;
 
 	canvas {
-		width: 100%;
-		height: 100%;
+		width: 110%;
+		height: 110%;
 		opacity: 0;
+		position: absolute;
+		top: -5%;
+		left: -5%;
 
 		&.loaded {
 			opacity: 0.4;
 		}
 	}
+
+	&.blur {
+		canvas {
+			filter: blur(15px);
+		}
+	}
 }
 
 .tiles {

src/scss/views/_discover.scss

@@ -3,7 +3,7 @@
 	
 	.intro {
 		position: relative;
-		padding: 60px 40px;
+		padding: 100px 40px 60px 40px;
 		z-index: 1;
 
 		.parallax {
@@ -108,6 +108,7 @@
 .discover-featured-view {
 	.intro {
 		position: relative;
+		padding-top: 50px;
 
 		.parallax {
 			position: absolute;
@@ -127,7 +128,24 @@
 			.thumbnail {
 				float: left;
 				max-width: 200px;
-				margin-right: 40px;
+			}
+
+			h1,
+			h3,
+			.actions {
+				padding-left: 240px;
+			}
+
+			h1 {
+				padding-top: 20px;
+			}
+
+			h3 {
+				opacity: 0.5;
+			}
+
+			.actions {
+				padding-top: 40px;
 			}
 		}
 	}