settings tabs now remember their previous state

This commit is contained in:
booploops 2022-04-29 18:14:44 -07:00
parent 988282845f
commit 4dc96056a2

View file

@ -1,6 +1,6 @@
<script type="text/x-template" id="cider-settings"> <script type="text/x-template" id="cider-settings">
<div class="content-inner settings-page"> <div class="content-inner settings-page">
<b-tabs pills fill content-class="mt-3"> <b-tabs pills fill content-class="mt-3" v-model="tabIndex">
<b-tab :title="$root.getLz('settings.header.general')" active> <b-tab :title="$root.getLz('settings.header.general')" active>
<div class="md-option-container"> <div class="md-option-container">
<!-- General Settings --> <!-- General Settings -->
@ -1410,10 +1410,10 @@
</script> </script>
<script> <script>
// do not translate // do not translate
Vue.component('stylestack-editor', { Vue.component('stylestack-editor', {
/*html*/ /*html*/
template: ` template: `
<div class="stylestack-editor"> <div class="stylestack-editor">
<draggable class="list-group" v-model="$root.cfg.visual.styles" @end="$root.reloadStyles()"> <draggable class="list-group" v-model="$root.cfg.visual.styles" @end="$root.reloadStyles()">
<b-list-group-item variant="dark" v-for="theme in $root.cfg.visual.styles" :key="theme"> <b-list-group-item variant="dark" v-for="theme in $root.cfg.visual.styles" :key="theme">
@ -1439,290 +1439,308 @@
</draggable> </draggable>
</div> </div>
`, `,
props: { props: {
themes: { themes: {
type: Array, type: Array,
default: [] default: []
} }
}, },
data: function () { data: function () {
return { return {
selected: null, selected: null,
newTheme: null, newTheme: null,
themeList: [] themeList: []
} }
}, },
mounted() { mounted() {
this.themeList = [...this.themes] this.themeList = [...this.themes]
this.themeList.unshift({ this.themeList.unshift({
name: "Acrylic Grain", name: "Acrylic Grain",
file: "grain.less" file: "grain.less"
}) })
this.themeList.unshift({ this.themeList.unshift({
name: "Sweetener", name: "Sweetener",
file: "sweetener.less" file: "sweetener.less"
}) })
this.themeList.unshift({ this.themeList.unshift({
name: "Reduce Visuals", name: "Reduce Visuals",
file: "reduce_visuals.less" file: "reduce_visuals.less"
}) })
this.themeList.unshift({ this.themeList.unshift({
name: "Inline Drawer", name: "Inline Drawer",
file: "inline_drawer.less" file: "inline_drawer.less"
}) })
}, },
methods: { methods: {
gitHubExplore() { gitHubExplore() {
this.$root.appRoute("themes-github") this.$root.appRoute("themes-github")
}, },
getThemeName(filename) { getThemeName(filename) {
try { try {
return this.themeList.find(theme => theme.file === filename).name; return this.themeList.find(theme => theme.file === filename).name;
} catch (e) { } catch (e) {
return filename; return filename;
} }
}, },
moveUp() { moveUp() {
const styles = this.$root.cfg.visual.styles const styles = this.$root.cfg.visual.styles
const index = styles.indexOf(this.selected) const index = styles.indexOf(this.selected)
if (index > 0) { if (index > 0) {
styles.splice(index, 1) styles.splice(index, 1)
styles.splice(index - 1, 0, this.selected) styles.splice(index - 1, 0, this.selected)
} }
this.$root.reloadStyles() this.$root.reloadStyles()
}, },
moveDown() { moveDown() {
const styles = this.$root.cfg.visual.styles const styles = this.$root.cfg.visual.styles
const index = styles.indexOf(this.selected) const index = styles.indexOf(this.selected)
if (index < styles.length - 1) { if (index < styles.length - 1) {
styles.splice(index, 1) styles.splice(index, 1)
styles.splice(index + 1, 0, this.selected) styles.splice(index + 1, 0, this.selected)
} }
this.$root.reloadStyles() this.$root.reloadStyles()
}, },
remove(style) { remove(style) {
const styles = this.$root.cfg.visual.styles const styles = this.$root.cfg.visual.styles
const index = styles.indexOf(style) const index = styles.indexOf(style)
styles.splice(index, 1) styles.splice(index, 1)
this.$root.reloadStyles() this.$root.reloadStyles()
}, },
addStyle(style) { addStyle(style) {
const styles = this.$root.cfg.visual.styles const styles = this.$root.cfg.visual.styles
styles.push(style) styles.push(style)
this.$root.reloadStyles() this.$root.reloadStyles()
} }
} }
}) })
</script> </script>
<script> <script>
Vue.component('cider-settings', { Vue.component('cider-settings', {
template: "#cider-settings", template: "#cider-settings",
props: [], props: [],
data: function () { data: function () {
return { return {
app: this.$root, app: this.$root,
themes: ipcRenderer.sendSync("get-themes") themes: ipcRenderer.sendSync("get-themes"),
} tabIndex: 0,
}, canChangeHash: false
mounted: function () { }
if (app.cfg.lastfm.enabled) { }, watch: {
const element = document.getElementById('lfmConnect'); tabIndex: function (val) {
if (element) { if (this.canChangeHash) {
element.innerHTML = `Disconnect\n<p style="font-size: 8px"><i>(Authed: ${app.cfg.lastfm.auth_token})</i></p>`; window.location.hash = `#settings/${val}`
element.onclick = app.LastFMDeauthorize; }
} }
} },
}, mounted: function () {
methods: { this.$nextTick(function () {
windowBgStyleChange() { if (window.location.hash.split("/").length > 1) {
this.$root.getNowPlayingArtworkBG(undefined, true) this.tabIndex = parseInt(window.location.hash.split("/")[1])
if (this.$root.cfg.visual.window_background_style === "mica") { console.debug("tabIndex", this.tabIndex)
this.$root.spawnMica() this.canChangeHash = true
} }else{
}, this.canChangeHash = true
reinstallWidevineCDM() { }
bootbox.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => { })
if (ok) {
ipcRenderer.invoke("reinstall-widevine-cdm");
}
})
},
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 = []; if (app.cfg.lastfm.enabled) {
const keyBindTimeout = setTimeout(function () { const element = document.getElementById('lfmConnect');
keyBind = []; if (element) {
document.body.removeChild(blur); element.innerHTML = `Disconnect\n<p style="font-size: 8px"><i>(Authed: ${app.cfg.lastfm.auth_token})</i></p>`;
}, 30000); element.onclick = app.LastFMDeauthorize;
const keyBindUpdate = function (e) { }
if (document.body.contains(blur)) { }
if (e.key == 'Escape') { },
document.body.removeChild(blur); methods: {
clearTimeout(keyBindTimeout); windowBgStyleChange() {
return; this.$root.getNowPlayingArtworkBG(undefined, true)
} else { if (this.$root.cfg.visual.window_background_style === "mica") {
if (e.keyCode >= 65 && e.keyCode <= 90 && e.keyCode <= 97 && e.keyCode <= 122) { this.$root.spawnMica()
keyBind.push(e.key.toUpperCase()); }
} else { },
keyBind.push(e.key); reinstallWidevineCDM() {
} bootbox.confirm(app.getLz("settings.option.experimental.reinstallwidevine.confirm"), (ok) => {
if (keyBind.length === 2) { if (ok) {
if (keyBind[0] !== keyBind[1]) { ipcRenderer.invoke("reinstall-widevine-cdm");
app.cfg.general.keybindings[action] = keyBind }
document.body.removeChild(blur); })
clearTimeout(keyBindTimeout); },
notyf.success(app.getLz('settings.notyf.general.keybindings.update.success')); keyBindUpdate: function (action) {
bootbox.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => { const blur = document.createElement('div');
if (ok) ipcRenderer.invoke("relaunchApp") blur.className = 'blur';
}) blur.style.backgroundColor = 'rgba(0,0,0,0.25)';
} else { blur.style.position = 'fixed';
keyBind = []; blur.style.top = '0';
} blur.style.left = '0';
} blur.style.width = '100%';
} blur.style.height = '100%';
} blur.style.zIndex = '9999';
}; blur.style.display = 'flex';
document.addEventListener('keydown', keyBindUpdate); blur.style.alignItems = 'center';
}, blur.style.justifyContent = 'center';
keyBindReset: function () { blur.style.fontSize = '2em';
app.cfg.general.keybindings.search = [app.platform == "darwin" ? "Command" : "Control", "S"]; blur.style.color = 'white';
app.cfg.general.keybindings.albums = [app.platform == "darwin" ? "Command" : "Control", "F"]; blur.innerHTML = 'Press a combination of two keys to update keybinding. Press Escape key to go back.'
app.cfg.general.keybindings.artists = [app.platform == "darwin" ? "Command" : "Control", "D"]; document.body.appendChild(blur);
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" : "Shift", "A"];
app.cfg.general.keybindings.pluginMenu = [app.platform == "darwin" ? "Option" : "Shift", "P"];
app.cfg.general.keybindings.castToDevices = [app.platform == "darwin" ? "Option" : "Shift", "C"];
app.cfg.general.keybindings.settings = [app.platform == "darwin" ? "Option" : "Shift", "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")
})
},
gitHubExplore() {
app.appRoute("themes-github")
},
copyLogs() {
ipcRenderer.send('fetch-log')
notyf.success(app.getLz('term.share.success'));
},
openAppData() {
ipcRenderer.send('open-appdata')
},
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
},
addExperiment(flag) {
app.cfg.advanced.experiments.push(flag);
},
removeExperiment(flag) {
app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
},
toggleAudioContext: function () {
if (app.cfg.advanced.AudioContext === true) {
if (navigator.hardwareConcurrency < 6) {
bootbox.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function (result) {
if (result) {
CiderAudio.init();
if (app.cfg.audio.normalization === true) {
CiderAudio.normalizerOn()
}
if (app.cfg.audio.spatial === true) {
CiderAudio.spatialOn()
CiderAudio.hierarchical_loading();
}
}
})
} else {
CiderAudio.init();
if (app.cfg.audio.normalization === true) {
CiderAudio.normalizerOn()
}
if (app.cfg.audio.spatial === true) {
CiderAudio.spatialOn()
CiderAudio.hierarchical_loading();
}
}
} else {
CiderAudio.off();
}
},
toggleNormalization: function () {
if (app.cfg.audio.normalization) {
CiderAudio.normalizerOn()
} else {
CiderAudio.normalizerOff()
}
},
changeAudioQuality: function () {
1
app.mk.bitrate = MusicKit.PlaybackBitrate[app.cfg.audio.quality];
},
toggleUserInfo: function () {
app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
},
sendDataToMTT: function () {
ipcRenderer.invoke('setStoreValue', 'general.close_behavior', app.cfg.general.close_behavior);
// setStoreValue does not change plugin store values somehow
ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
},
checkIfUpdateDisabled() {
if (app.cfg.main.UPDATABLE) return;
let updateFields = document.getElementsByClassName('update-check'); let keyBind = [];
for (let i = 0; i < updateFields.length; i++) { const keyBindTimeout = setTimeout(function () {
updateFields[i].style = "opacity: 0.5; pointer-events: none;"; keyBind = [];
updateFields[i].title = "Not available on this type of build"; 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", "S"];
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" : "Shift", "A"];
app.cfg.general.keybindings.pluginMenu = [app.platform == "darwin" ? "Option" : "Shift", "P"];
app.cfg.general.keybindings.castToDevices = [app.platform == "darwin" ? "Option" : "Shift", "C"];
app.cfg.general.keybindings.settings = [app.platform == "darwin" ? "Option" : "Shift", "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")
})
},
gitHubExplore() {
app.appRoute("themes-github")
},
copyLogs() {
ipcRenderer.send('fetch-log')
notyf.success(app.getLz('term.share.success'));
},
openAppData() {
ipcRenderer.send('open-appdata')
},
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
},
addExperiment(flag) {
app.cfg.advanced.experiments.push(flag);
},
removeExperiment(flag) {
app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
},
toggleAudioContext: function () {
if (app.cfg.advanced.AudioContext === true) {
if (navigator.hardwareConcurrency < 6) {
bootbox.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function (result) {
if (result) {
CiderAudio.init();
if (app.cfg.audio.normalization === true) {
CiderAudio.normalizerOn()
}
if (app.cfg.audio.spatial === true) {
CiderAudio.spatialOn()
CiderAudio.hierarchical_loading();
}
}
})
} else {
CiderAudio.init();
if (app.cfg.audio.normalization === true) {
CiderAudio.normalizerOn()
}
if (app.cfg.audio.spatial === true) {
CiderAudio.spatialOn()
CiderAudio.hierarchical_loading();
}
}
} else {
CiderAudio.off();
}
},
toggleNormalization: function () {
if (app.cfg.audio.normalization) {
CiderAudio.normalizerOn()
} else {
CiderAudio.normalizerOff()
}
},
changeAudioQuality: function () {
1
app.mk.bitrate = MusicKit.PlaybackBitrate[app.cfg.audio.quality];
},
toggleUserInfo: function () {
app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
},
sendDataToMTT: function () {
ipcRenderer.invoke('setStoreValue', 'general.close_behavior', app.cfg.general.close_behavior);
// setStoreValue does not change plugin store values somehow
ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
},
checkIfUpdateDisabled() {
if (app.cfg.main.UPDATABLE) return;
}, let updateFields = document.getElementsByClassName('update-check');
promptForRelaunch() { for (let i = 0; i < updateFields.length; i++) {
bootbox.confirm(app.getLz('action.relaunch.confirm'), function (result) { updateFields[i].style = "opacity: 0.5; pointer-events: none;";
if (result) { updateFields[i].title = "Not available on this type of build";
ipcRenderer.send('relaunchApp', ''); }
}
}); },
}, promptForRelaunch() {
authCC() { bootbox.confirm(app.getLz('action.relaunch.confirm'), function (result) {
ipcRenderer.send('cc-auth') if (result) {
}, ipcRenderer.send('relaunchApp', '');
logoutCC() { }
ipcRenderer.send('cc-logout') });
}, },
} authCC() {
}) ipcRenderer.send('cc-auth')
},
logoutCC() {
ipcRenderer.send('cc-logout')
},
}
})
</script> </script>