diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json index 5924e72f..b01419a5 100644 --- a/src/i18n/en_US.json +++ b/src/i18n/en_US.json @@ -554,6 +554,7 @@ "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.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.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.", diff --git a/src/i18n/source/en_US.json b/src/i18n/source/en_US.json index 5924e72f..b01419a5 100644 --- a/src/i18n/source/en_US.json +++ b/src/i18n/source/en_US.json @@ -554,6 +554,7 @@ "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.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.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.", diff --git a/src/main/base/store.ts b/src/main/base/store.ts index b7786b98..42289d72 100644 --- a/src/main/base/store.ts +++ b/src/main/base/store.ts @@ -239,10 +239,11 @@ export class Store { "windowColor": "#000000", "customAccentColor": false, "accentColor": "#fc3c44", - "purplePodcastPlaybackBar": false + "purplePodcastPlaybackBar": false, + "maxContentScale": -1 // -1 default, anything else is a custom scale }, "lyrics": { - "enable_mxm": false, + "enable_mxm": true, "mxm_karaoke": false, "mxm_language": "en", "enable_qq": false, diff --git a/src/renderer/index.js b/src/renderer/index.js index 13caca7b..a9aaf86b 100644 --- a/src/renderer/index.js +++ b/src/renderer/index.js @@ -1,5 +1,9 @@ var notyf = new Notyf(); +function clamp(num, min, max) { + return Math.min(Math.max(num, min), max); +} + const MusicKitObjects = { LibraryPlaylist: function () { this.id = ""; @@ -84,8 +88,14 @@ function fallbackinitMusicKit() { } function initMusicKit() { - + if(!this.responseText) { + console.log("Using stored token") + this.responseText = JSON.stringify({ + token: localStorage.getItem("lastToken") + }) + } let parsedJson = JSON.parse(this.responseText); + localStorage.setItem("lastToken", parsedJson.token); MusicKit.configure({ developerToken: parsedJson.token, app: { @@ -116,7 +126,13 @@ function capiInit() { request.addEventListener("load", initMusicKit); request.onreadystatechange = function (aEvt) { 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/"); diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less index 1b8026f7..975ac5b6 100644 --- a/src/renderer/less/elements.less +++ b/src/renderer/less/elements.less @@ -984,11 +984,11 @@ /* mediaitem-square */ .cd-mediaitem-square { - --transitionDuration: .25s; + --transitionDuration: .5s; --scaleRate: 1.25; --scaleRateArtwork: 1; - width: 200px; - height: 200px; + width: calc(160px * var(--windowRelativeScale)); + height: calc(200px * var(--windowRelativeScale)); display: inline-flex; flex: 0 0 auto; flex-direction: column; @@ -996,14 +996,13 @@ justify-content: center; align-items: center; border-radius: 6px; - transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear; .artwork-container { position: relative; .artwork { - height: 150px; - width: 150px; + height: calc(140px * var(--windowRelativeScale)); + width: calc(140px * var(--windowRelativeScale)); background: blue; border-radius: var(--mediaItemRadius); background: var(--artwork); @@ -1011,7 +1010,6 @@ flex: 0 0 auto; margin: 6px; cursor: pointer; - transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear; .mediaitem-artwork { box-shadow: unset; @@ -1085,31 +1083,31 @@ } } - &:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) { - @media (min-width: 1460px) { - --scaleRate: 1.1; - --scaleRateArtwork: 0.9; - width: calc(200px * var(--scaleRate)); - height: calc(200px * var(--scaleRate)); + // &:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) { + // @media (min-width: 1460px) { + // --scaleRate: 1.1; + // --scaleRateArtwork: 0.9; + // width: calc(200px * var(--scaleRate)); + // height: calc(200px * var(--scaleRate)); - .artwork-container > .artwork { - width: calc(190px * var(--scaleRateArtwork)); - height: calc(190px * var(--scaleRateArtwork)); - } - } + // .artwork-container > .artwork { + // width: calc(190px * var(--scaleRateArtwork)); + // height: calc(190px * var(--scaleRateArtwork)); + // } + // } - @media (min-width: 1550px) { - --scaleRate: 1.25; - --scaleRateArtwork: 1; - width: calc(200px * var(--scaleRate)); - height: calc(200px * var(--scaleRate)); + // @media (min-width: 1550px) { + // --scaleRate: 1.25; + // --scaleRateArtwork: 1; + // width: calc(200px * var(--scaleRate)); + // height: calc(200px * var(--scaleRate)); - .artwork-container > .artwork { - width: calc(190px * var(--scaleRateArtwork)); - height: calc(190px * var(--scaleRateArtwork)); - } - } - } + // .artwork-container > .artwork { + // width: calc(190px * var(--scaleRateArtwork)); + // height: calc(190px * var(--scaleRateArtwork)); + // } + // } + // } .info-rect { @@ -1161,10 +1159,12 @@ &.mediaitem-video { height: 200px; width: 240px; + transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear; .artwork { height: 120px; width: 212px; + transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear; } &:not(.noscale) { @@ -1197,10 +1197,12 @@ &.mediaitem-brick { height: 200px; width: 240px; + transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear; .artwork { height: 123px; width: 220px; + transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear; } &:not(.noscale) { @@ -1231,12 +1233,14 @@ } &.mediaitem-small { - width: 140px; - height: 180px; + width: calc(140px, var(--windowRelativeScale)); + height: calc(180px, var(--windowRelativeScale)); + transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear; .artwork { - height: 128px; - width: 128px; + height: calc(128px, var(--windowRelativeScale)); + width: calc(128px, var(--windowRelativeScale)); + transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear; } } @@ -1249,6 +1253,7 @@ position: relative; border-radius: calc(var(--mediaItemRadius) * 2); box-shadow: var(--mediaItemShadow-ShadowSubtle); + transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear; .artwork { width: 230px; @@ -1341,7 +1346,7 @@ } &:not(.noscale) { - @media (min-width: 1460px) { + @media (min-width: 1200px) { width: calc(230px * 1.1); height: calc(298px * 1.1); .artwork-container > .artwork { @@ -1350,7 +1355,7 @@ } } - @media (min-width: 1550px) { + @media (min-width: 1400px) { width: calc(230px * 1.25); height: calc(298px * 1.25); .artwork-container > .artwork { diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less index 55b0b84b..c5b015bc 100644 --- a/src/renderer/less/pages.less +++ b/src/renderer/less/pages.less @@ -1230,7 +1230,7 @@ } &.animated .artist-header { - min-height: 500px; + min-height: 80vh; } .artist-header { @@ -1326,6 +1326,7 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); + object-fit: cover; } } diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js index a975a90d..4e0e2730 100644 --- a/src/renderer/main/vueapp.js +++ b/src/renderer/main/vueapp.js @@ -706,6 +706,9 @@ const app = new Vue({ } 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["broadcast-radio"] = true this.mk._services.apiManager.store.storekit._restrictedEnabled = false @@ -1092,6 +1095,18 @@ const app = new Vue({ 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) { clearTimeout(this.idleTimer); if (this.idleState == true) { @@ -2010,7 +2025,7 @@ const app = new Vue({ params["fields[artists]"] = "name,url" params["omit[resource]"] = "autos" 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")) { app.page = (kind) + "_" + (id); @@ -3153,12 +3168,11 @@ const app = new Vue({ req.send(); } - function getMXMTrans(id, lang) { + function getMXMTrans(lang, id) { 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(); req2.overrideMimeType("application/json"); - req2.open('POST', url2, true); req2.onload = function () { try { let jsonResponse2 = JSON.parse(this.responseText); @@ -3184,12 +3198,11 @@ const app = new Vue({ } catch (e) { /// not found trans -> ignore } - } else { //4xx rejected - getToken(2, '', '', id, lang, ''); - } + } } catch (e) { } } + req2.open('POST', url2, true); req2.send(); } @@ -3197,6 +3210,7 @@ const app = new Vue({ if (track != "" & track != "No Title Found") { getMXMSubs(track, artist, lang, time, id) + getMXMTrans(track, artist, lang, time, id) } }, loadNeteaseLyrics() { @@ -3938,9 +3952,8 @@ const app = new Vue({ this.currentArtUrl = this.mk.nowPlayingItem._assets[0].artworkURL } try { - document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`); - } catch (e) { - } + // document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`); + } catch (e) {} } else { let data = await this.mk.api.v3.music(`/v1/me/library/songs/${this.mk.nowPlayingItem.id}`); data = data.data.data[0]; @@ -3952,14 +3965,14 @@ const app = new Vue({ } ipcRenderer.send('updateRPCImage', this.currentArtUrl ?? ''); 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) { } } else { this.currentArtUrlRaw = '' this.currentArtUrl = ''; 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) { } } diff --git a/src/renderer/main/vuex-store.js b/src/renderer/main/vuex-store.js index e8934d26..8263f065 100644 --- a/src/renderer/main/vuex-store.js +++ b/src/renderer/main/vuex-store.js @@ -1,5 +1,6 @@ const store = new Vuex.Store({ state: { + windowRelativeScale: 1, library: { // songs: ipcRenderer.sendSync("get-library-songs"), // albums: ipcRenderer.sendSync("get-library-albums"), diff --git a/src/renderer/style.less b/src/renderer/style.less index 6facc9ca..162261a5 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -14,6 +14,7 @@ @import url("less/pages.less"); :root { + --windowRelativeScale: 1; --appleEase: cubic-bezier(0.42, 0, 0.58, 1); --borderColor: 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 @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 @media screen and (max-width: 1150px) { diff --git a/src/renderer/views/app/chrome-bottom.ejs b/src/renderer/views/app/chrome-bottom.ejs index ee044c82..c475119d 100644 --- a/src/renderer/views/app/chrome-bottom.ejs +++ b/src/renderer/views/app/chrome-bottom.ejs @@ -5,7 +5,7 @@
- +
diff --git a/src/renderer/views/components/mediaitem-artwork.ejs b/src/renderer/views/components/mediaitem-artwork.ejs index a58a2590..fbaf53be 100644 --- a/src/renderer/views/components/mediaitem-artwork.ejs +++ b/src/renderer/views/components/mediaitem-artwork.ejs @@ -1,6 +1,7 @@ \ No newline at end of file diff --git a/src/renderer/views/components/sidebar.ejs b/src/renderer/views/components/sidebar.ejs index cf3a9697..401603bb 100644 --- a/src/renderer/views/components/sidebar.ejs +++ b/src/renderer/views/components/sidebar.ejs @@ -145,7 +145,7 @@ Local Library