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

Links for grid items, may need to add more context options

Browse Source
This commit is contained in:
James Barnsley
2019-01-16 16:46:40 +13:00
parent 1efe083002
commit d5c946456f
12 changed files with 2196 additions and 1885 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,23 +1,23 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Route, Switch } from 'react-router-dom';
import Link from '../../components/Link';
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 URILink from '../../components/URILink'
import ErrorBoundary from '../../components/ErrorBoundary'
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 URILink from '../../components/URILink';
import ErrorBoundary from '../../components/ErrorBoundary';
import * as helpers from '../../helpers'
import * as uiActions from '../../services/ui/actions'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
import * as helpers from '../../helpers';
import * as uiActions from '../../services/ui/actions';
import * as mopidyActions from '../../services/mopidy/actions';
class LibraryBrowse extends React.Component{
@ -36,182 +36,19 @@ class LibraryBrowse extends React.Component{
if (!this.props.mopidy_connected && nextProps.mopidy_connected){
this.loadDirectory(nextProps);
}
// our uri changes
if (nextProps.match.params.uri != this.props.match.params.uri){
this.loadDirectory(nextProps);
}
}
loadDirectory(props = this.props){
if (props.mopidy_connected){
var uri = null
if (props.match.params.uri !== undefined){
uri = props.match.params.uri;
if (props.uri !== undefined){
uri = props.uri;
}
this.props.mopidyActions.getDirectory(uri);
}
}
playAll(e, tracks){
var tracks_uris = helpers.arrayOf('uri',tracks);
this.props.mopidyActions.playURIs(tracks_uris, "iris:browse:"+this.props.match.params.uri);
this.props.uiActions.hideContextMenu();
}
goBack(e){
window.history.back();
this.props.uiActions.hideContextMenu();
}
renderBreadcrumbs(){
if (this.props.match.params.uri){
var parent_uri = this.props.match.params.uri;
} else {
return null;
}
if (parent_uri.startsWith('file://')){
var uri = parent_uri.replace('file:///','');
var uri_elements = uri.split('/');
return (
<h4>
{uri_elements.map((uri_element, index) => {
// Reconstruct a URL to this element
var uri = "file://";
for (var i = 0; i <= index; i++){
uri += "/"+uri_elements[i];
}
return (
<span key={uri}>
{index > 0 ? <span>&nbsp; <Icon type="fontawesome" name="angle-right" /> &nbsp;&nbsp;</span> : null}
<URILink type="browse" uri={uri}>
{decodeURI(uri_element)}
</URILink>
</span>
);
})}
</h4>
);
}
return null;
}
renderSubdirectories(subdirectories){
if (this.props.view == 'list'){
return (
<List
nocontext
rows={subdirectories}
className="library-local-directory-list"
link_prefix={global.baseURL+'library/browse/'}
/>
);
} else {
return (
<div className="grid category-grid">
{
subdirectories.map(subdirectory => {
return (
<GridItem
key={subdirectory.uri}
type="category"
item={subdirectory}
onClick={e => {this.props.history.push(global.baseURL+'library/browse/'+encodeURIComponent(subdirectory.uri))}}
/>
);
})
}
</div>
);
}
}
renderDirectory(directory){
var title = 'Browse';
var uri_exploded = this.props.match.params.uri.split(':');
if (uri_exploded.length > 0){
title = uri_exploded[0];
title = title.charAt(0).toUpperCase() + title.slice(1);
}
if (!this.props.directory || helpers.isLoading(this.props.load_queue,['mopidy_browse'])){
return (
<div className="view library-local-view">
<Header icon="music" title={title} uiActions={this.props.uiActions} />
<div className="body-loader loading">
<div className="loader"></div>
</div>
</div>
)
}
var tracks = (this.props.directory.tracks && this.props.directory.tracks.length > 0 ? this.props.directory.tracks : null);
tracks = helpers.sortItems(tracks, 'name');
var subdirectories = (this.props.directory.subdirectories && this.props.directory.subdirectories.length > 0 ? this.props.directory.subdirectories : null);
subdirectories = helpers.sortItems(subdirectories, 'name');
var view_options = [
{
label: 'Thumbnails',
value: 'thumbnails'
},
{
label: 'List',
value: 'list'
}
];
var options = (
<span>
<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 ? <a className="button button--no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.playAll(e, tracks)}}>
<Icon name="play_circle_filled" />Play all
</a> : null }
<a className="button button--no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.goBack(e)}}>
<Icon name="keyboard_backspace" />Back
</a>
</span>
);
return (
<div className="view library-local-view">
<Header options={options} uiActions={this.props.uiActions}>
<Icon name="folder" type="material" />
{title}
</Header>
<section className="content-wrapper">
<ErrorBoundary>
{this.renderBreadcrumbs()}
{subdirectories ? this.renderSubdirectories(subdirectories) : null}
{tracks ? <TrackList
tracks={this.props.directory.tracks}
uri={"iris:browse:"+this.props.match.params.uri}
className="library-local-track-list"
/> : null }
</ErrorBoundary>
</section>
</div>
);
}
renderIndex(){
render(){
var grid_items = []
if (this.props.directory){
for (var subdirectory of this.props.directory.subdirectories){
@ -269,7 +106,7 @@ class LibraryBrowse extends React.Component{
return (
<div className="view library-local-view">
<Header uiActions={this.props.uiActions}>
<Header>
<Icon name="folder" type="material" />
Browse
</Header>
@ -284,7 +121,6 @@ class LibraryBrowse extends React.Component{
item={item}
key={index}
type="category"
onClick={e => this.props.history.push(item.link)}
/>
)
}
@ -296,14 +132,6 @@ class LibraryBrowse extends React.Component{
</div>
);
}
render(){
if (this.props.match.params.uri !== undefined && this.props.match.params.uri){
return this.renderDirectory();
} else {
return this.renderIndex();
}
}
}
const mapStateToProps = (state, ownProps) => {
@ -318,8 +146,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
mopidyActions: bindActionCreators(mopidyActions, dispatch)
}
}