added AM favorite artists

- matched new mediaitem radius for medium sized items
- testing out v3 musickit

src/i18n/en_US.json

@@ -213,6 +213,8 @@
   "podcast.episodes": "Episodes",
   "podcast.playEpisode": "Play Episode",
   "podcast.website": "Podcast Website",
+  "action.favorite": "Favorite",
+  "action.removeFavorite": "Remove Favorite",
   "action.hideLibrary": "Hide Library",
   "action.showLibrary": "Show Library",
   "action.cut": "Cut",

src/renderer/less/elements.less

@@ -413,7 +413,6 @@
   .artwork {
     height: 42px;
     width: 42px;
-    border-radius    : var(--mediaItemRadius);
     object-fit: cover;
     object-position: center;
     flex: 0 0 auto;
@@ -423,7 +422,11 @@
     outline: none;
     position: relative;
     overflow: hidden;
+    border-radius: var(--mediaItemRadiusSmall);
 
+    .mediaitem-artwork {
+      border-radius: var(--mediaItemRadiusSmall);
+    }
     .overlay-play {
       background: rgba(0, 0, 0, 0.5);
       opacity: 0;
@@ -1474,7 +1477,6 @@ input[type=checkbox][switch]:checked:active::before {
 /* End Switch Checkbox */
 
 
-
 .header-text {
   margin: 0px;
 }
@@ -1599,7 +1601,10 @@ input[type=checkbox][switch]:checked:active::before {
   &:before {
     content: "";
     display: block;
-    top:0;left:0;right:0;bottom:0;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     background: var(--selected);
     border-radius: inherit;
     position: absolute;
@@ -1636,7 +1641,10 @@ input[type=checkbox][switch]:checked:active::before {
   &:before {
     content: "";
     display: block;
-     top:0;left:0;right:0;bottom:0;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     background: var(--selected);
     border-radius: inherit;
     position: absolute;
@@ -1654,9 +1662,11 @@ input[type=checkbox][switch]:checked:active::before {
     }
   }
 }
+
 .playback-button--small.active {
   background-color: rgb(200 200 200 / 25%);
 }
+
 .playback-button:hover,
 .playback-button--small:hover {
   // background-color: var(--selected);
@@ -1713,6 +1723,7 @@ input[type=checkbox][switch]:checked:active::before {
   color: var(--textColor);
   display: grid;
   place-items: center;
+
   span {
     position: absolute;
   }

src/renderer/style.less

@@ -20,7 +20,9 @@
   --mediaItemShadow-Shadow: 0 8px 40px rgb(0 0 0 / 0.55);
   --mediaItemShadow-ShadowSubtle: 0 4px 14px rgb(0 0 0 / 10%);
   --ciderShadow-Generic: var(--mediaItemShadow), 0 8px 40px rgb(0 0 0 / 0.55);
-  --mediaItemRadius: 6px;
+  --mediaItemRadius: 8px;
+  --mediaItemRadiusSmall: 6px;
+  --mediaItemRadiusMedium: 8px;
   --mediaItemRadiusRound: 100%;
   --panelRadius: 10px;
   --contentInnerPadding: 16px;

src/renderer/views/main.ejs

@@ -105,7 +105,7 @@
             <% } %>
 
 
-                <script async src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script>
+                <script async src="https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js"></script>
                 <script src="index.js?v=1"></script>
 
                 <script type="text/x-template" id="am-musiccovershelf">

src/renderer/views/pages/artist.ejs

@@ -1,5 +1,6 @@
 <script type="text/x-template" id="cider-artist">
-    <div class="content-inner artist-page" :class="[data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9) ? 'animated' : '']">
+    <div class="content-inner artist-page"
+         :class="[data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9) ? 'animated' : '']">
         <div class="artist-header" :key="data.id" v-observe-visibility="{callback: isHeaderVisible}">
             <animatedartwork-view
                     :priority="true"
@@ -9,7 +10,8 @@
             <div class="header-content" style="pointer-events: all;">
                 <div class="row">
                     <div class="col-sm" style="width: auto;">
-                        <div class="artist-image" v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
+                        <div class="artist-image"
+                             v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
                             <mediaitem-artwork
                                     shadow="large"
                                     :url="data.attributes.artwork ? data.attributes.artwork.url : ''"
@@ -30,15 +32,22 @@
                         <h1>{{ data.attributes.name }}</h1>
                     </div>
                 </div>
-                <button class="more-btn-round" @click="artistMenu" style="pointer-events: all;" :aria-label="app.getLz('term.more')">
+                <button class="more-btn-round favorite" @click="artistMenu" style="pointer-events: all;"
+                        :aria-label="app.getLz('term.more')">
+                    <div class="svg-icon"></div>
+                </button>
+                <button class="more-btn-round menu" @click="artistMenu" style="pointer-events: all;"
+                        :aria-label="app.getLz('term.more')">
                     <div class="svg-icon"></div>
                 </button>
             </div>
-            <div class="artworkContainer" v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
+            <div class="artworkContainer"
+                 v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
                 <artwork-material :url="data.attributes.artwork.url" size="190" images="1"></artwork-material>
             </div>
         </div>
-        <div class="floating-header" :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
+        <div class="floating-header"
+             :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
             <div class="row">
                 <div class="col-auto flex-center">
                     <button class="artist-play" style="display:block;" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
@@ -49,7 +58,7 @@
                     <h3>{{ data.attributes.name }}</h3>
                 </div>
                 <div class="col-auto flex-center">
-                    <button class="more-btn-round" @click="artistMenu" :aria-label="app.getLz('term.more')">
+                    <button class="more-btn-round menu" @click="artistMenu" :aria-label="app.getLz('term.more')">
                         <div class="svg-icon"></div>
                     </button>
                 </div>
@@ -70,8 +79,12 @@
                         <div class="col" style="padding:0;">
                             <h3>{{app.getLz('term.topSongs')}}</h3>
                         </div>
-                        <div class="col-auto flex-center" v-if="data.views['top-songs'].data.length >= 20" style="padding:0;">
+                        <div class="col-auto flex-center" v-if="data.views['top-songs'].data.length >= 20"
-                            <button class="cd-btn-seeall" @click="app.showArtistView(data.id, data.attributes.name + ' - Top Songs', 'top-songs')">{{app.getLz('term.seeAll')}}</button>
+                             style="padding:0;">
+                            <button class="cd-btn-seeall"
+                                    @click="app.showArtistView(data.id, data.attributes.name + ' - Top Songs', 'top-songs')">
+                                {{app.getLz('term.seeAll')}}
+                            </button>
                         </div>
                     </div>
                     <div class="row">
@@ -96,7 +109,10 @@
                                 </h3>
                             </div>
                             <div class="col-auto flex-center" v-if="data.views[view].data.length >= 10">
-                                <button class="cd-btn-seeall" @click="app.showArtistView(data.id, data.attributes.name + ' - ' + data.views[view].attributes.title, view)">{{app.getLz('term.seeAll')}}</button>
+                                <button class="cd-btn-seeall"
+                                        @click="app.showArtistView(data.id, data.attributes.name + ' - ' + data.views[view].attributes.title, view)">
+                                    {{app.getLz('term.seeAll')}}
+                                </button>
                             </div>
                         </div>
                         <template v-if="!((data.views[view].attributes.title ?
@@ -112,7 +128,8 @@
                     </template>
                     <div class="row">
                         <div class="col" v-if="data.attributes.artistBio">
-                            <h3>{{ $root.stringTemplateParser($root.getLz('term.aboutArtist'), {"artistName": data.attributes.name}) }}</h3>
+                            <h3>{{ $root.stringTemplateParser($root.getLz('term.aboutArtist'), {"artistName":
+                                data.attributes.name}) }}</h3>
                             <p v-html="data.attributes.artistBio"></p>
                         </div>
                         <div class="col">
@@ -150,7 +167,7 @@
             isHeaderVisible(visible) {
                 this.headerVisible = visible
             },
-            artistMenu (event) {
+            async artistMenu(event) {
                 let self = this
                 let followAction = "follow"
                 let followActions = {
@@ -172,9 +189,46 @@
                         }
                     }
                 }
+                let favoriteActions = {
+                    favorite: {
+                        icon: "./assets/star.svg",
+                        name: app.getLz('action.favorite'),
+                        action: () => {
+                            app.mk.api.v3.music(`/v1/me/favorites`, {
+                                "art[url]": "f",
+                                "ids[artists]": app.artistPage.data.id,
+                                "l": app.mklang,
+                                "platform": "web"
+                            }, {
+                                fetchOptions: {
+                                    method: "POST"
+                                }
+                            })
+                        }
+                    },
+                    removeFavorite: {
+                        icon: "./assets/star.svg",
+                        name: app.getLz('action.removeFavorite'),
+                        action: () => {
+                            app.mk.api.v3.music(`/v1/me/favorites`, {
+                                "art[url]": "f",
+                                "ids[artists]": app.artistPage.data.id,
+                                "l": app.mklang,
+                                "platform": "web"
+                            }, {
+                                fetchOptions: {
+                                    method: "DELETE"
+                                }
+                            })
+                        }
+                    }
+                }
                 if (this.app.cfg.home.followedArtists.includes(self.data.id)) {
                     followAction = "unfollow"
                 }
+                const inFavorites = (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists/${app.artistPage.data.id}`, {
+                    "fields[artists]": "inFavorites"
+                })).data.data[0].attributes?.inFavorites
                 app.showMenuPanel({
                     items: [
                         {
@@ -186,6 +240,7 @@
                                 })
                             }
                         },
+                        favoriteActions[inFavorites ? "removeFavorite" : "favorite"],
                         followActions[followAction],
                         {
                             icon: "./assets/feather/share.svg",