Dater; Basic grid responsive; Local formatting

src/js/components/Dater.js

@@ -7,15 +7,44 @@ export default class Dater extends React.Component{
 		super(props);
 	}
 
+	formatDuration( milliseconds = false ){
+		if( !milliseconds ) return null
+
+		var string, total_hours, total_minutes, total_seconds, minutes, seconds;
+
+		// get total values for each 
+		total_seconds = Math.floor( milliseconds / 1000 )
+		total_minutes = Math.floor( milliseconds / (1000 * 60) )
+		total_hours = Math.floor(milliseconds / (1000 * 60 * 60))
+
+		// get left-over number of seconds
+		seconds = total_seconds - ( total_minutes * 60 )
+		if( seconds <= 9 ) seconds = '0'+ seconds
+
+		minutes = total_minutes - ( total_hours * 60 )
+		if( minutes <= 9 ) minutes = '0'+ minutes
+
+		if( total_hours ) string = total_hours+':'
+		string += minutes+':'+seconds;
+
+		return string
+	}
+
 	calculate(){
 		switch(this.props.type){
 
+			case 'total-time':
+				var duration = 0;
+				var tracks = this.props.data
+				for( var i = 0; i < tracks.length; i++ ){
+					if( tracks[i].duration_ms ) duration += parseInt(tracks[i].duration_ms);
+					if( tracks[i].length ) duration += parseInt(tracks[i].length);
+				}
+				return this.formatDuration(duration)
+				break
+
 			case 'length':
-				var time = new Date( this.props.data );
-				var min = time.getMinutes();
-				var sec = time.getSeconds();
-				if( sec < 10 ) sec = '0'+sec;
-				return min+':'+sec;
+				return this.formatDuration(this.props.data)
 				break
 
 			case 'date':

src/js/components/Icon.js

@@ -11,7 +11,7 @@ export default class Icon extends React.Component{
 	render(){
 		var className = 'icon';
 		if( this.props.className ) className += ' '+this.props.className;
-		var src = require('../../images/icons/'+this.props.name+'.svg');
+		var src = require('../../assets/icons/'+this.props.name+'.svg');
 		return <img className={className} src={src} />;
 	}
 }

src/js/components/Thumbnail.js

@@ -28,10 +28,10 @@ export default class Thumbnail extends React.Component{
 
 		if( images.length <= 0 ){
 			state = {
-				small: require('../../images/no-image.svg'),
-				medium: require('../../images/no-image.svg'),
-				large: require('../../images/no-image.svg'),
-				huge: require('../../images/no-image.svg')
+				small: require('../../assets/no-image.svg'),
+				medium: require('../../assets/no-image.svg'),
+				large: require('../../assets/no-image.svg'),
+				huge: require('../../assets/no-image.svg')
 			}
 		}else{
 			state = helpers.sizedImages( images );

src/js/index.js

@@ -30,8 +30,9 @@ import LibraryAlbums from './views/library/LibraryAlbums'
 import LibraryTracks from './views/library/LibraryTracks'
 import LibraryPlaylists from './views/library/LibraryPlaylists'
 import LibraryLocal from './views/library/LibraryLocal'
-import LibraryLocalDirectory from './views/library/LibraryLocalDirectory'
 import LibraryLocalArtists from './views/library/LibraryLocalArtists'
+import LibraryLocalAlbums from './views/library/LibraryLocalAlbums'
+import LibraryLocalDirectory from './views/library/LibraryLocalDirectory'
 
 ReactDOM.render(
 	<Provider store={store}>
@@ -52,8 +53,9 @@ ReactDOM.render(
 				<Route path="library/tracks" component={LibraryTracks} />
 				<Route path="library/playlists" component={LibraryPlaylists} />
 				<Route path="library/local" component={LibraryLocal} />
-				<Route path="library/local/directory/:uri" component={LibraryLocalDirectory} />
 				<Route path="library/local/artists" component={LibraryLocalArtists} />
+				<Route path="library/local/albums" component={LibraryLocalAlbums} />
+				<Route path="library/local/directory/:uri" component={LibraryLocalDirectory} />
 				
 				<Route path="album/:uri" component={Album} />
 				<Route path="artist/:uri" component={Artist} />

src/js/services/mopidy/actions.js

@@ -95,14 +95,6 @@ export function getPlaylists(){
 	return { type: 'MOPIDY_PLAYLISTS' }
 }
 
-export function getBrowse( uri ){
-	return {
-		type: 'MOPIDY_INSTRUCT',
-		call: 'library.browse',
-		value: { uri: uri }
-	}
-}
-
 export function getPlaylist( uri ){
 	return { 
 		type: 'MOPIDY_PLAYLIST', 
@@ -110,6 +102,13 @@ export function getPlaylist( uri ){
 	}
 }
 
+export function getDirectory( uri ){
+	return { 
+		type: 'MOPIDY_DIRECTORY', 
+		data: { uri: uri } 
+	}
+}
+
 export function getAlbum( uri ){
 	return { 
 		type: 'MOPIDY_ALBUM', 
@@ -130,3 +129,9 @@ export function getArtists(){
 	}
 }
 
+export function getAlbums(){
+	return { 
+		type: 'MOPIDY_ALBUMS'
+	}
+}
+

src/js/services/mopidy/middleware.js

@@ -264,13 +264,27 @@ const MopidyMiddleware = (function(){
                     })
                 break;
 
+            case 'MOPIDY_DIRECTORY':
+                store.dispatch({ type: 'MOPIDY_DIRECTORY_LOADED', data: false });
+                instruct( socket, store, 'library.browse', action.data )
+                    .then( response => {                    
+                        store.dispatch({ type: 'MOPIDY_DIRECTORY_LOADED', data: response });
+                    })
+                break;
+
             case 'MOPIDY_ARTISTS':
                 store.dispatch({ type: 'MOPIDY_ARTISTS_LOADED', data: false });
                 instruct( socket, store, 'library.browse', { uri: 'local:directory?type=artist' } )
-                    .then( response => {
-                        var artists = response;
-                        
-                        store.dispatch({ type: 'MOPIDY_ARTISTS_LOADED', data: artists });
+                    .then( response => {                    
+                        store.dispatch({ type: 'MOPIDY_ARTISTS_LOADED', data: response });
+                    })
+                break;
+
+            case 'MOPIDY_ALBUMS':
+                store.dispatch({ type: 'MOPIDY_ALBUMS_LOADED', data: false });
+                instruct( socket, store, 'library.browse', { uri: 'local:directory?type=album' } )
+                    .then( response => {                     
+                        store.dispatch({ type: 'MOPIDY_ALBUMS_LOADED', data: response });
                     })
                 break;
 

src/js/services/mopidy/reducer.js

@@ -72,9 +72,9 @@ export default function reducer(mopidy = {}, action){
                 volume: action.data   
             });
 
-        case 'MOPIDY_BROWSE':
+        case 'MOPIDY_DIRECTORY_LOADED':
             return Object.assign({}, mopidy, {
-                browse: action.data   
+                directory: action.data   
             });
 
         case 'MOPIDY_PLAYLIST_LOADED':
@@ -97,6 +97,11 @@ export default function reducer(mopidy = {}, action){
                 artists: action.data
             });
 
+        case 'MOPIDY_ALBUMS_LOADED':
+            return Object.assign({}, mopidy, {
+                albums: action.data
+            });
+
         default:
             return mopidy
     }

src/js/services/spotify/actions.js

@@ -217,40 +217,63 @@ export function getTrack( uri ){
  * @param uri string
  **/
 export function getArtist( uri ){
-	return (dispatch, getState) => {
+    return (dispatch, getState) => {
 
-		// flush out the previous store value
+        // flush out the previous store value
         dispatch({ type: 'SPOTIFY_ARTIST_LOADED', data: false });
 
-		var artist = {};
+        var artist = {};
 
-		// while we're fiddling about, go get the albums
-		dispatch(getArtistAlbums(uri));
+        // while we're fiddling about, go get the albums
+        dispatch(getArtistAlbums(uri));
 
-		// get both the artist and the top tracks
-		$.when(
+        // get both the artist and the top tracks
+        $.when(
 
-	        sendRequest( dispatch, getState, 'artists/'+ helpers.getFromUri('artistid', uri) )
-	            .then( response => {
-	            	Object.assign(artist, response);
-	            }),
+            sendRequest( dispatch, getState, 'artists/'+ helpers.getFromUri('artistid', uri) )
+                .then( response => {
+                    Object.assign(artist, response);
+                }),
 
             sendRequest( dispatch, getState, 'artists/'+ helpers.getFromUri('artistid', uri) +'/top-tracks?country='+getState().spotify.country )
                 .then( response => {
                     Object.assign(artist, response);
                 }),
 
-	        sendRequest( dispatch, getState, 'artists/'+ helpers.getFromUri('artistid', uri) +'/related-artists' )
-	            .then( response => {
-	            	Object.assign(artist, { related_artists: response.artists });
-	            })
+            sendRequest( dispatch, getState, 'artists/'+ helpers.getFromUri('artistid', uri) +'/related-artists' )
+                .then( response => {
+                    Object.assign(artist, { related_artists: response.artists });
+                })
 
-	    ).then( () => {
+        ).then( () => {
             dispatch({
-            	type: 'SPOTIFY_ARTIST_LOADED',
-            	data: artist
+                type: 'SPOTIFY_ARTIST_LOADED',
+                data: artist
+            });
+        });
+    }
+}
+
+export function getArtists( uris ){
+	return (dispatch, getState) => {
+
+		// flush out the previous store value
+        dispatch({ type: 'SPOTIFY_ARTISTS_LOADED', data: false });
+
+        // now get all the artists for this album (full objects)
+        var ids = '';
+        for( var i = 0; i < uris.length; i++ ){
+            if( ids != '' ) ids += ','
+            ids += helpers.getFromUri( 'artistid', uris[i] );
+        }
+
+        sendRequest( dispatch, getState, 'artists/?ids='+ids )
+            .then( response => {
+                dispatch({
+                    type: 'SPOTIFY_ARTISTS_LOADED',
+                    data: response.artists
+                });
             });
-	    });
 	}
 }
 
@@ -280,6 +303,13 @@ export function getAlbum( uri ){
         sendRequest( dispatch, getState, 'albums/'+ helpers.getFromUri('albumid', uri) )
             .then( response => {
 
+                // now get all the artists for this album (full objects)
+                var artist_uris = [];
+                for( var i = 0; i < response.artists.length; i++ ){
+                    artist_uris.push( response.artists[i].uri )
+                }
+                dispatch(getArtists(artist_uris));
+
                 // inject the parent album object into each track for consistent track objects
                 for( var i = 0; i < response.tracks.items.length; i++ ){
                     response.tracks.items[i].album = {

src/js/services/spotify/reducer.js

@@ -65,6 +65,9 @@ export default function reducer(spotify = {}, action){
         case 'SPOTIFY_ARTIST_LOADED':
             return Object.assign({}, spotify, { artist: action.data });
 
+        case 'SPOTIFY_ARTISTS_LOADED':
+            return Object.assign({}, spotify, { artists: action.data });
+
         case 'SPOTIFY_ARTIST_ALBUMS_LOADED':            
             return Object.assign({}, spotify, { artist_albums: action.data });
 

src/js/views/Album.js

@@ -2,6 +2,7 @@
 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 TrackList from '../components/TrackList'
@@ -43,30 +44,29 @@ class Album extends React.Component{
 		}
 	}
 
-	totalTime( tracks = [] ){
-		var duration = 0;
-		for( var i = 0; i < tracks.length; i++ ){
-			if( tracks[i].duration_ms ) duration += parseInt(tracks[i].duration_ms);
-			if( tracks[i].length ) duration += parseInt(tracks[i].length);
-		}
-		return duration;
-	}
-
 	render(){
 		var source = helpers.uriSource( this.props.params.uri );
-		if( source == 'spotify' ) var album = this.props.spotify.album
-		if( source == 'local' ) var album = this.props.mopidy.album
+		if( source == 'spotify' ){
+			var album = this.props.spotify.album
+			var artists = this.props.spotify.artists
+		}else if( source == 'local' ){
+			var album = this.props.mopidy.album
+			var artists = []
+		}
 		if( !album ) return null;
 
 		return (
 			<div className="view album-view">
 				<div className="intro">
 					<Thumbnail size="large" images={ ( album.images ? album.images : [] ) } />
-					<ArtistGrid artists={ album.artists } />
-					<div className="details">
-						<div>{ album.tracks.total } tracks, <Dater type="length" data={this.totalTime(album.tracks.items)} /> mins</div>
-						{ album.release_date ? <div>Released <Dater type="date" data={ album.release_date } /></div> : null }
-					</div>
+					<ArtistGrid artists={ artists } />
+					<ul className="details">
+						<li>{ album.tracks.total } tracks</li>
+						<li><Dater type="total-time" data={album.tracks.items} /> play time</li>
+						{ album.release_date ? <li>Released <Dater type="date" data={ album.release_date } /></li> : null }
+						{ source == 'spotify' ? <li><FontAwesome name={source} /> Spotify playlist</li> : null }
+						{ source == 'local' ? <li><FontAwesome name='folder' /> Local playlist</li> : null }	
+					</ul>
 				</div>
 				<div className="main">
 					<div className="title">

src/js/views/Playlist.js

@@ -2,6 +2,7 @@
 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 TrackList from '../components/TrackList'
@@ -50,10 +51,13 @@ class Playlist extends React.Component{
 			<div className="view playlist-view">
 				<div className="intro">
 					{ playlist.images ? <Thumbnail size="large" images={ playlist.images } /> : null }
-					<div className="details">
-						<div>{ playlist.tracks.total } tracks</div>
-						<div>Last updated { playlist.last_modified }</div>
-					</div>
+					<ul className="details">
+						<li>{ playlist.tracks.total } tracks</li>
+						<li><Dater type="total-time" data={playlist.tracks.items} /> play time</li>
+						{ playlist.last_modified ? <li>Updated { playlist.last_modified }</li> : null }
+						{ source == 'spotify' ? <li><FontAwesome name={source} /> Spotify playlist</li> : null }
+						{ source == 'm3u' ? <li><FontAwesome name='folder' /> Local playlist</li> : null }	
+					</ul>
 				</div>
 				<div className="main">
 					<div className="title">

src/js/views/library/LibraryLocal.js

@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'
 import { Link } from 'react-router'
 
 import Header from '../../components/Header'
+import GridItem from '../../components/GridItem'
 
 export default class LibraryLocal extends React.Component{
 
@@ -13,11 +14,37 @@ export default class LibraryLocal extends React.Component{
 	}
 
 	render(){
+
+		var grid_items = [
+			{
+				name: 'Artists',
+				link: '/library/local/artists',
+				icons: ['/assets/backgrounds/category-artists.jpg']
+			},
+			{
+				name: 'Albums',
+				link: '/library/local/albums',
+				icons: ['/assets/backgrounds/category-albums.jpg']
+			},
+			{
+				name: 'Folders',
+				link: '/library/local/directory/local:directory',
+				icons: ['/assets/backgrounds/category-folders.jpg']
+			}
+		]
+
 		return (
 			<div className="view library-local-view">
 				<Header icon="folder" title="Local" />
-				<Link to="/library/local/directory/local:directory">Folders</Link>
-				<Link to="/library/local/artists">Artists</Link>
+				<div className="grid category-grid">				
+					{
+						grid_items.map(
+							(item, index) => {
+								return <GridItem item={item} key={index} link={item.link} />
+							}
+						)
+					}
+				</div>
 			</div>
 		);
 	}

src/js/views/library/LibraryLocalAlbums.js

@@ -0,0 +1,67 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+
+import Header from '../../components/Header'
+import List from '../../components/List'
+
+import * as mopidyActions from '../../services/mopidy/actions'
+import * as spotifyActions from '../../services/spotify/actions'
+
+class LibraryLocalAlbums extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	// on render
+	componentDidMount(){
+		this.loadAlbums()
+	}
+
+	componentWillReceiveProps( nextProps ){
+		if( !this.props.mopidy.connected && nextProps.mopidy.connected ){
+			this.loadAlbums(nextProps);
+		}
+	}
+
+	loadAlbums(props = this.props){
+		if( props.mopidy.connected ){
+			this.props.mopidyActions.getAlbums();
+		}
+	}
+
+	render(){
+		if( !this.props.mopidy.albums ) return null
+
+		return (
+			<div className="view library-local-view">
+				<Header icon="music" title="Local albums" />
+				<div>
+					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.mopidy.albums} link_prefix="/album/" />
+				</div>
+			</div>
+		);
+	}
+}
+
+
+/**
+ * Export our component
+ *
+ * We also integrate our global store, using connect()
+ **/
+
+const mapStateToProps = (state, ownProps) => {
+	return state;
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		mopidyActions: bindActionCreators(mopidyActions, dispatch),
+		spotifyActions: bindActionCreators(spotifyActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LibraryLocalAlbums)

src/js/views/library/LibraryLocalArtists.js

@@ -37,7 +37,7 @@ class LibraryLocalArtists extends React.Component{
 
 		return (
 			<div className="view library-local-view">
-				<Header icon="music" title="Local" />
+				<Header icon="music" title="Local artists" />
 				<div>
 					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.mopidy.artists} link_prefix="/artist/" />
 				</div>

src/js/views/library/LibraryLocalDirectory.js

@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'
 import { Link } from 'react-router'
 
 import Header from '../../components/Header'
+import List from '../../components/List'
 
 import * as mopidyActions from '../../services/mopidy/actions'
 import * as spotifyActions from '../../services/spotify/actions'
@@ -24,46 +25,30 @@ class LibraryLocalDirectory extends React.Component{
 
 		// mopidy goes online
 		if( !this.props.mopidy.connected && nextProps.mopidy.connected ){
-			this.loadDirectory();
+			this.loadDirectory( nextProps );
 		}
 
 		// our uri changes
 		if( nextProps.params.uri != this.props.params.uri ){
-			this.loadDirectory(nextProps.params.uri);
+			this.loadDirectory( nextProps );
 		}
 	}
 
-	loadDirectory(uri = this.props.params.uri){
-		if( this.props.mopidy.connected ){
-			this.props.mopidyActions.getBrowse(uri);
+	loadDirectory( props = this.props ){
+		if( props.mopidy.connected ){
+			this.props.mopidyActions.getDirectory( props.params.uri );
 		}
 	}
 
-	renderDirectory(){
-		if( !this.props.mopidy.browse ) return null
-
-		return (
-			<div>
-				{
-					this.props.mopidy.browse.map( directory => {
-						return (
-							<div key={directory.uri}>
-								<Link to={'/library/local/directory/'+encodeURIComponent(directory.uri)}>
-									{ directory.name }
-								</Link>
-							</div>
-						)
-					})
-				}
-			</div>
-		)
-	}
-
 	render(){
+		if( !this.props.mopidy.directory ) return null
+
 		return (
 			<div className="view library-local-view">
-				<Header icon="music" title="Local" />
-				{ this.renderDirectory() }
+				<Header icon="music" title="Local files" />
+				<div>
+					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.mopidy.directory} link_prefix="/library/local/directory/" />
+				</div>
 			</div>
 		);
 	}

src/scss/components/_grid.scss

@@ -37,6 +37,14 @@
 				opacity: 0.75;
 			}
 		}
+
+		@include responsive( 850px ){
+			width: 21%;
+		}
+
+		@include responsive( 650px ){
+			width: 29.3334%;
+		}
 	}
 
 	&.category-grid {

src/scss/global/_variables.scss

@@ -42,4 +42,12 @@ $red: #cf2d2d;
 @mixin blur( $size: 10px ) {
 	-webkit-filter: blur( $size );
 	filter: blur( $size );
-}
+}
+
+@mixin responsive( $width ){
+	@media (max-width: $width){ 
+		@content;
+	}
+}
+
+

src/scss/vendor/font-awesome/_variables.scss

@@ -1,7 +1,7 @@
 // Variables
 // --------------------------
 
-$fa-font-path:        "../fonts" !default;
+$fa-font-path:        "../assets/fonts" !default;
 $fa-font-size-base:   14px !default;
 $fa-line-height-base: 1 !default;
 //$fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.6.3/fonts" !default; // for referencing Bootstrap CDN font files directly

src/scss/views/_album.scss

@@ -33,6 +33,11 @@
 			padding: 30px;
 			color: $mid_grey;
 			text-transform: uppercase;
+			list-style-type: none;
+
+			li {
+				padding-bottom: 4px;
+			}
 		}
 
 		.artist-grid {

src/scss/views/_playlist.scss

@@ -33,6 +33,11 @@
 			padding: 30px;
 			color: $mid_grey;
 			text-transform: uppercase;
+			list-style-type: none;
+
+			li {
+				padding-bottom: 4px;
+			}
 		}
 
 		.artist-grid {