fix lyrics priority and pip

package.json

@@ -42,10 +42,11 @@
     "format:write": "npx prettier --write \"src/**/*.{js,json,ts,less}\""
   },
   "dependencies": {
+    "@achingbrain/ssdp": "^4.0.1",
     "@sentry/electron": "^4.0.3",
     "@sentry/integrations": "^7.14.2",
     "adm-zip": "0.4.10",
-    "airtunes2": "github:ciderapp/node_airtunes2",
+    "airtunes2": "git+https://github.com/ciderapp/node_airtunes2.git",
     "castv2-client": "^1.2.0",
     "chokidar": "^3.5.3",
     "discord-auto-rpc": "^1.0.17",
@@ -66,10 +67,13 @@
     "music-metadata": "7.12.6",
     "node-gyp": "^9.2.0",
     "node-ssdp": "^4.0.1",
+    "node-ssdp-js": "^0.9.6",
     "qrcode": "^1.5.1",
     "request": "^2.88.2",
     "run-script-os": "^1.1.6",
+    "simple-ssdp": "^1.0.2",
     "source-map-support": "^0.5.21",
+    "ssdp-js": "^1.0.1",
     "ts-md5": "1.2.11",
     "upnp-mediarenderer-client": "github:vapormusic/node-upnp-mediarenderer-client",
     "v8-compile-cache": "^2.3.0",

src/renderer/main/vueapp.js

@@ -3267,7 +3267,9 @@ const app = new Vue({
         this.loadYTLyrics();
       } else {
         // only load MXM lyrics if AM lyrics failed to load
-        this.loadAMLyrics();
+        if (app.cfg.lyrics.enable_mxm) {
+        this.loadMXM();} else {
+        this.loadAMLyrics();}
       }
     },
     async loadAMLyrics() {
@@ -3279,10 +3281,16 @@ const app = new Vue({
           this.lyricsMediaItem = response.data?.data[0]?.attributes["ttml"];
           this.parseTTML();
         } catch (_) {
-          this.loadMXM();
+          if (app.cfg.lyrics.enable_mxm) {
+            this.loadQQLyrics()
+          } else {
+          this.loadMXM();}
         }
       } else {
-        this.loadMXM();
+        if (app.cfg.lyrics.enable_mxm) {
+          this.loadQQLyrics() // since mxm is already prioritized, we can just load qq lyrics if am fails
+        } else {
+          this.loadMXM();}
       }
     },
     addToLibrary(id) {
@@ -3415,8 +3423,7 @@ const app = new Vue({
                 }
 
                 if (lrcfile === "") {
-                  app.loadQQLyrics();
-                  // app.loadAMLyrics()
+                  app.loadAMLyrics()
                 } else {
                   if (richsync == [] || richsync.length == 0) {
                     console.log("musixmatch worki");
@@ -3468,20 +3475,17 @@ const app = new Vue({
                 }
               } catch (e) {
                 console.log(e);
-                app.loadQQLyrics();
-                //  app.loadAMLyrics()
+                app.loadAMLyrics()
               }
             }
           } catch (e) {
             console.error(e);
-            app.loadQQLyrics();
-            //app.loadAMLyrics()
+            app.loadAMLyrics()
           }
         };
         req.onerror = function () {
-          app.loadQQLyrics();
           console.log("error");
-          // app.loadAMLyrics();
+          app.loadAMLyrics();
         };
         req.open("POST", url, true);
         req.send();

src/renderer/style.less

@@ -2399,7 +2399,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   &.mini {
     width: 20%;
     height: 20%;
-    right: 1vw;
+    right: 2vw;
     bottom: 5vh;
   }
 }
@@ -2431,6 +2431,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     filter: opacity(0.6);
     transition: 0.2s ease-in-out filter;
 
+    &.mini {
+      right: 0px;
+    }
+
     &:hover {
       filter: opacity(1);
       transition: 0.2s ease-in-out filter;

src/renderer/views/app/panels.ejs

@@ -117,13 +117,13 @@
                                 :style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
                     </template>
                 </div>
-                <div id="player-pip"
+                <div id="player-pip" :class="{'mini': mvViewMode == 'mini'}"
                      @click="pip()"
                      title="Picture-in-Picture"
                      v-b-tooltip.hover>
                     <%- include("../svg/pip.svg") %>
                 </div>
-                <div id="player-fullscreen"
+                <div id="player-fullscreen" v-if="mvViewMode == 'full'"
                      @click="fullscreen(!fullscreenState, true)"
                      title="Fullscreen"
                      v-b-tooltip.hover>