From a5a8a09d04f52653572979d3e580a96482ae88f3 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 13 Jan 2022 01:42:40 -0800
Subject: [PATCH] added sharing to playlist menu, making vue based context menu
 WIP

---
 src/renderer/index.js                        | 13 +++
 src/renderer/style.less                      | 92 ++++++++++++++++++++
 src/renderer/views/components/menu-panel.ejs | 52 +++++++++++
 src/renderer/views/main.ejs                  |  9 ++
 src/renderer/views/pages/cider-playlist.ejs  | 26 ++++++
 5 files changed, 192 insertions(+)
 create mode 100644 src/renderer/views/components/menu-panel.ejs

diff --git a/src/renderer/index.js b/src/renderer/index.js
index 1d0a98bf..e0429a3b 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -291,6 +291,13 @@ const app = new Vue({
         socialBadges: {
             badgeMap: {},
             version: ""
+        },
+        menuPanel: {
+            visible: false,
+            content: {
+                name: "",
+                items: {}
+            }
         }
     },
     watch: {
@@ -315,6 +322,11 @@ const app = new Vue({
         },
     },
     methods: {
+        async showMenuPanel(data) {
+            app.menuPanel.visible = true;
+            app.menuPanel.content.name = data.name ?? "";
+            app.menuPanel.content.items = data.items ?? [];
+        },
         async getSvgIcon(url) {
             let response = await fetch(url);
             let data = await response.text();
@@ -357,6 +369,7 @@ const app = new Vue({
             document.querySelector("body").classList.add("notransparency")
         },
         resetState() {
+            this.menuPanel.visible = false;
             app.selectedMediaItems = [];
             for (let key in app.modals) {
                 app.modals[key] = false;
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 3f0b1163..341e71a4 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2479,6 +2479,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     }
   }
 
+  .playlist-more {
+    border-radius: 100%;
+    background: var(--keyColor);
+    box-shadow: var(--ciderShadow-Generic);
+    width: 36px;
+    height: 36px;
+    float:right;
+    border: 0px;
+    cursor: pointer;
+    z-index: 5;
+
+    &:hover {
+      background: var(--keyColor-rollover);
+    }
+
+    &:active {
+      background: var(--keyColor-pressed);
+    }
+  }
 
   .playlist-time {
     font-size: 0.9em;
@@ -2773,6 +2792,65 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+.menu-panel {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-flow: column;
+
+  .menu-option {
+    text-align: left;
+    display: flex;
+    width: 100%;
+    padding: 16px;
+    appearance: none;
+    border: 0px;
+    font: inherit;
+    background: transparent;
+    color: inherit;
+
+    &:hover {
+      background: var(--selected);
+    }
+
+    &:active {
+      background: var(--selected-click);
+    }
+  }
+
+  .menu-header-text {
+    margin: 18px 6px;
+    .close-btn {
+      width: 50px;
+      height: 42px;
+      background-image: var(--gfx-closeBtn);
+      background-position: center;
+      background-repeat: no-repeat;
+      -webkit-app-region: no-drag;
+      appearance: none;
+      border: 0;
+      background-color: transparent;
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      &:hover {
+        background-color: rgb(196, 43, 28)
+      }
+    }
+  }
+
+  .menu-body {
+    overflow: overlay;
+    height: 100%;
+  }
+
+  .menu-footer {
+    width: 100%;
+    padding: 12px;
+  }
+}
+
 .queue-panel {
   height: 100%;
   width: 100%;
@@ -3988,11 +4066,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 /* Cider */
 
 // sidebar icon
+.svg-icon {
+  --color: #aaa;
+  --url: url("./assets/feather/share.svg");
+  -webkit-mask-image: var(--url);
+  -webkit-mask-size: cover;
+  height: 18px;
+  width: 18px;
+  background: var(--color);
+}
 .sidebar-icon {
   width: 18px;
   height: 18px;
   margin-right: 8px;
 
+  >.svg-icon {
+    width: 100%;
+    height: 100%;
+    --color: #aaa;
+  }
   >svg {
     width: 100%;
     height: 100%;
diff --git a/src/renderer/views/components/menu-panel.ejs b/src/renderer/views/components/menu-panel.ejs
new file mode 100644
index 00000000..03e852ca
--- /dev/null
+++ b/src/renderer/views/components/menu-panel.ejs
@@ -0,0 +1,52 @@
+<script type="text/x-template" id="cider-menu-panel">
+    <div class="menu-panel">
+        <div class="menu-header-text">
+            <div class="row">
+                <div class="col">
+                    <h3 class="queue-header-text">{{ content.name }}</h3>
+                </div>
+            </div>
+            <button @click="menuPanel.visible = false" class="close-btn"></button>
+        </div>
+        <div class="menu-body">
+            <template v-for="item in content.items">
+                <button class="menu-option" @click="action(item)">
+                    <div class="sidebar-icon" v-if="item.icon">
+                        <div class="svg-icon" :style="{'--url': 'url(' + item.icon + ')'}"></div>
+
+                    </div>
+                    {{ item.name }}
+                </button>
+            </template>
+        </div>
+    </div>
+</script>
+
+
+<script>
+    Vue.component('cider-menu-panel', {
+        template: '#cider-menu-panel',
+        data: function () {
+            return {
+                app: this.$root,
+                menuPanel: this.$root.menuPanel,
+                content: this.$root.menuPanel.content,
+                getSvgIcon: this.$root.getSvgIcon,
+            }
+        },
+        mounted() {
+
+        },
+        methods: {
+            async getActions() {
+                return this.content.items;
+            },
+            action(item) {
+                item.action()
+                if(!item["keepOpen"]) {
+                    this.menuPanel.visible = false
+                }
+            }
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 14776c68..42dc5b39 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -538,6 +538,13 @@
                         <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
                     </div>
                 </transition>
+                <transition name="drawertransition">
+                    <div class="app-drawer" v-if="menuPanel.visible">
+                        <cider-menu-panel>
+                        </cider-menu-panel>
+                    </div>
+                </transition>
+
             </div>
         </div>
     </transition>
@@ -653,6 +660,8 @@
     </button>
 </script>
 
+<!-- Menu Panel -->
+<%- include('components/menu-panel') %>
 <!-- Playlist Listing -->
 <%- include('components/sidebar-playlist') %>
 <!-- Spatial Properties -->
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index 3d7c5c46..25188d89 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -74,6 +74,14 @@
                                 @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
                             Confirm?
                         </button>
+                        <button class="playlist-more" @click="menu">
+                            <div style="    margin-top: -1px;
+                                margin-left: -5px;
+                                width: 36px;
+                                height: 36px;">
+                                <%- include("../svg/more.svg") %>
+                            </div>
+                        </button>
                     </div>
                 </div>
             </div>
@@ -311,6 +319,24 @@
                     }
                 })
             },
+            menu() {
+                app.showMenuPanel({
+                    name: this.data.attributes ? (this.data.attributes.name ??
+                        (this.data.attributes.title ?? '') ?? '') : '',
+                    items: {
+                        "share": {
+                            name: "Share",
+                            icon: "./assets/feather/share.svg",
+                            action: () => {
+                                app.mk.api.v3.music(`/v1/me/library/playlists/${this.data.id}/catalog`).then(res=>{
+                                    console.log(res.data.data[0].attributes.url)
+                                    app.copyToClipboard(res.data.data[0].attributes.url)
+                                })
+                            }
+                        }
+                    }
+                })
+            },
             getItemParent: function (data) {
                 kind = data.attributes.playParams.kind;
                 id = data.attributes.playParams.id;