Suppressing broadcasts; New releases featured intro

src/js/components/Notifications.js

@@ -25,7 +25,7 @@ export default class Notifications extends React.Component{
 
 							default:
 								return (
-									<div className={notification.type+" notification"} key={notification.key}>
+									<div className={notification.type+" notification"} key={notification.key} data-key={notification.key}>
 										<FontAwesome name="close" className="close-button" onClick={ e => this.props.uiActions.removeNotification(notification.key) } />
 										{notification.title ? <h4>{notification.title}</h4> : null}
 										<p dangerouslySetInnerHTML={{__html: notification.content}}></p>

src/js/services/localstorage/middleware.js

@@ -139,7 +139,7 @@ const localstorageMiddleware = (function(){
                     ui,
                     { suppressed_broadcasts: suppressed_broadcasts }
                 );
-                localStorage.setItem('ui', JSON.stringify(ui));
+                localStorage.setItem('ui', JSON.stringify(ui))
                 break
         }
     }

src/js/services/ui/middleware.js

@@ -326,7 +326,7 @@ const UIMiddleware = (function(){
                 action.index = index
 
                 // If a broadcast, add to suppressed_broadcasts
-                if (notifications[index].type == 'broadcast'){
+                if (index > -1 && typeof(notifications[index]) !== 'undefined' && notifications[index].type == 'broadcast'){
                     store.dispatch({
                         type: 'SUPPRESS_BROADCAST',
                         key: notifications[index].key
@@ -345,15 +345,17 @@ const UIMiddleware = (function(){
                 for (var i = 0; i < action.broadcasts.length; i++){
                     var broadcast = action.broadcasts[i]
 
-                    if (!suppressed_broadcasts.includes(broadcast.id)){
-                        store.dispatch(uiActions.createNotification(
-                            broadcast.message,
-                            'broadcast',
-                            broadcast.id,
-                            broadcast.title,
-                            true
-                        )) 
-                    }     
+                    if (!suppressed_broadcasts.includes(broadcast.key)){
+                        if (broadcast.message){
+                            store.dispatch(uiActions.createNotification(
+                                broadcast.message,
+                                'broadcast',
+                                (broadcast.key ? broadcast.key : null),
+                                (broadcast.title ? broadcast.title : null),
+                                true
+                            )) 
+                        }
+                    }
                 }
 
                 next(action)

src/js/services/ui/reducer.js

@@ -723,11 +723,6 @@ export default function reducer(ui = {}, action){
 
             return Object.assign({}, ui, {notifications: notifications})
 
-        case 'SUPPRESS_BROADCAST':
-            var suppressed_broadcasts = (typeof(ui.suppressed_broadcasts) !== 'undefined' ? ui.suppressed_broadcasts : [])
-            suppressed_broadcasts.push(action.key)
-            return Object.assign({}, ui, {suppressed_broadcasts: suppressed_broadcasts})
-
 
 
 

src/js/views/discover/DiscoverNewReleases.js

@@ -2,10 +2,15 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
+import { Link } from 'react-router'
 
 import Header from '../../components/Header'
 import AlbumGrid from '../../components/AlbumGrid'
+import Parallax from '../../components/Parallax'
+import Thumbnail from '../../components/Thumbnail'
+import ArtistSentence from '../../components/ArtistSentence'
 import LazyLoadListener from '../../components/LazyLoadListener'
+
 import * as helpers from '../../helpers'
 import * as uiActions from '../../services/ui/actions'
 import * as spotifyActions from '../../services/spotify/actions'
@@ -24,6 +29,40 @@ class DiscoverNewReleases extends React.Component{
 		this.props.spotifyActions.getURL(this.props.new_releases_more, 'SPOTIFY_NEW_RELEASES_LOADED');
 	}
 
+	playAlbum(e,album){
+        this.props.mopidyActions.playURIs([album.uri],album.uri)
+	}
+
+	renderIntro(album = null){
+		if (album){
+			return (
+				<div className="intro">
+					<Parallax image={helpers.sizedImages(album.images).huge} blur />
+					<div className="content cf">
+						<Link to={global.baseURL+'album/'+album.uri}>
+							<Thumbnail images={album.images} />
+						</Link>
+						<Link to={global.baseURL+'album/'+album.uri}>
+							<h1>{album.name}</h1>
+						</Link>
+						<h3>
+							<ArtistSentence artists={album.artists} />
+						</h3>
+						<div className="actions">
+							<button className="primary" onClick={e => this.playAlbum(e,album)}>Play</button>
+						</div>
+					</div>
+				</div>
+			)
+		} else {
+			return (
+				<div className="intro">
+					<Parallax />
+				</div>
+			)
+		}
+	}
+
 	render(){
 		if (helpers.isLoading(this.props.load_queue,['spotify_browse/new-releases'])){
 			return (
@@ -46,9 +85,16 @@ class DiscoverNewReleases extends React.Component{
 			}
 		}
 
+		// Pull the first playlist out and we'll use this as a banner
+		var first_album = albums.splice(0,1)
+		if (first_album){
+			first_album = first_album[0]
+		}
+
 		return (
 			<div className="view discover-new-releases-view">
-				<Header icon="leaf" title="New Releases" />
+				<Header className="overlay" icon="leaf" title="New Releases" />
+				{this.renderIntro(first_album)}
 				<section className="grid-wrapper">
 					<AlbumGrid albums={albums} />
 				</section>

src/scss/views/_discover.scss

@@ -105,7 +105,8 @@
 	}
 }
 
-.discover-featured-view {
+.discover-featured-view,
+.discover-new-releases-view {
 	.intro {
 		position: relative;
 		padding-top: 50px;