Add to queue random functional

2020-08-03 20:42:17 +12:00
parent f4c71026b7
commit 48adeeac7f
10 changed files with 237 additions and 132 deletions
--- a/src/js/services/core/actions.js
+++ b/src/js/services/core/actions.js
@ -257,10 +257,9 @@ export function removeFromIndex(index_name, key, new_key = null) {
  };
 }

-export function viewDataLoaded(name, data) {
+export function viewDataLoaded(data) {
  return {
    type: 'VIEW_DATA_LOADED',
-    name,
    data,
  };
 }
--- a/src/js/services/core/reducer.js
+++ b/src/js/services/core/reducer.js
@ -199,12 +199,11 @@ export default function reducer(core = {}, action) {
      return { ...core, genres: action.genres };

    case 'VIEW_DATA_LOADED':
-      console.log(action);
      return {
        ...core,
        view: {
          ...(core.view ? core.view : {}),
-          [action.name]: action.data,
+          ...action.data,
        },
      };

--- a/src/js/services/mopidy/actions.js
+++ b/src/js/services/mopidy/actions.js
@ -455,13 +455,18 @@ export function getDirectory(uri) {
  };
 }

-export function getTrack(uri) {
+export function getTracks(uris, get_images) {
  return {
-    type: 'MOPIDY_GET_TRACK',
-    uri,
+    type: 'MOPIDY_GET_TRACKS',
+    uris,
+    get_images,
  };
 }

+export function getTrack(uri) {
+  return getTracks([uri], true);
+}
+
 export function getLibraryArtists(uri = null) {
  return {
    type: 'MOPIDY_GET_LIBRARY_ARTISTS',
@ -530,9 +535,9 @@ export function cancelProcessor(processor) {
  };
 }

-export function addToQueue_getRandomTracks(limit = 100) {
+export function view_getRandomTracks(limit = 100) {
  return {
-    type: 'ADD_TO_QUEUE__GET_RANDOM_TRACKS',
+    type: 'VIEW__GET_RANDOM_TRACKS',
    limit,
  };
 }
--- a/src/js/services/mopidy/middleware.js
+++ b/src/js/services/mopidy/middleware.js
@ -2,7 +2,7 @@
 import ReactGA from 'react-ga';
 import Mopidy from 'mopidy';
 import { sha256 } from 'js-sha256';
-
+import { sampleSize } from 'lodash';
 import {
  generateGuid,
  uriSource,
@ -22,6 +22,7 @@ import {
  removeDuplicates,
  applyFilter,
  sortItems,
+  indexToArray,
 } from '../../util/arrays';

 const mopidyActions = require('./actions.js');
@ -2176,21 +2177,14 @@ const MopidyMiddleware = (function () {

      case 'MOPIDY_GET_ARTISTS':
        request(socket, store, 'library.lookup', { uris: action.uris })
-          .then((response) => {
-            if (response.length <= 0) return;
+          .then((_response) => {
+            if (!_response || _response.length) return;

-            const artists = [];
-
-            for (const uri in response) {
-              if (response.hasOwnProperty(uri) && response[uri].length > 0 && response[uri][0].artists) {
-                const artist = {
-
-                  ...(response ? response[uri][0].artists[0] : {}),
-                  provider: 'mopidy',
-                };
-                artists.push(artist);
-              }
-            }
+            const response = indexToArray(_response);
+            const artists = response.map((item) => ({
+              ...item.artists[0],
+              provider: 'mopidy',
+            }));

            store.dispatch(coreActions.artistsLoaded(artists));

@ -2309,17 +2303,19 @@ const MopidyMiddleware = (function () {
          );
        break;

-      case 'MOPIDY_GET_TRACK':
-        request(socket, store, 'library.lookup', { uris: [action.uri] })
+      case 'MOPIDY_GET_TRACKS':
+        request(socket, store, 'library.lookup', { uris: [action.uris] })
          .then(
            (_response) => {
              if (!_response) return;
-              const response = _response[action.uri];
-              if (!response || !response.length) return;

-              const track = { ...response[0] };
-              store.dispatch(coreActions.trackLoaded(track));
-              store.dispatch(mopidyActions.getImages('tracks', [track.uri]));
+              const tracks = indexToArray(_response);
+
+              store.dispatch(coreActions.tracksLoaded(tracks));
+
+              if (action.get_images) {
+                store.dispatch(mopidyActions.getImages('tracks', arrayOf('uri', tracks)));
+              }
            },
            (error) => {
              store.dispatch(coreActions.handleException(
@ -2330,14 +2326,33 @@ const MopidyMiddleware = (function () {
          );
        break;

-      case 'ADD_TO_QUEUE__GET_RANDOM_TRACKS':
+      case 'VIEW__GET_RANDOM_TRACKS':
        request(socket, store, 'library.browse', { uri: 'local:directory?type=track' })
          .then(
            (_response) => {
              if (!_response || !_response.length) return;
-              store.dispatch(
-                coreActions.viewDataLoaded('random_tracks', _response.slice(0, action.limit)),
-              );
+
+              const uris = sampleSize(arrayOf('uri', _response), action.limit);
+
+              request(socket, store, 'library.lookup', { uris })
+                .then(
+                  (_response) => {
+                    if (!_response) return;
+
+                    const random_tracks = indexToArray(_response).map((results) => results[0]);
+                    const view = store.getState().core.view || {};
+                    store.dispatch(coreActions.viewDataLoaded({
+                      random_tracks: [
+                        ...(view.random_tracks ? view.random_tracks : []),
+                        ...random_tracks,
+                      ],
+                      uris: [
+                        ...(view.uris ? view.uris : []),
+                        ...uris,
+                      ],
+                    }));
+                  }
+                );
            },
          );
        break;
--- a/src/js/views/modals/AddToQueue.js
+++ b/src/js/views/modals/AddToQueue.js
@ -16,6 +16,7 @@ import LinksSentence from '../../components/LinksSentence';
 const UriListItem = ({
  uri,
  tracks,
+  random_tracks,
  albums,
  remove,
 }) => {
@ -31,6 +32,9 @@ const UriListItem = ({
    default:
      break;
  }
+  if (!item) {
+    item = random_tracks.find((track) => track.uri === uri);
+  }
  return (
    <div className="list__item list__item--no-interaction">
      {item ? item.name : <span className="mid_grey-text">{uri}</span>}
@ -58,7 +62,6 @@ class AddToQueue extends React.Component {
    this.state = {
      text: '',
      error: '',
-      uris: [],
      next: false,
    };
  }
@ -75,17 +78,20 @@ class AddToQueue extends React.Component {

  onSubmit = (e) => {
    const {
-      uris,
      next,
    } = this.state;
    const {
      mopidyActions: {
        enqueueURIs,
      },
+      view: {
+        uris = [],
+      },
    } = this.props;

    e.preventDefault();
    enqueueURIs(uris, null, next);
+    this.reset();
    window.history.back();
  }

@ -93,14 +99,24 @@ class AddToQueue extends React.Component {
    this.setState({ text });
  }

-  addRandom = () => {
+  reset = () => {
    const {
-      mopidyActions: {
-        addToQueue_getRandomTracks,
+      coreActions: {
+        viewDataLoaded,
      },
    } = this.props;

-    addToQueue_getRandomTracks(20);
+    viewDataLoaded({ uris: [], random_tracks: [] });
+  }
+
+  addRandom = () => {
+    const {
+      mopidyActions: {
+        view_getRandomTracks,
+      },
+    } = this.props;
+
+    view_getRandomTracks(20);
  }

  addUris = () => {
@ -108,8 +124,12 @@ class AddToQueue extends React.Component {
      text,
    } = this.state;
    const {
+      view: {
+        uris: prevUris = [],
+      },
      coreActions: {
        loadItem,
+        viewDataLoaded,
      },
    } = this.props;
    const uris = text.split(',');
@ -120,24 +140,33 @@ class AddToQueue extends React.Component {
      loadItem(uri);
    });

-    this.setState({ uris: validatedUris, text: '' });
+    this.setState({ text: '' });
+    viewDataLoaded({ uris: [...prevUris, ...validatedUris] });
  }

  removeUri = (uri) => {
    const {
-      uris,
-    } = this.state;
+      view: {
+        uris = [],
+      },
+      coreActions: {
+        viewDataLoaded,
+      },
+    } = this.props;

-    this.setState({ uris: uris.filter((item) => item !== uri) });
+    viewDataLoaded({ uris: uris.filter((item) => item !== uri) });
  }

  render = () => {
    const {
      tracks,
      albums,
+      view: {
+        uris = [],
+        random_tracks = [],
+      },
    } = this.props;
    const {
-      uris,
      text,
      error,
      next,
@ -182,6 +211,7 @@ class AddToQueue extends React.Component {
                    <UriListItem
                      uri={uri}
                      tracks={tracks}
+                      random_tracks={random_tracks}
                      albums={albums}
                      remove={this.removeUri}
                      key={`${uri}_${index}`}
@ -234,7 +264,11 @@ class AddToQueue extends React.Component {
            >
              <I18n path="modal.add_to_queue.add_random" />
            </button>
-            <button type="submit" className="button button--primary button--large">
+            <button
+              type="submit"
+              className="button button--primary button--large"
+              disabled={!uris.length}
+            >
              <I18n path="actions.add" />
            </button>
          </div>
@ -248,6 +282,7 @@ const mapStateToProps = (state) => ({
  mopidy_connected: state.mopidy.connected,
  albums: state.core.albums,
  tracks: state.core.tracks,
+  view: state.core.view ? state.core.view : {},
 });

 const mapDispatchToProps = (dispatch) => ({