Fixing responsive on exactly 800px screens; Artist now sends name in URL

src/js/components/DebugInfo.js

@@ -81,6 +81,12 @@ class DebugInfo extends React.Component {
             {' '}
             {build}
           </div>
+          <div className="debug-info-item">
+            Dimensions:
+            {' '}
+            {`${document.documentElement.clientWidth} (${window.innerWidth})w `}
+            {`${document.documentElement.clientHeight} (${window.innerHeight})h `}
+          </div>
         </div>
 
         <div className="debug-info-section">

src/js/components/GridItem.js

@@ -109,7 +109,8 @@ const GridItem = ({
   } else if (item.link) {
     to = item.link;
   } else {
-    to = `/${item.type}/${encodeUri(item.uri)}${item.name ? `/${item.name}` : ''}`;
+    to = `/${item.type}/${encodeUri(item.uri)}`;
+    if (item.name && item.type !== 'artist') to += `/${item.name}`;
   }
 
   return (

src/js/components/ListItem.js

@@ -138,7 +138,8 @@ const ListItem = ({
     } else if (item.link) {
       to = item.link;
     } else {
-      to = `/${item.type}/${encodeUri(item.uri)}${item.name ? `/${item.name}` : ''}`;
+      to = `/${item.type}/${encodeUri(item.uri)}`;
+      if (item.name && item.type !== 'artist') to += `/${item.name}`;
     }
 
     if (e.target.tagName.toLowerCase() !== 'a') {

src/js/services/mopidy/middleware.js

@@ -29,7 +29,7 @@ import {
   sortItems,
   indexToArray,
 } from '../../util/arrays';
-import { getProvider } from '../../util/selectors';
+import { getProvider, getSortSelector } from '../../util/selectors';
 
 const mopidyActions = require('./actions.js');
 const coreActions = require('../core/actions.js');
@@ -814,10 +814,11 @@ const MopidyMiddleware = (function () {
 
       case 'MOPIDY_PLAY_PLAYLIST': {
         const playlist = store.getState().core.items[action.uri];
+        const { sortField, sortReverse } = getSortSelector(store.getState(), 'playlist_tracks');
         if (playlist && playlist.tracks) {
           store.dispatch(
             mopidyActions.playURIs(
-              arrayOf('uri', playlist.tracks),
+              arrayOf('uri', sortItems(playlist.tracks, sortField, sortReverse)),
               action.uri,
               action.shuffle,
             ),

src/js/util/selectors.js

@@ -192,6 +192,10 @@ const makeProvidersSelector = (context) => createSelector(
     return providers[context].filter((p) => schemes.indexOf(p.scheme) > -1);
   },
 );
+const getSortSelector = (state, context) => ({
+  sortField: state.ui[`${context}_sort`] || 'sort_id',
+  sortReverse: state.ui[`${context}_sort_reverse`],
+});
 
 export {
   getItem,
@@ -208,4 +212,5 @@ export {
   queueHistorySelector,
   makeProvidersSelector,
   getProvider,
+  getSortSelector,
 };

src/js/views/Artist.js

@@ -592,7 +592,7 @@ class Artist extends React.Component {
             <Route exact path="/artist/:id/about">
               {this.renderAbout()}
             </Route>
-            <Route exact path="/artist/:id">
+            <Route exact path="/artist/:id/:name?">
               {this.renderOverview()}
             </Route>
           </Switch>

src/js/views/Playlist.js

@@ -12,20 +12,17 @@ import FollowButton from '../components/Fields/FollowButton';
 import Loader from '../components/Loader';
 import ContextMenuTrigger from '../components/ContextMenuTrigger';
 import URILink from '../components/URILink';
-import Icon, { SourceIcon } from '../components/Icon';
+import { SourceIcon } from '../components/Icon';
 import DropdownField from '../components/Fields/DropdownField';
 import FilterField from '../components/Fields/FilterField';
 import * as coreActions from '../services/core/actions';
 import * as uiActions from '../services/ui/actions';
 import * as mopidyActions from '../services/mopidy/actions';
 import * as spotifyActions from '../services/spotify/actions';
-import {
-  uriSource,
-  sourceIcon,
-} from '../util/helpers';
+import { uriSource } from '../util/helpers';
 import { trackEvent } from '../components/Trackable';
 import { i18n, I18n } from '../locale';
-import { makeItemSelector, makeLoadingSelector } from '../util/selectors';
+import { makeItemSelector, makeLoadingSelector, getSortSelector } from '../util/selectors';
 import { sortItems, applyFilter } from '../util/arrays';
 import { decodeUri, encodeUri } from '../util/format';
 
@@ -141,8 +138,8 @@ class Playlist extends React.Component {
 
   onChangeSort = (value) => {
     const {
-      sort,
-      sort_reverse,
+      sortField,
+      sortReverse,
       uiActions: {
         set,
         hideContextMenu,
@@ -150,8 +147,8 @@ class Playlist extends React.Component {
     } = this.props;
 
     let reverse = false;
-    if (value !== null && sort === value) {
-      reverse = !sort_reverse;
+    if (value !== null && sortField === value) {
+      reverse = !sortReverse;
     }
 
     set({
@@ -501,6 +498,7 @@ const mapStateToProps = (state, ownProps) => {
   const itemSelector = makeItemSelector(uri);
   const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!tracks).)*$', '^((?!followers).)*$']);
   const loadingTracksSelector = makeLoadingSelector([`(.*)${uri}(.*)tracks(.*)`]);
+  const { sortField, sortReverse } = getSortSelector(state, 'playlist_tracks');
 
   return {
     uri,
@@ -516,8 +514,8 @@ const mapStateToProps = (state, ownProps) => {
     local_library_playlists,
     spotify_authorized,
     spotify_userid: (me && me.id) || null,
-    sort: (state.ui.playlist_tracks_sort ? state.ui.playlist_tracks_sort : 'sort_id'),
-    sort_reverse: (!!state.ui.playlist_tracks_sort_reverse),
+    sortField,
+    sortReverse,
   };
 };
 

src/scss/global/_variables.scss

@@ -285,27 +285,27 @@ $bp_shallow: 650px;
   $min_height: null
 ) {
   @if $max_width and $max_height {
-    @media (max-width: $max_width - 1), (max-height: $max_height - 1) {
+    @media (max-width: $max_width), (max-height: $max_height) {
       @content;
     }
   } @else if $max_width and $min_width {
-    @media (max-width: $max_width - 1) and (min-width: $min_width) {
+    @media (max-width: $max_width) and (min-width: $min_width + 1) {
       @content;
     }
   } @else if $max_width {
-    @media (max-width: $max_width - 1) {
+    @media (max-width: $max_width) {
       @content;
     }
   } @else if $max_height {
-    @media (max-height: $max_height - 1) {
+    @media (max-height: $max_height) {
       @content;
     }
   } @else if $min_width {
-    @media (min-width: $min_width) {
+    @media (min-width: $min_width + 1) {
       @content;
     }
   } @else if $min_height {
-    @media (min-height: $min_height) {
+    @media (min-height: $min_height + 1) {
       @content;
     }
   }