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

Preserving loaded directory's URI for matching on render

Browse Source
This commit is contained in:
James Barnsley
2021-02-01 20:41:49 +13:00
parent 225c1e1559
commit c2b1fdf6ba
8 changed files with 224 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -207,8 +207,9 @@ const MopidyMiddleware = (function () {
* @return promise
* */
const request = (store, call, value = {}) => new Promise((resolve, reject) => {
const loader_key = generateGuid();
store.dispatch(uiActions.startLoading(loader_key, `mopidy_${call}`));
const loaderId = generateGuid();
const loaderKey = `mopidy_${call}`;
store.dispatch(uiActions.startLoading(loaderId, loaderKey));
const doRequest = () => {
const controller = getController(call, socket);
@ -216,7 +217,7 @@ const MopidyMiddleware = (function () {
if (controller) {
const timeout = setTimeout(
() => {
store.dispatch(uiActions.stopLoading(loader_key));
store.dispatch(uiActions.stopLoading(loaderId));
reject(new Error('Request timed out'));
},
30000,
@ -226,17 +227,17 @@ const MopidyMiddleware = (function () {
.then(
(response) => {
clearTimeout(timeout);
store.dispatch(uiActions.stopLoading(loader_key));
store.dispatch(uiActions.stopLoading(loaderId));
resolve(response);
},
(error) => {
clearTimeout(timeout);
store.dispatch(uiActions.stopLoading(loader_key));
store.dispatch(uiActions.stopLoading(loaderId));
reject(error);
},
);
} else {
store.dispatch(uiActions.stopLoading(loader_key));
store.dispatch(uiActions.stopLoading(loaderId));
console.warn(
'Mopidy request aborted. Either Mopidy is not connected or the request method is invalid. Check the request and your server settings.',
{ call, value, socket, controller },
@ -1635,10 +1636,11 @@ const MopidyMiddleware = (function () {
}
case 'MOPIDY_GET_DIRECTORY':
store.dispatch({
type: 'MOPIDY_DIRECTORY_FLUSH',
});
const uri = action.uri ? decodeURIComponent(action.uri) : null;
store.dispatch({
type: 'MOPIDY_DIRECTORY_LOADING',
uri,
});
if (uri) {
request(store, 'library.lookup', { uris: [uri] })
@ -1648,19 +1650,12 @@ const MopidyMiddleware = (function () {
} = response;
if (!results.length) return;
let result = results[0];
if (result.album) {
result = {
...result,
name: result.album.name,
};
}
const result = results[0];
store.dispatch({
type: 'MOPIDY_DIRECTORY_LOADED',
directory: {
...formatSimpleObject(result),
name: result.album ? result.album.name : result.name,
},
});
});

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

@ -94,8 +94,8 @@ export default function reducer(mopidy = {}, action) {
* Directories
* This also facilitates all backend-only music providers (SoundCloud, Dirble, etc)
* */
case 'MOPIDY_DIRECTORY_FLUSH':
return { ...mopidy, directory: null };
case 'MOPIDY_DIRECTORY_LOADING':
return { ...mopidy, directory: { uri: action.uri } };
case 'MOPIDY_DIRECTORY_LOADED':
return {

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

@ -1,15 +1,16 @@
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Header from '../../components/Header';
import GridItem from '../../components/GridItem';
import Loader from '../../components/Loader';
import Icon from '../../components/Icon';
import ErrorBoundary from '../../components/ErrorBoundary';
import * as uiActions from '../../services/ui/actions';
import * as mopidyActions from '../../services/mopidy/actions';
import { formatImages, encodeUri } from '../../util/format';
import { I18n, i18n } from '../../locale';
import { makeLoadingSelector } from '../../util/selectors';
class LibraryBrowse extends React.Component {
componentDidMount() {
@ -27,10 +28,23 @@ class LibraryBrowse extends React.Component {
getDirectory(null);
}
render() {
render = () => {
const {
loading,
directory,
mopidyActions,
} = this.props;
if (!directory) {
if (loading) {
return <Loader body loading />;
}
return null;
}
const grid_items = [];
if (this.props.directory) {
for (const subdirectory of this.props.directory.subdirectories) {
if (directory.subdirectories) {
for (const subdirectory of directory.subdirectories) {
switch (subdirectory.name) {
case 'Dirble':
subdirectory.icons = ['/iris/assets/backgrounds/browse-dirble.jpg'];
@ -101,7 +115,7 @@ class LibraryBrowse extends React.Component {
<div className="view library-local-view">
<Header>
<Icon name="folder" type="material" />
<I18n path="library.browse.title" />
<I18n path="library.browse.title" />
</Header>
<section className="content-wrapper">
<div className="grid grid--tiles">
@ -113,7 +127,7 @@ class LibraryBrowse extends React.Component {
item={item}
key={index}
link={item.link}
mopidyActions={this.props.mopidyActions}
mopidyActions={mopidyActions}
type="browse"
/>
),
@ -127,11 +141,24 @@ class LibraryBrowse extends React.Component {
}
}
const mapStateToProps = (state) => ({
load_queue: state.ui.load_queue,
directory: state.mopidy.directory,
view: state.ui.library_directory_view,
});
const mapStateToProps = (state) => {
const {
mopidy: {
directory: _directory = {},
},
ui: {
library_directory_view: view,
},
} = state;
const directory = _directory && _directory.uri === null ? _directory : null;
const loadingSelector = makeLoadingSelector(['(.*)mopidy_library.browse(.*)']);
return {
loading: loadingSelector(state),
directory,
view,
};
};
const mapDispatchToProps = (dispatch) => ({
uiActions: bindActionCreators(uiActions, dispatch),

54
src/js/views/library/LibraryBrowseDirectory.js
View File

@ -15,13 +15,12 @@ import LazyLoadListener from '../../components/LazyLoadListener';
import * as uiActions from '../../services/ui/actions';
import * as mopidyActions from '../../services/mopidy/actions';
import * as spotifyActions from '../../services/spotify/actions';
import {
isLoading,
} from '../../util/helpers';
import { arrayOf, sortItems, applyFilter } from '../../util/arrays';
import { i18n, I18n } from '../../locale';
import Button from '../../components/Button';
import { encodeUri } from '../../util/format';
import { encodeUri, decodeUri } from '../../util/format';
import { makeLoadingSelector } from '../../util/selectors';
import ErrorMessage from '../../components/ErrorMessage';
class LibraryBrowseDirectory extends React.Component {
constructor(props) {
@ -168,8 +167,8 @@ class LibraryBrowseDirectory extends React.Component {
const {
uri,
directory,
load_queue,
uiActions,
loading,
view,
} = this.props;
const {
@ -180,12 +179,16 @@ class LibraryBrowseDirectory extends React.Component {
let title = i18n('library.browse_directory.title');
if (!directory || isLoading(load_queue, ['mopidy_browse'])) {
if (!directory || (!directory.subdirectories && !directory.tracks)) {
if (loading) {
return <Loader body loading />;
}
return (
<div className="view library-local-view">
<Header icon="music" title={title} uiActions={uiActions} />
<Loader body loading />
</div>
<ErrorMessage type="not-found" title="Not found">
<p>
<I18n path="errors.uri_not_found" uri={uri} />
</p>
</ErrorMessage>
);
}
@ -302,23 +305,26 @@ class LibraryBrowseDirectory extends React.Component {
}
const mapStateToProps = (state, ownProps) => {
// Decode the URI, and then re-encode selected characters
// This is needed as Mopidy encodes *some* characters in URIs (but not other characters)
// We need to retain ":" because this a reserved URI separator
let uri = decodeURIComponent(ownProps.match.params.uri);
uri = uri.replace(/\s/g, '%20'); // space
uri = uri.replace(/&/g, '%26'); // &
uri = uri.replace(/\[/g, '%5B'); // [
uri = uri.replace(/\]/g, '%5D'); // ]
uri = uri.replace(/\(/g, '%28'); // (
uri = uri.replace(/\)/g, '%29'); // )
uri = uri.replace(/\#/g, '%23'); // #
const {
mopidy: {
directory: _directory = {},
},
ui: {
library_directory_view: view,
},
} = state;
const uri = decodeUri(ownProps.match.params.uri);
const uriMatcher = [uri, decodeURIComponent(uri)]; // Lenient matching due to encoding diffs
const directory = _directory && uriMatcher.includes(_directory.uri)
? _directory
: undefined;
const loadingSelector = makeLoadingSelector(['mopidy_library.(browse|lookup)']);
return {
uri,
load_queue: state.ui.load_queue,
directory: state.mopidy.directory,
view: state.ui.library_directory_view,
loading: loadingSelector(state),
directory,
view,
};
};