Cleaning code; Updating spotify POST requests and LastFM signed to use fetch

mopidy_iris/static/app.css

@@ -3947,6 +3947,7 @@ select {
   padding: 16px 16px 16px 20px;
   border-radius: 3px;
   justify-content: space-between;
+  align-content: center;
   /*
 		.icon.source {
 			color: colour(mid_grey);
@@ -5057,12 +5058,12 @@ select {
       border-radius: 3px;
       font-family: "Overpass";
       font-weight: 600;
-      font-size: 15px;
+      font-size: 1.05rem;
       color: #FFFFFF;
       text-decoration: none;
-      display: block;
+      display: flex;
-      padding: 13px 10px 10px;
+      padding: 0.75em 0.85em;
-      margin: 0 18px;
+      margin: 0 1.1em;
       border-radius: 3px; }
       .sidebar__menu__item:before {
         -webkit-transition: all 0.2s ease-in-out;
@@ -6905,14 +6906,15 @@ main .track-view {
   align-items: center;
   justify-content: center; }
   .queue-view .current-track__artwork {
-    position: relative;
     text-align: right;
     display: block;
     z-index: 1;
     width: 48%;
     margin-right: 2%; }
     .queue-view .current-track__artwork a {
-      border: 0 !important; }
+      border: 0 !important;
+      display: inline-block;
+      position: relative; }
     .queue-view .current-track__artwork .thumbnail {
       width: 30vh;
       display: inline-block; }
@@ -6924,7 +6926,8 @@ main .track-view {
       left: -15%;
       width: 130%;
       height: 130%;
-      z-index: 2; }
+      z-index: 2;
+      pointer-events: none; }
   .queue-view .current-track__details {
     width: 48%;
     margin-left: 2%; }
@@ -7267,16 +7270,16 @@ main .track-view {
     position: relative;
     padding-top: 15px;
     padding-bottom: 15px;
-    vertical-align: top; }
+    vertical-align: top;
+    justify-items: auto; }
     .settings-view .commands-setup__item .commands__item {
       display: inline-block;
       margin: 0; }
     .settings-view .commands-setup__item__drag-handle {
       cursor: move;
       padding-right: 0.5em; }
-    .settings-view .commands-setup__item__drag-handle, .settings-view .commands-setup__item__command-item {
+    .settings-view .commands-setup__item__details {
-      float: left;
+      display: flex; }
-      display: block; }
     .settings-view .commands-setup__item__url {
       white-space: nowrap;
       overflow: hidden;
@@ -7286,11 +7289,12 @@ main .track-view {
       display: inline-block;
       margin-bottom: -5px; }
     .settings-view .commands-setup__item__actions {
-      position: absolute;
+      text-align: right;
-      top: 16px;
+      justify-self: right;
-      right: 0; }
+      margin-left: auto; }
       .settings-view .commands-setup__item__actions .action {
-        padding: 12px 8px; }
+        padding: 12px 8px;
+        margin: -12px 0; }
 
 .settings-view .field.pusher-connections .connection.me {
   color: #08d58f; }

mopidy_iris/static/index.html

@@ -100,7 +100,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1568536533";
+	var build = "1568768768";
 	var version = "3.40.0";
 
 	// Construct the script tag

src/js/components/Fields/Commands.js

@@ -5,7 +5,7 @@ import Icon from '../Icon';
 import Link from '../Link';
 import * as helpers from '../../helpers';
 
-export default class Commands extends React.Component {
+export default class Commands extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -50,12 +50,12 @@ export default class Commands extends React.Component {
           animation: 150,
         }}
         className="list commands-setup"
-        onChange={(order, sortable, e) => { this.onChange(order); }}
+        onChange={(order, sortable, e) => { this.onChange(order); }}
       >
         {
                     commands.map((command) => (
                       <div className="list__item commands-setup__item list__item--no-interaction" key={command.id} data-id={command.id}>
-                        <div className="col col--w90">
+                        <div className="commands-setup__item__details">
                           <Icon className="commands-setup__item__drag-handle" name="drag_indicator" />
                           <div className="commands-setup__item__command-item commands__item commands__item--small">
                             <Icon className="commands__item__icon" name={command.icon} />
@@ -79,4 +79,4 @@ export default class Commands extends React.Component {
       </Sortable>
     );
   }
-}
+}

src/js/services/lastfm/actions.js

@@ -84,35 +84,26 @@ const sendSignedRequest = (dispatch, getState, params) => new Promise((resolve,
   dispatch(uiActions.startLoading(loader_key, `lastfm_${method}`));
 
   params += `&sk=${getState().lastfm.authorization.key}`;
+  const url = `${getState().lastfm.authorization_url}?action=sign_request&${params}`;
 
   const config = {
     method: 'GET',
     cache: false,
     timeout: 30000,
-    url: `${getState().lastfm.authorization_url}?action=sign_request&${params}`,
   };
 
-  // Get our server proxy to sign our request
+  fetch(url, config)
-  $.ajax(config).then(
+    .then(signResponse => {
-    (response) => {
       dispatch(uiActions.stopLoading(loader_key));
 
       // Now we have signed params, we can make the actual request
-      sendRequest(dispatch, getState, response.params, true)
+      sendRequest(dispatch, getState, signResponse.params, true)
         .then(
-          (response) => {
+          response => resolve(response),
-            resolve(response);
+          error => reject(error),
-          },
-          (error) => {
-            reject(error);
-          },
         );
-    },
+    })
-    (xhr, status, error) => {
+    .catch(error => reject(error));
-      dispatch(uiActions.stopLoading(loader_key));
-      reject(error);
-    },
-  );
 });
 
 

src/js/services/spotify/actions.js

@@ -47,9 +47,9 @@ const request = (dispatch, getState, endpoint, method = 'GET', data = false, cac
           // only if we've got data do we add it to the request (this prevents appending of "&false" to the URL)
           if (data) {
             if (typeof (data) === 'string') {
-              config.data = data;
+              config.body = data;
             } else {
-              config.data = JSON.stringify(data);
+              config.body = JSON.stringify(data);
             }
           }
 

src/js/views/modals/AddToPlaylist.js

@@ -17,66 +17,73 @@ import * as helpers from '../../helpers';
 class AddToPlaylist extends React.Component {
   constructor(props) {
     super(props);
+    const {
+      spotify_library_playlists,
+      mopidy_library_playlists,
+      mopidy_connected,
+      spotifyActions,
+      mopidyActions,
+    } = this.props;
 
-    if (!this.props.spotify_library_playlists) {
+    if (!spotify_library_playlists) {
-      this.props.spotifyActions.getLibraryPlaylists();
+      spotifyActions.getLibraryPlaylists();
     }
 
-    if (!this.props.mopidy_library_playlists && this.props.mopidy_connected) {
+    if (!mopidy_library_playlists && mopidy_connected) {
-      this.props.mopidyActions.getLibraryPlaylists();
+      mopidyActions.getLibraryPlaylists();
     }
   }
 
   playlistSelected(playlist_uri) {
-    this.props.coreActions.addTracksToPlaylist(playlist_uri, this.props.uris);
+    const { coreActions, uris } = this.props;
+    coreActions.addTracksToPlaylist(playlist_uri, uris);
     window.history.back();
   }
 
   render() {
-    if (!this.props.playlists) return <div className="empty">No editable playlists</div>;
+    const { playlists, uris, spotify_library_playlists_status } = this.props;
-    let playlists = [];
+
-    for (const uri in this.props.playlists) {
+    if (!playlists) return <div className="empty">No editable playlists</div>;
-      if (this.props.playlists[uri].can_edit) playlists.push(this.props.playlists[uri]);
+
+    let editablePlaylists = [];
+    for (let uri in playlists) {
+      if (playlists[uri].can_edit) editablePlaylists.push(playlists[uri]);
     }
 
-    playlists = helpers.sortItems(playlists, 'name');
+    editablePlaylists = helpers.sortItems(editablePlaylists, 'name');
 
-    const isLoading = this.props.spotify_library_playlists_status == 'running';
+    const isLoading = spotify_library_playlists_status === 'running';
 
     return (
       <Modal className="modal--add-to-playlist">
         <h1>Add to playlist</h1>
         <h2 className="mid_grey-text">
-Select playlist to add
+          {`Select playlist to add ${uris.length} track ${uris.length > 1 ? 's' : ''} to`}
-          {this.props.uris.length}
-          {' '}
-track
-          {this.props.uris.length > 1 ? 's' : null}
-          {' '}
-to
         </h2>
-        {playlists.length <= 0 ? <div className="no-results">No playlists available</div> : null}
+        {editablePlaylists.length <= 0 && <div className="no-results">No playlists available</div>}
         <div className="list small playlists">
-          {
+          {editablePlaylists.map((playlist) => (
-						playlists.map((playlist) => (
+            <div
-  <div className="list__item" key={playlist.uri} onClick={() => this.playlistSelected(playlist.uri)}>
+              className="list__item"
-    <Thumbnail images={playlist.images} size="small" />
+              key={playlist.uri}
-    <h4 className="list__item__name">{ playlist.name }</h4>
+              onClick={() => this.playlistSelected(playlist.uri)}
-    <ul className="list__item__details details">
+            >
-      <li><Icon type="fontawesome" className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
+              <Thumbnail images={playlist.images} size="small" />
-      <li>
+              <h4 className="list__item__name">{ playlist.name }</h4>
-        { playlist.tracks_total ? (
+              <ul className="list__item__details details">
-          <span className="mid_grey-text">
+                <li><Icon type="fontawesome" className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
-            { playlist.tracks_total }
+                <li>
-            {' '}
+                  { playlist.tracks_total ? (
-tracks
+                    <span className="mid_grey-text">
-          </span>
+                      { playlist.tracks_total }
-        ) : null }
+                      {' '}
-      </li>
+            tracks
-    </ul>
+                    </span>
-  </div>
+                  ) : null }
-						))
+                </li>
-					}
+              </ul>
+            </div>
+          ))}
         </div>
         {isLoading && <Loader body lazy loading />}
       </Modal>

src/scss/components/_lists.scss

@@ -16,6 +16,7 @@
 		padding: 16px 16px 16px 20px;
 		border-radius: 3px;
 		justify-content: space-between;
+		align-content: center;
 
 		&:before {
 			pointer-events: none;

src/scss/components/_sidebar.scss

@@ -32,12 +32,12 @@
       @include gradient_overlay(3px);
       font-family: "Overpass";
       font-weight: 600;
-      font-size: 15px;
+      font-size: 1.05rem;
       color: colour(white);
       text-decoration: none;
-      display: block;
+      display: flex;
-      padding: 13px 10px 10px;
+      padding: 0.75em 0.85em;
-      margin: 0 18px;
+      margin: 0 1.1em;
       border-radius: 3px;
 
       .light-theme & {

src/scss/views/_queue.scss

@@ -7,7 +7,6 @@
     justify-content: center;
 
     &__artwork {
-      position: relative;
       text-align: right;
       display: block;
       z-index: 1;
@@ -16,6 +15,8 @@
 
       a {
         border: 0 !important;
+        display: inline-block;
+        position: relative;
       }
 
       .thumbnail {
@@ -35,6 +36,7 @@
           width: 130%;
           height: 130%;
           z-index: 2;
+          pointer-events: none;
         }
       }
     }

src/scss/views/_settings.scss

@@ -40,6 +40,7 @@
 			padding-top: 15px;
 			padding-bottom: 15px;
 			vertical-align: top;
+			justify-items: auto;
 
 			.commands__item {
 				display: inline-block;
@@ -51,10 +52,8 @@
 				padding-right: 0.5em;
 			}
 
-			&__drag-handle,
+			&__details {
-			&__command-item {
+				display: flex;
-				float: left;
-				display: block;
 			}
 
 			&__url {
@@ -66,12 +65,13 @@
 			}
 
 			&__actions {
-				position: absolute;
+				text-align: right;
-				top: 16px;
+				justify-self: right;
-				right: 0;
+				margin-left: auto;
 
 				.action {
 					padding: 12px 8px;
+					margin: -12px 0;
 				}
 			} 
 		}