Merge branch 'ciderapp:main' into feature/party-fullscreen

src/main/base/browserwindow.ts

@@ -374,7 +374,8 @@ export class BrowserWindow {
      * @yields {object} Electron browser window
      */
     async createWindow(): Promise<Electron.BrowserWindow> {
-        this.clientPort = await getPort({ port: 9000 });
+        const envPort = process.env?.CIDER_PORT || '9000'
+        this.clientPort = await getPort({ port: parseInt(envPort, 10) || 9000 });
         BrowserWindow.verifyFiles();
         this.StartWatcher(utils.getPath('themes'));
 
@@ -1581,4 +1582,4 @@ export class BrowserWindow {
         server2.start();
         console.log('remote broadcasted')
     }
-}
+}

src/main/index.ts

@@ -76,10 +76,6 @@ ipcMain.on("nowPlayingItemDidChange", (_event, attributes) => {
     CiderPlug.callPlugins("onNowPlayingItemDidChange", attributes);
 });
 
-ipcMain.on("updatePlaybackProgress", (_event, attributes) => {
-    CiderPlug.callPlugins("updatePlaybackProgress", attributes);
-})
-
 app.on("before-quit", () => {
     CiderPlug.callPlugins("onBeforeQuit");
     console.warn(`${app.getName()} exited.`);

src/main/plugins/mpris.ts

@@ -10,8 +10,6 @@ export default class mpris {
      * MPRIS Service
      */
     private static player: Player.Player;
-    private static globalAttributes: any = {}
-
     /**
      * Base Plugin Details (Eventually implemented into a GUI in settings)
      */
@@ -72,10 +70,14 @@ export default class mpris {
         player.on('play', () => mpris.utils.playback.play())
         player.on('pause', () => mpris.utils.playback.pause())
         player.on('quit', () => mpris.utils.getApp().exit())
-        player.on('position', (args: { position: any; }) => mpris.utils.playback.seek(args.position))
+        player.on('position', (args: { position: any; }) => mpris.utils.playback.seek(args.position / 1000 / 1000))
         player.on('loopStatus', (status: string) => renderer.executeJavaScript(`app.mk.repeatMode = ${loopType[status.toLowerCase()]}`))
         player.on('shuffle', () => renderer.executeJavaScript('app.mk.shuffleMode = (app.mk.shuffleMode === 0) ? 1 : 0'))
 
+        mpris.utils.getIPCMain().on('mpris:playbackTimeDidChange', (event: any, time: number) => {
+            player.getPosition = () => time;
+        })
+
         mpris.utils.getIPCMain().on('repeatModeDidChange', (_e: any, mode: number) => {
             switch (mode) {
                 case 0:
@@ -160,7 +162,6 @@ export default class mpris {
      */
     @mpris.linuxOnly
     onPlaybackStateDidChange(attributes: any): void {
-        mpris.globalAttributes = attributes
         mpris.player.playbackStatus = attributes?.status ? Player.PLAYBACK_STATUS_PLAYING : Player.PLAYBACK_STATUS_PAUSED
     }
 
@@ -170,14 +171,7 @@ export default class mpris {
      */
     @mpris.linuxOnly
     onNowPlayingItemDidChange(attributes: object): void {
-        mpris.globalAttributes = attributes
         mpris.updateMetaData(attributes);
     }
 
-    @mpris.linuxOnly
-    updatePlaybackProgress(attributes: any): void {
-        mpris.globalAttributes = attributes
-        mpris.player.getPosition = () => attributes.currentPlaybackTime * 1000 * 1000;
-    }
-
 }

src/preload/cider-preload.js

@@ -17,10 +17,13 @@ const MusicKitInterop = {
 		/** wsapi */
 		MusicKit.getInstance().addEventListener(MusicKit.Events.playbackProgressDidChange, () => {
 			ipcRenderer.send('wsapi-updatePlaybackState', MusicKitInterop.getAttributes());
-			ipcRenderer.send('updatePlaybackProgress', MusicKitInterop.getAttributes());
 		});
 		/** wsapi */
 
+		MusicKit.getInstance().addEventListener(MusicKit.Events.playbackTimeDidChange, () => {
+			ipcRenderer.send('mpris:playbackTimeDidChange', (MusicKit.getInstance()?.currentPlaybackTime * 1000 * 1000 ) ?? 0);
+		})
+
 		MusicKit.getInstance().addEventListener(MusicKit.Events.nowPlayingItemDidChange, async () => {
 			console.debug('[cider:preload] nowPlayingItemDidChange')
 			const attributes = MusicKitInterop.getAttributes()

src/renderer/assets/spatialization.svg

@@ -0,0 +1,7 @@
+<svg fill="#fff" viewBox="0 0 20 20" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 12.5c-5.92 0-9 3.5-9 5.5v1h18v-1c0-2-3.08-5.5-9-5.5z"/>
+  <circle cx="10" cy="6" r="5"/>
+  <g style="fill:#fff">
+    <path d="M47.788 25.736a19.5 19.5 0 0 1 0 21.4m7.1-28.5a30 30 0 0 1 0 35.6m6.5-42.1a38.8 38.8 0 0 1 0 48.6m105.752-35a19.5 19.5 0 0 0 0 21.4m-7.1-28.5a30 30 0 0 0 0 35.6m-6.5-42.1a38.8 38.8 0 0 0 0 48.6" style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round" transform="translate(-7.276 -.048) scale(.16067)"/>
+  </g>
+</svg>

src/renderer/less/directives.less

@@ -35,6 +35,11 @@
             margin          : 0px;
             height          : 100%;
             position        : relative;
+            white-space: nowrap;
+
+            ._svg-icon {
+              flex: 0 0 auto;
+            }
 
             &:before {
               --dist          : 1px;

src/renderer/main/vueapp.js

@@ -1226,7 +1226,7 @@ const app = new Vue({
             } else if (this.cfg.visual.directives[directive]) {
                 return this.cfg.visual.directives[directive]
             } else {
-                return ""
+                return false
             }
         },
         unauthorize() {
@@ -3196,45 +3196,40 @@ const app = new Vue({
             function getMXMTrans(lang, vanity_id) {
                 try { 
                     if (lang != "disabled" && vanity_id != '') { // Mode 2 -> Trans
-                        fetch('https://www.musixmatch.com/lyrics/' + vanity_id +'/translation/' + lang, {
-                            method: 'GET',
-                            headers: {
-                                'Host': 'musixmatch.com',
-                                'User-Agent': "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36",
-                                'authority': "www.musixmatch.com"
-                            },
-                        })
-                            .then(async (res) => {
-                                if (res.status != 200) {return}
-                                let html = document.createElement('html'); html.innerHTML = await res.text()
-                                let lyric_isolated = html.querySelector("#site > div > div > div > main > div > div > div.mxm-track-lyrics-container > div.container > div > div > div > div.col-sm-12.col-md-10.col-ml-9.col-lg-9 > div.mxm-lyrics.translated > div.row > div.col-xs-12.col-sm-12.col-md-12.col-ml-12.col-lg-12")
-                                let raw_lines = lyric_isolated.getElementsByClassName("col-xs-6 col-sm-6 col-md-6 col-ml-6 col-lg-6")
-                                let applied = 0; 
-                                for (let i = 1; applied < app.lyrics.length; i+=2) { // Start on odd elements because even ones are original.
-                                    if (raw_lines[i].childNodes[0].childNodes[0].textContent.trim() == "") {i+=2;}
-                                    if (app.lyrics[applied].line.trim() == "") {applied+=1;}
-                                    if (app.lyrics[applied].line.trim() === raw_lines[i].childNodes[0].childNodes[0].textContent.trim().replace('′', "'")) {                           
+                        let url = "https://api.cider.sh/v1/lyrics?vanityID=" + vanity_id +'&source=mxm&lang=' + lang;
+                        let req = new XMLHttpRequest();
+                        req.overrideMimeType("application/json");
+                        req.onload = function () { 
+                            if (req.status == 200) { // If it's not 200, 237890127389012 things could go wrong and I don't really care what those things are.
+                                let jsonResponse = JSON.parse(this.responseText);     
+                                let applied = 0;
+                                for (let i = 0; applied < app.lyrics.length; i++) { 
+                                    if (app.lyrics[applied].line.trim() === "") {applied+=1;}
+                                    if (app.lyrics[applied].line.trim() === jsonResponse[i]) {                           
                                         // Do Nothing
                                         applied +=1;
                                     }
                                     else  {                
                                         if (app.lyrics[applied].line === "lrcInstrumental") { 
-                                            if (app.lyrics[applied+1].line.trim() === raw_lines[i].childNodes[0].childNodes[0].textContent.trim()) {                           
+                                            if (app.lyrics[applied+1].line.trim() === jsonResponse[i]) {                           
                                                 // Do Nothing
                                                 applied +=2;
                                             }
                                             else {
-                                                app.lyrics[applied+1].translation = raw_lines[i].childNodes[0].childNodes[0].textContent.trim();  
+                                                app.lyrics[applied+1].translation = jsonResponse[i];  
                                                 applied +=2;
                                                 }                      
                                         }      
                                         else {
-                                            app.lyrics[applied].translation = raw_lines[i].childNodes[0].childNodes[0].textContent.trim();       
+                                            app.lyrics[applied].translation = jsonResponse[i];       
                                             applied +=1;
                                         }
                                     } 
                                 }
-                            })
+                            }
+                        }
+                        req.open('POST', url, true);
+                        req.send();
                     }
                 } catch (e) {console.debug("Error while parsing MXM Trans: " + e)}
 

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

@@ -43,38 +43,40 @@
       <div class="vdiv display--large" v-if="getThemeDirective('windowLayout') != 'twopanel'"></div>
     </template>
     <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
-      <div class="app-chrome-item display--large">
-        <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" :class="isDisabled() && 'disabled'"
-          @click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')" v-b-tooltip.hover></button>
-        <button class="playback-button--small shuffle active" v-else :class="isDisabled() && 'disabled'"
-          @click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button>
-      </div>
-      <div class="app-chrome-item display--large">
-        <button class="playback-button previous" @click="prevButton()" :class="isPrevDisabled() && 'disabled'"
-          :title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
-      </div>
-      <div class="app-chrome-item display--large">
-        <button class="playback-button stop" @click="mk.stop()"
-          v-if="mk.isPlaying && mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
-          :title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
-        <button class="playback-button pause" @click="mk.pause()" v-else-if="mk.isPlaying"
-          :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
-        <button class="playback-button play" @click="mk.play()" v-else :title="$root.getLz('term.play')"
-          v-b-tooltip.hover></button>
-      </div>
-      <div class="app-chrome-item display--large">
-        <button class="playback-button next" @click="skipToNextItem()" :class="isNextDisabled() && 'disabled'"
-          :title="$root.getLz('term.next')" v-b-tooltip.hover></button>
-      </div>
-      <div class="app-chrome-item display--large">
-        <button class="playback-button--small repeat" v-if="mk.repeatMode == 0" :class="isDisabled() && 'disabled'"
-          @click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')" v-b-tooltip.hover></button>
-        <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
-          :class="isDisabled() && 'disabled'" v-else-if="mk.repeatMode == 1"
-          :title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
-        <button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
-          :class="isDisabled() && 'disabled'" v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
-          v-b-tooltip.hover></button>
+      <div class="app-chrome-item playback-control-buttons">
+        <div class="app-chrome-item display--large">
+          <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" :class="isDisabled() && 'disabled'"
+            @click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')" v-b-tooltip.hover></button>
+          <button class="playback-button--small shuffle active" v-else :class="isDisabled() && 'disabled'"
+            @click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button>
+        </div>
+        <div class="app-chrome-item display--large">
+          <button class="playback-button previous" @click="prevButton()" :class="isPrevDisabled() && 'disabled'"
+            :title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
+        </div>
+        <div class="app-chrome-item display--large">
+          <button class="playback-button stop" @click="mk.stop()"
+            v-if="mk.isPlaying && mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
+            :title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
+          <button class="playback-button pause" @click="mk.pause()" v-else-if="mk.isPlaying"
+            :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
+          <button class="playback-button play" @click="mk.play()" v-else :title="$root.getLz('term.play')"
+            v-b-tooltip.hover></button>
+        </div>
+        <div class="app-chrome-item display--large">
+          <button class="playback-button next" @click="skipToNextItem()" :class="isNextDisabled() && 'disabled'"
+            :title="$root.getLz('term.next')" v-b-tooltip.hover></button>
+        </div>
+        <div class="app-chrome-item display--large">
+          <button class="playback-button--small repeat" v-if="mk.repeatMode == 0" :class="isDisabled() && 'disabled'"
+            @click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')" v-b-tooltip.hover></button>
+          <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
+            :class="isDisabled() && 'disabled'" v-else-if="mk.repeatMode == 1"
+            :title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
+          <button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
+            :class="isDisabled() && 'disabled'" v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
+            v-b-tooltip.hover></button>
+        </div>
       </div>
     </template>
   </div>

src/renderer/views/components/sidebar.ejs

@@ -38,7 +38,7 @@
         </template>
         <div class="app-sidebar-content" scrollaxis="y">
             <!-- AM Navigation -->
-            <template v-if="$root.getThemeDirective('windowLayout') != 'twopanel'">
+            <div v-show="$root.getThemeDirective('windowLayout') != 'twopanel'" class="sidebarCatalogSection">
                 <div
                         class="app-sidebar-header-text"
                         @click="$root.cfg.general.sidebarCollapsed.cider = !$root.cfg.general.sidebarCollapsed.cider"
@@ -84,7 +84,7 @@
                             page="radio"
                     ></sidebar-library-item>
                 </template>
-            </template>
+            </div>
 
             <div
                     class="app-sidebar-header-text"

src/renderer/views/main.ejs

@@ -116,7 +116,7 @@
 <% } %>
 
 <script async
-        src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js") %>"
+        src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://api.cider.sh/musickit.js") %>"
         data-web-components>
 </script>
 <script src="index.js?v=1"></script>

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

@@ -1,5 +1,5 @@
 <script type="text/x-template" id="cider-playlist">
-    <div class="content-inner playlist-page" :class="classes" v-if="data != [] && data.attributes != null"
+    <div class="content-inner playlist-page" :class="classes" :is-album="isAlbum()" v-if="data != [] && data.attributes != null"
 
          :style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}">
         <template v-if="app.playlists.loadingState == 0">
@@ -347,6 +347,9 @@
             }
         },
         methods: {
+            isAlbum() {
+                return (this.data.attributes?.playParams?.kind ?? this.data.type ?? '').includes('album')
+            },
             minClass(val) {
                 if(app.appMode == 'fullscreen') {
                     return