Feat: Add My Sonos & version info

- Add feature to browse & play Sonos Favorites & Sonos Playlists
- Add feature to search Sonos Playlists
- Add package.json app version to navigation panel

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonos-web",
-  "version": "0.1.0",
+  "version": "0.8.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

client/src/App.vue

@@ -34,6 +34,9 @@
                 </v-list-tile>
               </template>
             </v-list>
+            <div class="version-text subtitle pa-3 grey--text text--darken-2">
+              {{ APP_VERSION }}
+            </div>
           </v-navigation-drawer>
           <v-container fill-height>
             <v-layout>
@@ -49,6 +52,7 @@
 
 <script>
 import NowPlayingBar from '@/components/NowPlayingBar.vue';
+import { version } from '../package.json';
 
 export default {
   components: { NowPlayingBar },
@@ -61,6 +65,7 @@ export default {
       { icon: 'library_music', text: 'Music Library', path: '/library' },
       { icon: 'star', text: 'My Sonos', path: '/sonos' },
     ],
+    APP_VERSION: `v${version}`,
   }),
   computed: {
     discoveringSonos() {
@@ -74,6 +79,11 @@ export default {
 </script>
 
 <style>
+.version-text {
+  position: absolute;
+  bottom: 90px;
+  left: 0px;
+}
 .theme--dark.v-list {
   background: #282828;
 }

client/src/components/SongList.vue

@@ -20,13 +20,13 @@
         <v-list-tile @click="playNow(selectedSongURI)">
           <v-list-tile-title>Play Now</v-list-tile-title>
         </v-list-tile>
-        <v-list-tile @click="playNext(selectedSongURI)">
+        <v-list-tile @click="playNext(selectedSongURI)" v-if="!isRadio">
           <v-list-tile-title>Play Next</v-list-tile-title>
         </v-list-tile>
-        <v-list-tile @click="addToEndOfQueue(selectedSongURI)">
+        <v-list-tile @click="addToEndOfQueue(selectedSongURI)" v-if="!isRadio">
           <v-list-tile-title>Add to End of Queue</v-list-tile-title>
         </v-list-tile>
-        <v-list-tile @click="replaceQueueAndPlay(selectedSongURI)">
+        <v-list-tile @click="replaceQueueAndPlay(selectedSongURI)" v-if="!isRadio">
           <v-list-tile-title>Replace Queue</v-list-tile-title>
         </v-list-tile>
       </v-list>
@@ -84,6 +84,15 @@ export default {
     activeZoneGroupId() {
       return this.$store.state.activeZoneGroupId;
     },
+    isRadio() {
+      if (this.selectedSongURI) {
+        if (this.selectedSongURI.startsWith('x-sonosapi-radio:')) {
+          return true;
+        }
+        return false;
+      }
+      return false;
+    },
   },
 };
 </script>

client/src/router.js

@@ -26,6 +26,7 @@ const Share = () => import(/* webpackChunkName: "Share" */ './views/library/deta
 
 const MySonos = () => import(/* webpackChunkName: "My Sonos" */ './views/MySonos.vue');
 const SonosPlaylists = () => import(/* webpackChunkName: "Sonos Playlists" */ './views/sonos/SonosPlaylists.vue');
+const SonosFavorites = () => import(/* webpackChunkName: "Sonos Favorites" */ './views/sonos/SonosFavorites.vue');
 
 const PlayQueue = () => import(/* webpackChunkName: "Play Queue" */ './views/PlayQueue.vue');
 
@@ -79,6 +80,12 @@ const router = new Router({
           component: Playlists,
           props: { search: true },
         },
+        {
+          path: '/search/sp/*',
+          name: 'SearchSonosPlaylists',
+          component: SonosPlaylists,
+          props: { search: true },
+        },
       ],
     },
     {
@@ -164,6 +171,12 @@ const router = new Router({
       name: 'Share',
       component: Share,
     },
+    {
+      path: '/sp/*',
+      name: 'Sonos Playlist',
+      component: Album,
+      props: { isSonosPlaylist: true },
+    },
     {
       path: '/queue',
       name: 'PlayQueue',
@@ -186,7 +199,7 @@ const router = new Router({
         {
           path: '/sonos/favorites',
           name: 'SonosFavorites',
-          component: Playlists,
+          component: SonosFavorites,
         },
       ],
     },

client/src/services/API/musicLibrary.js

@@ -20,6 +20,9 @@ export default {
   getSonosPlaylists(options) {
     return axios.post('/sonos_playlists', options);
   },
+  getSonosFavorites(options) {
+    return axios.post('/favorites', options);
+  },
   getShares(options) {
     return axios.post('/share', options);
   },

client/src/views/Search.vue

@@ -75,6 +75,7 @@ export default {
         { title: 'Songs', link: `/search/songs/${this.encodedSearchInput}` },
         { title: 'Genres', link: `/search/genres/${this.encodedSearchInput}` },
         { title: 'Playlists', link: `/search/playlists/${this.encodedSearchInput}` },
+        { title: 'Sonos Playlists', link: `/search/sp/${this.encodedSearchInput}` },
       ];
     },
     encodedSearchInput() {

client/src/views/SearchTopResults.vue

@@ -54,6 +54,19 @@
             :item="item" toPrefix="/playlist"></library-item>
         </v-layout>
       </v-flex>
+      <v-flex xs12 v-if="playlists" pb-4>
+        <v-layout justify-center>
+          <router-link
+            :to="`/search/sp/${searchTerm}`"
+            class="top-result-heading">
+            Sonos Playlists
+          </router-link>
+        </v-layout>
+        <v-layout row wrap pt-2>
+          <library-item v-for="item in sonosPlaylists" :key="item.uri"
+            :item="item" toPrefix="/sp"></library-item>
+        </v-layout>
+      </v-flex>
       <v-flex xs12 v-if="genres" pb-4>
         <v-layout justify-center>
           <router-link
@@ -123,6 +136,9 @@ export default {
     playlists() {
       return this.topResults.playlists ? this.topResults.playlists.items : null;
     },
+    sonosPlaylists() {
+      return this.topResults.sonos_playlists ? this.topResults.sonos_playlists.items : null;
+    },
     genres() {
       return this.topResults.genres ? this.topResults.genres.items : null;
     },

client/src/views/library/detail/Album.vue

@@ -75,6 +75,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isSonosPlaylist: {
+      type: Boolean,
+      default: false,
+    },
     isGenrePlaylist: {
       type: Boolean,
       default: false,
@@ -175,9 +179,14 @@ export default {
     uriData() {
       if (this.allAlbum) {
         return { artistPath: `${this.albumName}/` };
-      } if (this.isNormalPlaylist) {
+      }
+      if (this.isNormalPlaylist) {
         return { playlistName: this.albumName };
-      } if (this.isGenrePlaylist) {
+      }
+      if (this.isSonosPlaylist) {
+        return { sonosPlaylistName: this.albumName };
+      }
+      if (this.isGenrePlaylist) {
         return { genrePath: `${this.albumName}//` };
       }
       return { artistPath: `${this.artistName}/${this.albumName}` };

client/src/views/sonos/SonosFavorites.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-layout>
+    <load-library-on-scroll
+      @loading-error="loadingError"
+      @loaded-items="loadedItems"
+      :asyncLoadMethod="loadMethod"
+      :libraryItem="sonosFavorites">
+    </load-library-on-scroll>
+    <ErrorView v-if="error" absolute :message="errorMessage"></ErrorView>
+    <LoadingView v-else-if="loading" absolute message="Loading..."></LoadingView>
+    <v-layout row wrap v-else>
+      <library-item-count :total="sonosFavorites.total"
+        label="Favorites"></library-item-count>
+      <v-flex xs12>
+        <song-list :songs="items"></song-list>
+      </v-flex>
+    </v-layout>
+  </v-layout>
+</template>
+
+<script>
+import deepmerge from 'deepmerge';
+import MusicLibraryAPI from '@/services/API/musicLibrary';
+import SongList from '@/components/SongList.vue';
+import LibraryItemCount from '@/components/LibraryItemCount.vue';
+import LoadLibraryOnScroll from '@/components/LoadLibraryOnScroll.vue';
+
+export default {
+  name: 'SonosFavorites',
+  components: { SongList, LibraryItemCount, LoadLibraryOnScroll },
+  data: () => ({
+    sonosFavorites: {},
+    loading: true,
+    error: false,
+    errorMessage: null,
+  }),
+  methods: {
+    loadMethod: MusicLibraryAPI.getSonosFavorites,
+    loadedItems(data) {
+      this.loading = false;
+      this.sonosFavorites = deepmerge(this.sonosFavorites, data);
+    },
+    loadingError(error) {
+      this.loading = false;
+      this.error = true;
+      this.errorMessage = `${error.response.status}: ${error.response.data}`;
+    },
+  },
+  computed: {
+    items() {
+      return this.sonosFavorites.items || [];
+    },
+  },
+};
+</script>

client/src/views/sonos/SonosPlaylists.vue

@@ -44,7 +44,6 @@ export default {
     loadedItems(data) {
       this.loading = false;
       this.sonosPlaylists = deepmerge(this.sonosPlaylists, data);
-      console.log(this.sonosPlaylists);
     },
     loadingError(error) {
       this.loading = false;

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonos-web",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Sonos Web Controller",
   "author": "Nicholas Villarreal",
   "license": "GPL-3.0",
@@ -21,7 +21,7 @@
     "js-base64": "^2.5.0",
     "serve-static": "^1.13.2",
     "socket.io": "^2.2.0",
-    "sonos": "git+https://github.com/Villarrealized/node-sonos.git#master"
+    "sonos": "git+https://github.com/Villarrealized/node-sonos.git#feature/add-soundcloud-support"
   },
   "devDependencies": {
     "eslint": "^5.10.0",

server/src/routes/libraryDetail.js

@@ -106,6 +106,21 @@ module.exports = function LibraryDetail(sonosNetwork) {
       this.handleError(error, res);
     }
   });
+  this.router.post('/sp/:name', async (req, res) => {
+    try {
+      const playlistName = Base64.decode(req.params.name);
+      const playlistURI = await this.sonosNetwork.musicLibrary.getSonosPlaylistId(playlistName);
+      const songs = await this.sonosNetwork.musicLibrary.browse({
+        searchCategory: 'sonos_playlists',
+        searchTerm: playlistURI,
+        searchOptions: { start: req.body.start, total: req.body.total },
+        search: true,
+      });
+      res.status(200).send(songs);
+    } catch (error) {
+      this.handleError(error, res);
+    }
+  });
 
   this.handleError = function handleError(error, res) {
     const { message } = error;

server/src/routes/musicLibrary.js

@@ -7,18 +7,20 @@ module.exports = function MusicLibrary(sonosNetwork) {
   this.router.post('/search/:libraryItem', async (req, res) => {
     try {
       const { libraryItem } = req.params;
-
-      if (libraryItem !== 'results') {
-        const results = await this.sonosNetwork.musicLibrary.browse({
+      if (libraryItem === 'results') {
+        const results = await this.sonosNetwork.musicLibrary.getTopResults({
           searchCategory: libraryItem,
-          searchOptions: { start: req.body.start, total: req.body.total },
           searchTerm: req.body.searchTerm,
           search: true,
         });
         res.status(200).send(results);
+      } else if (libraryItem === 'sonos_playlists') {
+        const results = await this.sonosNetwork.musicLibrary.searchSonosPlaylists({ searchTerm: req.body.searchTerm });
+        res.status(200).send(results);
       } else {
-        const results = await this.sonosNetwork.musicLibrary.getTopResults({
+        const results = await this.sonosNetwork.musicLibrary.browse({
           searchCategory: libraryItem,
+          searchOptions: { start: req.body.start, total: req.body.total },
           searchTerm: req.body.searchTerm,
           search: true,
         });
@@ -29,6 +31,15 @@ module.exports = function MusicLibrary(sonosNetwork) {
     }
   });
 
+  this.router.post('/favorites', async (req, res) => {
+    try {
+      const results = await this.sonosNetwork.musicLibrary.getFavorites();
+      res.status(200).send(results);
+    } catch (error) {
+      res.status(500).send(error.message);
+    }
+  });
+
   this.router.post('/:libraryItem', async (req, res) => {
     try {
       const { libraryItem } = req.params;