|
|
|
@ -1,104 +1,131 @@
|
|
|
|
|
// 运用 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);
|
|
|
|
|
const { TouchBar, nativeImage, ipcMain } = require("electron");
|
|
|
|
|
const path = require("path");
|
|
|
|
|
|
|
|
|
|
const {
|
|
|
|
|
TouchBarButton,
|
|
|
|
|
TouchBarGroup,
|
|
|
|
|
TouchBarSpacer,
|
|
|
|
|
TouchBarSegmentedControl,
|
|
|
|
|
} = TouchBar;
|
|
|
|
|
|
|
|
|
|
function getNativeIcon(name, width = 24, height = 24) {
|
|
|
|
|
return nativeImage
|
|
|
|
|
.createFromPath(path.join(__static, "img/icons/touchbar/", name))
|
|
|
|
|
.resize({
|
|
|
|
|
width,
|
|
|
|
|
height,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function createSegmentedControl(renderer) {
|
|
|
|
|
const segments = [
|
|
|
|
|
{
|
|
|
|
|
icon: getNativeIcon("previous.png"),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
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");
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
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 search = new TouchBarButton({
|
|
|
|
|
icon: getNativeIcon("search.png", 22, 22),
|
|
|
|
|
click: () => {
|
|
|
|
|
renderer.send("search");
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
const like = new TouchBarButton({
|
|
|
|
|
icon: getNativeIcon("like.png"),
|
|
|
|
|
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 renderer = window.webContents;
|
|
|
|
|
const segmentedControl = createSegmentedControl(renderer);
|
|
|
|
|
const preferGroup = createPreferGroup(renderer);
|
|
|
|
|
const touchBar = new TouchBar({
|
|
|
|
|
items: [
|
|
|
|
|
new TouchBarGroup({ items: preferGroup }),
|
|
|
|
|
new TouchBarSpacer({ size: "large" }),
|
|
|
|
|
segmentedControl,
|
|
|
|
|
new TouchBarSpacer({ size: "large" }),
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
return touchBar;
|
|
|
|
|
}
|
|
|
|
|