From 5383581f8f467c3f26f2c0fa2586f1f11bde27c2 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 23 Sep 2022 00:43:08 -0700
Subject: [PATCH] plugins adjustment

---
 src/renderer/main/ciderfrontapi.js        |   9 +-
 src/renderer/main/vueapp.js               |   1 +
 src/renderer/views/app/app-navigation.ejs | 291 ++++++++++------------
 3 files changed, 146 insertions(+), 155 deletions(-)

diff --git a/src/renderer/main/ciderfrontapi.js b/src/renderer/main/ciderfrontapi.js
index 8a7ef76a..95a57919 100644
--- a/src/renderer/main/ciderfrontapi.js
+++ b/src/renderer/main/ciderfrontapi.js
@@ -3,11 +3,16 @@ const CiderFrontAPI = {
     MenuEntry: function () {
       this.id = "";
       this.name = "";
-      this.onClick = () => {};
+      this.onClick = () => { };
+      this.top = false
     },
   },
   AddMenuEntry(entry) {
-    app.pluginMenuEntries.push(entry);
+    if (entry?.top) {
+      app.pluginMenuTopEntries.push(entry);
+    } else {
+      app.pluginMenuEntries.push(entry);
+    }
     app.pluginInstalled = true;
   },
   StyleSheets: {
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index f11d4470..52fe2de6 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -18,6 +18,7 @@ const app = new Vue({
     mk: {},
     pluginInstalled: false,
     pluginMenuEntries: [],
+    pluginMenuTopEntries: [],
     lz: ipcRenderer.sendSync("get-i18n", "en_US"),
     lzListing: ipcRenderer.sendSync("get-i18n-listing"),
     radiohls: null,
diff --git a/src/renderer/views/app/app-navigation.ejs b/src/renderer/views/app/app-navigation.ejs
index 7e03c957..bf6da9dc 100644
--- a/src/renderer/views/app/app-navigation.ejs
+++ b/src/renderer/views/app/app-navigation.ejs
@@ -1,166 +1,151 @@
 <div class="app-navigation" v-cloak>
-    <transition name="wpfade">
-        <div class="usermenu-container" v-if="chrome.menuOpened">
-            <div class="usermenu-body">
-                <button
-                        class="app-sidebar-button"
-                        style="width: 100%"
-                        @click="appRoute('apple-account-settings')"
-                >
-                    <img
-                            class="sidebar-user-icon"
-                            loading="lazy"
-                            :src="getMediaItemArtwork(chrome.hideUserInfo ? './assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)"
-                    />
+  <transition name="wpfade">
+    <div class="usermenu-container" v-if="chrome.menuOpened">
+      <div class="usermenu-body">
+        <button class="app-sidebar-button" style="width: 100%" @click="appRoute('apple-account-settings')">
+          <img class="sidebar-user-icon" loading="lazy"
+            :src="getMediaItemArtwork(chrome.hideUserInfo ? './assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)" />
 
-                    <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
-                        <template v-if="chrome.userinfo.id || mk.isAuthorized">
-                            <div class="fullname text-overflow-elipsis">
-                                {{
-                                chrome.userinfo != null &&
-                                chrome.userinfo.attributes != null
-                                ? chrome.userinfo.attributes.name ?? ""
-                                : ""
-                                }}
-                            </div>
-                            <div class="handle-text text-overflow-elipsis">
-                                {{
-                                chrome.userinfo != null &&
-                                chrome.userinfo.attributes != null
-                                ? chrome.userinfo.attributes.handle ?? ""
-                                : ""
-                                }}
-                            </div>
-                        </template>
-                        <template v-else>
-                            <div @click="mk.authorize()">
-                                {{ $root.getLz("term.login") }}
-                            </div>
-                        </template>
-                    </div>
-                    <div class="sidebar-user-text" v-else>
-                        {{ $root.getLz("app.name") }}
-                    </div>
-                </button>
-                <!-- Use 20px SVG for usermenu icon -->
-                <button
-                        class="usermenu-item"
-                        v-if="cfg.general.privateEnabled"
-                        @click="cfg.general.privateEnabled = false"
-                >
-            <span class="usermenu-item-icon">
-              <%- include("../svg/x.svg") %>
-            </span>
-                    <span class="usermenu-item-name">{{
-              $root.getLz("term.disablePrivateSession")
+          <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
+            <template v-if="chrome.userinfo.id || mk.isAuthorized">
+              <div class="fullname text-overflow-elipsis">
+                {{
+                chrome.userinfo != null &&
+                chrome.userinfo.attributes != null
+                ? chrome.userinfo.attributes.name ?? ""
+                : ""
+                }}
+              </div>
+              <div class="handle-text text-overflow-elipsis">
+                {{
+                chrome.userinfo != null &&
+                chrome.userinfo.attributes != null
+                ? chrome.userinfo.attributes.handle ?? ""
+                : ""
+                }}
+              </div>
+            </template>
+            <template v-else>
+              <div @click="mk.authorize()">
+                {{ $root.getLz("term.login") }}
+              </div>
+            </template>
+          </div>
+          <div class="sidebar-user-text" v-else>
+            {{ $root.getLz("app.name") }}
+          </div>
+        </button>
+        <!-- Use 20px SVG for usermenu icon -->
+        <button class="usermenu-item" v-if="cfg.general.privateEnabled" @click="cfg.general.privateEnabled = false">
+          <span class="usermenu-item-icon">
+            <%- include("../svg/x.svg") %>
+          </span>
+          <span class="usermenu-item-name">{{
+            $root.getLz("term.disablePrivateSession")
             }}</span>
-                </button>
-                <button class="usermenu-item" @click="appRoute('remote-pair')">
-            <span class="usermenu-item-icon">
-              <%- include("../svg/smartphone.svg") %>
-            </span>
-                    <span class="usermenu-item-name">{{
-              $root.getLz("action.showWebRemoteQR")
+        </button>
+        <button class="usermenu-item" @click="appRoute('remote-pair')">
+          <span class="usermenu-item-icon">
+            <%- include("../svg/smartphone.svg") %>
+          </span>
+          <span class="usermenu-item-name">{{
+            $root.getLz("action.showWebRemoteQR")
             }}</span>
-                </button>
-                <button
-                        class="usermenu-item"
-                        @click="modals.castMenu = true"
-                >
-            <span class="usermenu-item-icon">
-              <%- include("../svg/cast.svg") %>
-            </span>
-                    <span class="usermenu-item-name">{{
-              $root.getLz("term.cast")
+        </button>
+        <button class="usermenu-item" @click="modals.castMenu = true">
+          <span class="usermenu-item-icon">
+            <%- include("../svg/cast.svg") %>
+          </span>
+          <span class="usermenu-item-name">{{
+            $root.getLz("term.cast")
             }}</span>
-                </button>
-                <button
-                        class="usermenu-item"
-                        @click="modals.audioSettings = true"
-                >
-            <span class="usermenu-item-icon">
-              <%- include("../svg/headphones.svg") %>
-            </span>
-                    <span class="usermenu-item-name">{{
-              $root.getLz("term.audioSettings")
+        </button>
+        <button class="usermenu-item" @click="modals.audioSettings = true">
+          <span class="usermenu-item-icon">
+            <%- include("../svg/headphones.svg") %>
+          </span>
+          <span class="usermenu-item-name">{{
+            $root.getLz("term.audioSettings")
             }}</span>
-                </button>
-                <button
-                        class="usermenu-item"
-                        v-if="pluginInstalled"
-                        @click="modals.pluginMenu = true"
-                >
-            <span class="usermenu-item-icon">
-              <%- include("../svg/grid.svg") %>
-            </span>
-                    <span class="usermenu-item-name">{{
-              $root.getLz("term.plugin")
+        </button>
+        <button class="usermenu-item" v-if="pluginInstalled" @click="modals.pluginMenu = true">
+          <span class="usermenu-item-icon">
+            <%- include("../svg/grid.svg") %>
+          </span>
+          <span class="usermenu-item-name">{{
+            $root.getLz("term.plugin")
             }}</span>
-                </button>
-                <button class="usermenu-item" @click="appRoute('about')">
-            <span class="usermenu-item-icon">
-              <%- include("../svg/info.svg") %>
-            </span>
-                    <span class="usermenu-item-name">{{
-              $root.getLz("term.about")
+        </button>
+        <button class="usermenu-item" @click="appRoute('about')">
+          <span class="usermenu-item-icon">
+            <%- include("../svg/info.svg") %>
+          </span>
+          <span class="usermenu-item-name">{{
+            $root.getLz("term.about")
             }}</span>
-                </button>
-                <button class="usermenu-item" @click="modals.settings = true">
-            <span class="usermenu-item-icon">
-              <%- include("../svg/settings.svg") %>
-            </span>
-                    <span class="usermenu-item-name">{{
-              $root.getLz("term.settings")
+        </button>
+        <button class="usermenu-item" @click="modals.settings = true">
+          <span class="usermenu-item-icon">
+            <%- include("../svg/settings.svg") %>
+          </span>
+          <span class="usermenu-item-name">{{
+            $root.getLz("term.settings")
             }}</span>
-                </button>
-                <button class="usermenu-item" @click="unauthorize()">
-            <span class="usermenu-item-icon" style="right: 2.5px">
-              <%- include("../svg/log-out.svg") %>
-            </span>
-                    <span class="usermenu-item-name">{{
-              $root.getLz("term.logout")
+        </button>
+        <button class="usermenu-item" v-for="entry in $root.pluginMenuTopEntries" @click="entry.onClick()">
+          <span class="usermenu-item-icon" style="right: 2.5px">
+            <%- include("../svg/grid.svg") %>
+          </span>
+          <span class="usermenu-item-name">{{entry.name}}</span>
+        </button>
+        <button class="usermenu-item" @click="unauthorize()">
+          <span class="usermenu-item-icon" style="right: 2.5px">
+            <%- include("../svg/log-out.svg") %>
+          </span>
+          <span class="usermenu-item-name">{{
+            $root.getLz("term.logout")
             }}</span>
-                </button>
-                <button class="usermenu-item" @click="quit()">
-            <span class="usermenu-item-icon" style="right: 2.5px">
-              <%- include("../svg/x.svg") %>
-            </span>
-                    <span class="usermenu-item-name">{{
-              $root.getLz("term.quit")
+        </button>
+        <button class="usermenu-item" @click="quit()">
+          <span class="usermenu-item-icon" style="right: 2.5px">
+            <%- include("../svg/x.svg") %>
+          </span>
+          <span class="usermenu-item-name">{{
+            $root.getLz("term.quit")
             }}</span>
-                </button>
-            </div>
+        </button>
+      </div>
+    </div>
+  </transition>
+  <transition name="sidebartransition">
+    <cider-app-sidebar v-if="!chrome.sidebarCollapsed"></cider-app-sidebar>
+  </transition>
+  <app-content-area></app-content-area>
+  <transition name="drawertransition">
+    <div class="app-drawer"
+      v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">
+      <div class="bgArtworkMaterial">
+        <div class="bg-artwork-container">
+          <img v-if="(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork a"
+            :src="$store.state.artwork.playerLCD">
+          <img v-if="(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork b"
+            :src="$store.state.artwork.playerLCD">
+          <img v-if="!(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork no-animation"
+            :src="$store.state.artwork.playerLCD">
         </div>
-    </transition>
-    <transition name="sidebartransition">
-        <cider-app-sidebar v-if="!chrome.sidebarCollapsed"></cider-app-sidebar>
-    </transition>
-    <app-content-area></app-content-area>
-    <transition name="drawertransition">
-        <div class="app-drawer"
-             v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">
-            <div class="bgArtworkMaterial">
-                <div class="bg-artwork-container">
-                    <img v-if="(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork a"
-                         :src="$store.state.artwork.playerLCD">
-                    <img v-if="(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork b"
-                         :src="$store.state.artwork.playerLCD">
-                    <img v-if="!(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork no-animation"
-                         :src="$store.state.artwork.playerLCD">
-                </div>
-            </div>
-            <lyrics-view v-if="drawer.panel == 'lyrics'" :time="mk.currentPlaybackTime - lyricOffset" :lyrics="lyrics"
-                         :richlyrics="richlyrics"></lyrics-view>
-            <div v-if="drawer.panel == 'lyrics'" class="lyric-footer">
-                <button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ?
-                    $root.getLz('term.defaultView'): $root.getLz('term.fullscreenView')}}
-                </button>
-            </div>
-        </div>
-    </transition>
-    <transition name="drawertransition">
-        <div class="app-drawer" v-if="drawer.open && drawer.panel == 'queue'">
-            <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
-        </div>
-    </transition>
+      </div>
+      <lyrics-view v-if="drawer.panel == 'lyrics'" :time="mk.currentPlaybackTime - lyricOffset" :lyrics="lyrics"
+        :richlyrics="richlyrics"></lyrics-view>
+      <div v-if="drawer.panel == 'lyrics'" class="lyric-footer">
+        <button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ?
+          $root.getLz('term.defaultView'): $root.getLz('term.fullscreenView')}}
+        </button>
+      </div>
+    </div>
+  </transition>
+  <transition name="drawertransition">
+    <div class="app-drawer" v-if="drawer.open && drawer.panel == 'queue'">
+      <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
+    </div>
+  </transition>
 </div>