message in plug-in menu

src/i18n/source/en_US.json

@@ -142,6 +142,7 @@
   "term.noVideos": "No videos found.",
   "term.plugin": "Plug-in",
   "term.pluginMenu": "Plug-in Menu",
+  "term.pluginMenu.none": "You don't have any plug-in needs interaction",
   "term.replay": "Replay",
   "term.uniqueAlbums": "Unique Albums",
   "term.uniqueArtists": "Unique Artists",

src/renderer/views/components/plugin-menu.ejs

@@ -1,37 +1,39 @@
 <script type="text/x-template" id="plugin-menu">
-  <!--template-->
+    <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
-      <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
+        <div class="modal-window">
-          <div class="modal-window">
+            <div class="modal-header">
-              <div class="modal-header">
+                <div class="modal-title">{{$root.getLz('term.pluginMenu')}}</div>
-                  <div class="modal-title">{{$root.getLz('term.pluginMenu')}}</div>
+                <button class="close-btn" @click="app.resetState()"></button>
-                  <button class="close-btn" @click="app.resetState()"></button>
+            </div>
-              </div>
+            <div class="modal-content">
-              <div class="modal-content">
+            <span class="playlist-item" v-if="!app.pluginInstalled">
-                <button class="playlist-item" @click="entry.onClick(); closeMenu();" v-for="entry in app.pluginMenuEntries">
+                <span class="icon"><%- include("../svg/x.svg") %></span>
-                  <span class="icon"><%- include("../svg/grid.svg") %></span>
+                <span class="name" style="top: 0.5px;">{{$root.getLz('term.pluginMenu.none')}}</span>
-                  <span class="name" style="top: 1px;">{{ entry.name }}</span>
+            </span>
-                </button>
+            <button class="playlist-item" @click="entry.onClick(); closeMenu();" v-for="entry in app.pluginMenuEntries">
-              </div>
+                <span class="icon"><%- include("../svg/grid.svg") %></span>
-          </div>
+                <span class="name" style="top: 1px;">{{ entry.name }}</span>
-      </div>
+            </button>
-  <!--template-->
+            </div>
+        </div>
+    </div>
 </script>
 
 <script>
-  Vue.component('plugin-menu', {
+    Vue.component('plugin-menu', {
-      template: '#plugin-menu',
+        template: '#plugin-menu',
-      data: function () {
+        data: function () {
-          return {
+            return {
-              app: this.$root,
+                app: this.$root,
-          }
+            }
-      },
+        },
-      props: {},
+        props: {},
-      mounted() {},
+        mounted() {},
-      methods: {
+        methods: {
-          closeMenu() {
+            closeMenu() {
-              app.modals.pluginMenu = false
+                app.modals.pluginMenu = false
-          },
+            },
-          },
+            },
-      }
+        }
-  );
+    );
 </script>

src/renderer/views/svg/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>