feat: allow customizing UNM's sources (#1134)

* feat(ipcMain/unm): allow passing customized source

* feat(utils/Player): pass settings.unmSource

According to c280221a44,
we can let users customize their desired source now.

* feat(views/settings): allow configuring sources

We haven't supported specifying the environment variable in YPM yet.

src/electron/ipcMain.js

@@ -48,8 +48,18 @@ async function getBiliVideoFile(url) {
   return `data:application/octet-stream;base64,${encodedData}`;
 }
 
+/**
+ * Parse the source string (`a, b`) to source list `['a', 'b']`.
+ *
+ * @param {string} sourceString The source string.
+ * @returns {string[]} The source list.
+ */
+function parseSourceStringToList(sourceString) {
+  return sourceString.split(',').map(s => s.trim());
+}
+
 export function initIpcMain(win, store) {
-  ipcMain.handle('unblock-music', async (_, track) => {
+  ipcMain.handle('unblock-music', async (_, track, source) => {
     // 兼容 unblockneteasemusic 所使用的 api 字段
     track.alias = track.alia || [];
     track.duration = track.dt || 0;
@@ -62,11 +72,15 @@ export function initIpcMain(win, store) {
       }, 5000);
     });
 
+    const sourceList =
+      typeof source === 'string' ? parseSourceStringToList(source) : null;
+    log(`[UNM] using source: ${sourceList || '<default>'}`);
+
     try {
       const matchedAudio = await Promise.race([
         // TODO: tell users to install yt-dlp.
         // we passed "null" to source, to let UNM choose the default source.
-        match(track.id, null, track),
+        match(track.id, sourceList, track),
         timeoutPromise,
       ]);
 

src/utils/Player.js

@@ -299,7 +299,11 @@ export default class {
     ) {
       return null;
     }
-    const source = await ipcRenderer.invoke('unblock-music', track);
+    const source = await ipcRenderer.invoke(
+      'unblock-music',
+      track,
+      store.state.settings.unmSource
+    );
     if (store.state.settings.automaticallyCacheSongs && source?.url) {
       // TODO: 将unblockMusic字样换成真正的来源（比如酷我咪咕等）
       cacheTrackSource(track, source.url, 128000, 'unblockMusic');

src/views/settings.vue

@@ -222,6 +222,58 @@
         </div>
       </div>
 
+      <section v-if="isElectron" class="unm-configuration">
+        <h3>UnblockNeteaseMusic 设定</h3>
+        <div class="item">
+          <div class="left">
+            <div class="title"
+              >启用
+              <a
+                href="https://github.com/UnblockNeteaseMusic/server"
+                target="blank"
+                >UnblockNeteaseMusic</a
+              ></div
+            >
+          </div>
+          <div class="right">
+            <div class="toggle">
+              <input
+                id="enable-unblock-netease-music"
+                v-model="enableUnblockNeteaseMusic"
+                type="checkbox"
+                name="enable-unblock-netease-music"
+              />
+              <label for="enable-unblock-netease-music"></label>
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="left">
+            <div class="title"> 备选音源 </div>
+            <div class="description">
+              音源的具体代号
+              <a
+                href="https://github.com/UnblockNeteaseMusic/server#音源清单"
+                target="_blank"
+              >
+                可以点此到 UNM 的说明页面查询 </a
+              ><br />
+              多个音源请用 <code>,</code> 逗号分隔。<br />
+              留空则使用 UNM 内置的默认值。
+            </div>
+          </div>
+          <div class="right">
+            <input
+              id="unm-source"
+              v-model="unmSource"
+              class="text-input"
+              placeholder="例 bilibili, kuwo"
+            />
+            <label for="unm-source"></label>
+          </div>
+        </div>
+      </section>
+
       <h3>第三方</h3>
       <div class="item">
         <div class="left">
@@ -240,29 +292,6 @@
           <button v-else @click="lastfmConnect()"> 授权连接 </button>
         </div>
       </div>
-      <div v-if="isElectron" class="item">
-        <div class="left">
-          <div class="title"
-            >启用
-            <a
-              href="https://github.com/UnblockNeteaseMusic/server"
-              target="blank"
-              >UnblockNeteaseMusic</a
-            ></div
-          >
-        </div>
-        <div class="right">
-          <div class="toggle">
-            <input
-              id="enable-unblock-netease-music"
-              v-model="enableUnblockNeteaseMusic"
-              type="checkbox"
-              name="enable-unblock-netease-music"
-            />
-            <label for="enable-unblock-netease-music"></label>
-          </div>
-        </div>
-      </div>
       <div v-if="isElectron" class="item">
         <div class="left">
           <div class="title">
@@ -852,6 +881,21 @@ export default {
         });
       },
     },
+    unmSource: {
+      /**
+       * @returns {string}
+       */
+      get() {
+        return this.settings.unmSource || '';
+      },
+      /** @param {string?} value */
+      set(value) {
+        this.$store.commit('updateSettings', {
+          key: 'unmSource',
+          value: value.length ? value : null,
+        });
+      },
+    },
     isLastfmConnected() {
       return this.lastfm.key !== undefined;
     },
@@ -1128,6 +1172,12 @@ h3 {
     font-weight: 500;
     opacity: 0.78;
   }
+
+  .description {
+    font-size: 14px;
+    margin-top: 0.5em;
+    opacity: 0.7;
+  }
 }
 
 select {