fix: touchbar icon display | 修复 touchbar 图标显示问号

fix: touchbar icon display | 修复 touchbar 图标显示问号

src/electron/touchBar.js

@@ -1,70 +1,81 @@
-const { TouchBar, ipcMain } = require("electron");
+const { TouchBar, nativeImage, ipcMain } = require("electron");
 const { TouchBarButton, TouchBarSpacer } = TouchBar;
+const path = require("path");
 
 export function createTouchBar(window) {
   const renderer = window.webContents;
 
-  // use SF Symbols as label, you probably will see a 􀂒 instead of real icon
+  // Icon follow touchbar design guideline.
+  // See: https://developer.apple.com/design/human-interface-guidelines/macos/touch-bar/touch-bar-icons-and-images/
+  // Icon Resource: https://devimages-cdn.apple.com/design/resources/
+  function getNativeIcon(name) {
+    return nativeImage.createFromPath(
+      path.join(__static, "img/touchbar/", name)
+    );
+  }
 
   const previousPage = new TouchBarButton({
-    label: "􀆉",
     click: () => {
       renderer.send("routerGo", "back");
     },
+    icon: getNativeIcon("page_prev.png"),
   });
 
   const nextPage = new TouchBarButton({
-    label: "􀆊",
     click: () => {
       renderer.send("routerGo", "forward");
     },
+    icon: getNativeIcon("page_next.png"),
   });
 
   const searchButton = new TouchBarButton({
-    label: "􀊫",
     click: () => {
       renderer.send("search");
     },
+    icon: getNativeIcon("search.png"),
   });
 
   const playButton = new TouchBarButton({
-    label: "􀊄",
     click: () => {
       renderer.send("play");
     },
+    icon: getNativeIcon("play.png"),
   });
 
   const previousTrackButton = new TouchBarButton({
-    label: "􀊎",
     click: () => {
       renderer.send("previous");
     },
+    icon: getNativeIcon("backward.png"),
   });
 
   const nextTrackButton = new TouchBarButton({
-    label: "􀊐",
     click: () => {
       renderer.send("next");
     },
+    icon: getNativeIcon("forward.png"),
   });
 
   const likeButton = new TouchBarButton({
-    label: "􀊴",
     click: () => {
       renderer.send("like");
     },
+    icon: getNativeIcon("like.png"),
   });
 
   const nextUpButton = new TouchBarButton({
-    label: "􀑬",
     click: () => {
       renderer.send("nextUp");
     },
+    icon: getNativeIcon("next_up.png"),
   });
 
   ipcMain.on("player", (e, { playing, likedCurrentTrack }) => {
-    playButton.label = playing === true ? "􀊆" : "􀊄";
-    likeButton.label = likedCurrentTrack ? "􀊵" : "􀊴";
+    playButton.icon =
+      playing === true ? getNativeIcon("pause.png") : getNativeIcon("play.png");
+    likeButton.icon = likedCurrentTrack
+      ? getNativeIcon("like_fill.png")
+      : getNativeIcon("like.png");
   });
 
   const touchBar = new TouchBar({

src/electron/tray.js

@@ -21,55 +21,54 @@ export function createTray(win) {
   tray.on("right-click", () => {
     const contextMenu = Menu.buildFromTemplate([
       {
-          label: "播放/暂停",
-          icon:  "src/assets/icons/play.png",
-          click: () => {
-            win.webContents.send("play");
-          },
+        label: "播放/暂停",
+        icon: "src/assets/icons/play.png",
+        click: () => {
+          win.webContents.send("play");
         },
-        {
-          label: "上一首",
-          icon:  "src/assets/icons/left.png",
-          accelerator: "CmdOrCtrl+Left",
-          click: () => {
-            win.webContents.send("previous");
-          },
+      },
+      {
+        label: "上一首",
+        icon: "src/assets/icons/left.png",
+        accelerator: "CmdOrCtrl+Left",
+        click: () => {
+          win.webContents.send("previous");
         },
-        {
-          label: "下一首",
-          icon:  "src/assets/icons/right.png",
-          accelerator: "CmdOrCtrl+Right",
-          click: () => {
-            win.webContents.send("next");
-          },
+      },
+      {
+        label: "下一首",
+        icon: "src/assets/icons/right.png",
+        accelerator: "CmdOrCtrl+Right",
+        click: () => {
+          win.webContents.send("next");
         },
-        {
-          label: "循环播放",
-          icon:  "src/assets/icons/repeat.png",
-          accelerator: "Alt+R",
-          click: () => {
-            win.webContents.send("repeat");
-          },
+      },
+      {
+        label: "循环播放",
+        icon: "src/assets/icons/repeat.png",
+        accelerator: "Alt+R",
+        click: () => {
+          win.webContents.send("repeat");
         },
-        {
-          label: "加入喜欢",
-          icon:  "src/assets/icons/like.png",
-          accelerator: "CmdOrCtrl+L",
-          click: () => {
-            win.webContents.send("like");
-          },
+      },
+      {
+        label: "加入喜欢",
+        icon: "src/assets/icons/like.png",
+        accelerator: "CmdOrCtrl+L",
+        click: () => {
+          win.webContents.send("like");
         },
-        {
-          label: "退出",
-          icon:  "src/assets/icons/exit.png",
-          accelerator: "CmdOrCtrl+W",
-          click: () => {
-            app.exit();
-          },
+      },
+      {
+        label: "退出",
+        icon: "src/assets/icons/exit.png",
+        accelerator: "CmdOrCtrl+W",
+        click: () => {
+          app.exit();
         },
       },
     ]);
-    
+
     tray.popUpContextMenu(contextMenu);
   });