Added media player buttons to Windows preview

main.js

@@ -1,13 +1,17 @@
 'use strict';
 const DiscordRPC = require('discord-rpc');
-const { app, BrowserWindow, Menu } = require('electron');
+const { app, BrowserWindow, Menu, nativeImage } = require('electron');
+const path = require('path');
 let reconnectTimer;
 
+const resourcePath = process.platform === 'darwin' ? 'Contents/Resources' : 'resources';
+
 function executeJavaScript(code) {
 	return new Promise(resolve => {
 		win.webContents.executeJavaScript(code, resolve);
 	});
 }
+
 let win;
 const menuTemplate = [
 	{
@@ -18,6 +22,10 @@ const menuTemplate = [
 	},
 ];
 
+if (process.platform === 'darwin') {
+	menuTemplate.unshift({});
+}
+
 function createWindow() {
 	// Create the browser window.
 	win = new BrowserWindow({ width: 800, height: 700 });
@@ -56,6 +64,7 @@ function getContent() {
 			artist,
 			time,
 			paused,
+			isFirst,
 			result;
 
 		result =
@@ -77,7 +86,10 @@ function getContent() {
 		if (!result) return reject('Error grabbing time');
 		paused = result !== 'Pause';
 
-		return resolve({ title, artist, time, paused });
+		result = await executeJavaScript('document.querySelector(\'div.ytmusic-player-queue\').firstElementChild.selected');
+		isFirst = result;
+
+		return resolve({ title, artist, time, paused, isFirst });
 	});
 }
 
@@ -89,18 +101,21 @@ let startTimestamp = new Date(),
 	endTimestamp,
 	prevSong;
 
-async function setActivity() {
+let songInfo;
+
+function setActivity() {
 	if (!rpc || !win) {
 		return;
 	}
 
 	// eslint-disable-next-line no-empty-function
-	const { title, artist, time, paused } = await getContent().catch(() => {}) ||
+	const { title, artist, time, paused } = songInfo ||
 		{
 			title: undefined,
 			artist: undefined,
 			time: undefined,
 			paused: undefined,
+			isFirst: undefined,
 		};
 	const now = new Date();
 
@@ -146,6 +161,84 @@ async function setActivity() {
 	rpc.setActivity(activity);
 }
 
+
+async function updateSongInfo() {
+	if (!rpc || !win) {
+		return;
+	}
+
+	songInfo = await getContent().catch(() => null);
+
+	// eslint-disable-next-line no-empty-function
+	const { title, artist, time, paused, isFirst } = songInfo ||
+		{
+			title: undefined,
+			artist: undefined,
+			time: undefined,
+			paused: undefined,
+			isFirst: undefined,
+		};
+
+	win.setThumbnailClip({
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0,
+	});
+
+	const toolTipButtons = [
+		{
+			tooltip: 'Previous Song',
+			icon: getNativeImage('assets/images/prev.png'),
+			async click() {
+				await executeJavaScript('document.querySelector(\'paper-icon-button.previous-button\').click();');
+			},
+		}, {
+			tooltip: 'Play',
+			icon: getNativeImage('assets/images/play.png'),
+			async click() {
+				await executeJavaScript('document.querySelector(\'paper-icon-button.play-pause-button\').click();');
+			},
+		}, {
+			tooltip: 'Next Song',
+			icon: getNativeImage('assets/images/next.png'),
+			async click() {
+				await executeJavaScript('document.querySelector(\'paper-icon-button.next-button\').click();');
+			},
+		},
+	];
+
+	if (!title && !artist) {
+		if (process.platform === 'win32') {
+			win.setProgressBar(1.000000001);
+		}
+		win.setOverlayIcon(null, 'Browsing');
+	} else if (process.platform === 'win32') {
+		win.setProgressBar(time[0] / time[1], {
+			mode: paused ? 'paused' : 'normal',
+		});
+
+		if (isFirst) {
+			toolTipButtons[0].flags = ['disabled'];
+		}
+
+		if (paused) {
+			win.setOverlayIcon(getNativeImage('assets/images/pause.png'), 'Paused');
+			win.setThumbarButtons(toolTipButtons);
+		} else 	if (prevSong !== { title, artist }) {
+			prevSong = { title, artist };
+			win.setOverlayIcon(getNativeImage('assets/images/play.png'), 'Listening');
+
+			toolTipButtons[1].tooltip = 'Pause';
+			toolTipButtons[1].icon = getNativeImage('assets/images/pause.png');
+
+			win.setThumbarButtons(toolTipButtons);
+		}
+	} else {
+		win.setProgressBar(time[0] / time[1]);
+	}
+}
+
 rpc.once('disconnected', () => {
 	rpc = null;
 	reconnectTimer = setInterval(reconnect, 5e3);
@@ -162,9 +255,14 @@ function reconnect() {
 	});
 }
 
+function getNativeImage(filePath) {
+	return nativeImage.createFromPath(path.join(process.cwd(), resourcePath, filePath));
+}
+
 rpc.on('ready', () => {
 	setActivity();
 	setInterval(setActivity, 15e3);
+	setInterval(updateSongInfo, 100);
 });
 
 // eslint-disable-next-line no-console

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "youtube_music_client",
-	"version": "1.0.2",
+	"version": "1.1.0",
 	"description": "YouTube Music Client with Discord RPC support",
 	"main": "main.js",
 	"scripts": {
@@ -53,22 +53,22 @@
 		"appId": "youtube.music.client",
 		"mac": {
 			"category": "youtube.music.client",
-			"icon": "assets/build/osx/icon.icns",
+			"icon": "resources/assets/build/osx/icon.icns",
 			"target": [
 				"zip",
 				"dmg"
 			]
 		},
 		"win": {
-			"icon": "assets/build/win/icon.ico"
+			"icon": "resources/assets/build/win/icon.ico"
 		},
 		"nsis": {
 			"artifactName": "${productName}-Setup-${version}.${ext}",
 			"perMachine": true
 		},
 		"linux": {
 			"target": "AppImage",
-			"icon": "assets/build/linux/icon_2048x2048.png",
+			"icon": "resources/assets/build/linux/icon_2048x2048.png",
 			"synopsis": "Small YouTube Music App with DiscordRPC integration",
 			"description": "A small Electron app for YouTube Music which also integrates with Discord using its RPC functionallity",
 			"maintainer": "BigBrainAFK",
@@ -80,8 +80,11 @@
 			"!dist_old/*"
 		],
 		"directories": {
-			"buildResources": "assets/*",
+			"buildResources": "resources/assets/*",
 			"output": "dist"
-		}
+		},
+		"extraFiles": [
+			"resources/assets/images/*.png"
+		]
 	}
 }