323 lines
No EOL
16 KiB
Text
323 lines
No EOL
16 KiB
Text
<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>
|
|
<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>
|
|
</script>
|
|
|
|
<script>
|
|
Vue.component('keybinds-settings', {
|
|
template: "#keybinds-settings",
|
|
props: [],
|
|
data: function () {
|
|
return {
|
|
app: this.$root
|
|
}
|
|
},
|
|
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 = `<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")
|
|
})
|
|
},
|
|
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> |