diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js index c3f0ddd0..82093189 100755 --- a/src/js/components/Sidebar.js +++ b/src/js/components/Sidebar.js @@ -80,9 +80,9 @@ class Sidebar extends React.Component{ Tracks - + - Local + Browse diff --git a/src/js/index.js b/src/js/index.js index ec4d71f8..85d40d23 100755 --- a/src/js/index.js +++ b/src/js/index.js @@ -33,10 +33,9 @@ import LibraryArtists from './views/library/LibraryArtists' 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 LibraryBrowse from './views/library/LibraryBrowse' import LibraryLocalArtists from './views/library/LibraryLocalArtists' import LibraryLocalAlbums from './views/library/LibraryLocalAlbums' -import LibraryLocalDirectory from './views/library/LibraryLocalDirectory' // setup our analytics tracking ReactGA.initialize('UA-64701652-3'); @@ -76,10 +75,9 @@ ReactDOM.render( - + - diff --git a/src/js/views/library/LibraryBrowse.js b/src/js/views/library/LibraryBrowse.js new file mode 100755 index 00000000..9c7bd8d9 --- /dev/null +++ b/src/js/views/library/LibraryBrowse.js @@ -0,0 +1,192 @@ + +import React, { PropTypes } from 'react' +import { connect } from 'react-redux' +import { bindActionCreators } from 'redux' +import { Link } from 'react-router' +import FontAwesome from 'react-fontawesome' + +import Header from '../../components/Header' +import List from '../../components/List' +import TrackList from '../../components/TrackList' +import GridItem from '../../components/GridItem' + +import * as helpers from '../../helpers' +import * as mopidyActions from '../../services/mopidy/actions' +import * as spotifyActions from '../../services/spotify/actions' + +class LibraryBrowse extends React.Component{ + + constructor(props) { + super(props); + } + + // on render + componentDidMount(){ + this.loadDirectory() + } + + componentWillReceiveProps( nextProps ){ + + // mopidy goes online + if (!this.props.mopidy_connected && nextProps.mopidy_connected ){ + this.loadDirectory( nextProps ); + } + + // our uri changes + if (nextProps.params.uri != this.props.params.uri){ + this.loadDirectory( nextProps ); + } + } + + loadDirectory( props = this.props ){ + if (props.mopidy_connected){ + var uri = null + if (typeof(props.params.uri) !== 'undefined'){ + uri = props.params.uri.replace('|','?') + } + this.props.mopidyActions.getDirectory(uri) + } + } + + arrange_directory( directory ){ + var folders = [] + var tracks = [] + + for (var i = 0; i < directory.length; i++) { + if (directory[i].type && directory[i].type == 'track') { + tracks.push( directory[i] ) + } else { + folders.push(Object.assign( + {}, + directory[i], + { + uri: directory[i].uri.replace('?','|') + } + )) + } + } + + return { + folders: folders, + tracks: tracks + } + } + + render(){ + } + + render(){ + if (typeof(this.props.params.uri) !== 'undefined' && this.props.params.uri){ + + var options = null + if (this.props.params.uri != 'local:directory' ){ + options = ( + + ) + } + + if (!this.props.directory || helpers.isLoading(this.props.load_queue,['mopidy_browse'])){ + return ( +
+
+
+
+
+
+ ) + } + + var items = this.arrange_directory( this.props.directory ) + + return ( +
+
+
+ + +
+
+ ); + + } else { + + var grid_items = [ + { + name: 'Local artists', + link: global.baseURL+'library/local/artists', + icons: ['assets/backgrounds/category-artists.jpg'] + }, + { + name: 'Local albums', + link: global.baseURL+'library/local/albums', + icons: ['assets/backgrounds/category-albums.jpg'] + } + ] + + if (this.props.directory){ + for (var i = 0; i < this.props.directory.length; i++){ + var directory = this.props.directory[i] + + switch (directory.name){ + case 'Files': + directory.icons = ['assets/backgrounds/category-folders.jpg'] + break + + default: + directory.icons = ['assets/backgrounds/category-albums.jpg'] + } + + grid_items.push({ + name: directory.name, + link: global.baseURL+'library/browse/'+directory.uri, + icons: directory.icons + }) + } + } + + return ( +
+
+
+
+ { + grid_items.map( + (item, index) => { + return + } + ) + } +
+
+
+ ); + } + } +} + +const mapStateToProps = (state, ownProps) => { + return { + load_queue: state.ui.load_queue, + mopidy_connected: state.mopidy.connected, + directory: state.mopidy.directory + } +} + +const mapDispatchToProps = (dispatch) => { + return { + mopidyActions: bindActionCreators(mopidyActions, dispatch), + spotifyActions: bindActionCreators(spotifyActions, dispatch) + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(LibraryBrowse) \ No newline at end of file diff --git a/src/js/views/library/LibraryLocal.js b/src/js/views/library/LibraryLocal.js deleted file mode 100755 index 07df1188..00000000 --- a/src/js/views/library/LibraryLocal.js +++ /dev/null @@ -1,53 +0,0 @@ - -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 GridItem from '../../components/GridItem' - -export default class LibraryLocal extends React.Component{ - - constructor(props) { - super(props); - } - - render(){ - - var grid_items = [ - { - name: 'Artists', - link: global.baseURL+'library/local/artists', - icons: ['assets/backgrounds/category-artists.jpg'] - }, - { - name: 'Albums', - link: global.baseURL+'library/local/albums', - icons: ['assets/backgrounds/category-albums.jpg'] - }, - { - name: 'Folders', - link: global.baseURL+'library/local/directory/local:directory', - icons: ['assets/backgrounds/category-folders.jpg'] - } - ] - - return ( -
-
-
-
- { - grid_items.map( - (item, index) => { - return - } - ) - } -
-
-
- ); - } -} \ No newline at end of file