Cider The Wekeend Update

Add more keybinds and make own page to change it ( No more Pop Up)

Redesing the "Menu Bar" to more efficient order.

src/i18n/en_US.json

@@ -300,6 +300,9 @@
   "menubar.options.trans": "Translation Report/Request",
   "menubar.options.license": "View License",
   "menubar.options.conf": "Open Configuration File in Editor",
+  "menubar.options.listennow": "Listen Now",
+  "menubar.options.recentlyAdded": "Recently Added",
+  "menubar.options.songs": "Songs",
   "settings.header.general": "General",
   "settings.header.general.description": "Adjust the general settings for Cider.",
   "settings.option.general.language": "Language",
@@ -338,6 +341,9 @@
   "settings.description.cast": "Cast to Devices",
   "settings.description.settings": "Settings",
   "settings.description.developer": "Developer Tools",
+  "settings.description.listnow": "Listen Now",
+  "settings.description.recentAdd": "Recently Added",
+  "settings.description.songs": "Songs",
   "settings.notyf.updateCider.update-not-available": "No update available",
   "settings.notyf.updateCider.update-downloaded": "Update has been downloaded, restart to apply",
   "settings.notyf.updateCider.update-error": "Error updating Cider",

src/main/base/browserwindow.ts

@@ -77,6 +77,7 @@ export class BrowserWindow {
                 "pages/audiolabs",
                 "pages/zoo",
                 "pages/plugin-renderer",
+                "pages/keybinds",
                 "components/mediaitem-artwork",
                 "components/artwork-material",
                 "components/menu-panel",

src/main/base/store.ts

@@ -54,6 +54,22 @@ export class Store {
                     process.platform == "darwin" ? "Command" : "Control",
                     "F"
                 ],
+                "listnow": [
+                    process.platform == "darwin" ? "Command" : "Control",
+                    "L"
+                ],
+                "browse": [
+                    process.platform == "darwin" ? "Command" : "Control",
+                    "B"
+                ],
+                "recentAdd": [
+                    process.platform == "darwin" ? "Command" : "Control",
+                    "G"
+                ],
+                "songs" : [
+                    process.platform == "darwin" ? "Command" : "Control",
+                    "J"
+                ],
                 "albums": [
                     process.platform == "darwin" ? "Command" : "Control",
                     "S"
@@ -62,10 +78,6 @@ export class Store {
                     process.platform == "darwin" ? "Command" : "Control",
                     "D"
                 ],
-                "browse": [
-                    process.platform == "darwin" ? "Command" : "Control",
-                    "B"
-                ],
                 "togglePrivateSession": [
                     process.platform == "darwin" ? "Command" : "Control",
                     "P"

src/main/plugins/menubar.ts

@@ -23,8 +23,9 @@ export default class Thumbar {
             label: app.getName(),
             submenu: [
                 {
-                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.about'),
+                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.toggleprivate'),
-                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('about')`)
+                    accelerator: utils.getStoreValue("general.keybindings.togglePrivateSession").join('+'),
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.cfg.general.privateEnabled = !app.cfg.general.privateEnabled`)
                 },
                 {type: 'separator'},
                 {
@@ -40,30 +41,63 @@ export default class Thumbar {
                 {role: 'hideOthers'},
                 {role: 'unhide'},
             ]: [
+                {type: 'separator'},
+                {
+                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.about'),
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('about')`)
+                },
                 {type: 'separator'},
                 {role: 'quit', label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.quit')},
             ]),
             ],  
         },
 
-
         {
             label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.view'),
             submenu: [
-                {role: 'reload', label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.reload')},
+                {
-                {role: 'forceReload', label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.forcereload')},
+                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.search'),
-                ...(this.isMac ? [
+                    accelerator: utils.getStoreValue("general.keybindings.search").join('+'),
-                {role: 'toggleDevTools'},
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('search')`)
+                },
+                {type:'separator'},
+                {
+                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.listennow'),
+                    accelerator: utils.getStoreValue('general.keybindings.listnow').join('+'),
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('listen_now')`)
+                },
+                {
+                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.browse'),
+                    accelerator: utils.getStoreValue("general.keybindings.browse").join('+'),
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('browse')`)
+                },
                 {type: 'separator'},
-                {role: 'resetZoom'},
+                {
-                {role: 'zoomIn'},
+                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.recentlyAdded')
-                {role: 'zoomOut'},
+                    ,accelerator: utils.getStoreValue("general.keybindings.recentAdd").join('+'),
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('library-recentlyadded')`)
+                },
+                {
+                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.songs'),
+                    accelerator: utils.getStoreValue("general.keybindings.songs").join('+'),
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('library-songs')`)
+                },
+                {
+                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.albums'),
+                    accelerator: utils.getStoreValue("general.keybindings.albums").join('+'),
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('library-albums')`)
+                },
+                {
+                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.artists'),
+                    accelerator: utils.getStoreValue("general.keybindings.artists").join('+'),
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('library-artists')`)
+                },                
                 {type: 'separator'},
-                {role: 'togglefullscreen'},
+                ...(this.isMac ? [            
-            
         ]: []),
         ],
         },
+
         {
             label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.window'),
             submenu: [
@@ -73,15 +107,24 @@ export default class Thumbar {
                     label: 'Show',
                     click: () => utils.getWindow().show()
                 },
-                {role: 'zoom'},
+                {role: 'toggleDevTools'},
+                {type: 'separator'},
+                {
+                    label:'Zoom',
+                    submenu: [
+                        {role: 'zoom'},
+                        {role: 'resetZoom'},
+                        {role: 'zoomIn'},
+                        {role: 'zoomOut'},                       
+                    ]
+                },
+                {type: 'separator'},
+                {role: 'togglefullscreen'},
+
                 
                     {type: 'separator'},
                     {role: 'front'},
-                    {role: 'close'},
+                    {role: 'close'},                
-                 
-                    {role: 'close'},
-
-                
                 {
                     label: 'Edit',
                     submenu: [
@@ -93,33 +136,14 @@ export default class Thumbar {
                         {role: 'paste'},
                     ]
                 },
-            ] : []
+            ] : [
-            ),               
+                {type:'separator'},
-                {type: 'separator'},
+                {role: 'reload', label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.reload')},
-                {
+                {role: 'forceReload', label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.forcereload')},
-                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.toggleprivate'),
+            ]),
-                    accelerator: utils.getStoreValue("general.keybindings.togglePrivateSession").join('+'),
-                    click: () => utils.getWindow().webContents.executeJavaScript(`app.cfg.general.privateEnabled = !app.cfg.general.privateEnabled`)
-                },
-                {type: 'separator'},
-                {
-                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.webremote'),
-                    accelerator: utils.getStoreValue("general.keybindings.webRemote").join('+'),
-                    sublabel: 'Opens in external window',
-                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('remote-pair')`)
-                },
-                {
-                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.audio'),
-                    accelerator: utils.getStoreValue("general.keybindings.audioSettings").join('+'),
-                    click: () => utils.getWindow().webContents.executeJavaScript(`app.modals.audioSettings = true`)
-                },
-                {
-                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.plugins'),
-                    accelerator: utils.getStoreValue("general.keybindings.pluginMenu").join('+'),
-                    click: () => utils.getWindow().webContents.executeJavaScript(`app.modals.pluginMenu = true`)
-                }
             ]
         },
+
         {
             label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.controls'),
             submenu: [
@@ -148,35 +172,32 @@ export default class Thumbar {
                     label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.volumedown'),
                     accelerator: 'CommandOrControl+Down',
                     click: () => utils.getWindow().webContents.executeJavaScript(`app.volumeDown()`)
-                },
+                },                
-                {
-                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.browse'),
-                    accelerator: utils.getStoreValue("general.keybindings.browse").join('+'),
-                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('browse')`)
-                },
-                {type: 'separator'},
-                {
-                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.artists'),
-                    accelerator: utils.getStoreValue("general.keybindings.artists").join('+'),
-                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('library-artists')`)
-                },
-                {
-                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.search'),
-                    accelerator: utils.getStoreValue("general.keybindings.search").join('+'),
-                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('search')`)
-                },
-                {type: 'separator'},
-                {
-                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.albums'),
-                    accelerator: utils.getStoreValue("general.keybindings.albums").join('+'),
-                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('library-albums')`)
-                },
                 {type: 'separator'},
                 {
                     label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.cast'),
                     accelerator: utils.getStoreValue("general.keybindings.castToDevices").join('+'),
                     click: () => utils.getWindow().webContents.executeJavaScript(`app.modals.castMenu = true`)
+                },
+                {
+                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.webremote'),
+                    accelerator: utils.getStoreValue("general.keybindings.webRemote").join('+'),
+                    sublabel: 'Opens in external window',
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('remote-pair')`)
+                },
+                {type: 'separator'},
+                {
+                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.audio'),
+                    accelerator: utils.getStoreValue("general.keybindings.audioSettings").join('+'),
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.modals.audioSettings = true`)
+                },
+                {type: 'separator'},
+                {
+                    label: utils.getLocale(utils.getStoreValue('general.language'), 'menubar.options.plugins'),
+                    accelerator: utils.getStoreValue("general.keybindings.pluginMenu").join('+'),
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.modals.pluginMenu = true`)
                 }
+
             ]
         },
         {

src/renderer/style.css

@@ -13192,3 +13192,18 @@ body[platform="linux"] #window-controls-container {
 #app.twopanel .collection-page .top-fab {
   bottom: 96px;
 }
+
+
+.keybinds-page .md-option-header {
+  padding: 0px 0px;
+      border-bottom: unset;
+      border-top: unset;
+      font-weight: 600;
+      background: rgba(255, 255, 255, 0);
+      font-size: 2em;
+  }
+
+.content-inner.keybinds-page {
+  top: var(--navigationBarHeight);
+  padding: 15px;
+}

src/renderer/style.less

@@ -3342,6 +3342,20 @@ body[platform='darwin'] {
   display: none;
 }
 
+.keybinds-page .md-option-header {
+  padding: 0px 0px;
+      border-bottom: unset;
+      border-top: unset;
+      font-weight: 600;
+      background: rgba(255, 255, 255, 0);
+      font-size: 2em;
+  }
+
+.content-inner.keybinds-page {
+  top: var(--navigationBarHeight);
+  padding: 15px;
+}
+
 @import url("less/macos.less");
 @import url("less/linux.less");
 @import url("less/compact.less");

src/renderer/views/app/app-content.ejs

@@ -46,6 +46,11 @@
         </template>
     </transition>
     <!-- Library - Artists-->
-
+    <!-- Keybinds -->
+    <transition name="wpfade">
+        <template v-if="page == 'keybinds-settings'">
+            <keybinds-settings></keybinds-settings>
+        </template>
+    </transition>
 
 </div>

src/renderer/views/pages/keybinds.ejs

@@ -0,0 +1,267 @@
+<script type="text/x-template" id="keybinds-settings">
+    <div class="content-inner keybinds-page">
+            <div class="md-option-header">
+                <span>{{$root.getLz('settings.option.general.keybindings')}}</span>
+            </div>                         
+        <div class="settings-option-body">
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.search')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('search')">
+                        {{app.cfg.general.keybindings.search.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.listnow')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('listnow')">
+                        {{app.cfg.general.keybindings.listnow.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.browse')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('browse')">
+                        {{app.cfg.general.keybindings.browse.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.recentAdd')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('recentAdd')">
+                        {{app.cfg.general.keybindings.recentAdd.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.songs')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('songs')">
+                        {{app.cfg.general.keybindings.songs.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.albums')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('albums')">
+                        {{app.cfg.general.keybindings.albums.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.artists')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('artists')">
+                        {{app.cfg.general.keybindings.artists.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.private')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('togglePrivateSession')">
+                        {{app.cfg.general.keybindings.togglePrivateSession.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.remote')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('webRemote')">
+                        {{app.cfg.general.keybindings.webRemote.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.audio')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('audioSettings')">
+                        {{app.cfg.general.keybindings.audioSettings.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.plugins')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('pluginMenu')">
+                        {{app.cfg.general.keybindings.pluginMenu.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.cast')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('castToDevices')">
+                        {{app.cfg.general.keybindings.castToDevices.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.settings')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('settings')">
+                        {{app.cfg.general.keybindings.settings.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('settings.description.developer')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="md-btn md-btn-small md-btn-block"
+                            @click="keyBindUpdate('openDeveloperTools')">
+                        {{app.cfg.general.keybindings.openDeveloperTools.join(' + ')}}
+                    </button>
+                </div>
+            </div>
+            <button class="md-btn md-btn-large md-btn-block" @click="keyBindReset()">
+                 {{$root.getLz('term.reset')}}
+            </button>
+        </div>
+ 
+    </div>
+</script>
+
+<script>
+    Vue.component('keybinds-settings', {
+        template: "#keybinds-settings",
+        props: [],
+        methods: {
+            keyBindUpdate: function (action) {
+                const blur = document.createElement('div');
+                blur.className = 'blur';
+                blur.style.backgroundColor = 'rgba(0,0,0,0.25)';
+                blur.style.position = 'fixed';
+                blur.style.top = '0';
+                blur.style.left = '0';
+                blur.style.width = '100%';
+                blur.style.height = '100%';
+                blur.style.zIndex = '9999';
+                blur.style.display = 'flex';
+                blur.style.alignItems = 'center';
+                blur.style.justifyContent = 'center';
+                blur.style.fontSize = '2em';
+                blur.style.color = 'white';
+                blur.innerHTML = 'Press a combination of two keys to update keybinding. Press Escape key to go back.'
+                document.body.appendChild(blur);
+
+                let keyBind = [];
+                const keyBindTimeout = setTimeout(function () {
+                    keyBind = [];
+                    document.body.removeChild(blur);
+                }, 30000);
+                const keyBindUpdate = function (e) {
+                    if (document.body.contains(blur)) {
+                        if (e.key == 'Escape') {
+                            document.body.removeChild(blur);
+                            clearTimeout(keyBindTimeout);
+                            return;
+                        } else {
+                            if (e.keyCode >= 65 && e.keyCode <= 90 && e.keyCode <= 97 && e.keyCode <= 122) {
+                                keyBind.push(e.key.toUpperCase());
+                            } else {
+                                keyBind.push(e.key);
+                            }
+                            if (keyBind.length === 2) {
+                                if (keyBind[0] !== keyBind[1]) {
+                                    app.cfg.general.keybindings[action] = keyBind
+                                    document.body.removeChild(blur);
+                                    clearTimeout(keyBindTimeout);
+                                    notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
+                                    bootbox.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
+                                        if (ok) ipcRenderer.invoke("relaunchApp")
+                                    })
+                                } else {
+                                    keyBind = [];
+                                }
+                            }
+                        }
+                    }
+                };
+                document.addEventListener('keydown', keyBindUpdate);
+            },
+            keyBindReset: function () {
+                app.cfg.general.keybindings.search = [app.platform == "darwin" ? "Command" : "Control", "F"];
+                app.cfg.general.keybindings.listnow = [app.platform == "darwin" ? "Command" : "Control", "L"];
+                app.cfg.general.keybindings.browse = [app.platform == "darwin" ? "Command" : "Control", "B"];
+                app.cfg.general.keybindings.recentAdd = [app.platform == "darwin" ? "Command" : "Control", "G"];
+                app.cfg.general.keybindings.songs = [app.platform == "darwin" ? "Command" : "Control", "J"];
+                app.cfg.general.keybindings.albums = [app.platform == "darwin" ? "Command" : "Control", "S"];
+                app.cfg.general.keybindings.artists = [app.platform == "darwin" ? "Command" : "Control", "D"];
+                app.cfg.general.keybindings.togglePrivateSession = [app.platform == "darwin" ? "Command" : "Control", "P"];
+                app.cfg.general.keybindings.webRemote = [app.platform == "darwin" ? "Command" : "Control", "W"];
+                app.cfg.general.keybindings.audioSettings = [app.platform == "darwin" ? "Option" : "Alt", "A"];
+                app.cfg.general.keybindings.pluginMenu = [app.platform == "darwin" ? "Option" : "Alt", "P"];
+                app.cfg.general.keybindings.castToDevices = [app.platform == "darwin" ? "Option" : "Alt", "C"];
+                app.cfg.general.keybindings.settings = [app.platform == "darwin" ? "Option" : "Alt", "S"];
+                app.cfg.general.keybindings.openDeveloperTools = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : "Shift", "I"];
+                notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
+                bootbox.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
+                    if (ok) ipcRenderer.invoke("relaunchApp")
+                })
+            },
+            getLanguages: function () {
+                let langs = this.$root.lzListing
+                let categories = {
+                    "main": [],
+                    "fun": [],
+                    "unsorted": []
+                }
+                // sort by category if category is undefined or empty put it in "unsorted"
+                for (let i = 0; i < langs.length; i++) {
+                    if (langs[i].category === undefined || langs[i].category === "") {
+                        categories.unsorted.push(langs[i])
+                    } else {
+                        categories[langs[i].category].push(langs[i])
+                    }
+                }
+                // return
+                return categories
+            },
+        }
+    })
+</script>

src/renderer/views/pages/settings.ejs

@@ -185,146 +185,17 @@
                                     </div>
                                 </div>
                             </b-modal>
-                        </div>
+                        </div> 
                         <div class="md-option-line">
                             <div class="md-option-segment">
                                 {{$root.getLz('settings.option.general.keybindings')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn" v-b-modal.modal-2>
+                                <button class="md-btn" @click="app.appRoute('keybinds-settings')" >
                                     {{$root.getLz('settings.option.general.keybindings.open')}}
                                 </button>
                             </div>
-                            <b-modal id="modal-2" centered size="lg"
+                        </div>                      
-                                     :title="$root.getLz('settings.option.general.keybindings')" ok-only>
-                                <div class="settings-option-body">
-                                    <div class="md-option-line">
-                                        <div class="md-option-segment">
-                                            {{$root.getLz('settings.description.search')}}
-                                        </div>
-                                        <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block"
-                                                    @click="keyBindUpdate('search')">
-                                                {{app.cfg.general.keybindings.search.join(' + ')}}
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="md-option-line">
-                                        <div class="md-option-segment">
-                                            {{$root.getLz('settings.description.albums')}}
-                                        </div>
-                                        <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block"
-                                                    @click="keyBindUpdate('albums')">
-                                                {{app.cfg.general.keybindings.albums.join(' + ')}}
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="md-option-line">
-                                        <div class="md-option-segment">
-                                            {{$root.getLz('settings.description.artists')}}
-                                        </div>
-                                        <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block"
-                                                    @click="keyBindUpdate('artists')">
-                                                {{app.cfg.general.keybindings.artists.join(' + ')}}
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="md-option-line">
-                                        <div class="md-option-segment">
-                                            {{$root.getLz('settings.description.browse')}}
-                                        </div>
-                                        <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block"
-                                                    @click="keyBindUpdate('browse')">
-                                                {{app.cfg.general.keybindings.browse.join(' + ')}}
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="md-option-line">
-                                        <div class="md-option-segment">
-                                            {{$root.getLz('settings.description.private')}}
-                                        </div>
-                                        <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block"
-                                                    @click="keyBindUpdate('togglePrivateSession')">
-                                                {{app.cfg.general.keybindings.togglePrivateSession.join(' + ')}}
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="md-option-line">
-                                        <div class="md-option-segment">
-                                            {{$root.getLz('settings.description.remote')}}
-                                        </div>
-                                        <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block"
-                                                    @click="keyBindUpdate('webRemote')">
-                                                {{app.cfg.general.keybindings.webRemote.join(' + ')}}
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="md-option-line">
-                                        <div class="md-option-segment">
-                                            {{$root.getLz('settings.description.audio')}}
-                                        </div>
-                                        <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block"
-                                                    @click="keyBindUpdate('audioSettings')">
-                                                {{app.cfg.general.keybindings.audioSettings.join(' + ')}}
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="md-option-line">
-                                        <div class="md-option-segment">
-                                            {{$root.getLz('settings.description.plugins')}}
-                                        </div>
-                                        <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block"
-                                                    @click="keyBindUpdate('pluginMenu')">
-                                                {{app.cfg.general.keybindings.pluginMenu.join(' + ')}}
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="md-option-line">
-                                        <div class="md-option-segment">
-                                            {{$root.getLz('settings.description.cast')}}
-                                        </div>
-                                        <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block"
-                                                    @click="keyBindUpdate('castToDevices')">
-                                                {{app.cfg.general.keybindings.castToDevices.join(' + ')}}
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="md-option-line">
-                                        <div class="md-option-segment">
-                                            {{$root.getLz('settings.description.settings')}}
-                                        </div>
-                                        <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block"
-                                                    @click="keyBindUpdate('settings')">
-                                                {{app.cfg.general.keybindings.settings.join(' + ')}}
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="md-option-line">
-                                        <div class="md-option-segment">
-                                            {{$root.getLz('settings.description.developer')}}
-                                        </div>
-                                        <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block"
-                                                    @click="keyBindUpdate('openDeveloperTools')">
-                                                {{app.cfg.general.keybindings.openDeveloperTools.join(' + ')}}
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <button class="md-btn md-btn-large md-btn-block" @click="keyBindReset()">
-                                        {{$root.getLz('term.reset')}}
-                                    </button>
-                                </div>
-                            </b-modal>
-                        </div>
                     </div>
                 </div>
             </b-tab>
@@ -1517,9 +1388,11 @@
             },
             keyBindReset: function () {
                 app.cfg.general.keybindings.search = [app.platform == "darwin" ? "Command" : "Control", "S"];
+                app.cfg.general.keybindings.listennow = [app.platform == "darwin" ? "Command" : "Control", "L"];
+                app.cfg.general.keybindings.browse = [app.platform == "darwin" ? "Command" : "Control", "B"];
+                app.cfg.general.keybindings.recentAdded = [app.platform == "darwin" ? "Command" : "Control", "G"];
                 app.cfg.general.keybindings.albums = [app.platform == "darwin" ? "Command" : "Control", "F"];
                 app.cfg.general.keybindings.artists = [app.platform == "darwin" ? "Command" : "Control", "D"];
-                app.cfg.general.keybindings.browse = [app.platform == "darwin" ? "Command" : "Control", "B"];
                 app.cfg.general.keybindings.togglePrivateSession = [app.platform == "darwin" ? "Command" : "Control", "P"];
                 app.cfg.general.keybindings.webRemote = [app.platform == "darwin" ? "Command" : "Control", "W"];
                 app.cfg.general.keybindings.audioSettings = [app.platform == "darwin" ? "Option" : "Alt", "A"];