feat: support touch bar

src/electron/ipcRenderer.js

@@ -5,45 +5,66 @@ export function ipcRenderer(vueInstance) {
   // ipc message channel
   const electron = window.require("electron");
   const ipcRenderer = electron.ipcRenderer;
+
   // listens to the main process 'changeRouteTo' event and changes the route from
   // inside this Vue instance, according to what path the main process requires.
   // responds to Menu click() events at the main process and changes the route accordingly.
+
   ipcRenderer.on("changeRouteTo", (event, path) => {
     self.$router.push(path);
   });
+
   ipcRenderer.on("search", () => {
     // 触发数据响应
     self.$refs.navbar.$refs.searchInput.focus();
     self.$refs.navbar.inputFocus = true;
   });
+
   ipcRenderer.on("play", () => {
     self.$refs.player.play();
   });
+
   ipcRenderer.on("next", () => {
+    console.log("touchBar:next");
     self.$refs.player.next();
   });
+
   ipcRenderer.on("previous", () => {
     self.$refs.player.previous();
   });
+
   ipcRenderer.on("increaseVolume", () => {
     if (self.$refs.player.volume + 0.1 >= 1) {
       return (self.$refs.player.volume = 1);
     }
     self.$refs.player.volume += 0.1;
   });
+
   ipcRenderer.on("decreaseVolume", () => {
     if (self.$refs.player.volume - 0.1 <= 0) {
       return (self.$refs.player.volume = 0);
     }
     self.$refs.player.volume -= 0.1;
   });
+
   ipcRenderer.on("like", () => {
     self.$refs.player.likeCurrentSong();
   });
+
   ipcRenderer.on("repeat", () => {
     self.$refs.player.repeat();
   });
+
   ipcRenderer.on("shuffle", () => {
     self.$refs.player.shuffle();
   });
+
+  ipcRenderer.on("routerGo", (event, where) => {
+    console.log(where);
+    self.$refs.navbar.go(where);
+  });
+
+  ipcRenderer.on("nextUp", () => {
+    self.$refs.player.goToNextTracksPage();
+  });
 }

src/electron/touchbar.js

@@ -1,130 +1,84 @@
-const { TouchBar, nativeImage, ipcMain } = require("electron");
+const { TouchBar, ipcMain } = require("electron");
-const path = require("path");
+const { TouchBarButton, TouchBarSpacer } = TouchBar;
 
-const {
+export function createTouchBar(window) {
-  TouchBarButton,
+  const renderer = window.webContents;
-  TouchBarGroup,
-  TouchBarSpacer,
-  TouchBarSegmentedControl,
-} = TouchBar;
 
-function getNativeIcon(name, width = 24, height = 24) {
+  // use SF Symbols as label, you probably will see a 􀂒 instead of real icon
-  return nativeImage
-    .createFromPath(path.join(__static, "img/icons/touchbar/", name))
-    .resize({
-      width,
-      height,
-    });
-}
 
-export function createSegmentedControl(renderer) {
+  const previousPage = new TouchBarButton({
-  const segments = [
+    label: "􀆉",
-    {
+    click: () => {
-      icon: getNativeIcon("previous.png"),
+      renderer.send("routerGo", "back");
     },
-    {
-      icon: getNativeIcon("play.png", 20, 20),
-    },
-    {
-      icon: getNativeIcon("next.png"),
-    },
-  ];
-  const segmentedControl = new TouchBarSegmentedControl({
-    segments,
-    change: (selectedIndex) => {
-      const temp = Object.assign([], segmentedControl.segments);
-      if (selectedIndex === 0) {
-        renderer.send("previous");
-      }
-      if (selectedIndex === 1) {
-        ipcMain.on("vuex-state", (e, { player }) => {
-          const playing = player.playing;
-          if (playing === true) {
-            // To be paused
-            temp[1].icon = getNativeIcon("play.png", 20, 20);
-            segmentedControl.segments = temp;
-          } else {
-            temp[1].icon = getNativeIcon("play.png", 20, 20);
-            segmentedControl.segments = temp;
-          }
-        });
-        renderer.send("play");
-      }
-      if (selectedIndex === 2) {
-        renderer.send("next");
-      }
-    },
-    mode: "buttons",
   });
-  return segmentedControl;
-}
 
-export function createPreferGroup(renderer) {
+  const nextPage = new TouchBarButton({
-  const search = new TouchBarButton({
+    label: "􀆊",
-    icon: getNativeIcon("search.png", 22, 22),
+    click: () => {
+      renderer.send("routerGo", "forward");
+    },
+  });
+
+  const searchButton = new TouchBarButton({
+    label: "􀊫",
     click: () => {
       renderer.send("search");
     },
   });
-  const like = new TouchBarButton({
+
-    icon: getNativeIcon("like.png"),
+  const playButton = new TouchBarButton({
+    label: "􀊄",
+    click: () => {
+      renderer.send("play");
+    },
+  });
+
+  const previousTrackButton = new TouchBarButton({
+    label: "􀊎",
+    click: () => {
+      renderer.send("previous");
+    },
+  });
+
+  const nextTrackButton = new TouchBarButton({
+    label: "􀊐",
+    click: () => {
+      renderer.send("next");
+    },
+  });
+
+  const likeButton = new TouchBarButton({
+    label: "􀊴",
     click: () => {
-      ipcMain.on("vuex-state", (e, { liked, player }) => {
-        const currentTrack = player.currentTrack;
-        if (liked.songs.includes(currentTrack.id)) {
-          like.icon = getNativeIcon("liked.png");
-        } else {
-          like.icon = getNativeIcon("like.png");
-        }
-      });
       renderer.send("like");
     },
   });
-  const repeat = new TouchBarButton({
-    icon: getNativeIcon("repeat.png"),
-    click: () => {
-      ipcMain.on("vuex-state", (e, { player }) => {
-        const repeat = player.repeat;
-        if (repeat === "on") {
-          repeat.icon = getNativeIcon("repeat.png");
-        } else if (repeat === "one") {
-          repeat.icon = getNativeIcon("repeat.png");
-        } else {
-          repeat.icon = getNativeIcon("repeat.png");
-        }
-      });
-      renderer.send("repeat");
-    },
-  });
-  const shuffle = new TouchBarButton({
-    icon: getNativeIcon("shuffle.png"),
-    click: () => {
-      ipcMain.on("vuex-state", (e, { player }) => {
-        const shuffle = player.shuffle;
-        if (shuffle === true) {
-          shuffle.icon = getNativeIcon("shuffle.png");
-        } else {
-          shuffle.icon = getNativeIcon("shuffle.png");
-        }
-      });
-      renderer.send("shuffle");
-    },
-  });
-  return new TouchBar({
-    items: [search, like, repeat, shuffle],
-  });
-}
 
-export function createTouchBar(window) {
+  const nextUpButton = new TouchBarButton({
-  const renderer = window.webContents;
+    label: "􀑬",
-  const segmentedControl = createSegmentedControl(renderer);
+    click: () => {
-  const preferGroup = createPreferGroup(renderer);
+      renderer.send("nextUp");
+    },
+  });
+
+  ipcMain.on("vuex-state", (e, { player, liked }) => {
+    playButton.label = player.playing === true ? "􀊆" : "􀊄";
+    likeButton.label = liked.songs.includes(player.currentTrack.id) ? "􀊵" : "􀊴";
+  });
+
   const touchBar = new TouchBar({
     items: [
-      new TouchBarGroup({ items: preferGroup }),
+      previousPage,
-      new TouchBarSpacer({ size: "large" }),
+      nextPage,
-      segmentedControl,
+      searchButton,
-      new TouchBarSpacer({ size: "large" }),
+      new TouchBarSpacer({ size: "flexible" }),
+      previousTrackButton,
+      playButton,
+      nextTrackButton,
+      new TouchBarSpacer({ size: "flexible" }),
+      likeButton,
+      nextUpButton,
     ],
   });
   return touchBar;

src/electron/touchbar1.js

@@ -1,104 +0,0 @@
-// 运用 ipdMain 请求用户喜欢的歌手的数据，随机抽几个歌手进行随机
-const { TouchBar } = require("electron");
-
-const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar;
-
-let spinning = false;
-
-// Reel labels
-const reel1 = new TouchBarLabel();
-const reel2 = new TouchBarLabel();
-const reel3 = new TouchBarLabel();
-
-// Spin result label
-const result = new TouchBarLabel();
-
-// Spin button
-const spin = new TouchBarButton({
-  label: "🎰 Spin",
-  backgroundColor: "#7851A9",
-  click: () => {
-    // Ignore clicks if already spinning
-    if (spinning) {
-      return;
-    }
-
-    spinning = true;
-    result.label = "";
-
-    let timeout = 10;
-    const spinLength = 4 * 1000; // 4 seconds
-    const startTime = Date.now();
-
-    const spinReels = () => {
-      updateReels();
-
-      if (Date.now() - startTime >= spinLength) {
-        finishSpin();
-      } else {
-        // Slow down a bit on each spin
-        timeout *= 1.1;
-        setTimeout(spinReels, timeout);
-      }
-    };
-
-    spinReels();
-  },
-});
-
-const getRandomValue = () => {
-  const values = ["🍒", "💎", "7️⃣", "🍊", "🔔", "⭐", "🍇", "🍀"];
-  return values[Math.floor(Math.random() * values.length)];
-};
-
-const updateReels = () => {
-  reel1.label = getRandomValue();
-  reel2.label = getRandomValue();
-  reel3.label = getRandomValue();
-};
-
-const finishSpin = () => {
-  const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size;
-  if (uniqueValues === 1) {
-    // All 3 values are the same
-    result.label = "💰 Jackpot!";
-    result.textColor = "#FDFF00";
-  } else if (uniqueValues === 2) {
-    // 2 values are the same
-    result.label = "😍 Winner!";
-    result.textColor = "#FDFF00";
-  } else {
-    // No values are the same
-    result.label = "🙁 Spin Again";
-    result.textColor = null;
-  }
-  spinning = false;
-};
-
-const touchBar = new TouchBar({
-  items: [
-    spin,
-    new TouchBarSpacer({ size: "large" }),
-    reel1,
-    new TouchBarSpacer({ size: "small" }),
-    reel2,
-    new TouchBarSpacer({ size: "small" }),
-    reel3,
-    new TouchBarSpacer({ size: "large" }),
-    result,
-  ],
-});
-
-// let window
-
-// app.whenReady().then(() => {
-//   window = new BrowserWindow({
-//     frame: false,
-//     titleBarStyle: 'hiddenInset',
-//     backgroundColor: '#000'
-//   })
-//   window.loadURL('about:blank')
-//   window.setTouchBar(touchBar)
-// })
-
-module.exports = touchBar;