From 4390493a9f5833cfdefe55636cb6f45d488b606c Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 30 Dec 2021 06:05:19 -0800
Subject: [PATCH] adds friend badges to mediaitem square, working on adding to
playlists/albums
---
src/renderer/index.js | 16 ++++++
src/renderer/style.less | 48 +++++++++++++++-
.../views/components/mediaitem-square.ejs | 27 ++++++++-
src/renderer/views/pages/cider-playlist.ejs | 57 ++++++++++++++++---
4 files changed, 138 insertions(+), 10 deletions(-)
diff --git a/src/renderer/index.js b/src/renderer/index.js
index 5ae5e965..7288a281 100644
--- a/src/renderer/index.js
+++ b/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)
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 41645589..5622ed22 100644
--- a/src/renderer/style.less
+++ b/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;
diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index 23a350d5..6081d022 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/src/renderer/views/components/mediaitem-square.ejs
@@ -16,6 +16,13 @@
@click="contextMenu"><%- include("../svg/more.svg") %>
+
{{ 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);
},
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index fc77ea6e..8cdeaccf 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -83,6 +83,17 @@
+
{{getFormattedDate(data.attributes.releaseDate)}}
@@ -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{
- var releaseDate = new Date(date);
- month = new Intl.DateTimeFormat('en-US', { month: 'long'}).format(releaseDate);
- date = releaseDate.getDate();
- year = releaseDate.getFullYear();
+ try {
+ var releaseDate = new Date(date);
+ month = new Intl.DateTimeFormat('en-US', {month: 'long'}).format(releaseDate);
+ date = releaseDate.getDate();
+ year = releaseDate.getFullYear();
- return date + " " + month + " " + year;
- } catch (e){ return ""}
+ return date + " " + month + " " + year;
+ } catch (e) {
+ return ""
+ }
}
}
})