Merge pull request #2705 from thornbill/custom-menu-links

Add support for custom menu links in config.json

src/config.json

@@ -23,6 +23,7 @@
       "id": "wmc"
     }
   ],
+  "menuLinks": [],
   "servers": [],
   "plugins": [
     "playAccessValidation/plugin",

src/scripts/libraryMenu.js

@@ -10,6 +10,7 @@ import groupSelectionMenu from '../components/syncPlay/ui/groupSelectionMenu';
 import browser from './browser';
 import globalize from './globalize';
 import imageHelper from './imagehelper';
+import { getMenuLinks } from '../scripts/settings/webSettings';
 import '../elements/emby-button/paper-icon-button-light';
 import 'material-design-icons-iconfont';
 import '../assets/css/scrollstyles.scss';
@@ -273,9 +274,11 @@ import Headroom from 'headroom.js';
         html += '<div style="height:.5em;"></div>';
         html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" href="#!/home.html"><span class="material-icons navMenuOptionIcon home"></span><span class="navMenuOptionText">' + globalize.translate('Home') + '</span></a>';
 
+        // placeholder for custom menu links
+        html += '<div class="customMenuOptions"></div>';
+
         // libraries are added here
-        html += '<div class="libraryMenuOptions">';
+        html += '<div class="libraryMenuOptions"></div>';
-        html += '</div>';
 
         if (user.localUser && user.localUser.Policy.IsAdministrator) {
             html += '<div class="adminMenuOptions">';
@@ -638,6 +641,32 @@ import Headroom from 'headroom.js';
 
         const userId = Dashboard.getCurrentUserId();
         const apiClient = getCurrentApiClient();
+
+        const customMenuOptions = document.querySelector('.customMenuOptions');
+        if (customMenuOptions) {
+            getMenuLinks().then(links => {
+                links.forEach(link => {
+                    const option = document.createElement('a');
+                    option.setAttribute('is', 'emby-linkbutton');
+                    option.className = 'navMenuOption lnkMediaFolder';
+                    option.rel = 'noopener noreferrer';
+                    option.target = '_blank';
+                    option.href = link.url;
+
+                    const icon = document.createElement('span');
+                    icon.className = `material-icons navMenuOptionIcon ${link.icon || 'link'}`;
+                    option.appendChild(icon);
+
+                    const label = document.createElement('span');
+                    label.className = 'navMenuOptionText';
+                    label.textContent = link.name;
+                    option.appendChild(label);
+
+                    customMenuOptions.appendChild(option);
+                });
+            });
+        }
+
         const libraryMenuOptions = document.querySelector('.libraryMenuOptions');
 
         if (libraryMenuOptions) {

src/scripts/settings/webSettings.js

@@ -126,6 +126,18 @@ export function getThemes() {
 
 export const getDefaultTheme = () => internalDefaultTheme;
 
+export function getMenuLinks() {
+    return getConfig().then(config => {
+        if (!config.menuLinks) {
+            console.error('web config is invalid, missing menuLinks:', config);
+        }
+        return config.menuLinks || [];
+    }).catch(error => {
+        console.log('cannot get web config:', error);
+        return [];
+    });
+}
+
 export function getPlugins() {
     return getConfig().then(config => {
         if (!config.plugins) {