made a better friends listening to. can be accessed on the home page by pressing see all on the section

src/renderer/index.js

@@ -290,7 +290,9 @@ const app = new Vue({
         },
         socialBadges: {
             badgeMap: {},
-            version: ""
+            version: "",
+            mediaItems: [],
+            mediaItemDLState: 0 // 0 = not started, 1 = in progress, 2 = complete
         },
         menuPanel: {
             visible: false,
@@ -324,6 +326,29 @@ const app = new Vue({
         },
     },
     methods: {
+        async showSocialListeningTo() {
+            let contentIds = Object.keys(app.socialBadges.badgeMap)
+            app.showCollection({data: this.socialBadges.mediaItems}, "Friends Listening To", "albums")
+            if(this.socialBadges.mediaItemDLState == 1 || this.socialBadges.mediaItemDLState == 2) {
+                return
+            }
+            this.socialBadges.mediaItemDLState = 2
+            await asyncForEach(contentIds, async (item)=>{
+                try {
+                    let type = "albums"
+                    if(item.includes("pl.")) {
+                        type = "playlists"
+                    }
+                    if(item.includes("ra.")) {
+                        type = "stations"
+                    }
+                    let found = await app.mk.api.v3.music(`/v1/catalog/us/${type}/${item}`)
+                    this.socialBadges.mediaItems.push(found.data.data[0])
+                }catch(e){
+
+                }
+            })
+        },
         async openAppleMusicURL(url) {
             let properties = MusicKit.formattedMediaURL(url)
             let item = {
@@ -3385,6 +3410,12 @@ function xmlToJson(xml) {
     return obj;
 };
 
+async function asyncForEach(array, callback) {
+    for (let index = 0; index < array.length; index++) {
+        await callback(array[index], index, array);
+    }
+}
+
 var checkIfScrollIsStatic = setInterval(() => {
     try {
         if (position === document.getElementsByClassName('lyric-body')[0].scrollTop) {

src/renderer/views/pages/home.ejs

@@ -55,7 +55,14 @@
             </div>
             <div class="row" v-if="friendsListeningTo && friendsListeningTo.length > 0">
                 <div class="col">
-                    <h3>Friends Listening To</h3>
+                    <div class="row">
+                        <div class="col nopadding">
+                            <h3>Friends Listening To</h3>
+                        </div>
+                        <div class="col-auto nopadding flex-center">
+                            <button class="cd-btn-seeall" @click="app.showSocialListeningTo()">See All</button>
+                        </div>
+                    </div>
                     <div class="well">
                         <template v-if="isSectionReady('friendsListeningTo')">
                             <mediaitem-square kind="small" v-for="item in friendsListeningTo"