secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Adding grid vs list to directories - hard to get imagery though...

Browse Source
This commit is contained in:
James Barnsley
2018-09-11 21:31:30 +12:00
parent eed201925b
commit a2531b10ef
7 changed files with 10959 additions and 13997 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24711
mopidy_iris/static/app.js
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -98,7 +98,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1536610262";
var build = "1536654727";
var version = "3.25.1";
// Construct the script tag

2
src/js/components/GridItem.js
View File

@ -85,7 +85,7 @@ export default class GridItem extends React.Component{
if (!this.props.item) return null
var item = this.props.item;
if (typeof(item.album) !== 'undefined'){
if (item.album !== undefined){
item.album.added_at = item.added_at;
item = item.album;
}

94
src/js/services/mopidy/middleware.js
View File

@ -1726,10 +1726,11 @@ const MopidyMiddleware = (function(){
}
}
var uris = Object.assign([], action.data.uris)
var uris_to_load = uris.splice(0,50)
var uris = Object.assign([], action.data.uris);
var uris_to_load = uris.splice(0,50);
if (uris_to_load.length > 0){
console.log(uris.length);
store.dispatch(uiActions.updateProcess(
'MOPIDY_LIBRARY_ALBUMS_PROCESSOR',
'Loading '+uris.length+' local albums',
@ -1737,7 +1738,7 @@ const MopidyMiddleware = (function(){
uris: uris,
remaining: uris.length
}
))
));
store.dispatch(mopidyActions.getAlbums(uris_to_load, {name: 'MOPIDY_LIBRARY_ALBUMS_PROCESSOR', data: {uris: uris}}))
} else {
store.dispatch(uiActions.processFinishing('MOPIDY_LIBRARY_ALBUMS_PROCESSOR'))
@ -1757,21 +1758,22 @@ const MopidyMiddleware = (function(){
var tracks_loaded = [];
for (var uri in response){
if (response.hasOwnProperty(uri) && response[uri].length > 0 && response[uri][0] && response[uri][0].album){
if (response.hasOwnProperty(uri) && response[uri].length > 0 && response[uri][0].album){
var tracks = response[uri];
var artists_uris = [];
for (var artist in response[uri][0].artists){
artists_loaded.push(artist);
artists_uris.push(artist.uri);
if (tracks[0].artists){
for (var artist of response[uri][0].artists){
artists_uris.push(artist.uri);
artists_loaded.push(artist);
}
}
var tracks_uris = [];
for (var track in response[uri]){
for (var track of tracks){
tracks_uris.push(track.uri);
tracks_loaded.push(track);
tracks_uris.push(track.uri);
}
console.log(response[uri]);
var album = Object.assign(
{},
@ -1781,7 +1783,7 @@ const MopidyMiddleware = (function(){
tracks_uris: tracks_uris,
tracks_total: tracks_uris.length
},
response[uri][0].album
tracks[0].album
)
albums_loaded.push(album);
@ -1792,7 +1794,7 @@ const MopidyMiddleware = (function(){
store.dispatch(coreActions.artistsLoaded(artists_loaded));
store.dispatch(coreActions.tracksLoaded(tracks_loaded));
// Re-run any consequential processes in 100ms. This allows a small window for other
// Re-run any consequential processes in a few ms. This allows a small window for other
// server requests before our next batch. It's a little crude but it means the server isn't
// locked until we're completely done.
if (action.processor){
@ -1800,7 +1802,7 @@ const MopidyMiddleware = (function(){
function(){
store.dispatch(uiActions.runProcess(action.processor.name, action.processor.data))
},
100
10
)
}
})
@ -1814,8 +1816,10 @@ const MopidyMiddleware = (function(){
}
var artists = [];
for (var artist of response[0].artists){
artists.push(artist);
if (response[0].artists){
for (var artist of response[0].artists){
artists.push(artist);
}
}
var album = Object.assign(
@ -2194,15 +2198,59 @@ const MopidyMiddleware = (function(){
**/
case 'MOPIDY_GET_DIRECTORY':
store.dispatch({ type: 'MOPIDY_DIRECTORY_LOADED', data: false })
store.dispatch({
type: 'MOPIDY_DIRECTORY_FLUSH'
});
request(socket, store, 'library.browse', action.data)
.then(response => {
store.dispatch({
type: 'MOPIDY_DIRECTORY_LOADED',
data: response
});
})
break
var tracks_uris = [];
var subdirectories = [];
for (var item of response){
if (item.type === "track"){
tracks_uris.push(item.uri);
} else {
subdirectories.push(item);
}
}
if (tracks_uris.length > 0){
request(socket, store, 'library.lookup', {uris: tracks_uris})
.then(response => {
if (response.length <= 0){
return;
}
var tracks = [];
for (var uri in response){
if (response.hasOwnProperty(uri) && response[uri].length > 0){
tracks.push(helpers.formatTrack(response[uri][0]));
}
}
store.dispatch({
type: 'MOPIDY_DIRECTORY_LOADED',
directory: {
tracks: tracks,
subdirectories: subdirectories
}
});
}
);
} else {
store.dispatch({
type: 'MOPIDY_DIRECTORY_LOADED',
directory: {
tracks: tracks,
subdirectories: subdirectories
}
});
}
});
break;
case 'MOPIDY_DIRECTORY':
if (store.getState().ui.allow_reporting && action.data){

10
src/js/services/mopidy/reducer.js
View File

@ -90,12 +90,18 @@ export default function reducer(mopidy = {}, action){
/**
* Asset-oriented actions
* Directories
* This also facilitates all backend-only music providers (SoundCloud, Dirble, etc)
**/
case 'MOPIDY_DIRECTORY_FLUSH':
return Object.assign({}, mopidy, {
directory: null
});
case 'MOPIDY_DIRECTORY_LOADED':
return Object.assign({}, mopidy, {
directory: action.data
directory: action.directory
});

135
src/js/views/library/LibraryBrowse.js
View File

@ -8,6 +8,7 @@ import Header from '../../components/Header'
import List from '../../components/List'
import TrackList from '../../components/TrackList'
import GridItem from '../../components/GridItem'
import DropdownField from '../../components/Fields/DropdownField'
import Icon from '../../components/Icon'
import * as helpers from '../../helpers'
@ -30,12 +31,12 @@ class LibraryBrowse extends React.Component{
// mopidy goes online
if (!this.props.mopidy_connected && nextProps.mopidy_connected){
this.loadDirectory(nextProps );
this.loadDirectory(nextProps);
}
// our uri changes
if (nextProps.params.uri != this.props.params.uri){
this.loadDirectory(nextProps );
this.loadDirectory(nextProps);
}
}
@ -62,31 +63,38 @@ class LibraryBrowse extends React.Component{
this.props.uiActions.hideContextMenu();
}
arrangeDirectory(directory = this.props.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],
renderSubdirectories(subdirectories){
if (this.props.view == 'list'){
return (
<List
nocontext
columns={[{ name: 'name', width: '100'}]}
rows={subdirectories}
className="library-local-directory-list"
link_prefix={global.baseURL+'library/browse/'}
/>
);
} else {
return (
<div className="grid category-grid">
{
uri: directory[i].uri
subdirectories.map(subdirectory => {
return (
<GridItem
key={subdirectory.uri}
type="category"
item={subdirectory}
onClick={e => {hashHistory.push(global.baseURL+'library/browse/'+encodeURIComponent(subdirectory.uri))}}
/>
);
})
}
))
}
}
return {
folders: folders,
tracks: tracks
</div>
);
}
}
renderDirectory(){
renderDirectory(directory){
var title = 'Browse';
var uri_exploded = this.props.params.uri.split(':');
if (uri_exploded.length > 0){
@ -105,13 +113,32 @@ class LibraryBrowse extends React.Component{
)
}
var items = this.arrangeDirectory(this.props.directory);
var tracks = (this.props.directory.tracks && this.props.directory.tracks.length > 0 ? this.props.directory.tracks : null);
var subdirectories = (this.props.directory.subdirectories && this.props.directory.subdirectories.length > 0 ? this.props.directory.subdirectories : null);
var view_options = [
{
label: 'Thumbnails',
value: 'thumbnails'
},
{
label: 'List',
value: 'list'
}
];
var options = (
<span>
<button className="no-hover" onClick={e => this.playAll(e)}>
<DropdownField
icon="visibility"
name="View"
value={this.props.view}
options={view_options}
handleChange={value => {this.props.uiActions.set({ library_directory_view: value }); this.props.uiActions.hideContextMenu()}}
/>
{tracks ? <button className="no-hover" onClick={e => this.playAll(e)}>
<Icon name="play_circle_filled" />Play all
</button>
</button> : null }
<button className="no-hover" onClick={e => this.goBack(e)}>
<Icon name="keyboard_backspace" />Back
</button>
@ -125,18 +152,15 @@ class LibraryBrowse extends React.Component{
{title}
</Header>
<section className="content-wrapper">
<List
nocontext
columns={[{ name: 'name', width: '100'}]}
rows={items.folders}
className="library-local-directory-list"
link_prefix={global.baseURL+'library/browse/'}
/>
<TrackList
tracks={items.tracks}
uri={"iris:browse:"+this.props.params.uri}
className="library-local-track-list"
noheader />
{subdirectories ? this.renderSubdirectories(subdirectories) : null}
{tracks ? <TrackList
tracks={this.props.directory.tracks}
uri={"iris:browse:"+this.props.params.uri}
className="library-local-track-list"
/> : null }
</section>
</div>
);
@ -145,56 +169,55 @@ class LibraryBrowse extends React.Component{
renderIndex(){
var grid_items = []
if (this.props.directory){
for (var i = 0; i < this.props.directory.length; i++){
var directory = this.props.directory[i]
for (var subdirectory of this.props.directory.subdirectories){
switch (directory.name){
switch (subdirectory.name){
case 'Dirble':
directory.icons = ['assets/backgrounds/browse-dirble.jpg']
subdirectory.icons = ['assets/backgrounds/browse-dirble.jpg']
break
case 'Files':
directory.icons = ['assets/backgrounds/browse-folders.jpg']
subdirectory.icons = ['assets/backgrounds/browse-folders.jpg']
break
case 'Local media':
directory.icons = ['assets/backgrounds/browse-folders.jpg']
subdirectory.icons = ['assets/backgrounds/browse-folders.jpg']
break
case 'Spotify':
case 'Spotify Browse':
directory.icons = ['assets/backgrounds/browse-spotify.jpg']
subdirectory.icons = ['assets/backgrounds/browse-spotify.jpg']
break
case 'Spotify Tunigo':
case 'Tunigo':
directory.icons = ['assets/backgrounds/browse-tunigo.jpg']
subdirectory.icons = ['assets/backgrounds/browse-tunigo.jpg']
break
case 'TuneIn':
directory.icons = ['assets/backgrounds/browse-tunein.jpg']
subdirectory.icons = ['assets/backgrounds/browse-tunein.jpg']
break
case 'SoundCloud':
directory.icons = ['assets/backgrounds/browse-soundcloud.jpg']
subdirectory.icons = ['assets/backgrounds/browse-soundcloud.jpg']
break
case 'iTunes Store: Podcasts':
directory.icons = ['assets/backgrounds/browse-itunes.jpg']
subdirectory.icons = ['assets/backgrounds/browse-itunes.jpg']
break
case 'Soma FM':
directory.icons = ['assets/backgrounds/browse-somafm.jpg']
subdirectory.icons = ['assets/backgrounds/browse-somafm.jpg']
break
default:
directory.icons = ['assets/backgrounds/browse-default.jpg']
subdirectory.icons = ['assets/backgrounds/browse-default.jpg']
}
grid_items.push({
name: directory.name,
link: global.baseURL+'library/browse/'+encodeURIComponent(directory.uri),
icons: directory.icons
name: subdirectory.name,
link: global.baseURL+'library/browse/'+encodeURIComponent(subdirectory.uri),
icons: helpers.formatImages(subdirectory.icons)
})
}
}
@ -213,7 +236,8 @@ class LibraryBrowse extends React.Component{
return (
<GridItem
item={item}
key={index}
key={index}
type="category"
onClick={e => hashHistory.push(item.link)}
/>
)
@ -239,7 +263,8 @@ const mapStateToProps = (state, ownProps) => {
return {
load_queue: state.ui.load_queue,
mopidy_connected: state.mopidy.connected,
directory: state.mopidy.directory
directory: state.mopidy.directory,
view: state.ui.library_directory_view
}
}