Added update keybind feature.

src/i18n/en_US.json

@@ -280,6 +280,8 @@
   "settings.option.general.customizeSidebar": "Customize Sidebar Items",
   "settings.option.general.customizeSidebar.customize": "Customize",
   "settings.option.general.keybindings": "Keybindings",
+  "settings.notyf.general.keybindings.update.success": "Keybind updated successfully",
+  "settings.prompt.general.keybindings.update.success": "Keybind updated successfully. Press OK to relaunch Cider",
   "settings.option.general.keybindings.open": "Open",
   "settings.description.search": "Search",
   "settings.description.albums": "Library Albums",

src/i18n/source/en_US.json

@@ -280,6 +280,8 @@
   "settings.option.general.customizeSidebar": "Customize Sidebar Items",
   "settings.option.general.customizeSidebar.customize": "Customize",
   "settings.option.general.keybindings": "Keybindings",
+  "settings.notyf.general.keybindings.update.success": "Keybind updated successfully",
+  "settings.prompt.general.keybindings.update.success": "Keybind updated successfully. Press OK to relaunch Cider",
   "settings.option.general.keybindings.open": "Open",
   "settings.description.search": "Search",
   "settings.description.albums": "Library Albums",

src/main/base/store.ts

@@ -44,6 +44,53 @@ export class Store {
             "onStartup": {
                 "enabled": false,
                 "hidden": false,
+            },
+            "keybind": {
+                "search": [
+                    process.platform == "darwin" ? "Command" : "Control",
+                    "S"
+                ],
+                "albums": [
+                    process.platform == "darwin" ? "Command" : "Control",
+                    "F"
+                ],
+                "artists": [
+                    process.platform == "darwin" ? "Command" : "Control",
+                    "D"
+                ],
+                "browse": [
+                    process.platform == "darwin" ? "Command" : "Control",
+                    "B"
+                ],
+                "togglePrivateSession": [
+                    process.platform == "darwin" ? "Command" : "Control",
+                    "P"
+                ],
+                "webRemote": [
+                    process.platform == "darwin" ? "Command" : "Control",
+                    "W"
+                ],
+                "audioSettings": [
+                    process.platform == "darwin" ? "Option" : "Shift",
+                    "A"
+                ],
+                "pluginMenu": [
+                    process.platform == "darwin" ? "Option" : "Shift",
+                    "P"
+                ],
+                "castToDevices": [
+                    process.platform == "darwin" ? "Option" : "Shift",
+                    "C"
+                ],
+                "settings": [
+                    process.platform == "darwin" ? "Option" : "Shift",
+                    "S"
+                ],
+                "openDeveloperTools": [
+                    process.platform == "darwin" ? "Command" : "Control",
+                    process.platform == "darwin" ? "Option" : "Shift",
+                    "I"
+                ]
             }
         },
         "home": {

src/main/plugins/menubar.ts

@@ -35,7 +35,20 @@ export default class Thumbar {
      * @private
      */
     private isMac: boolean = process.platform === 'darwin';
-    private _menuTemplate: any = [
+    private _menuTemplate: any;
+
+    /*******************************************************************************************
+     * Public Methods
+     * ****************************************************************************************/
+
+    /**
+     * Runs on plugin load (Currently run on application start)
+     */
+    constructor(utils: { getApp: () => any; getStore: () => any; getWindow: () => any; }) {
+        this._app = utils.getApp();
+        this._store = utils.getStore();
+
+        this._menuTemplate = [
             {
                 label: app.getName(),
                 submenu: [
@@ -46,7 +59,7 @@ export default class Thumbar {
                     {type: 'separator'},
                     {
                         label: 'Settings',
-                    accelerator: 'CommandOrControl+,',
+                        accelerator: this._store.general.keybind.settings.join('+'),
                         click: () => this._win.webContents.executeJavaScript(`app.appRoute('settings')`)
                     },
                     {type: 'separator'},
@@ -104,27 +117,26 @@ export default class Thumbar {
                     {type: 'separator'},
                     {
                         label: 'Toggle Private Session',
-                    accelerator: 'CommandOrControl+P',
+                        accelerator: this._store.general.keybind.togglePrivateSession.join('+'),
                         click: () => this._win.webContents.executeJavaScript(`app.cfg.general.privateEnabled = !app.cfg.general.privateEnabled`)
                     },
                     {type: 'separator'},
                     {
                         label: 'Web Remote',
-                    accelerator: 'CommandOrControl+Shift+W',
+                        accelerator: this._store.general.keybind.webRemote.join('+'),
                         sublabel: 'Opens in external window',
                         click: () => this._win.webContents.executeJavaScript(`app.appRoute('remote-pair')`)
                     },
                     {
                         label: 'Audio Settings',
-                    accelerator: 'CommandOrControl+Shift+A',
+                        accelerator: this._store.general.keybind.audioSettings.join('+'),
                         click: () => this._win.webContents.executeJavaScript(`app.modals.audioSettings = true`)
                     },
                     {
                         label: 'Plug-in Menu',
-                    accelerator: 'CommandOrControl+Shift+P',
+                        accelerator: this._store.general.keybind.pluginMenu.join('+'),
                         click: () => this._win.webContents.executeJavaScript(`app.modals.pluginMenu = true`)
                     }
-
                 ]
             },
             {
@@ -156,10 +168,32 @@ export default class Thumbar {
                         accelerator: 'CommandOrControl+Down',
                         click: () => this._win.webContents.executeJavaScript(`app.volumeDown()`)
                     },
+                    {
+                        label: 'Browse',
+                        accelerator: this._store.general.keybind.browse.join('+'),
+                        click: () => this._win.webContents.executeJavaScript(`app.appRoute('browse')`)
+                    },
+                    {type: 'separator'},
+                    {
+                        label: 'Artists',
+                        accelerator: this._store.general.keybind.artists.join('+'),
+                        click: () => this._win.webContents.executeJavaScript(`app.appRoute('library-artists')`)
+                    },
+                    {
+                        label: 'Search',
+                        accelerator: this._store.general.keybind.search.join('+'),
+                        click: () => this._win.webContents.executeJavaScript(`app.appRoute('search')`)
+                    },
+                    {type: 'separator'},
+                    {
+                        label: 'Album',
+                        accelerator: this._store.general.keybind.albums.join('+'),
+                        click: () => this._win.webContents.executeJavaScript(`app.appRoute('library-albums')`)
+                    },
                     {type: 'separator'},
                     {
                         label: 'Cast To Devices',
-                    accelerator: 'CommandOrControl+Shift+C',
+                        accelerator: this._store.general.keybind.castToDevices.join('+'),
                         click: () => this._win.webContents.executeJavaScript(`app.modals.castMenu = true`)
                     }
                 ]
@@ -215,7 +249,7 @@ export default class Thumbar {
                     {type: 'separator'},
                     {
                         label: 'Toggle Developer Tools',
-                    accelerator: 'Option+CommandOrControl+Shift+I',
+                        accelerator: this._store.general.keybind.openDeveloperTools.join('+'),
                         click: () => this._win.webContents.openDevTools()
                     },
                     {
@@ -224,18 +258,8 @@ export default class Thumbar {
                     }
                 ]
             }
-    ]
+        ];
 
-    /*******************************************************************************************
-     * Public Methods
-     * ****************************************************************************************/
-
-    /**
-     * Runs on plugin load (Currently run on application start)
-     */
-    constructor(utils: { getApp: () => any; getStore: () => any; }) {
-        this._app = utils.getApp();
-        this._store = utils.getStore();
         console.debug(`[Plugin][${this.name}] Loading Complete.`);
     }
 

src/renderer/main/events.js

@@ -18,12 +18,6 @@ const Events = {
         });
 
         document.addEventListener('keydown', async function (event) {
-            // CTRL + F
-            if (event.keyCode === 70 && event.ctrlKey) {
-                app.appRoute('search')
-                app.$refs.searchInput.focus()
-                app.$refs.searchInput.select()
-            }
             // CTRL + R
             if (event.keyCode === 82 && event.ctrlKey) {
                 event.preventDefault()
@@ -38,22 +32,6 @@ const Events = {
                 event.preventDefault()
                 window.location.reload()
             }
-            // CTRL + S
-            if (event.keyCode === 83 && event.ctrlKey) {
-                app.appRoute("settings")
-            }
-            // CTRL + A
-            if (event.keyCode === 65 && event.ctrlKey) {    
-                app.appRoute("library-albums")
-            }
-            // CTRL + B
-            if (event.keyCode === 66 && event.ctrlKey) {
-                app.appRoute("browse")
-            }
-            // CTRL + D
-            if (event.keyCode === 68 && event.ctrlKey) {
-                app.appRoute("library-artists")
-            }            
             // CTRL + E
             if (event.keyCode === 69 && event.ctrlKey) {
                 app.invokeDrawer('queue')

src/renderer/views/pages/settings.ejs

@@ -138,90 +138,115 @@
                                         <div class="md-option-segment">
                                             {{$root.getLz('settings.description.search')}}
                                         </div>        
-                                        <div class="md-option-segment md-option-segment_auto keybindings-border">
+                                        <div class="md-option-segment md-option-segment_auto">
-                                            <p class="keybinding-text">{{ getCommandOrControl() }} + F</p>
+                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('search')">
+                                                {{app.cfg.general.keybind.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 keybindings-border">
+                                        <div class="md-option-segment md-option-segment_auto">
-                                            <p class="keybinding-text">{{ getCommandOrControl() }} + A</p>
+                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('albums')">
+                                                {{app.cfg.general.keybind.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 keybindings-border">
+                                        <div class="md-option-segment md-option-segment_auto">
-                                            <p class="keybinding-text">{{ getCommandOrControl() }} + D</p>
+                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('artists')">
+                                                {{app.cfg.general.keybind.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 keybindings-border">
+                                        <div class="md-option-segment md-option-segment_auto">
-                                            <p class="keybinding-text">{{ getCommandOrControl() }} + B</p>
+                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('browse')">
+                                                {{app.cfg.general.keybind.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 keybindings-border">
+                                        <div class="md-option-segment md-option-segment_auto">
-                                            <p class="keybinding-text">{{ getCommandOrControl() }} + P</p>
+                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('togglePrivateSession')">
+                                                {{app.cfg.general.keybind.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 keybindings-border">
+                                        <div class="md-option-segment md-option-segment_auto">
-                                            <p class="keybinding-text">{{ getCommandOrControl() }} + Shift + W</p>
+                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('webRemote')">
+                                                {{app.cfg.general.keybind.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 keybindings-border">
+                                        <div class="md-option-segment md-option-segment_auto">
-                                            <p class="keybinding-text">{{ getCommandOrControl() }} + Shift + A</p>
+                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('audioSettings')">
+                                                {{app.cfg.general.keybind.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 keybindings-border">
+                                        <div class="md-option-segment md-option-segment_auto">
-                                            <p class="keybinding-text">{{ getCommandOrControl() }} + Shift + P</p>
+                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('pluginMenu')">
+                                                {{app.cfg.general.keybind.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 keybindings-border">
+                                        <div class="md-option-segment md-option-segment_auto">
-                                            <p class="keybinding-text">{{ getCommandOrControl() }} + Shift + C</p>
+                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('castToDevices')">
+                                                {{app.cfg.general.keybind.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 keybindings-border">
+                                        <div class="md-option-segment md-option-segment_auto">
-                                            <p class="keybinding-text">{{ getCommandOrControl() }} + S</p>
+                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('settings')">
+                                                {{app.cfg.general.keybind.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 keybindings-border">
+                                        <div class="md-option-segment md-option-segment_auto">
-                                            <p class="keybinding-text">{{ getCommandOrControl() }} + {{ getOptionOrShift() }} + I</p>
+                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('openDeveloperTools')">
+                                                {{app.cfg.general.keybind.openDeveloperTools.join(' + ')}}
+                                            </button>
                                         </div>
                                     </div>
+                                    <button class="md-btn md-btn-large md-btn-block" @click="keyBindReset()">
+                                        Reset
+                                    </button>
                                 </div>
                             </b-modal>
                         </div>
@@ -1294,12 +1319,6 @@
             }
         },
         methods: {
-            getCommandOrControl() {
-                return app.platform == "darwin" ? "⌘" : "Ctrl";
-            },
-            getOptionOrShift() {
-                return app.platform == "darwin" ? "⌥" : "Shift";
-            },
             windowBgStyleChange() {
                 this.$root.getNowPlayingArtworkBG(undefined, true)
                 if (this.$root.cfg.visual.window_background_style == "mica") {
@@ -1313,6 +1332,76 @@
                     }
                 })
             },
+            keyBindUpdate: function (action) {
+                var 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 keybind. Press Escape key to go back.'
+                document.body.appendChild(blur);
+
+                var keyBind = [];
+                var keyBindTimeout = setTimeout(function () {
+                    keyBind = [];
+                    document.body.removeChild(blur);
+                }, 30000);
+                var 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.keybind[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 = [];
+                            }
+                        }
+                    }
+                } else return;
+            }
+            document.addEventListener('keydown', keyBindUpdate);
+            },
+            keyBindReset: function () {
+                app.cfg.general.keybind.search = [app.platform == "darwin" ? "Command" : "Control","S"];
+                app.cfg.general.keybind.albums = [app.platform == "darwin" ? "Command" : "Control","F"];
+                app.cfg.general.keybind.artists = [app.platform == "darwin" ? "Command" : "Control","D"];
+                app.cfg.general.keybind.browse = [app.platform == "darwin" ? "Command" : "Control","B"];
+                app.cfg.general.keybind.togglePrivateSession = [app.platform == "darwin" ? "Command" : "Control","P"];
+                app.cfg.general.keybind.webRemote = [app.platform == "darwin" ? "Command" : "Control","W"];
+                app.cfg.general.keybind.audioSettings = [app.platform == "darwin" ? "Option" : "Shift","A"];
+                app.cfg.general.keybind.pluginMenu = [app.platform == "darwin" ? "Option" : "Shift","P"];
+                app.cfg.general.keybind.castToDevices = [app.platform == "darwin" ? "Option" : "Shift","C"];
+                app.cfg.general.keybind.settings = [app.platform == "darwin" ? "Option" : "Shift","S"];
+                app.cfg.general.keybind.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")
+                })
+            },
             gitHubExplore() {
                 app.appRoute("themes-github")
             },