From 4e3fb128cd5b81580cd8ab14055849cdc67a30e4 Mon Sep 17 00:00:00 2001
From: Gabriel Davila <56521591+mefsaal@users.noreply.github.com>
Date: Wed, 29 Jun 2022 20:39:09 -0300
Subject: [PATCH] keybinds New Settings Window Format (#1215)

---
 src/renderer/less/pages.less                  |   4 +
 src/renderer/main/vueapp.js                   |   3 +
 src/renderer/views/components/app-content.ejs |   6 -
 .../views/components/settings-window.ejs      | 298 +++++++++++++++++-
 src/renderer/views/pages/keybinds.ejs         |   8 +-
 5 files changed, 308 insertions(+), 11 deletions(-)

diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index 54e97842..0f9e8418 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -2074,4 +2074,8 @@
       border-left: 1px solid var(--borderColor);
     }
   }
+}
+
+#hid___BV_tab_button__ {
+  display: none;
 }
\ No newline at end of file
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index bf4a67bd..3b1ef645 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -4424,6 +4424,9 @@ const app = new Vue({
                 case "advanced":
                     this.$store.state.pageState.settings.currentTabIndex = 6
                     break;
+                case "keybindings" :
+                    this.$store.state.pageState.settings.currentTabIndex = 7
+                    break;
             }
             app.modals.settings = true
         },
diff --git a/src/renderer/views/components/app-content.ejs b/src/renderer/views/components/app-content.ejs
index 611a67f5..481904bf 100644
--- a/src/renderer/views/components/app-content.ejs
+++ b/src/renderer/views/components/app-content.ejs
@@ -34,12 +34,6 @@
             </template>
         </transition>
         <!-- Library - Artists-->
-        <!-- Keybinds -->
-        <transition name="wpfade">
-            <template v-if="$root.page == 'keybinds-settings'">
-                <keybinds-settings></keybinds-settings>
-            </template>
-        </transition>
     </div>
 </script>
 
diff --git a/src/renderer/views/components/settings-window.ejs b/src/renderer/views/components/settings-window.ejs
index b028c6e5..d1614bdc 100644
--- a/src/renderer/views/components/settings-window.ejs
+++ b/src/renderer/views/components/settings-window.ejs
@@ -203,7 +203,7 @@
                                     {{$root.getLz('settings.option.general.keybindings')}}
                                 </div>
                                 <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" @click="app.appRoute('keybinds-settings')">
+                                    <button class="md-btn" @click="app.$store.state.pageState.settings.currentTabIndex = 7">
                                         {{$root.getLz('action.open')}}
                                     </button>
                                 </div>
@@ -1326,6 +1326,222 @@
                     </div>
                 </div>
             </b-tab>
+            <!--keybinds Settings -->
+            <b-tab id="hid">
+                <div class="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-header-sub">
+                            <span>{{$root.getLz('settings.option.general.keybindings.library')}}</span>
+                        </div>
+                        <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-header-sub">
+                            <span>{{$root.getLz('settings.option.general.keybindings.session')}}</span>
+                        </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-header-sub">
+                            <span>{{$root.getLz('settings.option.general.keybindings.control')}}</span>
+                        </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-header-sub" v-if="app.platform !== 'darwin'">
+                            <span>{{$root.getLz('settings.option.general.keybindings.interface')}}</span>
+                        </div>
+                        <div class="md-option-line" v-if="app.platform !== 'darwin'">
+                            <div class="md-option-segment">
+                                {{$root.getLz('term.zoomin')}}
+                            </div>
+                            <div class="md-option-segment md-option-segment_auto">
+                                <button class="md-btn md-btn-small md-btn-block"
+                                        @click="keyBindUpdate('zoomn')">
+                                    {{app.cfg.general.keybindings.zoomn.join(' + ')}}
+                                </button>
+                            </div>
+                        </div>
+                        <div class="md-option-line" v-if="app.platform !== 'darwin'">
+                            <div class="md-option-segment">
+                                {{$root.getLz('term.zoomout')}}
+                            </div>
+                            <div class="md-option-segment md-option-segment_auto">
+                                <button class="md-btn md-btn-small md-btn-block"
+                                        @click="keyBindUpdate('zoomt')">
+                                    {{app.cfg.general.keybindings.zoomt.join(' + ')}}
+                                </button>
+                            </div>
+                        </div>
+                        <div class="md-option-line" v-if="app.platform !== 'darwin'">
+                            <div class="md-option-segment">
+                                {{$root.getLz('term.zoomreset')}}
+                            </div>
+                            <div class="md-option-segment md-option-segment_auto">
+                                <button class="md-btn md-btn-small md-btn-block"
+                                        @click="keyBindUpdate('zoomrst')">
+                                    {{app.cfg.general.keybindings.zoomrst.join(' + ')}}
+                                </button>
+                            </div>
+                        </div>
+                        <div class="md-option-header-sub">
+                            <span>{{$root.getLz('settings.option.general.keybindings.advanced')}}</span>
+                        </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>
+            </b-tab>
+            <!--keybinds-settings -->
             <!-- Connect Settings -->
             <!-- Not Prod Ready
             <b-tab :title="$root.getLz('settings.header.connect')">
@@ -1585,7 +1801,85 @@
 	        submitToken() {
                 const token = document.getElementById('lfmToken').value;
                 ipcRenderer.send('lastfm:auth', token);
-            }
+            },
+            /* keybindings */
+            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 = '20';
+                blur.style.display = 'flex';
+                blur.style.alignItems = 'center';
+                blur.style.justifyContent = 'center';
+                blur.style.fontSize = '2em';
+                blur.style.color = 'white';
+                blur.innerHTML = `<center>${app.getLz('settings.option.general.keybindings.pressCombination')}<br />${app.getLz('settings.option.general.keybindings.pressEscape')}</center>`
+                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'));
+                                    app.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", "A"];
+                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",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "W"];
+                app.cfg.general.keybindings.audioSettings = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "A"];
+                app.cfg.general.keybindings.pluginMenu = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "P"];
+                app.cfg.general.keybindings.castToDevices = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : (app.platform == "linux" ? "Shift" : "Alt"), "C"];
+                app.cfg.general.keybindings.settings = [app.platform == "darwin" ? "Command" : "Control", ","];
+                app.cfg.general.keybindings.zoomn = [app.platform == "darwin" ? "Command" : "Control", "numadd"];
+                app.cfg.general.keybindings.zoomt = [app.platform == "darwin" ? "Command" : "Control", "numsub"];
+                app.cfg.general.keybindings.zoomrst = [app.platform == "darwin" ? "Command" : "Control", "num0"];
+                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'));
+                app.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
+                    if (ok) ipcRenderer.invoke("relaunchApp")
+                })
+            }            
+            /* keybindings */
         }
     })
 </script>
\ No newline at end of file
diff --git a/src/renderer/views/pages/keybinds.ejs b/src/renderer/views/pages/keybinds.ejs
index a8f685de..f5c73f44 100644
--- a/src/renderer/views/pages/keybinds.ejs
+++ b/src/renderer/views/pages/keybinds.ejs
@@ -1,5 +1,7 @@
-<script type="text/x-template" id="keybinds-settings">
-    <div class="content-inner keybinds-page">
+//Not used for Now
+
+<!-- <script type="text/x-template" id="keybinds-settings">
+    <div class="keybinds-page">
             <div class="md-option-header">
                 <span>{{$root.getLz('settings.option.general.keybindings')}}</span>
             </div>
@@ -320,4 +322,4 @@
             },
         }
     })
-</script>
\ No newline at end of file
+</script> -->
\ No newline at end of file