fix: bugs

.env.example

@@ -1,5 +1,5 @@
-VUE_APP_NETEASE_API_URL=http://127.0.0.1:3000
+VUE_APP_NETEASE_API_URL=/api
 VUE_APP_ELECTRON_API_URL=/api
 VUE_APP_ELECTRON_API_URL_DEV=http://127.0.0.1:3000
 VUE_APP_ENABLE_SENTRY=false
-DEV_SERVER_PORT=20201
+DEV_SERVER_PORT=20201

.github/workflows/build.yaml

@@ -8,7 +8,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [macos-latest, windows-latest]
+        os: [macos-latest, windows-latest, ubuntu-latest]
 
     steps:
       - name: Check out Git repository
@@ -17,10 +17,17 @@ jobs:
       - name: Install Node.js, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: 12.16.3
+          node-version: 14.16.0
+
+      - name: Install RPM & Pacman (only on Linux)
+        if: runner.os == 'Linux'
+        run: |
+          sudo apt-get update &&
+          sudo apt-get install --no-install-recommends -y rpm &&
+          sudo apt-get install --no-install-recommends -y bsdtar
 
       - name: Build/release Electron app
-        uses: samuelmeuli/action-electron-builder@v1
+        uses: samuelmeuli/action-electron-builder@v1.6.0
         with:
           # GitHub token, automatically provided to the action
           # (No need to define this secret in the repo settings)
@@ -35,11 +42,17 @@ jobs:
       - uses: actions/upload-artifact@v2
         with:
           name: YesPlayMusic-mac
-          path: dist_electron/*.dmg
+          path: dist_electron/*-universal.dmg
           if-no-files-found: ignore
 
       - uses: actions/upload-artifact@v2
         with:
           name: YesPlayMusic-win
-          path: dist_electron/*.exe
+          path: dist_electron/*Setup*.exe
+          if-no-files-found: ignore
+
+      - uses: actions/upload-artifact@v2
+        with:
+          name: YesPlayMusic-linux
+          path: dist_electron/*.AppImage
           if-no-files-found: ignore

package.json

@@ -33,7 +33,8 @@
     "core-js": "^3.6.5",
     "crypto-js": "^4.0.0",
     "dayjs": "^1.8.36",
-    "electron": "11.0.2",
+    "electron": "^12.0.0",
+    "electron-builder": "^22.10.5",
     "electron-context-menu": "^2.3.0",
     "electron-debug": "^3.1.0",
     "electron-devtools-installer": "^3.1.1",
@@ -60,7 +61,6 @@
     "vscode-codicons": "^0.0.14",
     "vue": "^2.6.11",
     "vue-analytics": "^5.22.1",
-    "vue-electron": "^1.0.6",
     "vue-i18n": "^8.22.0",
     "vue-router": "^3.4.3",
     "vue-slider-component": "^3.2.5",
@@ -76,7 +76,6 @@
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
-    "electron-builder": "^22.10.5",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "husky": "^4.3.0",

src/background.js

@@ -12,6 +12,7 @@ import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
 import express from "express";
 import expressProxy from "express-http-proxy";
 import Store from "electron-store";
+import path from "path";
 
 class Background {
   constructor() {
@@ -88,20 +89,18 @@ class Background {
   createWindow() {
     console.log("creating app window");
 
-    // Only for Windows, a special title bar for it
-    const withoutFrame = process.platform == "win32";
-
     this.window = new BrowserWindow({
       width: this.store.get("window.width") | 1440,
       height: this.store.get("window.height") | 840,
       minWidth: 1080,
       minHeight: 720,
       titleBarStyle: "hiddenInset",
-      frame: !withoutFrame,
+      frame: process.platform !== "win32",
       webPreferences: {
         webSecurity: false,
         nodeIntegration: true,
         enableRemoteModule: true,
+        contextIsolation: false,
       },
     });
 

src/components/FMCard.vue

@@ -8,7 +8,7 @@
     <div class="right-part">
       <div class="info">
         <div class="title">{{ track.name }}</div>
-        <div class="artist"><ArtistsInLine :artists="track.artists" /></div>
+        <div class="artist"><ArtistsInLine :artists="artists" /></div>
       </div>
       <div class="controls">
         <div class="buttons">
@@ -47,6 +47,9 @@ export default {
     isPlaying() {
       return this.player.playing && this.player.isPersonalFM;
     },
+    artists() {
+      return this.track.artists || this.track.ar || [];
+    },
   },
   methods: {
     play() {

src/components/Navbar.vue

@@ -73,15 +73,16 @@
 <script>
 import ButtonIcon from "@/components/ButtonIcon.vue";
 import { mapState } from "vuex";
-const platformIsWin32 = window.require
-  ? window.require("os").platform() == "win32"
-    ? true
-    : false
-  : false;
 
-const win = platformIsWin32
-  ? window.require("electron").remote.getCurrentWindow()
-  : null;
+// import icons for win32 title bar
+// icons by https://github.com/microsoft/vscode-codicons
+import "vscode-codicons/dist/codicon.css";
+
+let win = undefined;
+if (process.env.IS_ELECTRON === true) {
+  const electron = require("electron");
+  win = electron.remote.BrowserWindow.getFocusedWindow();
+}
 
 export default {
   name: "Navbar",
@@ -173,7 +174,7 @@ nav {
   display: none;
 }
 
-[data-electron-platform-win32="yes"] {
+[data-electron-os="win32"] {
   nav {
     padding-top: 20px;
     -webkit-app-region: no-drag;

src/electron/ipcMain.js

@@ -61,12 +61,4 @@ export function initIpcMain(win, store) {
   ipcMain.on("settings", (event, options) => {
     store.set("settings", options);
   });
-
-  ipcMain.on("max-restore", () => {
-    if (win.isMaximized()) {
-      win.restore();
-    } else {
-      win.maximize();
-    }
-  });
 }

src/electron/ipcRenderer.js

@@ -3,8 +3,8 @@ export function ipcRenderer(vueInstance) {
   // 添加专有的类名
   document.body.setAttribute("data-electron", "yes");
   document.body.setAttribute(
-    "data-electron-platform-win32",
-    window.require("os").platform() == "win32" ? "yes" : "no"
+    "data-electron-os",
+    window.require("os").platform()
   );
   // ipc message channel
   const electron = window.require("electron");

src/electron/tray.js

@@ -21,14 +21,18 @@ export function createTray(win) {
     const contextMenu = Menu.buildFromTemplate([
       {
         label: "播放/暂停",
-        icon: "src/assets/icons/play.png",
+        icon: nativeImage.createFromPath(
+          path.join(__static, "img/icons/play.png")
+        ),
         click: () => {
           win.webContents.send("play");
         },
       },
       {
         label: "上一首",
-        icon: "src/assets/icons/left.png",
+        icon: nativeImage.createFromPath(
+          path.join(__static, "img/icons/left.png")
+        ),
         accelerator: "CmdOrCtrl+Left",
         click: () => {
           win.webContents.send("previous");
@@ -36,7 +40,9 @@ export function createTray(win) {
       },
       {
         label: "下一首",
-        icon: "src/assets/icons/right.png",
+        icon: nativeImage.createFromPath(
+          path.join(__static, "img/icons/right.png")
+        ),
         accelerator: "CmdOrCtrl+Right",
         click: () => {
           win.webContents.send("next");
@@ -44,7 +50,9 @@ export function createTray(win) {
       },
       {
         label: "循环播放",
-        icon: "src/assets/icons/repeat.png",
+        icon: nativeImage.createFromPath(
+          path.join(__static, "img/icons/repeat.png")
+        ),
         accelerator: "Alt+R",
         click: () => {
           win.webContents.send("repeat");
@@ -52,7 +60,9 @@ export function createTray(win) {
       },
       {
         label: "加入喜欢",
-        icon: "src/assets/icons/like.png",
+        icon: nativeImage.createFromPath(
+          path.join(__static, "img/icons/like.png")
+        ),
         accelerator: "CmdOrCtrl+L",
         click: () => {
           win.webContents.send("like");
@@ -60,7 +70,9 @@ export function createTray(win) {
       },
       {
         label: "退出",
-        icon: "src/assets/icons/exit.png",
+        icon: nativeImage.createFromPath(
+          path.join(__static, "img/icons/exit.png")
+        ),
         accelerator: "CmdOrCtrl+W",
         click: () => {
           app.exit();

src/main.js

@@ -13,10 +13,6 @@ import * as Sentry from "@sentry/browser";
 import { Vue as VueIntegration } from "@sentry/integrations";
 import { Integrations } from "@sentry/tracing";
 
-// import icons for win32 title bar
-// icons by https://github.com/microsoft/vscode-codicons
-import "vscode-codicons/dist/codicon.css";
-
 Vue.use(VueAnalytics, {
   id: "UA-180189423-1",
   router,

vue.config.js

@@ -58,6 +58,7 @@ module.exports = {
   pluginOptions: {
     // electron-builder的配置文件
     electronBuilder: {
+      nodeIntegration: true,
       externals: ["@nondanee/unblockneteasemusic", "@njzy/unblockneteasemusic"],
       builderOptions: {
         productName: "YesPlayMusic",
@@ -80,20 +81,28 @@ module.exports = {
           target: [
             {
               target: "dmg",
-              arch: ["arm64", "x64"],
+              arch: ["x64", "arm64", "universal"],
             },
             {
               target: "zip",
-              arch: ["arm64", "x64"],
-              // arch: ["universal"]
+              arch: ["x64", "arm64", "universal"],
             },
           ],
-          artifactName: "${productName}-${arch}.${ext}",
+          artifactName: "${productName}-${os}-${arch}.${ext}",
           category: "public.app-category.music",
           darkModeSupport: true,
         },
         win: {
-          target: ["nsis", "portable"],
+          target: [
+            {
+              target: "portable",
+              arch: ["x64"],
+            },
+            {
+              target: "nsis",
+              arch: ["x64"],
+            },
+          ],
           publisherName: "YesPlayMusic",
           icon: "build/icons/icon.ico",
           publish: ["github"],