From d9b501cd51845623f239a2a37f0fdc845a924c13 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Fri, 26 May 2017 09:04:58 +1200 Subject: [PATCH] Adding ability to blur parallax; Overlay header; Discover Featured intro playlist --- src/js/components/Header.js | 2 +- src/js/components/Parallax.js | 15 ++++++++---- src/js/services/spotify/actions.js | 7 +++++- src/js/services/ui/middleware.js | 10 ++++++++ src/js/views/Playlist.js | 4 ---- src/js/views/discover/Discover.js | 6 ++--- src/js/views/discover/DiscoverFeatured.js | 29 +++++++++++++++++------ src/scss/components/_header.scss | 27 ++++++++++++++++----- src/scss/components/_images.scss | 14 +++++++++-- src/scss/views/_discover.scss | 22 +++++++++++++++-- 10 files changed, 105 insertions(+), 31 deletions(-) diff --git a/src/js/components/Header.js b/src/js/components/Header.js index b2ffe150..f4368bef 100755 --- a/src/js/components/Header.js +++ b/src/js/components/Header.js @@ -44,7 +44,7 @@ export default class Header extends React.Component{ render(){ return ( -
+

{ this.props.title }

diff --git a/src/js/components/Parallax.js b/src/js/components/Parallax.js index 0b4d53e7..651a876c 100755 --- a/src/js/components/Parallax.js +++ b/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 ( -
+
+
); } -} \ No newline at end of file +} + + + diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js index 84bff415..22601191 100755 --- a/src/js/services/spotify/actions.js +++ b/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: { diff --git a/src/js/services/ui/middleware.js b/src/js/services/ui/middleware.js index e1a0b5c0..988718c2 100755 --- a/src/js/services/ui/middleware.js +++ b/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) diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js index 4ec78c78..26e5b06f 100755 --- a/src/js/views/Playlist.js +++ b/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 ) } diff --git a/src/js/views/discover/Discover.js b/src/js/views/discover/Discover.js index fb600e91..a41a6927 100755 --- a/src/js/views/discover/Discover.js +++ b/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 (
- +
-

Discover new music

+

Explore new music

Add seeds below to build your sound. Let's start with {this.props.authorized ? " two of your favorite artists" : " the chill genre"}. diff --git a/src/js/views/discover/DiscoverFeatured.js b/src/js/views/discover/DiscoverFeatured.js index 5d0cf76e..409c8223 100755 --- a/src/js/views/discover/DiscoverFeatured.js +++ b/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 (
- +
- -

{playlist.name}

-

{playlist.tracks_total} tracks

+ + + + +

{playlist.name}

+ + {playlist.description ?

: null} +
+ +
) @@ -46,6 +59,7 @@ class DiscoverFeatured extends React.Component{ if (helpers.isLoading(this.props.load_queue,['spotify_browse/featured-playlists'])){ return (
+
@@ -71,7 +85,7 @@ class DiscoverFeatured extends React.Component{ return (
- +
{this.renderIntro(first_playlist)}
{playlists ? : null } @@ -98,6 +112,7 @@ const mapStateToProps = (state, ownProps) => { const mapDispatchToProps = (dispatch) => { return { + mopidyActions: bindActionCreators(mopidyActions, dispatch), spotifyActions: bindActionCreators(spotifyActions, dispatch) } } diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index b2bd3343..f971187e 100755 --- a/src/scss/components/_header.scss +++ b/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; diff --git a/src/scss/components/_images.scss b/src/scss/components/_images.scss index 5437a550..cbaf7f41 100755 --- a/src/scss/components/_images.scss +++ b/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 { diff --git a/src/scss/views/_discover.scss b/src/scss/views/_discover.scss index d69624e5..80daa850 100755 --- a/src/scss/views/_discover.scss +++ b/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; } } }