Platform-agnostic curated playlists (WIP)

Dockerfile

@@ -53,9 +53,7 @@ RUN python3 -m pip install --no-cache \
   tox \
   mopidy-mpd \
   mopidy-local \
-  dbus-python \
-  # pip not up-to-date for Mopidy-Tidal (https://github.com/tehkillerbee/mopidy-tidal/issues/14)
-  git+https://github.com/tehkillerbee/mopidy-tidal.git@master
+  dbus-python
 
 # Start helper script.
 COPY docker/entrypoint.sh /entrypoint.sh

docker-compose.example.yml

@@ -12,7 +12,7 @@ services:
   mopidy:
     image: jaedb/iris
     environment:
-      - PIP_PACKAGES="Mopidy-SoundCloud Mopidy-MusicBox-Webclient"
+      - PIP_PACKAGES=Mopidy-YTMusic Mopidy-Tidal Mopidy-SoundCloud Mopidy-MusicBox-Webclient
     build:
       context: .
     depends_on:

mopidy_iris/__init__.py

@@ -3,7 +3,7 @@
 
 from mopidy import config, ext
 
-__version__ = "3.62.0"
+__version__ = "3.63.0"
 
 logger = logging.getLogger(__name__)
 

mopidy_iris/static/index.html

@@ -140,8 +140,8 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1652000473";
-	var version = "3.62.0";
+	var build = "1653096655";
+	var version = "3.63.0";
 
 	// Construct the script tag
 	var js = document.createElement("script");

mopidy_iris/static/manifest.json

@@ -1,5 +1,5 @@
 {
-  "manifest_version": "3.62.0",
+  "manifest_version": "3.63.0",
   "short_name": "Iris",
   "name": "Iris",
   "icons": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mopidy-iris",
-  "version": "3.62.0",
+  "version": "3.63.0",
   "description": "Mopidy HTTP interface",
   "repository": "https://github.com/jaedb/iris",
   "author": "James Barnsley <james@barnsley.nz>",

setup.cfg

@@ -1,6 +1,6 @@
 [metadata]
 name = Mopidy-Iris
-version = 3.62.0
+version = 3.63.0
 url = https://github.com/jaedb/iris
 author = James Barnsley
 author_email = james@barnsley.nz

src/js/components/Grid.js

@@ -5,18 +5,23 @@ import { GridItem } from './GridItem';
 const Grid = memo(({
   items,
   className = '',
-  mini = false,
+  mini,
+  tile,
   getLink,
   sourceIcon,
 }) => {
   if (!items || !items.length) return null;
 
   return (
     <SmartList
-      className={`grid grid--${items[0].type}s ${className} ${mini ? 'grid--mini' : ''}`}
+      className={`grid grid--${items[0].type}s ${className} ${mini ? 'grid--mini' : ''} ${tile ? 'grid--tile' : ''}`}
       items={items}
       itemComponent={GridItem}
-      itemProps={{ getLink, sourceIcon }}
+      itemProps={{
+        getLink,
+        sourceIcon,
+        tile,
+      }}
     />
   );
 });

src/js/components/GridItem.js

@@ -22,6 +22,7 @@ const SecondaryLine = ({
     tracks = [],
     followers,
     albums_uris = [],
+    playlists_uris = [],
     artists,
   } = {},
 }) => {
@@ -31,6 +32,9 @@ const SecondaryLine = ({
 
   const items = () => {
     switch (type) {
+      case 'mood':
+      case 'playlist_group':
+        return null;
       case 'playlist':
         return <li><I18n path="specs.tracks" count={trackCount} /></li>;
       case 'artist':
@@ -97,6 +101,7 @@ const GridItem = ({
           }
           break;
         case 'album':
+        case 'playlist':
           dispatch(mopidyActions.getImages([item.uri]));
           break;
         default:

src/js/components/ListItem.js

@@ -30,6 +30,13 @@ const getValue = (item = {}, name = '') => {
       if (!total && !value) return null;
       return <I18n path="specs.tracks" count={nice_number(total || value.length)} />;
     }
+    case 'playlists': {
+      const {
+        playlists_uris: array = [],
+      } = item;
+      if (!array.length) return null;
+      return <I18n path="specs.playlists" count={nice_number(array.length)} />;
+    }
     case 'artists': {
       const {
         artists_total: total,

src/js/components/Sidebar.js

@@ -94,6 +94,10 @@ const Sidebar = () => {
                 <Icon name="explore" type="material" />
                 <I18n path="sidebar.discover" />
               </Link>
+              <Link to="/discover/moods" className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
+                <Icon name="mood" type="material" />
+                <I18n path="sidebar.moods" />
+              </Link>
               <Link to="/discover/categories" className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
                 <Icon name="mood" type="material" />
                 <I18n path="sidebar.genre" />

src/js/locale/en.yaml

@@ -166,7 +166,7 @@ sidebar:
   now_playing: Now playing
   search: Search
   discover: Discover
-  genre: Genre / Mood
+  moods: Genre / Mood
   featured_playlists: Featured playlists
   new_releases: New releases
   my_music: My music
@@ -482,11 +482,8 @@ user:
   you: You
 discover:
   title: Discover
-  categories:
+  moods:
     title: 'Genre / Mood'
-  category:
-    title: 'Genre / Mood'
-    category: Category
   featured:
     title: Featured playlists
   new_releases:

src/js/services/core/actions.js

@@ -174,6 +174,14 @@ export function loadPlaylist(uri, options = {}) {
   };
 }
 
+export function loadPlaylistGroup(uri, options = {}) {
+  return {
+    type: 'LOAD_PLAYLIST_GROUP',
+    uri,
+    options,
+  };
+}
+
 export function loadUser(uri, options = {}) {
   return {
     type: 'LOAD_USER',

src/js/services/core/middleware.js

@@ -500,6 +500,29 @@ const CoreMiddleware = (function () {
         break;
       }
 
+      case 'LOAD_PLAYLIST_GROUP': {
+        const fetch = () => {
+          console.debug('fetching', action)
+          switch (uriSource(action.uri)) {
+            case 'spotify':
+              store.dispatch(spotifyActions.getCategory(action.uri, action.options));
+              break;
+            default:
+              store.dispatch(mopidyActions.getPlaylistGroup(action.uri, action.options));
+              break;
+          }
+        };
+        ensureLoaded({
+          store,
+          action,
+          fetch,
+          dependents: ['playlist_uris', 'playlists'],
+          type: 'playlist_group',
+        });
+        next(action);
+        break;
+      }
+
       case 'LOAD_USER': {
         const fetch = () => {
           switch (uriSource(action.uri)) {

src/js/services/mopidy/actions.js

@@ -477,13 +477,28 @@ export function deletePlaylist(uri) {
   };
 }
 
+export function getLibraryMoods(uri) {
+  return {
+    type: 'MOPIDY_GET_LIBRARY_MOODS',
+    uri,
+  };
+}
+
 export function getLibraryPlaylists(uri) {
   return {
     type: 'MOPIDY_GET_LIBRARY_PLAYLISTS',
     uri,
   };
 }
 
+export function getPlaylistGroup(uri, options) {
+  return {
+    type: 'MOPIDY_GET_PLAYLIST_GROUP',
+    uri,
+    options,
+  };
+}
+
 export function getPlaylist(uri, options) {
   return {
     type: 'MOPIDY_GET_PLAYLIST',

src/js/services/mopidy/middleware.js

@@ -15,12 +15,15 @@ import {
   formatAlbum,
   formatTrack,
   formatTracks,
-  formatSimpleObject,
+  formatPlaylists,
+  formatPlaylistGroup,
+  formatPlaylistGroups,
   getTrackIcon,
   formatArtists,
   formatArtist,
   formatPlaylist,
   injectSortId,
+  formatSimpleObject,
 } from '../../util/format';
 import {
   arrayOf,
@@ -1769,6 +1772,8 @@ const MopidyMiddleware = (function () {
             Object.keys(response).forEach((uri) => {
               const images = response[uri];
 
+              console.debug({ images })
+
               if (images) {
                 itemsWithImages.push({
                   uri,
@@ -1950,6 +1955,57 @@ const MopidyMiddleware = (function () {
           });
         break;
 
+      case 'MOPIDY_GET_LIBRARY_MOODS': {
+        store.dispatch(uiActions.startProcess(action.type, { notification: false }));
+
+        request(store, 'library.browse', { uri: action.uri })
+          .then((response) => {
+            const moods = response.map((mood) => ({
+              ...formatSimpleObject(mood),
+              type: 'mood',
+            }));
+
+            store.dispatch(
+              uiActions.updateProcess(
+                action.type,
+                {
+                  total: moods.length,
+                  remaining: moods.length,
+                },
+              ),
+            );
+
+            store.dispatch(coreActions.libraryLoaded({
+              uri: action.uri,
+              type: 'moods',
+              items_uris: arrayOf('uri', moods),
+            }));
+            store.dispatch(coreActions.itemsLoaded(moods));
+            store.dispatch(uiActions.stopLoading(action.uri));
+            store.dispatch(uiActions.processFinished(action.type));
+          });
+        break;
+      }
+
+      case 'MOPIDY_GET_PLAYLIST_GROUP': {
+        const decodedUri = action.uri ? decodeURIComponent(action.uri) : null;
+        store.dispatch(coreActions.itemLoaded({
+          uri: decodedUri,
+          loading: true,
+        }));
+        request(store, 'library.browse', { uri: action.uri })
+          .then((browse) => {
+            const playlists = formatPlaylists(browse);
+            const playlists_uris = arrayOf('uri', playlists);
+            store.dispatch(coreActions.itemsLoaded(playlists));
+            store.dispatch(coreActions.itemLoaded({
+              uri: decodedUri,
+              loading: false,
+              playlists_uris,
+            }));
+          })
+        break;
+      }
       case 'MOPIDY_GET_LIBRARY_PLAYLISTS': {
         store.dispatch(uiActions.startProcess(action.type, { notification: false }));
 

src/js/services/spotify/actions.js

@@ -421,10 +421,10 @@ export function getFeaturedPlaylists(forceRefetch = false) {
   };
 }
 
-export function getCategories() {
+export function getLibraryMoods() {
   return (dispatch, getState) => {
     const loaderId = generateGuid();
-    dispatch(uiActions.startLoading(loaderId, 'spotify_categories'));
+    dispatch(uiActions.startLoading(loaderId, 'spotify_moods'));
 
     let endpoint = 'browse/categories';
     endpoint += '?limit=50';