feat: add UnblockNeteaseMusic switch

src/components/TrackListItem.vue

@@ -131,7 +131,7 @@ export default {
     },
     trackClass() {
       let trackClass = [this.type];
-      if (!this.track.playable && this.settings.showUnavailableSongInGreyStyle)
+      if (!this.track.playable && this.showUnavailableSongInGreyStyle)
         trackClass.push("disable");
       if (this.isPlaying && this.highlightPlayingTrack)
         trackClass.push("playing");
@@ -148,7 +148,9 @@ export default {
       );
     },
     showUnavailableSongInGreyStyle() {
-      return this.$store.state.settings.showUnavailableSongInGreyStyle;
+      return process.env.IS_ELECTRON
+        ? !this.$store.state.settings.enableUnblockNeteaseMusic
+        : true;
     },
   },
   methods: {

src/locale/lang/en.js

@@ -149,8 +149,6 @@ export default {
     showLyricsTranslation: "Show lyrics translation",
     showLyricsDynamicBackground: "Show lyrics dynamic background",
     minimizeToTray: "Minimize to tray",
-    showGitHubIcon: "Show GitHub icon",
-    showUnavailableSongInGreyStyle: "Show unavailable song in grey style",
     showPlaylistsByAppleMusic: "Show playlists by Apple Music",
     enableDiscordRichPresence: "Enable Discord Rich Presence",
     enableGlobalShortcut: "Enable Global Shortcut",

src/locale/lang/tr.js

@@ -149,8 +149,6 @@ export default {
     showLyricsTranslation: "Müzik sözlerinin çevirilerini göster",
     showLyricsDynamicBackground: "Dinamik arkaplanda müzik sözlerini gsöter",
     minimizeToTray: "Küçült",
-    showGitHubIcon: "GitHub ikonunu göster",
-    showUnavailableSongInGreyStyle: "Erişilemeyen müzikleri gri stilde göster",
     showPlaylistsByAppleMusic: "Apple Music'in Çalma Listelerini Göster",
     enableDiscordRichPresence: "Discord gösterimini aktifleştir",
     showLibraryDefault: "Kitaplık Varsayılanını göster",

src/locale/lang/zh-CN.js

@@ -150,8 +150,6 @@ export default {
     showLyricsTranslation: "显示歌词翻译",
     showLyricsDynamicBackground: "显示歌词动态背景",
     minimizeToTray: "最小化到托盘",
-    showGitHubIcon: "显示 GitHub 图标",
-    showUnavailableSongInGreyStyle: "显示不可播放的歌曲为灰色",
     showPlaylistsByAppleMusic: "首页显示来自 Apple Music 的歌单",
     enableDiscordRichPresence: "启用 Discord Rich Presence",
     enableGlobalShortcut: "启用全局快捷键",

src/store/initLocalStorage.js

@@ -14,7 +14,7 @@ let localStorage = {
     lyricFontSize: 28,
     outputDevice: "default",
     showPlaylistsByAppleMusic: true,
-    showUnavailableSongInGreyStyle: true,
+    enableUnblockNeteaseMusic: true,
     automaticallyCacheSongs: false,
     cacheLimit: false,
     nyancatStyle: false,
@@ -36,7 +36,6 @@ let localStorage = {
 
 if (process.env.IS_ELECTRON === true) {
   localStorage.settings.automaticallyCacheSongs = true;
-  localStorage.settings.showUnavailableSongInGreyStyle = false;
 }
 
 export default localStorage;

src/utils/Player.js

@@ -228,7 +228,13 @@ export default class {
     }
   }
   _getAudioSourceFromUnblockMusic(track) {
-    if (process.env.IS_ELECTRON !== true) return null;
+    console.debug(`[debug][Player.js] _getAudioSourceFromUnblockMusic`);
+    if (
+      process.env.IS_ELECTRON !== true ||
+      store.state.settings.enableUnblockNeteaseMusic === false
+    ) {
+      return null;
+    }
     const source = ipcRenderer.sendSync("unblock-music", track);
     if (store.state.settings.automaticallyCacheSongs && source?.url) {
       // TODO: 将unblockMusic字样换成真正的来源（比如酷我咪咕等）

src/utils/updateApp.js

@@ -3,21 +3,8 @@ import pkg from "../../package.json";
 
 const updateSetting = () => {
   const parsedSettings = JSON.parse(localStorage.getItem("settings"));
-  const {
-    showUnavailableSongInGreyStyle,
-    automaticallyCacheSongs,
-    nyancatStyle,
-    showLyricsTranslation,
-    minimizeToTray,
-    enabledPlaylistCategories,
-  } = initLocalStorage.settings;
   const settings = {
-    showUnavailableSongInGreyStyle,
-    automaticallyCacheSongs,
-    nyancatStyle,
-    showLyricsTranslation,
-    minimizeToTray,
-    enabledPlaylistCategories,
+    ...initLocalStorage.settings,
     ...parsedSettings,
   };
 

src/views/settings.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="settings">
     <div class="container">
-      <div class="user" v-if="showUserInfo">
+      <div v-if="showUserInfo" class="user">
         <div class="left">
           <img class="avatar" :src="data.user.avatarUrl" />
           <div class="info">
@@ -14,7 +14,7 @@
                 />
                 <span class="text">黑胶VIP</span>
               </span>
-              <span class="text" v-else>{{ data.user.signature }}</span>
+              <span v-else class="text">{{ data.user.signature }}</span>
             </div>
           </div>
         </div>
@@ -75,12 +75,12 @@
           </select>
         </div>
       </div>
-      <div class="item" v-if="isElectron">
+      <div v-if="isElectron" class="item">
         <div class="left">
           <div class="title"> {{ $t("settings.deviceSelector") }} </div>
         </div>
         <div class="right">
-          <select v-model="outputDevice" :disabled="withoutAudioPriviledge">
+          <select v-model="outputDevice" :disabled="withoutAudioPrivilege">
             <option
               v-for="device in allOutputDevices"
               :key="device.deviceId"
@@ -92,7 +92,7 @@
           </select>
         </div>
       </div>
-      <div class="item" v-if="isElectron">
+      <div v-if="isElectron" class="item">
         <div class="left">
           <div class="title">
             {{ $t("settings.automaticallyCacheSongs") }}
@@ -101,16 +101,16 @@
         <div class="right">
           <div class="toggle">
             <input
-              type="checkbox"
-              name="automatically-cache-songs"
               id="automatically-cache-songs"
               v-model="automaticallyCacheSongs"
+              type="checkbox"
+              name="automatically-cache-songs"
             />
             <label for="automatically-cache-songs"></label>
           </div>
         </div>
       </div>
-      <div class="item" v-if="isElectron">
+      <div v-if="isElectron" class="item">
         <div class="left">
           <div class="title"> {{ $t("settings.cacheLimit.text") }} </div>
         </div>
@@ -126,7 +126,7 @@
           </select>
         </div>
       </div>
-      <div class="item" v-if="isElectron">
+      <div v-if="isElectron" class="item">
         <div class="left">
           <div class="title">
             {{
@@ -150,10 +150,10 @@
         <div class="right">
           <div class="toggle">
             <input
-              type="checkbox"
-              name="show-lyrics-translation"
               id="show-lyrics-translation"
               v-model="showLyricsTranslation"
+              type="checkbox"
+              name="show-lyrics-translation"
             />
             <label for="show-lyrics-translation"></label>
           </div>
@@ -168,10 +168,10 @@
         <div class="right">
           <div class="toggle">
             <input
-              type="checkbox"
-              name="show-lyrics-dynamic-background"
               id="show-lyrics-dynamic-background"
               v-model="showLyricsDynamicBackground"
+              type="checkbox"
+              name="show-lyrics-dynamic-background"
             />
             <label for="show-lyrics-dynamic-background"></label>
           </div>
@@ -198,17 +198,17 @@
           </select>
         </div>
       </div>
-      <div class="item" v-if="isElectron && !isMac">
+      <div v-if="isElectron && !isMac" class="item">
         <div class="left">
           <div class="title">{{ $t("settings.minimizeToTray") }}</div>
         </div>
         <div class="right">
           <div class="toggle">
             <input
-              type="checkbox"
-              name="minimize-to-tray"
               id="minimize-to-tray"
               v-model="minimizeToTray"
+              type="checkbox"
+              name="minimize-to-tray"
             />
             <label for="minimize-to-tray"></label>
           </div>
@@ -226,10 +226,10 @@
           >
         </div>
         <div class="right">
-          <button @click="lastfmDisconnect()" v-if="isLastfmConnected"
+          <button v-if="isLastfmConnected" @click="lastfmDisconnect()"
             >断开连接
           </button>
-          <button @click="lastfmConnect()" v-else> 授权连接 </button>
+          <button v-else @click="lastfmConnect()"> 授权连接 </button>
         </div>
       </div>
 
@@ -240,10 +240,10 @@
         <div class="right">
           <div class="toggle">
             <input
-              type="checkbox"
-              name="show-library-default"
               id="show-library-default"
               v-model="showLibraryDefault"
+              type="checkbox"
+              name="show-library-default"
             />
             <label for="show-library-default"></label>
           </div>
@@ -252,22 +252,28 @@
 
       <div class="item">
         <div class="left">
-          <div class="title">
-            {{ $t("settings.showUnavailableSongInGreyStyle") }}</div
+          <div class="title"
+            >启用
+            <a
+              href="https://github.com/nondanee/UnblockNeteaseMusic"
+              target="blank"
+              >UnblockNeteaseMusic</a
+            ></div
           >
         </div>
         <div class="right">
           <div class="toggle">
             <input
+              id="enable-unblock-netease-music"
+              v-model="enableUnblockNeteaseMusic"
               type="checkbox"
-              name="show-unavailable-song-grey"
-              id="show-unavailable-song-grey"
-              v-model="showUnavailableSongInGreyStyle"
+              name="enable-unblock-netease-music"
             />
-            <label for="show-unavailable-song-grey"></label>
+            <label for="enable-unblock-netease-music"></label>
           </div>
         </div>
       </div>
+
       <div class="item">
         <div class="left">
           <div class="title">
@@ -277,16 +283,16 @@
         <div class="right">
           <div class="toggle">
             <input
-              type="checkbox"
-              name="show-playlists-by-apple-music"
               id="show-playlists-by-apple-music"
               v-model="showPlaylistsByAppleMusic"
+              type="checkbox"
+              name="show-playlists-by-apple-music"
             />
             <label for="show-playlists-by-apple-music"></label>
           </div>
         </div>
       </div>
-      <div class="item" v-if="isElectron">
+      <div v-if="isElectron" class="item">
         <div class="left">
           <div class="title">
             {{ $t("settings.enableDiscordRichPresence") }}</div
@@ -295,26 +301,26 @@
         <div class="right">
           <div class="toggle">
             <input
-              type="checkbox"
-              name="enable-discord-rich-presence"
               id="enable-discord-rich-presence"
               v-model="enableDiscordRichPresence"
+              type="checkbox"
+              name="enable-discord-rich-presence"
             />
             <label for="enable-discord-rich-presence"></label>
           </div>
         </div>
       </div>
-      <div class="item" v-if="isElectron">
+      <div v-if="isElectron" class="item">
         <div class="left">
           <div class="title"> {{ $t("settings.enableGlobalShortcut") }}</div>
         </div>
         <div class="right">
           <div class="toggle">
             <input
-              type="checkbox"
-              name="enable-enable-global-shortcut"
               id="enable-enable-global-shortcut"
               v-model="enableGlobalShortcut"
+              type="checkbox"
+              name="enable-enable-global-shortcut"
             />
             <label for="enable-enable-global-shortcut"></label>
           </div>
@@ -327,10 +333,10 @@
         <div class="right">
           <div class="toggle">
             <input
-              type="checkbox"
-              name="nyancat-style"
               id="nyancat-style"
               v-model="nyancatStyle"
+              type="checkbox"
+              name="nyancat-style"
             />
             <label for="nyancat-style"></label>
           </div>
@@ -357,7 +363,7 @@ import { countDBSize, clearDB } from "@/utils/db";
 import pkg from "../../package.json";
 
 export default {
-  name: "settings",
+  name: "Settings",
   data() {
     return {
       tracksCache: {
@@ -370,7 +376,7 @@ export default {
           label: "settings.permissionRequired",
         },
       ],
-      withoutAudioPriviledge: true,
+      withoutAudioPrivilege: true,
     };
   },
   computed: {
@@ -432,7 +438,7 @@ export default {
     },
     outputDevice: {
       get() {
-        if (this.withoutAudioPriviledge === true) this.getAllOutputDevices();
+        if (this.withoutAudioPrivilege === true) this.getAllOutputDevices();
         const isValidDevice = this.allOutputDevices.find(
           (device) => device.deviceId === this.settings.outputDevice
         );
@@ -450,13 +456,13 @@ export default {
         this.player.setOutputDevice();
       },
     },
-    showUnavailableSongInGreyStyle: {
+    enableUnblockNeteaseMusic: {
       get() {
-        return this.settings.showUnavailableSongInGreyStyle;
+        return this.settings.enableUnblockNeteaseMusic || true;
       },
       set(value) {
         this.$store.commit("updateSettings", {
-          key: "showUnavailableSongInGreyStyle",
+          key: "enableUnblockNeteaseMusic",
           value,
         });
       },
@@ -581,6 +587,12 @@ export default {
       return this.lastfm.key !== undefined;
     },
   },
+  created() {
+    this.countDBSize("tracks");
+  },
+  activated() {
+    this.countDBSize("tracks");
+  },
   methods: {
     getAllOutputDevices() {
       navigator.mediaDevices.enumerateDevices().then((devices) => {
@@ -639,12 +651,6 @@ export default {
       this.$store.commit("updateLastfm", {});
     },
   },
-  created() {
-    this.countDBSize("tracks");
-  },
-  activated() {
-    this.countDBSize("tracks");
-  },
 };
 </script>