adds friend badges to mediaitem square, working on adding to playlists/albums

src/renderer/index.js

@@ -259,6 +259,10 @@ const app = new Vue({
             addToPlaylist: false,
             spatialProperties: false
         },
+        socialBadges: {
+            badgeMap: {},
+            version: ""
+        }
     },
     watch: {
         cfg: {
@@ -282,6 +286,17 @@ const app = new Vue({
         },
     },
     methods: {
+        getSocialBadges(cb = ()=>{}) {
+            let self = this
+            try {
+                app.mk.api.socialBadgingMap().then(data=>{
+                    self.socialBadges.badgeMap = data.badgingMap
+                    cb(data.badgingMap)
+                })
+            }catch(ex) {
+                this.socialBadges.badgeMap = {}
+            }
+        },
         addFavorite(id, type) {
             this.cfg.home.favoriteItems.push({
                 id: id,
@@ -555,6 +570,7 @@ const app = new Vue({
             }
 
             setTimeout(() => {
+                this.getSocialBadges()
                 this.getBrowsePage();
                 this.$forceUpdate()
             }, 500)

src/renderer/style.less

@@ -2053,6 +2053,34 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     }
   }
 
+  .friends-info {
+    display: flex;
+    flex-flow: column;
+    .badge-container {
+      display: flex;
+      flex-flow: wrap;
+      .socialBadge {
+        width: 40px;
+        height: 40px;
+        border-radius: 100%;
+        overflow: hidden;
+        box-shadow: var(--mediaItemShadow-ShadowSubtle);
+        transition: transform .2s var(--appleEase);
+        margin: 6px;
+
+        &:hover {
+          transform: scale(1.2);
+        }
+      }
+    }
+    .friends-name {
+      text-align: center;
+      font-size: 0.9em;
+      margin: 8px;
+    }
+  }
+
+
   .playlist-time {
     font-size: 0.9em;
     margin: 6px;
@@ -2892,6 +2920,22 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       }
     }
 
+    .badge-container {
+      transition: opacity 0.1s var(--appleEase);
+      opacity: 1;
+      .socialBadge {
+        width: 32px;
+        height: 32px;
+        position: absolute;
+        right: 14px;
+        bottom: 14px;
+        border-radius: 100%;
+        overflow: hidden;
+        z-index: 2;
+        pointer-events: none;
+      }
+    }
+
     > .play-btn,
     > .menu-btn {
       opacity: 0;
@@ -2922,7 +2966,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     }
 
     &:hover {
-
+      > .badge-container {
+        opacity: 0;
+      }
       > .play-btn,
       > .menu-btn {
         opacity: 1;

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

@@ -16,6 +16,13 @@
                         @click="contextMenu"><%- include("../svg/more.svg") %></button>
                 <button class="play-btn" v-if="!noplay.includes(item.type)"
                         @click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
+                <div class="badge-container" v-if="itemBadges.length != 0">
+                    <div class="socialBadge" v-for="badge in itemBadges.limit(1)">
+                        <mediaitem-artwork
+                                :url="badge.attributes.artwork.url"
+                                :size="32"></mediaitem-artwork>
+                    </div>
+                </div>
             </div>
             <div class="title item-navigate text-overflow-elipsis" @click.self='app.routeView(item)'>
                 {{ item.attributes.name }}
@@ -54,10 +61,28 @@
                 guid: this.uuidv4(),
                 noplay: ["apple-curators"],
                 nomenu: ["artists", "stations", "apple-curators"],
-                app: this.$root
+                app: this.$root,
+                badges: this.$root.socialBadges.badgeMap,
+                itemBadges: []
             }
         },
+        async mounted() {
+            await this.getBadges()
+        },
         methods: {
+            async getBadges() {
+                let self = this
+                if(this.badges[this.item.attributes.playParams.id ?? this.item.id]) {
+                    let friends = this.badges[this.item.attributes.playParams.id ?? this.item.id]
+                    if(friends) {
+                        friends.forEach(function (friend) {
+                            self.app.mk.api.socialProfile(friend).then(data => {
+                                self.itemBadges.push(data)
+                            })
+                        })
+                    }
+                }
+            },
             revisedRandId() {
                 return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
             },

src/renderer/views/pages/cider-playlist.ejs

@@ -83,6 +83,17 @@
                     </div>
 
                 </div>
+                <div class="friends-info" v-if="itemBadges.length != 0">
+                    <div class="well">
+                        <div class="badge-container">
+                            <div class="socialBadge" :title="`${badge.attributes.name} - @${badge.attributes.handle}`" v-for="badge in itemBadges">
+                                <mediaitem-artwork
+                                        :url="badge.attributes.artwork.url"
+                                        :size="60"></mediaitem-artwork>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <div class="playlist-time">
                     {{getFormattedDate(data.attributes.releaseDate)}}
                 </div>
@@ -106,7 +117,9 @@
                 drag: false,
                 nameEditing: false,
                 inLibrary: null,
-                app: this.$root
+                app: this.$root,
+                itemBadges: [],
+                badgesRequested: false
             }
         },
         mounted: function () {
@@ -117,9 +130,35 @@
         watch: {
             data: function () {
                 this.isInLibrary()
+                this.getBadges()
             }
         },
         methods: {
+            getBadges() {
+                return
+                if(this.badgesRequested) {
+                    return
+                }
+                this.badgesRequested = true
+                this.itemBadges = []
+                let self = this
+                var id = 0
+                try {
+                    id = this.data.attributes.playParams.id
+                } catch (e) {
+                    id = this.data.id
+                }
+                this.$root.getSocialBadges((badges) => {
+                    let friends = badges[id]
+                    if(friends) {
+                        friends.forEach(function (friend) {
+                            self.app.mk.api.socialProfile(friend).then(data => {
+                                self.itemBadges.push(data)
+                            })
+                        })
+                    }
+                })
+            },
             async isInLibrary() {
                 if (this.data.type && !this.data.type.includes("library")) {
                     // please keep using vars here
@@ -228,14 +267,16 @@
             },
             getFormattedDate: function (date) {
                 if (date == null || date === "") return "";
-                try{
+                try {
-                var releaseDate = new Date(date);
+                    var releaseDate = new Date(date);
-                month = new Intl.DateTimeFormat('en-US', { month: 'long'}).format(releaseDate);
+                    month = new Intl.DateTimeFormat('en-US', {month: 'long'}).format(releaseDate);
-                date = releaseDate.getDate();
+                    date = releaseDate.getDate();
-                year = releaseDate.getFullYear();
+                    year = releaseDate.getFullYear();
 
-                return date + " " + month + " " + year;
+                    return date + " " + month + " " + year;
-                } catch (e){ return ""}
+                } catch (e) {
+                    return ""
+                }
             }
         }
     })