base for future context menu

resources/cider-ui/index.js

@@ -13,6 +13,77 @@ Vue.component('lyrics-view', {
     methods: {}
 });
 
+// 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 = []
+    },
+    Create(event, menudata) {
+        var menuBackground = document.createElement("div");
+        var menu = document.createElement("div");
+        menu.classList.add("context-menu-body");
+        menuBackground.classList.add("context-menu");
+        menu.style.left = event.clientX + "px";
+        menu.style.top = event.clientY + "px";
+        menu.style.position = "absolute";
+        menu.style.zIndex = "99909";
+        menu.style.minWidth = "120px"
+
+        // when menubackground is clicked, remove it
+        menuBackground.addEventListener("click", function () {
+            menuBackground.remove();
+            menu.remove();
+        });
+
+        // add menu to menuBackground
+        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")
+            item.tabIndex = 0
+            item.classList.add("context-menu-item")
+            item.innerHTML = menudata.items[i].name
+            item.onclick = menudata.items[i].action
+            menu.appendChild(item)
+        }
+        // if menu would be off the screen, move it into view
+        if (event.clientX + menu.offsetWidth > window.innerWidth) {
+            menu.style.left = (window.innerWidth - menu.offsetWidth) + "px";
+        }
+        if (event.clientY + menu.offsetHeight > window.innerHeight) {
+            menu.style.top = (window.innerHeight - menu.offsetHeight) + "px";
+        }
+        return menuBackground;
+    }
+}
+
 
 const MusicKitTools = {
     getHeader() {
@@ -189,11 +260,7 @@ const app = new Vue({
             this.mk.authorize()
             this.$forceUpdate()
             this.mk.privateEnabled = true
-            try {
-                this.platform = ipcRenderer.sendSync('cider-platform');
-            }catch(e){
-                this.platform = "dev"
-            }
+            // this.platform = ipcRenderer.sendSync('cider-platform');
             // Set profile name
             this.chrome.userinfo = await this.mkapi("personalSocialProfile", false, "")
             // API Fallback
@@ -1684,7 +1751,6 @@ const app = new Vue({
         }
     }
 })
-
 // Hang Timer
 app.hangtimer = setTimeout(()=>{
     if(confirm("Cider is not responding. Reload the app?")) {

resources/cider-ui/style.less

@@ -427,6 +427,43 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   }
 }
 
+.context-menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.0);
+  z-index: 100;
+
+  .context-menu-item {
+    background: transparent;
+    display: block;
+    width: 100%;
+    text-align: left;
+    color: #eee;
+    font-family: inherit;
+    font-size: 15px;
+    padding: 8px 12px;
+    border: 0px;
+    appearance: none;
+    border-radius: 6px;
+    margin: 2px 0px;
+
+    &:hover {
+      background: var(--keyColor);
+      cursor: pointer;
+    }
+  }
+
+  .context-menu-body {
+    background: #242424;
+    padding: 6px;
+    border-radius: 6px;
+    box-shadow: var(--mediaItemShadow-Shadow);
+  }
+}
+
 
 .app-sidebar-content::-webkit-scrollbar {
   display: none;
@@ -1277,71 +1314,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   background: var(--keyColor);
 }
 
-.context-menu {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 100;
-}
-
-.context-menu .context-menu-item {
-  --borderRadius: 10px;
-  appearance: none;
-  width: 100%;
-  display: block;
-  font-size: 1.10em;
-  padding: 18px 20px;
-  font-family: inherit;
-  border: 0px;
-  font-weight: 600;
-  border-radius: 0px;
-  border-bottom: 1px solid rgb(200 200 200 / 15%);
-  margin: 0px;
-  background: rgb(60 60 60 / 80%);
-  backdrop-filter: blur(16px) saturate(180%);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
-  color: #ccc;
-}
-
-.context-menu .context-menu-item:hover {
-  cursor: pointer;
-}
-
-.context-menu .context-menu-item:active {
-  filter: brightness(75%);
-}
-
-.context-menu .context-menu-item:first-child {
-  border-radius: 0px;
-  border-top-left-radius: var(--borderRadius);
-  border-top-right-radius: var(--borderRadius);
-}
-
-.context-menu .context-menu-item:last-child {
-  border-radius: 0px;
-  border-bottom-left-radius: var(--borderRadius);
-  border-bottom-right-radius: var(--borderRadius);
-  border-bottom: 0px;
-}
-
-.context-menu .context-menu-item:only-child {
-  border-radius: var(--borderRadius);
-}
-
-.context-menu .context-menu-item.context-menu-item--left {
-  text-align: left;
-}
-
-.context-menu .context-menu-body {
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
-  flex-direction: column;
-}
-
 .lyric-body {
   -webkit-mask-image: -webkit-gradient(linear, left 95%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
   overflow-y: scroll;

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

@@ -1,6 +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))"
              class="cd-mediaitem-list-item">
             <template v-if="isVisible">
                 <div class="isLibrary" v-if="showLibraryStatus == true">