From 3c17e15b081eb2f77979588b8d2ee5a4d71b9c0e Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Tue, 28 Dec 2021 04:35:44 -0800
Subject: [PATCH 1/2] working on adding social people and playlists in search,
 testing home page in dev mode

---
 src/renderer/index.js                         |  10 ++
 src/renderer/style.less                       | 108 +++++++++++----
 .../views/components/mediaitem-artwork.ejs    |  21 ++-
 .../views/components/mediaitem-square.ejs     |   3 +
 src/renderer/views/main.ejs                   |  10 ++
 src/renderer/views/pages/collection-list.ejs  |  11 +-
 src/renderer/views/pages/home.ejs             | 124 ++++++++++++++++++
 src/renderer/views/pages/search.ejs           |  53 ++++++--
 8 files changed, 293 insertions(+), 47 deletions(-)
 create mode 100644 src/renderer/views/pages/home.ejs

diff --git a/src/renderer/index.js b/src/renderer/index.js
index 9a8d7a18..6d2b7898 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -114,6 +114,7 @@ const app = new Vue({
             hints: [],
             showHints: false,
             results: {},
+            resultsSocial: {},
             limit: 10
         },
         playerLCD: {
@@ -2167,6 +2168,15 @@ const app = new Vue({
                 }).then(function (results) {
                     self.search.results = results
                 })
+            await this.mk.api.socialSearch(this.search.term, {
+                types: ["playlists", "social-profiles"],
+                limit: 25,
+                with: ["serverBubbles", "lyricSnippet"],
+                "art[url]": "f",
+                "art[social-profiles:url]": "c"
+            }, { includeResponseMeta: !0 }).then(function (results) {
+                self.search.resultsSocial = results
+            })
         },
         isInLibrary(playParams) {
             let self = this
diff --git a/src/renderer/style.less b/src/renderer/style.less
index c39c1a8d..8c05dd06 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1539,10 +1539,30 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   height: 100%;
 }
 
+.home-page {
+  background: linear-gradient(0deg, black, #4c2c31);
+  top: 0;
+  padding-top: var(--navbarHeight);
+
+  .user-icon {
+    border-radius: 100%;
+    width: 128px;
+    height: 128px;
+    overflow: hidden;
+    box-shadow: var(--mediaItemShadow-Shadow);
+  }
+
+  .well.profile-well {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
 /* Cider */
 
 .modal-fullscreen {
-  display:flex;
+  display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
@@ -1552,11 +1572,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   height: 100%;
   background: rgba(0, 0, 0, 0.3);
   z-index: 9999;
+
   .modal-window {
     background: #333;
     border-radius: 10px;
     box-shadow: var(--mediaItemShadow-Shadow);
-    display:flex;
+    display: flex;
     flex-flow: column;
     max-height: 500px;
     max-width: 360px;
@@ -1578,18 +1599,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     }
 
     .modal-header {
-      width:100%;
+      width: 100%;
       padding: 6px;
     }
+
     .modal-content {
-      width:100%;
-      height:100%;
+      width: 100%;
+      height: 100%;
       overflow: hidden;
       overflow-y: overlay;
     }
-    .modal-footer {
 
-    }
+    .modal-footer {}
   }
 }
 
@@ -1603,11 +1624,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
     .modal-header {
       padding: 16px;
-      position:relative;
+      position: relative;
 
       .modal-title {
         text-align: center;
       }
+
       .close-btn {
         width: 50px;
         height: 100%;
@@ -1659,9 +1681,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
         margin-right: 6px;
       }
 
-      .name {
-
-      }
+      .name {}
 
       &:hover {
         background: var(--selected);
@@ -2180,6 +2200,20 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     height: 100%;
     object-fit: cover;
     image-rendering: -webkit-optimize-contrast;
+    pointer-events: none;
+  }
+
+  &.no-shadow {
+    box-shadow: none;
+    &::after {
+      display: none;
+    }
+  }
+  &.subtle-shadow {
+    box-shadow: var(--mediaItemShadow-ShadowSubtle);
+  }
+  &.shadow {
+    box-shadow: var(--mediaItemShadow-Shadow);
   }
 }
 
@@ -2729,8 +2763,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     >.menu-btn {
       opacity: 0;
       appearance: none;
-      padding:0px;
-      border:0px;
+      padding: 0px;
+      border: 0px;
       width: 30px;
       height: 30px;
       border-radius: 50%;
@@ -2755,6 +2789,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     }
 
     &:hover {
+
       >.play-btn,
       >.menu-btn {
         opacity: 1;
@@ -2777,6 +2812,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   &.mediaitem-video {
     height: 200px;
     width: 240px;
+
     .artwork {
       height: 120px;
       width: 212px;
@@ -2786,16 +2822,27 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   &.mediaitem-brick {
     height: 200px;
     width: 240px;
+
     .artwork {
       height: 123px;
       width: 220px;
     }
   }
+
+  &.mediaitem-small {
+    width: 140px;
+    height: 180px;
+
+    .artwork {
+      height: 128px;
+      width: 128px;
+    }
+  }
 }
 
 /* mediaitem-square */
-.albums-square-containeru > * > .cd-mediaitem-square {
-  --frame: max(220px, 15vw  );
+.albums-square-containeru>*>.cd-mediaitem-square {
+  --frame: max(220px, 15vw);
   width: var(--frame);
   height: calc(var(--frame) * 13 / 11);
   display: inline-flex;
@@ -2829,9 +2876,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     >.menu-btn {
       opacity: 0;
       appearance: none;
-      padding:0px;
-      border:0px;
-      width:  calc(var(--frame) / 220 * 30);
+      padding: 0px;
+      border: 0px;
+      width: calc(var(--frame) / 220 * 30);
       height: calc(var(--frame) / 220 * 30);
       border-radius: 50%;
       background: rgba(50, 50, 50, 0.7);
@@ -2843,7 +2890,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     >.play-btn {
       position: absolute;
       bottom: calc(var(--frame) / 220 * 14);
-      left:  calc(var(--frame) / 220 * 14);
+      left: calc(var(--frame) / 220 * 14);
       z-index: 2;
     }
 
@@ -2855,6 +2902,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     }
 
     &:hover {
+
       >.play-btn,
       >.menu-btn {
         opacity: 1;
@@ -2875,10 +2923,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 
   &.mediaitem-video {
-    height:calc(var(--frame) / 220 * 200);
+    height: calc(var(--frame) / 220 * 200);
     width: calc(var(--frame) / 220 * 240);
+
     .artwork {
-      height:calc(var(--frame) / 220 * 120);
+      height: calc(var(--frame) / 220 * 120);
       width: calc(var(--frame) / 220 * 212);
     }
   }
@@ -2886,9 +2935,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   &.mediaitem-brick {
     height: calc(var(--frame) / 220 * 200);
     width: calc(var(--frame) / 220 * 240);
+
     .artwork {
       height: calc(var(--frame) / 220 * 123);
-      width: calc(var(--frame)  );
+      width: calc(var(--frame));
     }
   }
 }
@@ -2952,16 +3002,17 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 // Modular
 .modular-fs {
   .app-drawer {
-    width:100%;
-    right:0px;
-    top:0px;
-    height:100%;
+    width: 100%;
+    right: 0px;
+    top: 0px;
+    height: 100%;
     border-radius: 0px;
     box-shadow: unset;
     background: black;
+
     .lyric-body {
       justify-content: center;
-      align-items:center;
+      align-items: center;
 
       .lyric-line {
         pointer-events: none;
@@ -2982,6 +3033,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     }
   }
 }
+
 // Modular
 
 /* Transitions */
@@ -3280,7 +3332,7 @@ body.no-gpu {
     background: rgb(0 0 0);
   }
 
-  .addtoplaylist-panel  {
+  .addtoplaylist-panel {
     .modal-window {
       background: rgb(18 18 18);
       backdrop-filter: unset;
diff --git a/src/renderer/views/components/mediaitem-artwork.ejs b/src/renderer/views/components/mediaitem-artwork.ejs
index 61a21af0..7c96e926 100644
--- a/src/renderer/views/components/mediaitem-artwork.ejs
+++ b/src/renderer/views/components/mediaitem-artwork.ejs
@@ -1,5 +1,5 @@
 <script type="text/x-template" id="mediaitem-artwork">
-    <div class="mediaitem-artwork" :class="{'rounded': (type == 'artists')}" :key="url" :style="getStyle()"
+    <div class="mediaitem-artwork" :class="[{'rounded': (type == 'artists')}, classes]"
          v-observe-visibility="{callback: visibilityChanged}">
         <img :src="app.getMediaItemArtwork(url, size, width)"
              decoding="async" loading="lazy"
@@ -40,7 +40,7 @@
             },
             shadow: {
                 type: String,
-                default: 'none'
+                default: ''
             }
         },
         data: function () {
@@ -49,9 +49,13 @@
                 isVisible: false,
                 style: {
                     "box-shadow": ""
-                }
+                },
+                classes: []
             }
         },
+        mounted() {
+            this.getClasses()
+        },
         methods: {
             getVideoPriority() {
                 if(app.cfg.visual.animated_artwork == "always") {
@@ -63,18 +67,21 @@
                 }
                 return this.videoPriority
             },
-            getStyle() {
+            getClasses() {
                 switch (this.shadow) {
+                    case "none":
+                        this.classes.push("no-shadow")
+                        break;
                     case "large":
-                        this.style["box-shadow"] = "var(--mediaItemShadow-Shadow)"
+                        this.classes.push("shadow")
                         break;
                     case "subtle":
-                        this.style["box-shadow"] = "var(--mediaItemShadow-ShadowSubtle)"
+                        this.classes.push("subtle-shadow")
                         break;
                     default:
                         break;
                 }
-                return this.style;
+                return this.classes;
             },
             getArtworkStyle() {
                 return {
diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index 879ab049..e9a1081a 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/src/renderer/views/components/mediaitem-square.ejs
@@ -107,6 +107,9 @@
                     case "385": // editorial
                         return ["mediaitem-brick"]
                         break;
+                    case "small":
+                        return ["mediaitem-small"]
+                    break;
                     case "music-videos":
                     case "uploadedVideo":
                     case "uploaded-videos":
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 8772ce13..f914890d 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -168,6 +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="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>
@@ -295,6 +296,12 @@
                                                    :title="collectionList.title"></cider-collection-list>
                         </template>
                     </transition>
+                    <!-- Home -->
+                    <transition name="wpfade">
+                        <template v-if="page == 'home'">
+                            <cider-home></cider-home>
+                        </template>
+                    </transition>
                     <!-- Playlist / Album page-->
                     <transition name="wpfade">
                         <template v-if="page.includes('playlist_')">
@@ -502,6 +509,9 @@
 <!-- Listen Now -->
 <%- include('pages/listen_now') %>
 
+<!-- Home -->
+<%- include('pages/home') %>
+
 <!-- Playlists / Albums -->
 <%- include('pages/cider-playlist') %>
 
diff --git a/src/renderer/views/pages/collection-list.ejs b/src/renderer/views/pages/collection-list.ejs
index 75986dc9..fd53fd5b 100644
--- a/src/renderer/views/pages/collection-list.ejs
+++ b/src/renderer/views/pages/collection-list.ejs
@@ -46,7 +46,8 @@
                 triggerEnabled: true,
                 canSeeTrigger: false,
                 showFab: false,
-                commonKind: "song"
+                commonKind: "song",
+                api: this.$root.mk.api
             }
         },
         methods: {
@@ -72,12 +73,18 @@
                     case "artists":
                         if (this.data.next && this.triggerEnabled) {
                             this.triggerEnabled = false;
-                            this.data.next().then(data => {
+
+                            let nextFn = (data => {
                                 console.log(data);
                                 this.data.next = data.next;
                                 this.data.data = this.data.data.concat(data.data);
                                 this.triggerEnabled = true;
                             });
+                            if(typeof this.data.next == "function") {
+                                this.data.next().then(data => next);
+                            }else{
+                                this.api.v3.music(this.data.next).then(data => nextFn);
+                            }
                         }else{
                             console.log("No next page");
                             this.triggerEnabled = false;
diff --git a/src/renderer/views/pages/home.ejs b/src/renderer/views/pages/home.ejs
new file mode 100644
index 00000000..7333b8e0
--- /dev/null
+++ b/src/renderer/views/pages/home.ejs
@@ -0,0 +1,124 @@
+<script type="text/x-template" id="cider-home">
+    <div class="content-inner home-page">
+        <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>
+                    </div>
+                    <h3>{{ profile.attributes.name }}</h3>
+                    <h4>@{{ profile.attributes.handle }}</h4>
+                    <button class="md-btn">Share</button>
+                </div>
+            </div>
+            <div class="col">
+                <h3>Recently Played</h3>
+                <div class="well">
+                    <mediaitem-list-item v-for="item in recentlyPlayed.limit(6)" :item="item"></mediaitem-list-item>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <h3>Made For You</h3>
+                <div class="well">
+                    <mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
+                </div>
+            </div>
+            <div class="col">
+                <h3>Your Artist Feed</h3>
+                <div class="well">
+                    <mediaitem-list-item v-for="item in recentlyPlayed.limit(6)" :item="item"></mediaitem-list-item>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <h3>Friends Listening To</h3>
+                <div class="well">
+                    <mediaitem-square kind="small" v-for="item in friendsListeningTo" :item="item"></mediaitem-square>
+                </div>
+            </div>
+        </div>
+    </div>
+</script>
+
+<script>
+    Vue.component('cider-home', {
+        template: '#cider-home',
+        data: function () {
+            return {
+                app: this.$root,
+                madeForYou: [],
+                recentlyPlayed: [],
+                friendsListeningTo: [],
+                profile: {},
+                modify: 0
+            }
+        },
+        async mounted() {
+            let self = this
+            this.getListenNowData()
+        },
+        methods: {
+            getRecentlyPlayed() {
+
+            },
+            async getListenNowData() {
+                let self = this
+                this.app.mk.api.personalRecommendations("",
+                    {
+                        name: "listen-now",
+                        with: "friendsMix,library,social",
+                        "art[social-profiles:url]": "c",
+                        "art[url]": "c,f",
+                        "omit[resource]": "autos",
+                        "relate[editorial-items]": "contents",
+                        extend: ["editorialCard", "editorialVideo"],
+                        "extend[albums]": ["artistUrl"],
+                        "extend[library-albums]": ["artistUrl", "editorialVideo"],
+                        "extend[playlists]": ["artistNames", "editorialArtwork", "editorialVideo"],
+                        "extend[library-playlists]": ["artistNames", "editorialArtwork", "editorialVideo"],
+                        "extend[social-profiles]": "topGenreNames",
+                        "include[albums]": "artists",
+                        "include[songs]": "artists",
+                        "include[music-videos]": "artists",
+                        "fields[albums]": ["artistName", "artistUrl", "artwork", "contentRating", "editorialArtwork", "editorialVideo", "name", "playParams", "releaseDate", "url"],
+                        "fields[artists]": ["name", "url"],
+                        "extend[stations]": ["airDate", "supportsAirTimeUpdates"],
+                        "meta[stations]": "inflectionPoints",
+                        types: "artists,albums,editorial-items,library-albums,library-playlists,music-movies,music-videos,playlists,stations,uploaded-audios,uploaded-videos,activities,apple-curators,curators,tv-shows,social-profiles,social-upsells",
+                        platform: "web"
+                    },
+                    {
+                        includeResponseMeta: !0,
+                        reload: !0
+                    }
+                ).then((data) => {
+                    console.log(data.data[1])
+                    self.recentlyPlayed = data.data[1].relationships.contents.data
+                    self.friendsListeningTo = data.data.filter(section => {
+                        if (section.meta.metrics.moduleType == "11") {
+                            return section
+                        }
+                        ;
+                    })[0].relationships.contents.data
+                    self.madeForYou = data.data.filter(section => {
+                        if (section.meta.metrics.moduleType == "6") {
+                            return section
+                        }
+                        ;
+                    })[0].relationships.contents.data
+                });
+
+                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])
+                })
+
+            }
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/src/renderer/views/pages/search.ejs b/src/renderer/views/pages/search.ejs
index 239e598c..f056ecdb 100644
--- a/src/renderer/views/pages/search.ejs
+++ b/src/renderer/views/pages/search.ejs
@@ -12,37 +12,70 @@
                     <div class="col">
                         <h3>Songs</h3>
                     </div>
-                    <div class="col-auto flex-center" @click="app.showSearchView(app.search.term, 'song', app.friendlyTypes('song'))" v-if="search.results.song.data.length >= 6">
+                    <div class="col-auto flex-center"
+                         @click="app.showSearchView(app.search.term, 'song', app.friendlyTypes('song'))"
+                         v-if="search.results.song.data.length >= 6">
                         <button class="cd-btn-seeall">See All</button>
                     </div>
                 </div>
                 <div>
                     <mediaitem-list-item :item="item" :index="index"
-                                        v-for="(item, index) in search.results.song.data.limit(6)"></mediaitem-list-item>
+                                         v-for="(item, index) in search.results.song.data.limit(6)"></mediaitem-list-item>
                 </div>
             </div>
         </div>
 
         <template v-if="search.results['meta']">
-            <template 
-            v-for="section in search.results.meta.results.order" v-if="section != 'song' && section != 'top'">
+            <template
+                    v-for="section in search.results.meta.results.order" v-if="section != 'song' && section != 'top'">
                 <div class="row">
                     <div class="col">
                         <h3>{{ app.friendlyTypes(section) }}</h3>
                     </div>
                     <div class="col-auto flex-center" v-if="search.results[section].data.length >= 10">
-                        <button class="cd-btn-seeall" @click="app.showSearchView(app.search.term, section, app.friendlyTypes(section))">See All</button>
+                        <button class="cd-btn-seeall"
+                                @click="app.showSearchView(app.search.term, section, app.friendlyTypes(section))">See
+                            All
+                        </button>
                     </div>
                 </div>
                 <template v-if="!app.friendlyTypes(section).includes('Video')">
-                <mediaitem-scroller-horizontal-large
-                        :items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-large>
+                    <mediaitem-scroller-horizontal-large
+                            :items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-large>
                 </template>
                 <template v-else>
-                <mediaitem-scroller-horizontal-mvview
+                    <mediaitem-scroller-horizontal-mvview
                             :items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-mvview>
                 </template>
-                    </template>
+            </template>
+        </template>
+        <template v-if="search.resultsSocial.playlist">
+            <div class="row">
+                <div class="col">
+                    <h3>Shared Playlists</h3>
+                </div>
+                <div class="col-auto flex-center" v-if="search.resultsSocial.playlist.data.data.length >= 10">
+                    <button class="cd-btn-seeall"
+                            @click="app.showCollection(search.resultsSocial.playlist.data, 'Shared Playlists', 'default')">See All
+                    </button>
+                </div>
+            </div>
+            <mediaitem-scroller-horizontal-large
+                    :items="search.resultsSocial.playlist.data.data.limit(10)"></mediaitem-scroller-horizontal-large>
+        </template>
+        <template v-if="search.resultsSocial.profile">
+            <div class="row">
+                <div class="col">
+                    <h3>People</h3>
+                </div>
+                <div class="col-auto flex-center" v-if="search.resultsSocial.profile.data.data.length >= 10">
+                    <button class="cd-btn-seeall"
+                            @click="app.showCollection(search.resultsSocial.profile.data, 'People', 'default')">See All
+                    </button>
+                </div>
+            </div>
+            <mediaitem-scroller-horizontal-large
+                    :items="search.resultsSocial.profile.data.data.limit(10)"></mediaitem-scroller-horizontal-large>
         </template>
     </div>
 </script>
@@ -51,7 +84,7 @@
     Vue.component('cider-search', {
         template: "#cider-search",
         props: ['search'],
-        data: function() {
+        data: function () {
             return {
                 app: this.$root
             }

From 7e7119d592b275f0be943b7ed788d7933008fb29 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Tue, 28 Dec 2021 04:53:26 -0800
Subject: [PATCH 2/2] added a favorites section to home, added kind property to
 horizontal scroller

---
 src/renderer/style.less                          |  5 +++++
 .../components/mediaitem-scroller-horizontal.ejs | 16 +++++++++++++---
 src/renderer/views/pages/home.ejs                |  8 ++++++++
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index 8c05dd06..1955353d 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2306,6 +2306,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   &:hover::-webkit-scrollbar-thumb {
     box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
   }
+
+  &.small {
+    overflow-x: overlay;
+    height: 210px;
+  }
 }
 
 /* mediaitem-list-item */
diff --git a/src/renderer/views/components/mediaitem-scroller-horizontal.ejs b/src/renderer/views/components/mediaitem-scroller-horizontal.ejs
index 73838811..ef2f21d2 100644
--- a/src/renderer/views/components/mediaitem-scroller-horizontal.ejs
+++ b/src/renderer/views/components/mediaitem-scroller-horizontal.ejs
@@ -1,7 +1,7 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal">
     <template>
-        <div class="cd-hmedia-scroller">
-            <mediaitem-square :item="item"
+        <div class="cd-hmedia-scroller" :class="kind">
+            <mediaitem-square :kind="kind" :item="item"
                               v-for="item in items"></mediaitem-square>
         </div>
     </template>
@@ -10,7 +10,17 @@
 <script>
     Vue.component('mediaitem-scroller-horizontal', {
         template: '#mediaitem-scroller-horizontal',
-        props: ['items'],
+        props: {
+            'items': {
+                type: Array,
+                required: true
+            },
+            'kind': {
+                type: String,
+                required: false,
+                defualt: ""
+            }
+        },
         data: function () {
             return {
                 app: this.$root,
diff --git a/src/renderer/views/pages/home.ejs b/src/renderer/views/pages/home.ejs
index 7333b8e0..4219144d 100644
--- a/src/renderer/views/pages/home.ejs
+++ b/src/renderer/views/pages/home.ejs
@@ -19,6 +19,14 @@
                 </div>
             </div>
         </div>
+        <div class="row">
+            <div class="col">
+                <h3>Your Favorites</h3>
+                <div class="well">
+                    <mediaitem-scroller-horizontal kind="small" :items="friendsListeningTo" :item="item"></mediaitem-scroller-horizontal>
+                </div>
+            </div>
+        </div>
         <div class="row">
             <div class="col">
                 <h3>Made For You</h3>