diff --git a/src/js/views/Library/BrowseDirectory.js b/src/js/views/Library/BrowseDirectory.js
index e416a417..1d3b6983 100755
--- a/src/js/views/Library/BrowseDirectory.js
+++ b/src/js/views/Library/BrowseDirectory.js
@@ -12,6 +12,7 @@ import Icon from '../../components/Icon';
import ErrorBoundary from '../../components/ErrorBoundary';
import {
set,
+ setSort,
setWindowTitle,
hideContextMenu,
} from '../../services/ui/actions';
@@ -24,9 +25,10 @@ import { arrayOf, sortItems, applyFilter } from '../../util/arrays';
import { i18n, I18n } from '../../locale';
import Button from '../../components/Button';
import { encodeUri, decodeUri } from '../../util/format';
-import { makeLoadingSelector } from '../../util/selectors';
+import { makeLoadingSelector, getSortSelector } from '../../util/selectors';
import ErrorMessage from '../../components/ErrorMessage';
+const SORT_KEY = 'browse_directory';
const loadingSelector = makeLoadingSelector(['mopidy_library.(browse|lookup)']);
const Breadcrumbs = ({ uri }) => {
@@ -77,6 +79,7 @@ const BrowseDirectory = () => {
const [filter, setFilter] = useState('');
const directoryInState = useSelector(({ mopidy }) => mopidy?.directory || {});
const view = useSelector(({ ui }) => ui?.library_directory_view);
+ const [sortField, sortReverse] = useSelector((state) => getSortSelector(state, SORT_KEY, 'name'));
const loading = useSelector(loadingSelector);
let { uri, name } = useParams();
@@ -101,12 +104,21 @@ const BrowseDirectory = () => {
dispatch(hideContextMenu());
}
+ const onSortChange = (field) => {
+ let reverse = false;
+ if (field !== null && sortField === field) {
+ reverse = !sortReverse;
+ }
+ dispatch(setSort(SORT_KEY, field, reverse));
+ dispatch(hideContextMenu());
+ }
+
const playAll = () => {
if (!tracks || !tracks.length) return;
dispatch(
playURIs({
- uris: arrayOf('uri', sortItems(tracks, 'name')),
+ uris: arrayOf('uri', sortItems(tracks, sortField, sortReverse)),
from: {
name: 'Browse',
type: 'browse',
@@ -137,13 +149,36 @@ const BrowseDirectory = () => {
let subdirectories = directory?.subdirectories;
let tracks = directory?.tracks;
- subdirectories = sortItems(subdirectories, 'name');
- tracks = sortItems(tracks, 'name');
+ subdirectories = sortItems(subdirectories, sortField, sortReverse);
+ tracks = sortItems(tracks, sortField, sortReverse);
if (filter && filter !== '') {
subdirectories = applyFilter('name', filter, subdirectories);
tracks = applyFilter('name', filter, tracks);
}
+ const sort_options = [
+ {
+ value: 'name',
+ label: i18n('fields.filters.name'),
+ },
+ {
+ value: 'artist',
+ label: i18n('fields.filters.artist'),
+ },
+ {
+ value: 'album',
+ label: i18n('fields.filters.album'),
+ },
+ {
+ value: 'last_modified',
+ label: i18n('fields.filters.updated'),
+ },
+ {
+ value: 'uri',
+ label: i18n('fields.filters.source'),
+ },
+ ];
+
const view_options = [
{
value: 'thumbnails',
@@ -162,6 +197,15 @@ const BrowseDirectory = () => {
handleChange={setFilter}
onSubmit={() => dispatch(hideContextMenu())}
/>
+