Italic font; Playlist actions (beta); Following playlists

src/index.html

@@ -13,7 +13,7 @@
 	<link rel="shortcut icon" type="image/x-icon" href="/assets/favicon.ico" />
 	<link rel="shortcut-icon" href="/assets/favicon.ico" />
 
-	<link href="https://fonts.googleapis.com/css?family=Archivo+Narrow:300,400,700" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Archivo+Narrow:300,300i,400,400i,700" rel="stylesheet">
 	<link href="/app.css" rel="stylesheet" />
 
 </head>

src/js/components/ConfirmationButton.js

@@ -55,6 +55,8 @@ export default class ConfirmationButton extends React.Component{
 			if( this.state.timing_out ) className += ' timing-out';
 		}
 
+		if( this.props.className ) className += ' '+this.props.className
+
 		return (
 			<button
 				className={className}

src/js/services/localstorage/middleware.js

@@ -12,7 +12,7 @@ const localstorageMiddleware = (function(){
 
         // append our state to a global variable. This gives us access to debug the store at any point
         window._store = store
-        //console.log(action)
+        console.log(action)
 
         switch( action.type ){
 

src/js/services/spotify/actions.js

@@ -28,7 +28,9 @@ const sendRequest = ( dispatch, getState, endpoint, method = 'GET', data = false
                         },
                         data: data
                     }).then( 
-                        response => resolve(response),
+                        response => {
+                            resolve(response)
+                        },
                         (xhr, status, error) => {
                             console.error( endpoint+' failed', xhr.responseText)
                             reject(error)
@@ -332,19 +334,40 @@ export function getAlbum( uri ){
 export function getPlaylist( uri ){
     return (dispatch, getState) => {
 
-		// flush out the previous store value
+        // flush out the previous store value
         dispatch({ type: 'SPOTIFY_PLAYLIST_LOADED', data: false });
 
-        sendRequest( dispatch, getState, 'users/'+ helpers.getFromUri('userid',uri) +'/playlists/'+ helpers.getFromUri('playlistid',uri) +'?market='+getState().spotify.country )
+        var playlist = {};
+
+        $.when(
+
+             sendRequest( dispatch, getState, 'users/'+ helpers.getFromUri('userid',uri) +'/playlists/'+ helpers.getFromUri('playlistid',uri) +'?market='+getState().spotify.country )
             .then( response => {
-                dispatch({
-                	type: 'SPOTIFY_PLAYLIST_LOADED',
-                	data: response
-                });
+                Object.assign( playlist, response );
+            }),
+
+            // TODO: Check if we're authenticated before sending this request, otherwise we get a 403
+            sendRequest( dispatch, getState, 'users/'+ helpers.getFromUri('userid',uri) + '/playlists/'+ helpers.getFromUri('playlistid',uri) + '/followers/contains?ids='+getState().spotify.me.id )
+            .then( response => {
+                var is_following = 0
+                if( response.length > 0 ) is_following = response[0]
+                Object.assign(playlist, { following: response[0] } );
+            })
+
+        ).then( () => {
+            dispatch({
+                type: 'SPOTIFY_PLAYLIST_LOADED',
+                data: playlist
             });
-	}
+        });
+    }
 }
 
+
+/**
+ * All of my playlists
+ **/
+
 function loadNextPlaylistsBatch( dispatch, getState, playlists, lastResponse ){
     if( lastResponse.next ){
         sendRequest( dispatch, getState, lastResponse.next )
@@ -541,3 +564,27 @@ export function getSearchResults( query, type = 'album,artist,playlist,track', l
             });
 	}
 }
+
+
+
+/**
+ * Following toggles
+ **/
+
+export function toggleFollowingPlaylist( uri, method ){
+    if( method == 'PUT' ) var new_state = 1
+    if( method == 'DELETE' ) var new_state = 0
+
+    return (dispatch, getState) => {
+        sendRequest( dispatch, getState, 'users/'+ helpers.getFromUri('userid',uri) + '/playlists/'+ helpers.getFromUri('playlistid',uri) + '/followers', method )
+            .then( response => {
+                dispatch({
+                    type: 'SPOTIFY_PLAYLIST_FOLLOWING',
+                    data: new_state
+                });
+            });
+    }
+}
+
+
+

src/js/services/ui/reducer.js

@@ -174,6 +174,10 @@ export default function reducer(ui = {}, action){
             })
             return Object.assign({}, ui, { playlist: playlist });
 
+        case 'SPOTIFY_PLAYLIST_FOLLOWING':
+            var playlist = Object.assign({}, ui.playlist, { following: action.data })
+            return Object.assign({}, ui, { playlist: playlist });
+
 
         /**
          * Library Playlists

src/js/views/Playlist.js

@@ -3,11 +3,12 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import FontAwesome from 'react-fontawesome'
-let helpers = require('../helpers.js')
+import * as helpers from '../helpers'
 
 import TrackList from '../components/TrackList'
 import Thumbnail from '../components/Thumbnail'
 import Dater from '../components/Dater'
+import ConfirmationButton from '../components/ConfirmationButton'
 import LazyLoadListener from '../components/LazyLoadListener'
 
 import * as spotifyActions from '../services/spotify/actions'
@@ -47,29 +48,76 @@ class Playlist extends React.Component{
 		this.props.spotifyActions.getURL( this.props.playlist.tracks_more, 'SPOTIFY_PLAYLIST_LOADED_MORE' );
 	}
 
+	play(){
+		this.props.mopidyActions.playTracks([this.props.params.uri])
+	}
+
+	follow(){
+		this.props.spotifyActions.toggleFollowingPlaylist( this.props.params.uri, 'PUT' )
+	}
+
+	unfollow(){
+		this.props.spotifyActions.toggleFollowingPlaylist( this.props.params.uri, 'DELETE' )
+	}
+
+	delete(){
+		alert('Delete me')
+	}
+
+	renderFollowOrDeleteButton(){
+		if( !this.props.spotify_authorized ) return null
+
+		switch( helpers.uriSource( this.props.params.uri ) ){
+
+			case 'm3u':
+				return <ConfirmationButton className="large tertiary" content="Delete" confirmingContent="Confirm" onConfirm={ e => this.delete() } />
+				break
+
+			case 'spotify':			
+				if( this.props.playlist.owner && this.props.playlist.owner.id == this.props.spotify_userid ){
+					return <ConfirmationButton className="large tertiary" content="Delete" confirmingContent="Are you sure?" onConfirm={ e => this.delete() } />
+				}else if( this.props.playlist.following ){
+					return <button className="large tertiary" onClick={ e => this.unfollow() }>Unfollow</button>
+				}else{
+					return <button className="large tertiary" onClick={ e => this.follow() }>Follow</button>
+				}
+				break
+
+		}
+	}
+
 	render(){
-		if( !this.props.playlist ) return null;
+		if( !this.props.playlist || !this.props.playlist.name ) return null;
 		var scheme = helpers.uriSource( this.props.params.uri );
 
 		return (
 			<div className="view playlist-view">
 				<div className="intro">
+
 					<Thumbnail size="large" images={ this.props.playlist.images } />
+
+					<div className="actions">
+						<button className="large primary" onClick={ e => this.play() }>Play</button>
+						{ this.renderFollowOrDeleteButton() }
+					</div>
+
 					<ul className="details">
 						<li>{ this.props.playlist.tracks_total } tracks, <Dater type="total-time" data={this.props.playlist.tracks} /></li>
 						{ this.props.playlist.last_modified ? <li>Updated <Dater type="ago" data={this.props.playlist.last_modified} /> ago</li> : null }
 						{ scheme == 'spotify' ? <li><FontAwesome name="spotify" /> Spotify playlist</li> : null }
 						{ scheme == 'm3u' ? <li><FontAwesome name="folder" /> Local playlist</li> : null }
 					</ul>
+
 				</div>
 				<div className="main">
 
 					<div className="title">
 						<h1>{ this.props.playlist.name }</h1>
+						{ this.props.playlist.description ? <h3 className="grey-text" dangerouslySetInnerHTML={{__html: this.props.playlist.description}}></h3> : null }
 					</div>
 
 					<section className="list-wrapper">
-						<TrackList tracks={ this.props.playlist.tracks } />
+						{ this.props.playlist.tracks ? <TrackList tracks={ this.props.playlist.tracks } /> : null }
 						<LazyLoadListener loadMore={ () => this.loadMore() }/>
 					</section>
 					
@@ -89,7 +137,9 @@ class Playlist extends React.Component{
 const mapStateToProps = (state, ownProps) => {
 	return {
 		playlist: state.ui.playlist,
-		mopidy_connected: state.mopidy.connected
+		mopidy_connected: state.mopidy.connected,
+		spotify_authorized: state.spotify.authorized,
+		spotify_userid: state.spotify.me.id
 	}
 }
 

src/scss/global/_forms.scss

@@ -13,6 +13,15 @@ input[type="date"] {
 	font-size: 14px;
 }
 
+.button-wrapper {	
+	padding: 10px 0;
+	margin-top: -1px;
+
+	&.large {
+		padding: 16px 0;
+	}
+}
+
 .button,
 button,
 input[type="button"],
@@ -28,6 +37,10 @@ input[type="submit"] {
 		background: darken( $light_grey, 6%);
 	}
 
+	&.large {
+		padding: 16px 24px;
+	}
+
 	&.primary {
 		background: $turquoise;
 		color: #FFFFFF;
@@ -44,6 +57,14 @@ input[type="submit"] {
 		}
 	}
 
+	&.tertiary {
+		background: $mid_grey;
+		color: #FFFFFF;
+		&:hover {
+			background: darken( $mid_grey, 6% );
+		}
+	}
+
 	&.confirming,
 	&.destructive {
 		background: $red;