Added artist and song radios, added play button on artist pages, added artist page menu (needs glyph)

resources/cider-ui/index.js

@@ -14,31 +14,6 @@ Vue.component('lyrics-view', {
 });
 
 // This is going to suck to code
-var CiderContextMenus = {
-    mediaitem: function (mediaitem) {
-        this.items = [
-            {
-                "name": "Add to Library",
-                "action": function(song) {
-                    console.log("Adding song to library");
-                    console.log(mediaitem.attributes.name)
-                }
-            },
-            {
-                "name": "Add to Playlist",
-                "action": function(song) {
-                    console.log("Adding song to playlist");
-                }
-            },
-            {
-                "name": "Add to Queue",
-                "action": function(song) {
-                    console.log("Adding song to queue");
-                }
-            }
-        ]
-    }
-}
 var CiderContextMenu = {
     Menu: function (event) {
         this.items = []
@@ -48,11 +23,10 @@ var CiderContextMenu = {
         var menu = document.createElement("div");
         menu.classList.add("context-menu-body");
         menuBackground.classList.add("context-menu");
-        menu.style.left = event.clientX + "px";
+        menu.style.left = 0 + "px";
-        menu.style.top = event.clientY + "px";
+        menu.style.top = 0 + "px";
         menu.style.position = "absolute";
         menu.style.zIndex = "99909";
-        menu.style.minWidth = "120px"
 
         // when menubackground is clicked, remove it
         menuBackground.addEventListener("click", function () {
@@ -64,6 +38,8 @@ var CiderContextMenu = {
         menuBackground.appendChild(menu);
 
         document.body.appendChild(menuBackground);
+
+
         // for each item in menudata create a menu item
         for (var i = 0; i < menudata.items.length; i++) {
             var item = document.createElement("button")
@@ -73,13 +49,17 @@ var CiderContextMenu = {
             item.onclick = menudata.items[i].action
             menu.appendChild(item)
         }
-        // if menu would be off the screen, move it into view
+        menu.style.width = (menu.offsetWidth + 10) + "px";
-        if (event.clientX + menu.offsetWidth > window.innerWidth) {
+        menu.style.left = event.clientX + "px";
+        menu.style.top = event.clientY + "px";
+        // if menu would be off the screen, move it into view, but preserve the width
+        if (menu.offsetLeft + menu.offsetWidth > window.innerWidth) {
             menu.style.left = (window.innerWidth - menu.offsetWidth) + "px";
         }
-        if (event.clientY + menu.offsetHeight > window.innerHeight) {
+        if (menu.offsetTop + menu.offsetHeight > window.innerHeight) {
             menu.style.top = (window.innerHeight - menu.offsetHeight) + "px";
         }
+
         return menuBackground;
     }
 }

resources/cider-ui/style.less

@@ -1631,20 +1631,26 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   padding: 0px;
 
   .artist-header {
-    background: var(--keyColor);
+    background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
     color: white;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    min-height: 300px;
+    min-height: 400px;
     position: relative;
 
-    .col.flex-center.artist-animation-on {
+    .artist-more {
-      width: 100%;
+      border-radius: 100%;
-      display: block;
+      background: var(--keyColor);
-      flex: unset;
+      box-shadow: var(--mediaItemShadow-Shadow);
-      margin-left: 2.3em;
+      width: 36px;
-      color: whitesmoke;
+      height: 36px;
+      position: absolute;
+      bottom: 26px;
+      right: 32px;
+      border: 0px;
+      cursor: pointer;
+      z-index: 5;
     }
 
     .animated {
@@ -1676,6 +1682,60 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     width: 200px;
     height: 200px;
     margin: 32px;
+    position: relative;
+    .overlay-play {
+      position: absolute;
+      top:0;
+      left:0;
+      width:100%;
+      height:100%;
+      opacity:0;
+      background: rgb(0 0 0 / 50%);
+      transition: opacity 0.1s var(--appleEase);
+      border-radius: 100%;
+      z-index:1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      appearance: none;
+      border:0px;
+      padding:0px;
+      &:hover {
+        opacity:1;
+      }
+      >svg {
+        width: 70%;
+      }
+    }
+  }
+
+  .artist-title {
+    .artist-play {
+      width: 36px;
+      height: 36px;
+      background: var(--keyColor);
+      border-radius: 100%;
+      margin: 14px;
+      box-shadow: var(--mediaItemShadow);
+      display: none;
+      cursor: pointer;
+      appearance: none;
+      border:0px;
+      padding:0px;
+      transform: translateY(3px);
+    }
+    &.artist-animation-on {
+      width: 100%;
+      flex: unset;
+      margin-left: 0.5em;
+      color: whitesmoke;
+      position: absolute;
+      bottom: 0;
+      .artist-play {
+        display: block;
+      }
+    }
   }
 
   .artist-body {

resources/cider-ui/views/components/mediaitem-list-item.ejs

@@ -1,7 +1,7 @@
 <script type="text/x-template" id="mediaitem-list-item">
     <template>
         <div v-observe-visibility="{callback: visibilityChanged}"
-             @contextmenu="CiderContextMenu.Create($event, new CiderContextMenus.mediaitem(item))"
+             @contextmenu="contextMenu"
              class="cd-mediaitem-list-item">
             <template v-if="isVisible">
                 <div class="isLibrary" v-if="showLibraryStatus == true">
@@ -71,6 +71,22 @@
             'show-duration': {type: Boolean, default: true}
         },
         methods: {
+            contextMenu(event) {
+                let self = this
+                CiderContextMenu.Create(event,
+                    {
+                        items: [
+                            {
+                                "name": "Start Radio",
+                                "action": function() {
+                                    app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(()=>{
+                                        app.mk.play()
+                                    })
+                                }
+                            }
+                        ]
+                    });
+            },
             visibilityChanged: function (isVisible, entry) {
                 this.isVisible = isVisible
             },

resources/cider-ui/views/pages/artist.ejs

@@ -7,20 +7,25 @@
             </animatedartwork-view>
             <div class="row">
                 <div class="col-sm" style="width: auto;">
-                    <div class="artist-image">
+                    <div class="artist-image" v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
                         <mediaitem-artwork
                                 :shadow="true"
-                                v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))"
+
                                 :url="data.attributes.artwork ? data.attributes.artwork.url : ''"
                                 size="220" type="artists"></mediaitem-artwork>
+                        <button class="overlay-play">
+                            <%- include("../svg/play.svg") %>
+                        </button>
                     </div>
                 </div>
-                <div class="col flex-center"
+                <div class="col flex-center artist-title"
                      :class="{'artist-animation-on': (data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)) }"
                 >
+                    <button class="artist-play"><%- include("../svg/play.svg") %></button>
                     <h1>{{ data.attributes.name }}</h1>
                 </div>
             </div>
+            <button class="artist-more" @click="artistMenu"></button>
         </div>
         <div class="artist-body">
             <div class="row well">
@@ -115,6 +120,29 @@
             }
         },
         methods: {
+            artistMenu (event) {
+                let self = this
+                CiderContextMenu.Create(event, {
+                    items: [
+                        {
+                            name: "Play Artist Radio",
+                            action: ()=>{
+                                app.mk.setStationQueue({artist:self.data.id}).then(()=>{
+                                    app.mk.play()
+                                })
+                            }
+                        },
+                        {
+                            name: "Follow Artist",
+                            action: ()=>{}
+                        },
+                        {
+                            name: "Share",
+                            action: ()=>{}
+                        }
+                    ]
+                })
+            },
             getArtistPalette(artist) {
                 if (artist["attributes"]["artwork"]) {
                     return {