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

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.",

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.",

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,

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/");

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;
+  width: calc(160px * var(--windowRelativeScale));
-  height: 200px;
+  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;
+      height: calc(140px * var(--windowRelativeScale));
-      width: 150px;
+      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) {
+  // &: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 {
@@ -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;
+    width: calc(140px, var(--windowRelativeScale));
-    height: 180px;
+    height: calc(180px, var(--windowRelativeScale));
+    transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
     .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;
     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 {

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;
       }
     }
 

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}")`);
+                        // document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
-                    } catch (e) {
+                    } 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) {
                         }
                     }

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"),

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) {

src/renderer/views/app/chrome-bottom.ejs

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

src/renderer/views/components/mediaitem-artwork.ejs

@@ -1,6 +1,7 @@
 <script type="text/x-template" id="mediaitem-artwork">
     <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"
              loading="lazy"
              :style="imgStyle"
@@ -47,6 +48,10 @@
             shadow: {
                 type: String,
                 default: ''
+            },
+            upscaling: {
+                type: Boolean,
+                default: false
             }
         },
         data: function () {
@@ -63,15 +68,37 @@
                     opacity: 0,
                     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() {
             this.getClasses()
+            this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
         },
         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() {
                 this.imgStyle.opacity = 1
+                this.swapImage(app.$store.state.windowRelativeScale)
                 // this.awStyle.background = ""
             },
             contextMenu(event) {

src/renderer/views/components/mediaitem-list-item.ejs

@@ -16,7 +16,7 @@
          @controller-click="route()"
          tabindex="0"
          :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="isLibrary" v-if="showLibraryStatus == true">
                 <div v-if="showInLibrary" :style="{display: (showInLibrary ? 'block' : 'none'), 'margin-left':'11px'}">

src/renderer/views/components/mediaitem-square.ejs

@@ -17,6 +17,7 @@
                                 :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 : '')) : '' "
                                 :size="size"
+								:upscaling="true"
                                 shadow="subtle"
                                 :bgcolor="getBgColor()"
                                 :video-priority="forceVideo"

src/renderer/views/components/sidebar.ejs

@@ -145,7 +145,7 @@
                   Local Library
                 </div>
                 <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 v-if="$root.getPlaylistFolderChildren('p.applemusic').length != 0">

src/renderer/views/pages/cider-playlist.ejs

@@ -457,7 +457,7 @@
                 if (this.data.type.includes('albums')) {
                     let date = this.data.attributes.releaseDate;
                     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() {

src/renderer/views/pages/library-recentlyadded.ejs

@@ -1,13 +1,13 @@
 <script type="text/x-template" id="cider-recentlyadded">
     <div class="content-inner">
         <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>
         </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>
         </div>
-        <div class="well itemContainer" v-show="loading">
+        <div class="well itemContainer collection-list-square" v-show="loading">
             <div class="spinner"></div>
         </div>
         <button v-if="nextUrl && !loading" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">{{$root.getLz('term.showMore')}}

src/renderer/views/pages/settings.ejs

@@ -613,27 +613,27 @@
                     <div class="md-option-header">
                         <span>{{$root.getLz('settings.header.lyrics')}}</span>
                     </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.lyrics.enableMusixmatch')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
                                 <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 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 class="md-option-line">