Merge pull request #938 from Monochromish/develop
Added update keybind feature.
This commit is contained in:
Amaru8
GitHub
commit
c505b2d9bd
6 changed files with 390 additions and 248 deletions
|
|
@ -70,7 +70,7 @@
|
|||
{{$root.getLz('settings.option.general.customizeSidebar.customize')}}
|
||||
</button>
|
||||
</div>
|
||||
<b-modal id="modal-1" centered size="lg" v-title="$root.getLz('settings.option.general.customizeSidebar')">
|
||||
<b-modal id="modal-1" centered size="lg" :title="$root.getLz('settings.option.general.customizeSidebar')">
|
||||
<div class="settings-option-body">
|
||||
<div class="md-option-line">
|
||||
<div class="md-option-segment">
|
||||
|
|
@ -132,96 +132,121 @@
|
|||
{{$root.getLz('settings.option.general.keybindings.open')}}
|
||||
</button>
|
||||
</div>
|
||||
<b-modal id="modal-2" centered size="lg" v-title="$root.getLz('settings.option.general.keybindings')" ok-only>
|
||||
<b-modal id="modal-2" centered size="lg" :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 keybindings-border">
|
||||
<p class="keybinding-text">{{ getCommandOrControl() }} + F</p>
|
||||
</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.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">
|
||||
<p class="keybinding-text">{{ getCommandOrControl() }} + A</p>
|
||||
</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.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">
|
||||
<p class="keybinding-text">{{ getCommandOrControl() }} + D</p>
|
||||
</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.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">
|
||||
<p class="keybinding-text">{{ getCommandOrControl() }} + B</p>
|
||||
</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.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">
|
||||
<p class="keybinding-text">{{ getCommandOrControl() }} + P</p>
|
||||
<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.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">
|
||||
<p class="keybinding-text">{{ getCommandOrControl() }} + Shift + W</p>
|
||||
<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.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">
|
||||
<p class="keybinding-text">{{ getCommandOrControl() }} + Shift + A</p>
|
||||
<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.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">
|
||||
<p class="keybinding-text">{{ getCommandOrControl() }} + Shift + P</p>
|
||||
<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.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">
|
||||
<p class="keybinding-text">{{ getCommandOrControl() }} + Shift + C</p>
|
||||
<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.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">
|
||||
<p class="keybinding-text">{{ getCommandOrControl() }} + S</p>
|
||||
</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.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">
|
||||
<p class="keybinding-text">{{ getCommandOrControl() }} + {{ getOptionOrShift() }} + I</p>
|
||||
<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.keybind.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>
|
||||
|
|
@ -1302,12 +1327,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") {
|
||||
|
|
@ -1321,6 +1340,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")
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue