home page is now available in non dev environments

src/renderer/index.js

@@ -206,6 +206,7 @@ const app = new Vue({
             id: ""
         },
         mxmtoken: "",
+        mkIsReady: false,
         playerReady: false,
         lyricon: false,
         currentTrackID: '',
@@ -247,7 +248,7 @@ const app = new Vue({
         },
         prevButtonBackIndicator: false,
         currentSongInfo: {},
-        page: "browse",
+        page: "",
         pageHistory: [],
         songstest: false,
         hangtimer: null,
@@ -280,6 +281,12 @@ const app = new Vue({
         },
     },
     methods: {
+        addFavorite(id, type) {
+            this.cfg.home.favoriteItems.push({
+                id: id,
+                type: type
+            });
+        },
         modularUITest(val = false) {
             if (val) {
                 document.querySelector("#app-main").classList.add("modular-fs")
@@ -344,7 +351,9 @@ const app = new Vue({
             let self = this
             clearTimeout(this.hangtimer)
             this.mk = MusicKit.getInstance()
-            this.mk.authorize()
+            this.mk.authorize().then(()=>{
+                self.mkIsReady = true
+            })
             this.$forceUpdate()
             if (this.isDev) {
                 this.mk.privateEnabled = true
@@ -493,6 +502,8 @@ const app = new Vue({
             document.body.removeAttribute("loading")
             if (window.location.hash != "") {
                 this.appRoute(window.location.hash)
+            }else{
+                this.page = "home"
             }
 
             setTimeout(() => {
@@ -568,6 +579,12 @@ const app = new Vue({
                         action: () => {
                             this.deletePlaylist(playlist_id)
                         }
+                    },
+                    {
+                        name: "Add to favorites",
+                        action: () => {
+                            this.addFavorite(playlist_id, "library-playlists")
+                        }
                     }
                 ]
             }

src/renderer/style.less

@@ -1544,6 +1544,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   top: 0;
   padding-top: var(--navbarHeight);
 
+  .artist-feed-card {
+    position: absolute;
+    bottom: 0;
+    left: 10%;
+    z-index: 1;
+    background: black;
+    width: 80%;
+    height: 96%;
+    overflow: scroll;
+    border-radius: 10px;
+  }
+
   .col.madeforyou-col {
     width: 420px;
     min-width: 0px;

src/renderer/views/components/mediaitem-square.ejs

@@ -44,7 +44,8 @@
             size: {
                 type: String,
                 default: '300'
-            }
+            },
+            'contextExt': {type: Object, required: false},
         },
         data: function () {
             return {
@@ -62,7 +63,12 @@
             },
             async isInLibrary() {
                 if (this.item.type && !this.item.type.includes("library")) {
-                    var params = {"fields[playlists]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library", "extend": this.revisedRandId()}
+                    var params = {
+                        "fields[playlists]": "inLibrary",
+                        "fields[albums]": "inLibrary",
+                        "relate": "library",
+                        "extend": this.revisedRandId()
+                    }
                     var res = await app.mkapi(this.item.attributes.playParams.kind ?? this.item.type, this.item.attributes.playParams.isLibrary ?? false, this.item.attributes.playParams.id ?? this.item.id, params);
                     this.addedToLibrary = (res && res.attributes && res.attributes.inLibrary) ? res.attributes.inLibrary : false
                 } else {
@@ -70,7 +76,13 @@
                 }
             },
             async removeFromLibrary(id) {
-                var params = {"fields[playlists]": "inLibrary","fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library", "extend": this.revisedRandId()}
+                var params = {
+                    "fields[playlists]": "inLibrary",
+                    "fields[songs]": "inLibrary",
+                    "fields[albums]": "inLibrary",
+                    "relate": "library",
+                    "extend": this.revisedRandId()
+                }
                 var id = this.item.id ?? this.item.attributes.playParams.id
                 var res = await app.mkapi(this.item.attributes.playParams.kind ?? this.item.type, this.item.attributes.playParams.isLibrary ?? false, this.item.attributes.playParams.id ?? this.item.id, params);
                 if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
@@ -213,14 +225,32 @@
                                 "action": async function () {
                                     let item_id = self.item.attributes.playParams.id ?? self.item.id;
                                     let data_type = self.item.attributes.playParams.kind ?? self.item.type;
-                                    if (self.addedToLibrary != true)  { console.log("add"); app.addToLibrary(item_id); self.addedToLibrary = true} 
+                                    if (self.addedToLibrary != true) {
-                                    else { console.log("remove"); await self.removeFromLibrary(item_id); self.addedToLibrary = false};
+                                        console.log("add");
+                                        app.addToLibrary(item_id);
+                                        self.addedToLibrary = true
+                                    } else {
+                                        console.log("remove");
+                                        await self.removeFromLibrary(item_id);
+                                        self.addedToLibrary = false
+                                    }
+                                    ;
                                 }
                             },
                         ]
                     }
                 }
-                if ((self.item.attributes.playParams.kind ?? self.item.type).includes("playlist")) { menus.normal.items.splice(2, 1);}
+                if ((self.item.attributes.playParams.kind ?? self.item.type).includes("playlist")) {
+                    menus.normal.items.splice(2, 1);
+                }
+                if (this.contextExt) {
+                    if (this.contextExt.normal) {
+                        menus.normal.items = menus.normal.items.concat(this.contextExt.normal)
+                    }
+                    if (this.contextExt.multiple) {
+                        menus.multiple.items = menus.multiple.items.concat(this.contextExt.multiple)
+                    }
+                }
                 CiderContextMenu.Create(event, menus[useMenu])
             },
         },

src/renderer/views/main.ejs

@@ -168,7 +168,7 @@
                         <div class="app-sidebar-header-text">
                             Apple Music
                         </div>
-                        <sidebar-library-item v-if="isDev" name="Home" page="home"></sidebar-library-item>
+                        <sidebar-library-item name="Home" page="home"></sidebar-library-item>
                         <sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item>
                         <sidebar-library-item name="Browse" page="browse"></sidebar-library-item>
                         <sidebar-library-item name="Radio" page="radio"></sidebar-library-item>
@@ -302,6 +302,12 @@
                             <cider-home></cider-home>
                         </template>
                     </transition>
+                    <!-- Home -->
+                    <transition name="wpfade">
+                        <template v-if="page == 'artist-feed'">
+                            <cider-artist-feed></cider-artist-feed>
+                        </template>
+                    </transition>
                     <!-- Playlist / Album page-->
                     <transition name="wpfade">
                         <template v-if="page.includes('playlist_')">
@@ -512,6 +518,9 @@
 <!-- Home -->
 <%- include('pages/home') %>
 
+<!-- Artist Feed -->
+<%- include('pages/artist-feed') %>
+
 <!-- Playlists / Albums -->
 <%- include('pages/cider-playlist') %>
 

src/renderer/views/pages/artist-feed.ejs

@@ -0,0 +1,62 @@
+<script type="text/x-template" id="cider-artist-feed">
+    <div class="content-inner">
+        <div>
+            <div class="row">
+                <div class="col">
+                    <div class="row nopadding">
+                        <div class="col nopadding">
+                            <h3>Your Artists Feed</h3>
+                        </div>
+                    </div>
+                    <div class="well" style="margin-top:0px;">
+                        <template v-if="artistFeed.length > 0">
+                            <mediaitem-list-item v-for="item in artistFeed.limit(6)" :item="item"></mediaitem-list-item>
+                        </template>
+                        <template v-else>
+                            <div class="hint-text">No new activity from followed artists</div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</script>
+
+<script>
+    Vue.component('cider-artist-feed', {
+        template: '#cider-artist-feed',
+        data: function () {
+            return {
+                app: this.$root,
+                followedArtists: this.$root.cfg.home.followedArtists,
+                artistFeed: [],
+            }
+        },
+        async mounted() {
+            let self = this
+            await this.getArtistFeed()
+        },
+        methods: {
+            async getArtistFeed() {
+                let artists = this.followedArtists
+                let self = this
+                this.app.mk.api.artists(artists, {
+                    "views": "featured-release,full-albums,appears-on-albums,featured-albums,featured-on-albums,singles,compilation-albums,live-albums,latest-release,top-music-videos,similar-artists,top-songs,playlists,more-to-hear,more-to-see",
+                    "extend": "artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero",
+                    "extend[playlists]": "trackCount",
+                    "include[songs]": "albums",
+                    "fields[albums]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialVideo,name,playParams,releaseDate,url,trackCount",
+                    "limit[artists:top-songs]": 20,
+                    "art[url]": "f"
+                }, {includeResponseMeta: !0}).then(artistData => {
+                    artistData.data.forEach(item => {
+                        if (item.views["latest-release"].data.length != 0) {
+                            self.artistFeed.push(item.views["latest-release"].data[0])
+                        }
+                    })
+                })
+
+            }
+        }
+    });
+</script>

src/renderer/views/pages/home.ejs

@@ -1,13 +1,13 @@
 <script type="text/x-template" id="cider-home">
     <div class="content-inner home-page">
-        <div class="bg-image"></div>
+        <div v-if="page == 'main'">
-        <div>
             <div class="row">
                 <div class="col">
                     <h3>Home</h3>
                     <div class="well profile-well">
                         <div class="user-icon">
-                            <mediaitem-artwork shadow="none" :url="profile.attributes.artwork.url" size="300"></mediaitem-artwork>
+                            <mediaitem-artwork shadow="none" :url="profile.attributes.artwork.url"
+                                               size="300"></mediaitem-artwork>
                         </div>
                         <h3 class="name">{{ profile.attributes.name }}</h3>
                         <h4 class="handle">@{{ profile.attributes.handle }}</h4>
@@ -20,12 +20,15 @@
                     </div>
                 </div>
             </div>
-            <div class="row">
+            <div class="row" v-if="app.isDev">
                 <div class="col">
                     <h3>Your Favorites</h3>
                     <div class="well">
-                        <div class="hint-text">Items you have added to your favorites will appear here.</div>
+                        <div class="hint-text" v-if="favorites.length == 0">Items you have added to your favorites will
-                        <!-- <mediaitem-scroller-horizontal kind="small" :items="friendsListeningTo" :item="item"></mediaitem-scroller-horizontal> -->
+                            appear here.
+                        </div>
+                        <mediaitem-scroller-horizontal kind="small" :items="favorites"
+                                                       :item="item"></mediaitem-scroller-horizontal>
                     </div>
                 </div>
             </div>
@@ -37,8 +40,15 @@
                     </div>
                 </div>
                 <div class="col">
-                    <h3>Your Artist Feed</h3>
+                    <div class="row nopadding">
-                    <div class="well">
+                        <div class="col nopadding">
+                            <h3>Your Artists Feed</h3>
+                        </div>
+                        <div class="col-auto nopadding flex-center">
+                            <button class="cd-btn-seeall" @click="app.appRoute('artist-feed')">See All</button>
+                        </div>
+                    </div>
+                    <div class="well" style="margin-top:0px;">
                         <template v-if="artistFeed.length > 0">
                             <mediaitem-list-item v-for="item in artistFeed.limit(6)" :item="item"></mediaitem-list-item>
                         </template>
@@ -52,7 +62,8 @@
                 <div class="col">
                     <h3>Friends Listening To</h3>
                     <div class="well">
-                        <mediaitem-square kind="small" v-for="item in friendsListeningTo" :item="item"></mediaitem-square>
+                        <mediaitem-square kind="small" v-for="item in friendsListeningTo"
+                                          :item="item"></mediaitem-square>
                     </div>
                 </div>
             </div>
@@ -67,24 +78,71 @@
             return {
                 app: this.$root,
                 followedArtists: this.$root.cfg.home.followedArtists,
+                favoriteItems: this.$root.cfg.home.favoriteItems,
                 madeForYou: [],
                 recentlyPlayed: [],
                 friendsListeningTo: [],
+                replayPlaylists: [],
+                favorites: [],
                 profile: {},
                 modify: 0,
-                artistFeed: []
+                artistFeed: [],
+                showingArtistFeed: false,
+                page: "main",
             }
         },
         async mounted() {
             let self = this
             this.getListenNowData()
             await this.getArtistFeed()
+            await this.getFavorites()
         },
         methods: {
+            removeFavoriteContext() {
+                let self = this
+                return {
+                    name: "Remove from Favorites",
+                    action: function (item) {
+                        let index = self.favoriteItems.findIndex(x => x.id == item.id)
+                        if (index > -1) {
+                            self.favoriteItems.splice(index, 1)
+                            self.app.cfg.home.favoriteItems = self.favoriteItems
+                        }
+                    }
+                }
+            },
+            async getFavorites() {
+                let self = this
+                let libraryPlaylists = []
+                let playlists = []
+                for (let item of this.favoriteItems) {
+                    if (item.type == "library-playlists") {
+                        libraryPlaylists.push(item.id)
+                    } else if (item.type == "playlists") {
+                        playlists.push(item.id)
+                    }
+                }
+                console.warn(playlists)
+                console.warn(libraryPlaylists)
+                if (playlists.length != 0) {
+                    this.app.mk.api.playlists(playlists).then(playlistsData => {
+                        self.favorites.push(...playlistsData)
+                        console.info(playlistsData)
+                    })
+                }
+                if (libraryPlaylists.length != 0) {
+                    this.app.mk.api.library.playlists(libraryPlaylists).then(playlistsData => {
+                        self.favorites.push(...playlistsData)
+                        console.info(playlistsData)
+                    })
+                }
+                console.warn(this.favoriteItems)
+
+                console.warn(self.favorites)
+            },
             async getArtistFeed() {
                 let artists = this.followedArtists
                 let self = this
-                console.warn("get artist feed")
                 this.app.mk.api.artists(artists, {
                     "views": "featured-release,full-albums,appears-on-albums,featured-albums,featured-on-albums,singles,compilation-albums,live-albums,latest-release,top-music-videos,similar-artists,top-songs,playlists,more-to-hear,more-to-see",
                     "extend": "artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero",
@@ -99,8 +157,6 @@
                             self.artistFeed.push(item.views["latest-release"].data[0])
                         }
                     })
-                    console.warn("got artist feed")
-                    console.log(self.artistFeed)
                 })
 
             },
@@ -146,8 +202,9 @@
                             }
                             ;
                         })[0].relationships.contents.data
+                    } catch (err) {
                     }
-                    catch(err){}
+
                     try {
                         self.recentlyPlayed = data.data[1].relationships.contents.data
                         self.friendsListeningTo = data.data.filter(section => {
@@ -156,13 +213,12 @@
                             }
                             ;
                         })[0].relationships.contents.data
-                    }catch(err){}
+                    } catch (err) {
+                    }
                 });
 
                 app.mk.api.v3.music("/v1/me/social/profile/").then((response) => {
                     self.profile = response.data.data[0]
-                    console.log("!!!")
-                    console.log(response.data.data[0])
                 })
 
             }