okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'main' of https://github.com/Monochromish/Cider

Browse source
This commit is contained in:
Monochromish 2022-07-08 18:40:10 +10:00
commit 1371ed2876
18 changed files with 1687 additions and 1531 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/i18n/en_US.json
View file

@ -554,6 +554,7 @@
"settings.option.experimental.unknownPlugin.description": "Allow installation of plugins from repos other than the Cider Plugin Repository", "settings.option.experimental.unknownPlugin.description": "Allow installation of plugins from repos other than the Cider Plugin Repository",
"settings.option.experimental.compactUI": "Compact UI", "settings.option.experimental.compactUI": "Compact UI",
"settings.option.window.close_button_hide": "Close Button Should Hide the Application", "settings.option.window.close_button_hide": "Close Button Should Hide the Application",
"settings.option.window.maxElementScale": "Maximum Element Scale",
"settings.option.experimental.inline_playlists": "Inline Playlists and Albums", "settings.option.experimental.inline_playlists": "Inline Playlists and Albums",
"settings.option.advanced.playlistTrackMapping": "Playlist Track Mapping", "settings.option.advanced.playlistTrackMapping": "Playlist Track Mapping",
"settings.option.advanced.playlistTrackMapping.description": "Enables deep scanning of playlists to determine which tracks are in which playlists. Playlist cache build times can increase significantly.", "settings.option.advanced.playlistTrackMapping.description": "Enables deep scanning of playlists to determine which tracks are in which playlists. Playlist cache build times can increase significantly.",

1
src/i18n/source/en_US.json
View file

@ -554,6 +554,7 @@
"settings.option.experimental.unknownPlugin.description": "Allow installation of plugins from repos other than the Cider Plugin Repository", "settings.option.experimental.unknownPlugin.description": "Allow installation of plugins from repos other than the Cider Plugin Repository",
"settings.option.experimental.compactUI": "Compact UI", "settings.option.experimental.compactUI": "Compact UI",
"settings.option.window.close_button_hide": "Close Button Should Hide the Application", "settings.option.window.close_button_hide": "Close Button Should Hide the Application",
"settings.option.window.maxElementScale": "Maximum Element Scale",
"settings.option.experimental.inline_playlists": "Inline Playlists and Albums", "settings.option.experimental.inline_playlists": "Inline Playlists and Albums",
"settings.option.advanced.playlistTrackMapping": "Playlist Track Mapping", "settings.option.advanced.playlistTrackMapping": "Playlist Track Mapping",
"settings.option.advanced.playlistTrackMapping.description": "Enables deep scanning of playlists to determine which tracks are in which playlists. Playlist cache build times can increase significantly.", "settings.option.advanced.playlistTrackMapping.description": "Enables deep scanning of playlists to determine which tracks are in which playlists. Playlist cache build times can increase significantly.",

5
src/main/base/store.ts
View file

@ -239,10 +239,11 @@ export class Store {
"windowColor": "#000000", "windowColor": "#000000",
"customAccentColor": false, "customAccentColor": false,
"accentColor": "#fc3c44", "accentColor": "#fc3c44",
"purplePodcastPlaybackBar": false "purplePodcastPlaybackBar": false,
"maxContentScale": -1 // -1 default, anything else is a custom scale
}, },
"lyrics": { "lyrics": {
"enable_mxm": false, "enable_mxm": true,
"mxm_karaoke": false, "mxm_karaoke": false,
"mxm_language": "en", "mxm_language": "en",
"enable_qq": false, "enable_qq": false,

20
src/renderer/index.js
View file

@ -1,5 +1,9 @@
var notyf = new Notyf(); var notyf = new Notyf();
function clamp(num, min, max) {
return Math.min(Math.max(num, min), max);
}
const MusicKitObjects = { const MusicKitObjects = {
LibraryPlaylist: function () { LibraryPlaylist: function () {
this.id = ""; this.id = "";
@ -84,8 +88,14 @@ function fallbackinitMusicKit() {
} }
function initMusicKit() { function initMusicKit() {
if(!this.responseText) {
console.log("Using stored token")
this.responseText = JSON.stringify({
token: localStorage.getItem("lastToken")
})
}
let parsedJson = JSON.parse(this.responseText); let parsedJson = JSON.parse(this.responseText);
localStorage.setItem("lastToken", parsedJson.token);
MusicKit.configure({ MusicKit.configure({
developerToken: parsedJson.token, developerToken: parsedJson.token,
app: { app: {
@ -116,7 +126,13 @@ function capiInit() {
request.addEventListener("load", initMusicKit); request.addEventListener("load", initMusicKit);
request.onreadystatechange = function (aEvt) { request.onreadystatechange = function (aEvt) {
if (request.readyState == 4) { if (request.readyState == 4) {
if (request.status != 200) fallbackinitMusicKit(); if (request.status != 200) {
if(localStorage.getItem("lastToken") != null) {
initMusicKit()
}else{
fallbackinitMusicKit()
}
};
} }
}; };
request.open("GET", "https://api.cider.sh/v1/"); request.open("GET", "https://api.cider.sh/v1/");

75
src/renderer/less/elements.less
View file

@ -984,11 +984,11 @@
/* mediaitem-square */ /* mediaitem-square */
.cd-mediaitem-square { .cd-mediaitem-square {
--transitionDuration: .25s; --transitionDuration: .5s;
--scaleRate: 1.25; --scaleRate: 1.25;
--scaleRateArtwork: 1; --scaleRateArtwork: 1;
width: 200px; width: calc(160px * var(--windowRelativeScale));
height: 200px; height: calc(200px * var(--windowRelativeScale));
display: inline-flex; display: inline-flex;
flex: 0 0 auto; flex: 0 0 auto;
flex-direction: column; flex-direction: column;
@ -996,14 +996,13 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 6px; border-radius: 6px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.artwork-container { .artwork-container {
position: relative; position: relative;
.artwork { .artwork {
height: 150px; height: calc(140px * var(--windowRelativeScale));
width: 150px; width: calc(140px * var(--windowRelativeScale));
background: blue; background: blue;
border-radius: var(--mediaItemRadius); border-radius: var(--mediaItemRadius);
background: var(--artwork); background: var(--artwork);
@ -1011,7 +1010,6 @@
flex: 0 0 auto; flex: 0 0 auto;
margin: 6px; margin: 6px;
cursor: pointer; cursor: pointer;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.mediaitem-artwork { .mediaitem-artwork {
box-shadow: unset; box-shadow: unset;
@ -1085,31 +1083,31 @@
} }
} }
&:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) { // &:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) {
@media (min-width: 1460px) { // @media (min-width: 1460px) {
--scaleRate: 1.1; // --scaleRate: 1.1;
--scaleRateArtwork: 0.9; // --scaleRateArtwork: 0.9;
width: calc(200px * var(--scaleRate)); // width: calc(200px * var(--scaleRate));
height: calc(200px * var(--scaleRate)); // height: calc(200px * var(--scaleRate));
.artwork-container > .artwork { // .artwork-container > .artwork {
width: calc(190px * var(--scaleRateArtwork)); // width: calc(190px * var(--scaleRateArtwork));
height: calc(190px * var(--scaleRateArtwork)); // height: calc(190px * var(--scaleRateArtwork));
} // }
} // }
@media (min-width: 1550px) { // @media (min-width: 1550px) {
--scaleRate: 1.25; // --scaleRate: 1.25;
--scaleRateArtwork: 1; // --scaleRateArtwork: 1;
width: calc(200px * var(--scaleRate)); // width: calc(200px * var(--scaleRate));
height: calc(200px * var(--scaleRate)); // height: calc(200px * var(--scaleRate));
.artwork-container > .artwork { // .artwork-container > .artwork {
width: calc(190px * var(--scaleRateArtwork)); // width: calc(190px * var(--scaleRateArtwork));
height: calc(190px * var(--scaleRateArtwork)); // height: calc(190px * var(--scaleRateArtwork));
} // }
} // }
} // }
.info-rect { .info-rect {
@ -1161,10 +1159,12 @@
&.mediaitem-video { &.mediaitem-video {
height: 200px; height: 200px;
width: 240px; width: 240px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.artwork { .artwork {
height: 120px; height: 120px;
width: 212px; width: 212px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
} }
&:not(.noscale) { &:not(.noscale) {
@ -1197,10 +1197,12 @@
&.mediaitem-brick { &.mediaitem-brick {
height: 200px; height: 200px;
width: 240px; width: 240px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.artwork { .artwork {
height: 123px; height: 123px;
width: 220px; width: 220px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
} }
&:not(.noscale) { &:not(.noscale) {
@ -1231,12 +1233,14 @@
} }
&.mediaitem-small { &.mediaitem-small {
width: 140px; width: calc(140px, var(--windowRelativeScale));
height: 180px; height: calc(180px, var(--windowRelativeScale));
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.artwork { .artwork {
height: 128px; height: calc(128px, var(--windowRelativeScale));
width: 128px; width: calc(128px, var(--windowRelativeScale));
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
} }
} }
@ -1249,6 +1253,7 @@
position: relative; position: relative;
border-radius: calc(var(--mediaItemRadius) * 2); border-radius: calc(var(--mediaItemRadius) * 2);
box-shadow: var(--mediaItemShadow-ShadowSubtle); box-shadow: var(--mediaItemShadow-ShadowSubtle);
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.artwork { .artwork {
width: 230px; width: 230px;
@ -1341,7 +1346,7 @@
} }
&:not(.noscale) { &:not(.noscale) {
@media (min-width: 1460px) { @media (min-width: 1200px) {
width: calc(230px * 1.1); width: calc(230px * 1.1);
height: calc(298px * 1.1); height: calc(298px * 1.1);
.artwork-container > .artwork { .artwork-container > .artwork {
@ -1350,7 +1355,7 @@
} }
} }
@media (min-width: 1550px) { @media (min-width: 1400px) {
width: calc(230px * 1.25); width: calc(230px * 1.25);
height: calc(298px * 1.25); height: calc(298px * 1.25);
.artwork-container > .artwork { .artwork-container > .artwork {

3
src/renderer/less/pages.less
View file

@ -1230,7 +1230,7 @@
} }
&.animated .artist-header { &.animated .artist-header {
min-height: 500px; min-height: 80vh;
} }
.artist-header { .artist-header {
@ -1326,6 +1326,7 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
object-fit: cover;
} }
} }

35
src/renderer/main/vueapp.js
View file

@ -706,6 +706,9 @@ const app = new Vue({
} catch (err) { } catch (err) {
} }
// Used to get a scale factor for the window for CSS scaling
window.addEventListener("resize", e => this.setWindowScaleFactor())
this.setWindowScaleFactor()
this.mk._bag.features['seamless-audio-transitions'] = this.cfg.audio.seamless_audio this.mk._bag.features['seamless-audio-transitions'] = this.cfg.audio.seamless_audio
this.mk._bag.features["broadcast-radio"] = true this.mk._bag.features["broadcast-radio"] = true
this.mk._services.apiManager.store.storekit._restrictedEnabled = false this.mk._services.apiManager.store.storekit._restrictedEnabled = false
@ -1092,6 +1095,18 @@ const app = new Vue({
ipcRenderer.invoke("scanLibrary") ipcRenderer.invoke("scanLibrary")
}, },
setWindowScaleFactor() {
let scale = window.devicePixelRatio * window.innerWidth / 1280 * window.innerHeight / 720
let desiredScale = clamp(parseFloat(app.cfg.visual.maxElementScale == -1 ? 1.5 : app.cfg.visual.maxElementScale), 1, 1.5)
app.$store.state.windowRelativeScale = scale
if(scale <= 1) {
scale = 1
}else if(scale >= desiredScale) {
scale = desiredScale
}
document.documentElement.style
.setProperty('--windowRelativeScale', scale);
},
showFoo(querySelector, time) { showFoo(querySelector, time) {
clearTimeout(this.idleTimer); clearTimeout(this.idleTimer);
if (this.idleState == true) { if (this.idleState == true) {
@ -2010,7 +2025,7 @@ const app = new Vue({
params["fields[artists]"] = "name,url" params["fields[artists]"] = "name,url"
params["omit[resource]"] = "autos" params["omit[resource]"] = "autos"
params["meta[albums:tracks]"] = 'popularity' params["meta[albums:tracks]"] = 'popularity'
params["fields[albums]"] = "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialNotes,editorialVideo,name,playParams,releaseDate,url,copyright" params["fields[albums]"] = "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialNotes,editorialVideo,name,playParams,releaseDate,url,copyright,genreNames"
} }
if (kind.includes("playlist") || kind.includes("album")) { if (kind.includes("playlist") || kind.includes("album")) {
app.page = (kind) + "_" + (id); app.page = (kind) + "_" + (id);
@ -3153,12 +3168,11 @@ const app = new Vue({
req.send(); req.send();
} }
function getMXMTrans(id, lang) { function getMXMTrans(lang, id) {
if (lang != "disabled" && id != '') { // Mode 2 -> Trans if (lang != "disabled" && id != '') { // Mode 2 -> Trans
let url2 = "https://api.cider.sh/v1/lyrics?" + "mode=2" + "&richsyncQuery=" + richsyncQuery + "&track=" + track + "&artist=" + artist + "&songID=" + itunesid + "&source=mxm" + "&lang=" + lang + "&time=" + time; let url2 = "https://api.cider.sh/v1/lyrics?" + "mode=2" + "&richsyncQuery=false" + "&songID=" + id + "&source=mxm" + "&lang=" + lang + "&time=" + time;
let req2 = new XMLHttpRequest(); let req2 = new XMLHttpRequest();
req2.overrideMimeType("application/json"); req2.overrideMimeType("application/json");
req2.open('POST', url2, true);
req2.onload = function () { req2.onload = function () {
try { try {
let jsonResponse2 = JSON.parse(this.responseText); let jsonResponse2 = JSON.parse(this.responseText);
@ -3184,12 +3198,11 @@ const app = new Vue({
} catch (e) { } catch (e) {
/// not found trans -> ignore /// not found trans -> ignore
} }
} else { //4xx rejected
getToken(2, '', '', id, lang, '');
} }
} catch (e) { } catch (e) {
} }
} }
req2.open('POST', url2, true);
req2.send(); req2.send();
} }
@ -3197,6 +3210,7 @@ const app = new Vue({
if (track != "" & track != "No Title Found") { if (track != "" & track != "No Title Found") {
getMXMSubs(track, artist, lang, time, id) getMXMSubs(track, artist, lang, time, id)
getMXMTrans(track, artist, lang, time, id)
} }
}, },
loadNeteaseLyrics() { loadNeteaseLyrics() {
@ -3938,9 +3952,8 @@ const app = new Vue({
this.currentArtUrl = this.mk.nowPlayingItem._assets[0].artworkURL this.currentArtUrl = this.mk.nowPlayingItem._assets[0].artworkURL
} }
try { try {
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`); // document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
} catch (e) { } catch (e) {}
}
} else { } else {
let data = await this.mk.api.v3.music(`/v1/me/library/songs/${this.mk.nowPlayingItem.id}`); let data = await this.mk.api.v3.music(`/v1/me/library/songs/${this.mk.nowPlayingItem.id}`);
data = data.data.data[0]; data = data.data.data[0];
@ -3952,14 +3965,14 @@ const app = new Vue({
} }
ipcRenderer.send('updateRPCImage', this.currentArtUrl ?? ''); ipcRenderer.send('updateRPCImage', this.currentArtUrl ?? '');
try { try {
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`); // document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
} catch (e) { } catch (e) {
} }
} else { } else {
this.currentArtUrlRaw = '' this.currentArtUrlRaw = ''
this.currentArtUrl = ''; this.currentArtUrl = '';
try { try {
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`); // document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
} catch (e) { } catch (e) {
} }
} }

1
src/renderer/main/vuex-store.js
View file

@ -1,5 +1,6 @@
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { state: {
windowRelativeScale: 1,
library: { library: {
// songs: ipcRenderer.sendSync("get-library-songs"), // songs: ipcRenderer.sendSync("get-library-songs"),
// albums: ipcRenderer.sendSync("get-library-albums"), // albums: ipcRenderer.sendSync("get-library-albums"),

3
src/renderer/style.less
View file

@ -14,6 +14,7 @@
@import url("less/pages.less"); @import url("less/pages.less");
:root { :root {
--windowRelativeScale: 1;
--appleEase: cubic-bezier(0.42, 0, 0.58, 1); --appleEase: cubic-bezier(0.42, 0, 0.58, 1);
--borderColor: rgb(200 200 200 / 16%); --borderColor: rgb(200 200 200 / 16%);
--mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%); --mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
@ -2056,7 +2057,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
// screen size > 1200px // screen size > 1200px
@media screen and (min-width: 1500px) { @media screen and (min-width: 1500px) {
grid-template-columns: repeat(6, minmax(200px, 1fr)); grid-template-columns: repeat(5, minmax(200px, 1fr));
} }
// less than 1100px // less than 1100px
@media screen and (max-width: 1150px) { @media screen and (max-width: 1150px) {

2
src/renderer/views/app/chrome-bottom.ejs
View file

@ -5,7 +5,7 @@
<div class="app-playback-controls" @mouseover="chrome.progresshover = true" <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
@mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu"> @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
<div class="artwork" id="artworkLCD"> <div class="artwork" id="artworkLCD">
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork> <mediaitem-artwork :url="$root.currentArtUrl"></mediaitem-artwork>
</div> </div>
<b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right"> <b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right">
<div class="content"> <div class="content">

31
src/renderer/views/components/mediaitem-artwork.ejs
View file

@ -1,6 +1,7 @@
<script type="text/x-template" id="mediaitem-artwork"> <script type="text/x-template" id="mediaitem-artwork">
<div class="mediaitem-artwork" :style="awStyle" @contextmenu="contextMenu" :class="[{'rounded': (type == 'artists')}, classes]" :key="url"> <div class="mediaitem-artwork" :style="awStyle" @contextmenu="contextMenu" :class="[{'rounded': (type == 'artists')}, classes]" :key="url">
<img :src="app.getMediaItemArtwork(url, size, width)" <img :src="imgSrc"
ref="image"
decoding="async" decoding="async"
loading="lazy" loading="lazy"
:style="imgStyle" :style="imgStyle"
@ -47,6 +48,10 @@
shadow: { shadow: {
type: String, type: String,
default: '' default: ''
},
upscaling: {
type: Boolean,
default: false
} }
}, },
data: function () { data: function () {
@ -63,15 +68,37 @@
opacity: 0, opacity: 0,
transition: "opacity .25s linear" transition: "opacity .25s linear"
}, },
classes: [] classes: [],
imgSrc: ""
}
},
computed: {
windowRelativeScale: function () {
return app.$store.state.windowRelativeScale;
}
},
watch: {
windowRelativeScale: function (newValue, oldValue) {
this.swapImage(newValue)
},
url: function (newValue, oldValue) {
this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
} }
}, },
mounted() { mounted() {
this.getClasses() this.getClasses()
this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
}, },
methods: { methods: {
swapImage(newValue) {
if(!this.upscaling || window.devicePixelRatio !== 1) return
if (newValue > 1.5) {
this.imgSrc = app.getMediaItemArtwork(this.url, parseInt(this.size * 2.0), parseInt(this.size * 2.0));
}
},
imgLoaded() { imgLoaded() {
this.imgStyle.opacity = 1 this.imgStyle.opacity = 1
this.swapImage(app.$store.state.windowRelativeScale)
// this.awStyle.background = "" // this.awStyle.background = ""
}, },
contextMenu(event) { contextMenu(event) {

2
src/renderer/views/components/mediaitem-list-item.ejs
View file

@ -16,7 +16,7 @@
@controller-click="route()" @controller-click="route()"
tabindex="0" tabindex="0"
:class="[{'mediaitem-selected': app.select_hasMediaItem(guid)}, addClasses]"> :class="[{'mediaitem-selected': app.select_hasMediaItem(guid)}, addClasses]">
<div v-if="isVisible" class="listitem-content"> <div v-show="isVisible" class="listitem-content">
<div class="popular" v-if="!showInLibrary && item?.meta?.popularity != null && item?.meta?.popularity > 0.7"></div> <div class="popular" v-if="!showInLibrary && item?.meta?.popularity != null && item?.meta?.popularity > 0.7"></div>
<div class="isLibrary" v-if="showLibraryStatus == true"> <div class="isLibrary" v-if="showLibraryStatus == true">
<div v-if="showInLibrary" :style="{display: (showInLibrary ? 'block' : 'none'), 'margin-left':'11px'}"> <div v-if="showInLibrary" :style="{display: (showInLibrary ? 'block' : 'none'), 'margin-left':'11px'}">

1
src/renderer/views/components/mediaitem-square.ejs
View file

@ -17,6 +17,7 @@
:url="getArtworkUrl()" :url="getArtworkUrl()"
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' " :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
:size="size" :size="size"
:upscaling="true"
shadow="subtle" shadow="subtle"
:bgcolor="getBgColor()" :bgcolor="getBgColor()"
:video-priority="forceVideo" :video-priority="forceVideo"

282
src/renderer/views/components/settings-window.ejs
View file

@ -1,12 +1,18 @@
<script type="text/x-template" id="settings-window"> <script type="text/x-template" id="settings-window">
<div class="settings-panel" @click.self="close()"> <div class="settings-panel" @click.self="close()">
<div class="settings-window" :class="{'maxed': $store.state.pageState['settings'].fullscreen, 'no-sidebar': sidebarVis()}"> <div class="settings-window"
<button class="close-btn minmax-btn" @click="$store.state.pageState['settings'].fullscreen = !$store.state.pageState['settings'].fullscreen" :class="{'min': $store.state.pageState['settings'].fullscreen}"></button> :class="{'maxed': $store.state.pageState['settings'].fullscreen, 'no-sidebar': sidebarVis()}">
<button class="close-btn minmax-btn"
@click="$store.state.pageState['settings'].fullscreen = !$store.state.pageState['settings'].fullscreen"
:class="{'min': $store.state.pageState['settings'].fullscreen}"></button>
<button class="close-btn" @click="close()"></button> <button class="close-btn" @click="close()"></button>
<b-tabs class="no-style" pills vertical content-class="mt-3" v-model="$store.state.pageState['settings'].currentTabIndex"> <b-tabs class="no-style" pills vertical content-class="mt-3"
v-model="$store.state.pageState['settings'].currentTabIndex">
<b-tab> <b-tab>
<template #title> <template #title>
<div><svg-icon url="./assets/settings.svg" classes="md" name="settings-general" /></div> <div>
<svg-icon url="./assets/settings.svg" classes="md" name="settings-general"/>
</div>
<div> <div>
{{ $root.getLz('settings.header.general') }} {{ $root.getLz('settings.header.general') }}
</div> </div>
@ -27,7 +33,8 @@
<select class="md-select" @change="$root.setLz('');$root.setLzManual()" <select class="md-select" @change="$root.setLz('');$root.setLzManual()"
v-model="app.cfg.general.language"> v-model="app.cfg.general.language">
<optgroup :label="index" v-for="(categories, index) in getLanguages()"> <optgroup :label="index" v-for="(categories, index) in getLanguages()">
<option v-for="lang in categories" :value="lang.code">{{lang.nameNative}} <option v-for="lang in categories" :value="lang.code">
{{lang.nameNative}}
({{ ({{
lang.nameEnglish }}) lang.nameEnglish }})
</option> </option>
@ -54,7 +61,7 @@
<label> <label>
<input type="checkbox" v-model="$root.cfg.general.privateEnabled" <input type="checkbox" v-model="$root.cfg.general.privateEnabled"
v-on:change="$root.mk.privateEnabled = $root.cfg.general.privateEnabled" v-on:change="$root.mk.privateEnabled = $root.cfg.general.privateEnabled"
switch /> switch/>
</label> </label>
</div> </div>
</div> </div>
@ -64,7 +71,7 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.general.onStartup.enabled" switch /> <input type="checkbox" v-model="app.cfg.general.onStartup.enabled" switch/>
</label> </label>
</div> </div>
</div> </div>
@ -74,7 +81,7 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.general.onStartup.hidden" switch /> <input type="checkbox" v-model="app.cfg.general.onStartup.hidden" switch/>
</label> </label>
</div> </div>
</div> </div>
@ -124,7 +131,8 @@
<option value="listen_now">{{$root.getLz('term.listenNow')}}</option> <option value="listen_now">{{$root.getLz('term.listenNow')}}</option>
<option value="browse">{{$root.getLz('term.browse')}}</option> <option value="browse">{{$root.getLz('term.browse')}}</option>
<option value="radio">{{$root.getLz('term.radio')}}</option> <option value="radio">{{$root.getLz('term.radio')}}</option>
<option value="library-recentlyadded">{{$root.getLz('term.recentlyAdded')}} <option value="library-recentlyadded">
{{$root.getLz('term.recentlyAdded')}}
</option> </option>
<option value="library-songs">{{$root.getLz('term.songs')}}</option> <option value="library-songs">{{$root.getLz('term.songs')}}</option>
<option value="library-albums">{{$root.getLz('term.albums')}}</option> <option value="library-albums">{{$root.getLz('term.albums')}}</option>
@ -154,7 +162,8 @@
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" <input type="checkbox"
v-model="app.cfg.general.sidebarItems.recentlyAdded" switch /> v-model="app.cfg.general.sidebarItems.recentlyAdded"
switch/>
</label> </label>
</div> </div>
</div> </div>
@ -164,8 +173,9 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.general.sidebarItems.songs" <input type="checkbox"
switch /> v-model="app.cfg.general.sidebarItems.songs"
switch/>
</label> </label>
</div> </div>
</div> </div>
@ -175,8 +185,9 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.general.sidebarItems.albums" <input type="checkbox"
switch /> v-model="app.cfg.general.sidebarItems.albums"
switch/>
</label> </label>
</div> </div>
</div> </div>
@ -186,8 +197,9 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.general.sidebarItems.artists" <input type="checkbox"
switch /> v-model="app.cfg.general.sidebarItems.artists"
switch/>
</label> </label>
</div> </div>
</div> </div>
@ -197,8 +209,9 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.general.sidebarItems.videos" <input type="checkbox"
switch /> v-model="app.cfg.general.sidebarItems.videos"
switch/>
</label> </label>
</div> </div>
</div> </div>
@ -208,8 +221,9 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.general.sidebarItems.podcasts" <input type="checkbox"
switch /> v-model="app.cfg.general.sidebarItems.podcasts"
switch/>
</label> </label>
</div> </div>
</div> </div>
@ -232,7 +246,8 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.general.themeUpdateNotification" switch /> <input type="checkbox" v-model="app.cfg.general.themeUpdateNotification"
switch/>
</label> </label>
</div> </div>
</div> </div>
@ -242,7 +257,8 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.general.showLovedTracksInline" switch /> <input type="checkbox" v-model="app.cfg.general.showLovedTracksInline"
switch/>
</label> </label>
</div> </div>
</div> </div>
@ -262,7 +278,9 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div><svg-icon url="./assets/feather/headphones.svg" classes="md" name="settings-audio" /></div> <div>
<svg-icon url="./assets/feather/headphones.svg" classes="md" name="settings-audio"/>
</div>
<div> <div>
{{ $root.getLz('settings.header.audio') }} {{ $root.getLz('settings.header.audio') }}
</div> </div>
@ -280,11 +298,13 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<select class="md-select" style="width:180px;" v-model="app.cfg.audio.quality" <select class="md-select" style="width:180px;"
v-model="app.cfg.audio.quality"
v-on:change="changeAudioQuality"> v-on:change="changeAudioQuality">
<!-- // <option value="">{{$root.getLz('settings.header.audio.quality.hireslossless')}}</option> --> <!-- // <option value="">{{$root.getLz('settings.header.audio.quality.hireslossless')}}</option> -->
<!-- <option value="">{{$root.getLz('settings.header.audio.quality.lossless')}}</option> --> <!-- <option value="">{{$root.getLz('settings.header.audio.quality.lossless')}}</option> -->
<option value="HIGH">{{$root.getLz('settings.header.audio.quality.high')}} <option value="HIGH">
{{$root.getLz('settings.header.audio.quality.high')}}
({{$root.getLz('settings.header.audio.quality.high.description')}}) ({{$root.getLz('settings.header.audio.quality.high.description')}})
</option> </option>
<option value="STANDARD"> <option value="STANDARD">
@ -323,7 +343,7 @@
<label> <label>
<input type="checkbox" v-model="app.cfg.audio.seamless_audio" <input type="checkbox" v-model="app.cfg.audio.seamless_audio"
v-on:change="app.mk._bag.features['seamless-audio-transitions'] = app.cfg.audio.seamless_audio" v-on:change="app.mk._bag.features['seamless-audio-transitions'] = app.cfg.audio.seamless_audio"
switch /> switch/>
</label> </label>
</div> </div>
</div> </div>
@ -337,7 +357,7 @@
<label> <label>
<input type="checkbox" v-model="app.cfg.advanced.AudioContext" <input type="checkbox" v-model="app.cfg.advanced.AudioContext"
v-on:change="toggleAudioContext" v-on:change="toggleAudioContext"
switch /> switch/>
</label> </label>
</div> </div>
</div> </div>
@ -354,7 +374,8 @@
<div class="md-option-line" v-show="app.cfg.advanced.AudioContext"> <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
<div class="md-option-segment" style="white-space: pre-line;"> <div class="md-option-segment" style="white-space: pre-line;">
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization')}} {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization')}}
<small>{{app.cfg.audio.equalizer.vibrantBass != 0 || app.cfg.audio.maikiwiAudio.spatial <small>{{app.cfg.audio.equalizer.vibrantBass != 0 ||
app.cfg.audio.maikiwiAudio.spatial
=== true || app.cfg.audio.maikiwiAudio.ciderPPE === true ? === true || app.cfg.audio.maikiwiAudio.ciderPPE === true ?
`${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.description')}\n${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled')}` `${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.description')}\n${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled')}`
: :
@ -365,7 +386,7 @@
<input type="checkbox" v-model="app.cfg.audio.normalization" <input type="checkbox" v-model="app.cfg.audio.normalization"
v-on:change="toggleNormalization" v-on:change="toggleNormalization"
:disabled="app.cfg.audio.maikiwiAudio.spatial === true || app.cfg.audio.maikiwiAudio.ciderPPE === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer1 === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer2 === true" :disabled="app.cfg.audio.maikiwiAudio.spatial === true || app.cfg.audio.maikiwiAudio.ciderPPE === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer1 === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer2 === true"
switch /> switch/>
</label> </label>
</div> </div>
</div> </div>
@ -378,7 +399,7 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.audio.dBSPL" switch /> <input type="checkbox" v-model="app.cfg.audio.dBSPL" switch/>
</label> </label>
</div> </div>
</div> </div>
@ -390,7 +411,7 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="number" v-model="app.cfg.audio.dBSPLcalibration" /> <input type="number" v-model="app.cfg.audio.dBSPLcalibration"/>
</label> </label>
</div> </div>
</div> </div>
@ -400,7 +421,9 @@
</b-tab> </b-tab>
<b-tab v-if="app.cfg.advanced.AudioContext"> <b-tab v-if="app.cfg.advanced.AudioContext">
<template #title> <template #title>
<div><svg-icon url="./assets/feather/zap.svg" classes="md" name="settings-audiolabs" /></div> <div>
<svg-icon url="./assets/feather/zap.svg" classes="md" name="settings-audiolabs"/>
</div>
<div> <div>
{{ $root.getLz('settings.option.audio.audioLab') }} {{ $root.getLz('settings.option.audio.audioLab') }}
</div> </div>
@ -411,7 +434,9 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div><svg-icon url="./assets/feather/style.svg" classes="md" name="settings-styles" /></div> <div>
<svg-icon url="./assets/feather/style.svg" classes="md" name="settings-styles"/>
</div>
<div> <div>
{{ $root.getLz('settings.header.visual.styles') }} {{ $root.getLz('settings.header.visual.styles') }}
</div> </div>
@ -422,7 +447,9 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div><svg-icon url="./assets/feather/pen-tool.svg" classes="md" name="settings-visual" /></div> <div>
<svg-icon url="./assets/feather/pen-tool.svg" classes="md" name="settings-visual"/>
</div>
<div> <div>
{{ $root.getLz('settings.header.visual') }} {{ $root.getLz('settings.header.visual') }}
</div> </div>
@ -450,7 +477,8 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<select class="md-select" v-model="$root.cfg.visual.directives.windowLayout"> <select class="md-select"
v-model="$root.cfg.visual.directives.windowLayout">
<option value="default">Maverick</option> <option value="default">Maverick</option>
<option value="twopanel">Mojave</option> <option value="twopanel">Mojave</option>
</select> </select>
@ -484,12 +512,13 @@
</label> </label>
</div> </div>
</div> </div>
<div class="md-option-line child" v-if="app.cfg.visual.window_background_style == 'color'"> <div class="md-option-line child"
v-if="app.cfg.visual.window_background_style == 'color'">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.visual.windowColor')}} {{$root.getLz('settings.option.visual.windowColor')}}
</div> </div>
<div class="md-option-segment_auto"> <div class="md-option-segment_auto">
<input type="color" v-model="app.cfg.visual.windowColor" /> <input type="color" v-model="app.cfg.visual.windowColor"/>
</div> </div>
</div> </div>
<div class="md-option-line"> <div class="md-option-line">
@ -498,7 +527,7 @@
</div> </div>
<div class="md-option-segment_auto"> <div class="md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.visual.customAccentColor" <input type="checkbox" v-model="app.cfg.visual.customAccentColor"
:disabled="app.cfg.visual.purplePodcastPlaybackBar" switch /> :disabled="app.cfg.visual.purplePodcastPlaybackBar" switch/>
</div> </div>
</div> </div>
<div class="md-option-line child" v-if="app.cfg.visual.customAccentColor"> <div class="md-option-line child" v-if="app.cfg.visual.customAccentColor">
@ -506,7 +535,7 @@
{{$root.getLz('settings.option.visual.accentColor')}} {{$root.getLz('settings.option.visual.accentColor')}}
</div> </div>
<div class="md-option-segment_auto"> <div class="md-option-segment_auto">
<input type="color" v-model="app.cfg.visual.accentColor" /> <input type="color" v-model="app.cfg.visual.accentColor"/>
</div> </div>
</div> </div>
<div class="md-option-line"> <div class="md-option-line">
@ -515,7 +544,7 @@
</div> </div>
<div class="md-option-segment_auto"> <div class="md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.visual.purplePodcastPlaybackBar" <input type="checkbox" v-model="app.cfg.visual.purplePodcastPlaybackBar"
:disabled="app.cfg.visual.customAccentColor" switch /> :disabled="app.cfg.visual.customAccentColor" switch/>
</div> </div>
</div> </div>
<div class="md-option-line"> <div class="md-option-line">
@ -526,7 +555,8 @@
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<select class="md-select" style="width:180px;" <select class="md-select" style="width:180px;"
v-model="app.cfg.visual.hw_acceleration" @change="promptForRelaunch()"> v-model="app.cfg.visual.hw_acceleration"
@change="promptForRelaunch()">
<option value="default"> <option value="default">
{{$root.getLz('settings.header.visual.hardwareAcceleration.default')}} {{$root.getLz('settings.header.visual.hardwareAcceleration.default')}}
</option> </option>
@ -545,7 +575,7 @@
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.visual.showuserinfo" <input type="checkbox" v-model="app.cfg.visual.showuserinfo"
v-on:change="toggleUserInfo" switch /> v-on:change="toggleUserInfo" switch/>
</label> </label>
</div> </div>
</div> </div>
@ -555,13 +585,32 @@
<span>{{$root.getLz('settings.header.window')}}</span> <span>{{$root.getLz('settings.header.window')}}</span>
</div> </div>
<div class="settings-option-body"> <div class="settings-option-body">
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz("settings.option.window.maxElementScale")}}
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<select @change="$root.setWindowScaleFactor()" class="md-select"
v-model="app.cfg.visual.maxElementScale">
<option value="-1">Default (1.5x)</option>
<option value="1">1.0x</option>
<option value="1.1">1.1x</option>
<option value="1.2">1.2x</option>
<option value="1.3">1.3x</option>
<option value="1.4">1.4x</option>
<option value="1.5">1.5x</option>
</select>
</label>
</div>
</div>
<div class="md-option-line" v-show="app.platform !== 'darwin'"> <div class="md-option-line" v-show="app.platform !== 'darwin'">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz("settings.option.window.close_button_hide")}} {{$root.getLz("settings.option.window.close_button_hide")}}
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.general.close_button_hide" switch /> <input type="checkbox" v-model="app.cfg.general.close_button_hide" switch/>
</label> </label>
</div> </div>
</div> </div>
@ -573,7 +622,7 @@
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.visual.nativeTitleBar" switch <input type="checkbox" v-model="app.cfg.visual.nativeTitleBar" switch
@change="promptForRelaunch()" /> @change="promptForRelaunch()"/>
</label> </label>
</div> </div>
</div> </div>
@ -627,7 +676,8 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<select class="md-select" v-model="app.cfg.visual.animated_artwork_qualityLevel"> <select class="md-select"
v-model="app.cfg.visual.animated_artwork_qualityLevel">
<option value="0"> <option value="0">
{{$root.getLz('settings.header.visual.animatedArtworkQuality.low')}} {{$root.getLz('settings.header.visual.animatedArtworkQuality.low')}}
</option> </option>
@ -653,7 +703,7 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" switch v-model="app.cfg.visual.bg_artwork_rotation" /> <input type="checkbox" switch v-model="app.cfg.visual.bg_artwork_rotation"/>
</label> </label>
</div> </div>
</div> </div>
@ -663,7 +713,9 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div><svg-icon url="./assets/feather/plugins.svg" classes="md" name="settings-plugins" /></div> <div>
<svg-icon url="./assets/feather/plugins.svg" classes="md" name="settings-plugins"/>
</div>
<div> <div>
{{ $root.getLz('term.plugins') }} {{ $root.getLz('term.plugins') }}
</div> </div>
@ -674,7 +726,9 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div><svg-icon url="./assets/feather/mic.svg" classes="md" name="settings-lyrics" /></div> <div>
<svg-icon url="./assets/feather/mic.svg" classes="md" name="settings-lyrics"/>
</div>
<div> <div>
{{ $root.getLz('settings.header.lyrics') }} {{ $root.getLz('settings.header.lyrics') }}
</div> </div>
@ -692,19 +746,17 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" switch checked /> <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch/>
</label> </label>
<!-- <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch /> -->
</div> </div>
</div> </div>
<div class="md-option-line"> <div class="md-option-line" v-if="app.cfg.lyrics.enable_mxm">
<!-- <div class="md-option-line" v-if="app.cfg.lyrics.enable_mxm"> -->
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.lyrics.enableMusixmatchKaraoke')}} {{$root.getLz('settings.option.lyrics.enableMusixmatchKaraoke')}}
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.lyrics.mxm_karaoke" switch /> <input type="checkbox" v-model="app.cfg.lyrics.mxm_karaoke" switch/>
</label> </label>
</div> </div>
</div> </div>
@ -991,7 +1043,7 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.lyrics.enable_yt" switch /> <input type="checkbox" v-model="app.cfg.lyrics.enable_yt" switch/>
</label> </label>
</div> </div>
</div> </div>
@ -1001,7 +1053,7 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.lyrics.enable_qq" switch /> <input type="checkbox" v-model="app.cfg.lyrics.enable_qq" switch/>
</label> </label>
</div> </div>
</div> </div>
@ -1011,7 +1063,9 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div><svg-icon url="./assets/feather/radio.svg" classes="md" name="settings-connectivity" /></div> <div>
<svg-icon url="./assets/feather/radio.svg" classes="md" name="settings-connectivity"/>
</div>
<div> <div>
{{ $root.getLz('settings.header.connectivity') }} {{ $root.getLz('settings.header.connectivity') }}
</div> </div>
@ -1030,7 +1084,8 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.general.playbackNotifications" switch /> <input type="checkbox" v-model="app.cfg.general.playbackNotifications"
switch/>
</label> </label>
</div> </div>
</div> </div>
@ -1042,7 +1097,8 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.enabled" switch /> <input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.enabled"
switch/>
</label> </label>
</div> </div>
</div> </div>
@ -1068,7 +1124,8 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.clear_on_pause" switch /> <input type="checkbox"
v-model="app.cfg.connectivity.discord_rpc.clear_on_pause" switch/>
</label> </label>
</div> </div>
</div> </div>
@ -1079,7 +1136,8 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.hide_buttons" switch /> <input type="checkbox"
v-model="app.cfg.connectivity.discord_rpc.hide_buttons" switch/>
</label> </label>
</div> </div>
</div> </div>
@ -1090,20 +1148,23 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.connectivity.discord_rpc.hide_timestamp" switch /> <input type="checkbox"
v-model="app.cfg.connectivity.discord_rpc.hide_timestamp" switch/>
</label> </label>
</div> </div>
</div> </div>
<div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false"> <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.discordRPC.detailsFormat')}}<br /> {{$root.getLz('settings.option.connectivity.discordRPC.detailsFormat')}}<br/>
<small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title}, {album}, <small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title},
{album},
{trackNumber}</small> {trackNumber}</small>
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="text" v-model="app.cfg.connectivity.discord_rpc.details_format" /> <input type="text"
v-model="app.cfg.connectivity.discord_rpc.details_format"/>
</label> </label>
</div> </div>
</div> </div>
@ -1111,12 +1172,13 @@
<div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false"> <div class="md-option-line" v-show="app.cfg.connectivity.discord_rpc.enabled != false">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.discordRPC.stateFormat')}} {{$root.getLz('settings.option.connectivity.discordRPC.stateFormat')}}
<small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title}, {album}, <small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title},
{album},
{trackNumber}</small> {trackNumber}</small>
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="text" v-model="app.cfg.connectivity.discord_rpc.state_format" /> <input type="text" v-model="app.cfg.connectivity.discord_rpc.state_format"/>
</label> </label>
</div> </div>
</div> </div>
@ -1137,10 +1199,14 @@
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.lastfmScrobble')}} {{$root.getLz('settings.option.connectivity.lastfmScrobble')}}
</div> </div>
<div class="md-option-segment md-option-segment_auto" > <div class="md-option-segment md-option-segment_auto">
<button class="md-btn" id="lfmConnect" @click="app.cfg.connectivity.lastfm.enabled ? lfmDisconnect() : lfmAuthorize()"> <button class="md-btn" id="lfmConnect"
{{$root.getLz(`term.${$root.cfg.connectivity.lastfm.enabled ? "disconnect" : "connect"}`)}}<br> @click="app.cfg.connectivity.lastfm.enabled ? lfmDisconnect() : lfmAuthorize()">
<small>{{app.cfg.connectivity.lastfm.enabled ? `${$root.getLz('term.authed')}: ${$root.cfg.connectivity.lastfm.secrets.username}` : '' }}</small> {{$root.getLz(`term.${$root.cfg.connectivity.lastfm.enabled ? "disconnect" :
"connect"}`)}}<br>
<small>{{app.cfg.connectivity.lastfm.enabled ?
`${$root.getLz('term.authed')}:
${$root.cfg.connectivity.lastfm.secrets.username}` : '' }}</small>
</button> </button>
</div> </div>
</div> </div>
@ -1151,8 +1217,9 @@
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<form @submit.prevent="submitToken"> <form @submit.prevent="submitToken">
<input type="text" autofocus id="lfmToken" /> <input type="text" autofocus id="lfmToken"/>
<input type="submit" class="md-btn" @value="$root.getLz('action.submit')" /> <input type="submit" class="md-btn"
@value="$root.getLz('action.submit')"/>
</form> </form>
</label> </label>
</div> </div>
@ -1163,7 +1230,8 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="number" min="50" max="100" v-model="app.cfg.connectivity.lastfm.scrobble_after"/> <input type="number" min="50" max="100"
v-model="app.cfg.connectivity.lastfm.scrobble_after"/>
</label> </label>
</div> </div>
</div> </div>
@ -1174,7 +1242,8 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.connectivity.lastfm.filter_loop" switch/> <input type="checkbox" v-model="app.cfg.connectivity.lastfm.filter_loop"
switch/>
</label> </label>
</div> </div>
</div> </div>
@ -1195,7 +1264,9 @@
</b-tab> </b-tab>
<b-tab> <b-tab>
<template #title> <template #title>
<div><svg-icon url="./assets/feather/hard-drive.svg" classes="md" name="settings-advanced" /></div> <div>
<svg-icon url="./assets/feather/hard-drive.svg" classes="md" name="settings-advanced"/>
</div>
<div> <div>
{{$root.getLz('settings.header.advanced')}} {{$root.getLz('settings.header.advanced')}}
</div> </div>
@ -1235,7 +1306,7 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.advanced.disableLogging" switch /> <input type="checkbox" v-model="app.cfg.advanced.disableLogging" switch/>
</label> </label>
</div> </div>
</div> </div>
@ -1278,7 +1349,7 @@
<input type="checkbox" <input type="checkbox"
v-model="app.cfg.advanced.experiments.includes('immersive-preview')" v-model="app.cfg.advanced.experiments.includes('immersive-preview')"
@click="app.cfg.advanced.experiments.includes('immersive-preview') ? removeExperiment('immersive-preview') : addExperiment('immersive-preview')" @click="app.cfg.advanced.experiments.includes('immersive-preview') ? removeExperiment('immersive-preview') : addExperiment('immersive-preview')"
switch /> switch/>
</label> </label>
</div> </div>
</div> </div>
@ -1294,7 +1365,7 @@
<input type="checkbox" <input type="checkbox"
v-model="app.cfg.advanced.experiments.includes('unknown-sources')" v-model="app.cfg.advanced.experiments.includes('unknown-sources')"
@click="app.cfg.advanced.experiments.includes('unknown-sources') ? removeExperiment('unknown-sources') : addExperiment('unknown-sources')" @click="app.cfg.advanced.experiments.includes('unknown-sources') ? removeExperiment('unknown-sources') : addExperiment('unknown-sources')"
switch /> switch/>
</label> </label>
</div> </div>
</div> </div>
@ -1306,9 +1377,10 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.advanced.experiments.includes('ampv3')" <input type="checkbox"
v-model="app.cfg.advanced.experiments.includes('ampv3')"
@click="app.cfg.advanced.experiments.includes('ampv3') ? removeExperiment('ampv3') : addExperiment('ampv3')" @click="app.cfg.advanced.experiments.includes('ampv3') ? removeExperiment('ampv3') : addExperiment('ampv3')"
switch /> switch/>
</label> </label>
</div> </div>
</div> </div>
@ -1321,7 +1393,22 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.advanced.playlistTrackMapping" switch /> <input type="checkbox" v-model="app.cfg.advanced.playlistTrackMapping"
switch/>
</label>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Local Files
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox"
v-model="app.cfg.advanced.experiments.includes('localLibrary')"
@click="app.cfg.advanced.experiments.includes('localLibrary') ? removeExperiment('localLibrary') : addExperiment('localLibrary')"
switch/>
</label> </label>
</div> </div>
</div> </div>
@ -1334,9 +1421,10 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.advanced.experiments.includes('compactui')" <input type="checkbox"
v-model="app.cfg.advanced.experiments.includes('compactui')"
@click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')" @click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')"
switch :disabled="!!app.getThemeDirective('forceUI')" /> switch :disabled="!!app.getThemeDirective('forceUI')"/>
</label> </label>
</div> </div>
</div> </div>
@ -1350,7 +1438,7 @@
<input type="checkbox" disabled <input type="checkbox" disabled
v-model="app.cfg.advanced.experiments.includes('inline-playlists')" v-model="app.cfg.advanced.experiments.includes('inline-playlists')"
@click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')" @click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')"
switch /> switch/>
</label> </label>
</div> </div>
</div> </div>
@ -1363,7 +1451,7 @@
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" v-model="app.cfg.visual.transparent" switch <input type="checkbox" v-model="app.cfg.visual.transparent" switch
@change="promptForRelaunch()" /> @change="promptForRelaunch()"/>
</label> </label>
</div> </div>
</div> </div>
@ -1474,12 +1562,12 @@
--> -->
</b-tabs> </b-tabs>
</div> </div>
</div> </div>
</script> </script>
<script> <script>
Vue.component("settings-window", { Vue.component("settings-window", {
template: "#settings-window", template: "#settings-window",
data: function() { data: function () {
return { return {
app: this.$root, app: this.$root,
themes: ipcRenderer.sendSync("get-themes"), themes: ipcRenderer.sendSync("get-themes"),
@ -1489,7 +1577,7 @@
} }
}, },
watch: { watch: {
tabIndex: function(val) { tabIndex: function (val) {
if (this.canChangeHash) { if (this.canChangeHash) {
// window.location.hash = `#settings/${val}` // window.location.hash = `#settings/${val}`
} }
@ -1498,7 +1586,7 @@
methods: { methods: {
sidebarVis() { sidebarVis() {
const tabIndex = app.$store.state.pageState['settings'].currentTabIndex const tabIndex = app.$store.state.pageState['settings'].currentTabIndex
if(tabIndex == 3 || tabIndex == 5 || tabIndex == 10) { if (tabIndex == 3 || tabIndex == 5 || tabIndex == 10) {
return true; return true;
} }
return false return false
@ -1529,7 +1617,7 @@
openAppData() { openAppData() {
ipcRenderer.send('open-appdata') ipcRenderer.send('open-appdata')
}, },
getLanguages: function() { getLanguages: function () {
let langs = this.$root.lzListing let langs = this.$root.lzListing
let categories = { let categories = {
"main": [], "main": [],
@ -1553,10 +1641,10 @@
removeExperiment(flag) { removeExperiment(flag) {
app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1); app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
}, },
toggleAudioContext: function() { toggleAudioContext: function () {
if (app.cfg.advanced.AudioContext === true) { if (app.cfg.advanced.AudioContext === true) {
if (navigator.hardwareConcurrency < 6) { if (navigator.hardwareConcurrency < 6) {
app.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function(result) { app.confirm(app.getLz("settings.warn.audio.enableAdvancedFunctionality.lowcores"), function (result) {
if (result) { if (result) {
CiderAudio.init(); CiderAudio.init();
if (app.cfg.audio.normalization === true) { if (app.cfg.audio.normalization === true) {
@ -1574,20 +1662,20 @@
CiderAudio.off(); CiderAudio.off();
} }
}, },
toggleNormalization: function() { toggleNormalization: function () {
if (app.cfg.audio.normalization) { if (app.cfg.audio.normalization) {
CiderAudio.normalizerOn() CiderAudio.normalizerOn()
} else { } else {
CiderAudio.normalizerOff() CiderAudio.normalizerOff()
} }
}, },
changeAudioQuality: function() { changeAudioQuality: function () {
app.mk.bitrate = MusicKit.PlaybackBitrate[app.cfg.audio.quality]; app.mk.bitrate = MusicKit.PlaybackBitrate[app.cfg.audio.quality];
}, },
toggleUserInfo: function() { toggleUserInfo: function () {
app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
}, },
sendDataToMTT: function() { sendDataToMTT: function () {
ipcRenderer.invoke('setStoreValue', 'general.close_behavior', app.cfg.general.close_behavior); ipcRenderer.invoke('setStoreValue', 'general.close_behavior', app.cfg.general.close_behavior);
// setStoreValue does not change plugin store values somehow // setStoreValue does not change plugin store values somehow
ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior); ipcRenderer.invoke('update-store-mtt', app.cfg.general.close_behavior);
@ -1603,7 +1691,7 @@
}, },
promptForRelaunch() { promptForRelaunch() {
app.confirm(app.getLz('action.relaunch.confirm'), function(result) { app.confirm(app.getLz('action.relaunch.confirm'), function (result) {
if (result) { if (result) {
ipcRenderer.send('relaunchApp', ''); ipcRenderer.send('relaunchApp', '');
} }

2
src/renderer/views/components/sidebar.ejs
View file

@ -145,7 +145,7 @@
Local Library Local Library
</div> </div>
<template v-if="!$root.cfg.general.sidebarCollapsed.localLibrary"> <template v-if="!$root.cfg.general.sidebarCollapsed.localLibrary">
<sidebar-playlist :item="{attributes: { name:'Songs'} , id:'ciderlocal'}"> <sidebar-playlist :item="{attributes: { name:'Songs'} , id:'ciderlocal'}"></sidebar-playlist>
</template> </template>
</template> </template>
<template v-if="$root.getPlaylistFolderChildren('p.applemusic').length != 0"> <template v-if="$root.getPlaylistFolderChildren('p.applemusic').length != 0">

2
src/renderer/views/pages/cider-playlist.ejs
View file

@ -457,7 +457,7 @@
if (this.data.type.includes('albums')) { if (this.data.type.includes('albums')) {
let date = this.data.attributes.releaseDate; let date = this.data.attributes.releaseDate;
if (date == null || date === "") return ""; if (date == null || date === "") return "";
return `${this.data.relationships.tracks.data[0].attributes.genreNames[0]} · ${new Date(date).getFullYear()}` return `${this.data.attributes.genreNames[0]} · ${new Date(date).getFullYear()}`
} }
}, },
async isInLibrary() { async isInLibrary() {

6
src/renderer/views/pages/library-recentlyadded.ejs
View file

@ -1,13 +1,13 @@
<script type="text/x-template" id="cider-recentlyadded"> <script type="text/x-template" id="cider-recentlyadded">
<div class="content-inner"> <div class="content-inner">
<h1 class="header-text">{{$root.getLz('term.recentlyAdded')}}</h1> <h1 class="header-text">{{$root.getLz('term.recentlyAdded')}}</h1>
<div class="well itemContainer" v-if="itemSize == 'normal'"> <div class="well itemContainer collection-list-square" v-if="itemSize == 'normal'">
<mediaitem-square v-for="item in items" :item="item"></mediaitem-square> <mediaitem-square v-for="item in items" :item="item"></mediaitem-square>
</div> </div>
<div class="well itemContainer" v-else="itemSize == 'compact'"> <div class="well itemContainer collection-list-square" v-else="itemSize == 'compact'">
<mediaitem-list-item :show-meta-data="true" :show-library-status="false" v-for="item in items" :item="item"></mediaitem-list-item> <mediaitem-list-item :show-meta-data="true" :show-library-status="false" v-for="item in items" :item="item"></mediaitem-list-item>
</div> </div>
<div class="well itemContainer" v-show="loading"> <div class="well itemContainer collection-list-square" v-show="loading">
<div class="spinner"></div> <div class="spinner"></div>
</div> </div>
<button v-if="nextUrl && !loading" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">{{$root.getLz('term.showMore')}} <button v-if="nextUrl && !loading" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">{{$root.getLz('term.showMore')}}

6
src/renderer/views/pages/settings.ejs
View file

@ -620,13 +620,12 @@
</div> </div>
<div class="md-option-segment md-option-segment_auto"> <div class="md-option-segment md-option-segment_auto">
<label> <label>
<input type="checkbox" switch checked/> <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch />
</label> </label>
<!-- <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch /> -->
</div> </div>
</div> </div>
<div class="md-option-line"> <div class="md-option-line">
<!-- <div class="md-option-line" v-if="app.cfg.lyrics.enable_mxm"> --> <div class="md-option-line" v-if="app.cfg.lyrics.enable_mxm">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.lyrics.enableMusixmatchKaraoke')}} {{$root.getLz('settings.option.lyrics.enableMusixmatchKaraoke')}}
</div> </div>
@ -636,6 +635,7 @@
</label> </label>
</div> </div>
</div> </div>
</div>
<div class="md-option-line"> <div class="md-option-line">
<div class="md-option-segment"> <div class="md-option-segment">
{{$root.getLz('settings.option.lyrics.musixmatchPreferredLanguage')}} {{$root.getLz('settings.option.lyrics.musixmatchPreferredLanguage')}}