Bump version

Added Touch Bar plugin

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "youtube-music",
 	"productName": "YouTube Music",
-	"version": "1.7.4",
+	"version": "1.8.0",
 	"description": "YouTube Music Desktop App - including custom plugins",
 	"license": "MIT",
 	"repository": "th-ch/youtube-music",
@@ -22,7 +22,8 @@
 		},
 		"linux": {
 			"icon": "assets/generated/icons/png",
-			"category": "AudioVideo"
+			"category": "AudioVideo",
+			"target": ["AppImage", "snap", "freebsd", "deb", "rpm"]
 		}
 	},
 	"scripts": {
@@ -49,8 +50,8 @@
 	},
 	"dependencies": {
 		"@cliqz/adblocker-electron": "^1.18.8",
-		"@ffmpeg/core": "^0.8.4",
+		"@ffmpeg/core": "^0.8.5",
-		"@ffmpeg/ffmpeg": "^0.9.5",
+		"@ffmpeg/ffmpeg": "^0.9.6",
 		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.8.0",
 		"downloads-folder": "^3.0.1",
 		"electron-debug": "^3.1.0",

plugins/touchbar/back.js

@@ -0,0 +1,110 @@
+const {
+	TouchBar, nativeImage
+} = require('electron');
+const {
+	TouchBarButton,
+	TouchBarLabel,
+	TouchBarSpacer,
+	TouchBarSegmentedControl,
+	TouchBarScrubber
+} = TouchBar;
+const fetch = require('node-fetch');
+
+// This selects the song title
+const titleSelector = '.title.style-scope.ytmusic-player-bar';
+
+// This selects the song image
+const imageSelector = '#layout > ytmusic-player-bar > div.middle-controls.style-scope.ytmusic-player-bar > img';
+
+// These keys will be used to go backwards, pause, skip songs, like songs, dislike songs
+const keys = ['k', 'space', 'j', '_', '+'];
+
+const presskey = (window, key) => {
+	window.webContents.sendInputEvent({
+		type: 'keydown',
+		keyCode: key
+	});
+};
+
+// Grab the title using the selector
+const getTitle = win => {
+	return win.webContents.executeJavaScript(
+		'document.querySelector(\'' + titleSelector + '\').innerText'
+	).catch(error => {
+		console.log(error);
+	});
+};
+
+// Grab the image src using the selector
+const getImage = win => {
+	return win.webContents.executeJavaScript(
+		'document.querySelector(\'' + imageSelector + '\').src'
+	).catch(error => {
+		console.log(error);
+	});
+};
+
+module.exports = win => {
+	// Songtitle label
+	const songTitle = new TouchBarLabel({
+		label: ''
+	});
+
+	// This will store the song image once available
+	const songImage = {};
+
+	// The song control buttons (keys to press are in the same order)
+	const buttons = new TouchBarSegmentedControl({
+		mode: 'buttons',
+		segments: [
+			new TouchBarButton({
+				label: '⏮'
+			}),
+			new TouchBarButton({
+				label: '⏯️'
+			}),
+			new TouchBarButton({
+				label: '⏭'
+			}),
+			new TouchBarButton({
+				label: '👎'
+			}),
+			new TouchBarButton({
+				label: '👍'
+			})
+		],
+		change: i => presskey(win, keys[i])
+	});
+
+	// This is the touchbar object, this combines everything with proper layout
+	const touchBar = new TouchBar({
+		items: [
+			new TouchBarScrubber({
+				items: [songImage, songTitle],
+				continuous: false
+			}),
+			new TouchBarSpacer({
+				size: 'flexible'
+			}),
+			buttons
+		]
+	});
+
+	// If the page title changes, update touchbar and song title
+	win.on('page-title-updated', async () => {
+		// Set the song title
+		songTitle.label = await getTitle(win);
+
+		// Get image source
+		const imageSrc = await getImage(win);
+
+		// Fetch and set song image
+		await fetch(imageSrc)
+			.then(response => response.buffer())
+			.then(data => {
+				songImage.icon = nativeImage.createFromBuffer(data).resize({height: 23});
+			});
+
+		win.setTouchBar(touchBar);
+	});
+};

readme.md

@@ -12,7 +12,13 @@
 
 </div>
 
-![Screenshot](screenshot.jpg "Screenshot")
+![Screenshot](web/screenshot.jpg "Screenshot")
+
+<div align="center">
+	<a href="https://github.com/th-ch/youtube-music/releases/latest">
+		<img src="web/youtube-music.svg" width="400" height="100">
+	</a>
+</div>
 
 **Electron wrapper around YouTube Music featuring:**
 
@@ -37,6 +43,7 @@ Install the `youtube-music-bin` package from the AUR. For AUR installation instr
 - **Auto confirm when paused**: when the "Continue Watching?" modal appears, automatically click "Yes"
 - **Hide video player**: no video in the interface when playing music
 - **Notifications**: display a notification when a song starts playing
+- **Touchbar**: custom TouchBar layout for macOS
 
 ## Dev
 

web/youtube-music.svg

@@ -0,0 +1,379 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 300" width="800" height="300">
+	<foreignObject width="100%" height="100%">
+		<div xmlns="http://www.w3.org/1999/xhtml">
+			<style>
+				.container {
+					width: 100%;
+					position: relative;
+					overflow: hidden;
+				}
+				a {
+					text-decoration: none;
+				}
+				h1.main, p.demos {
+					-webkit-animation-delay: 18s;
+					-moz-animation-delay: 18s;
+					-ms-animation-delay: 18s;
+					animation-delay: 18s;
+				}
+				.container {
+					position: fixed;
+					top: 0px;
+					left: 0px;
+					width: 100%;
+					height: 100%;
+					z-index: 0;
+				}
+				.content {
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					left: 0px;
+					top: 0px;
+					z-index: 1000;
+				}
+				.container h2 {
+					position: absolute;
+					top: 50%;
+					line-height: 100px;
+					height: 90px;
+					margin-top: -90px;
+					font-size: 90px;
+					font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+					width: 100%;
+					text-align: center;
+					color: transparent;
+					-webkit-animation: blurFadeInOut 3s ease-in backwards;
+					-moz-animation: blurFadeInOut 3s ease-in backwards;
+					-ms-animation: blurFadeInOut 3s ease-in backwards;
+					animation: blurFadeInOut 3s ease-in backwards;
+				}
+				.container h2.frame-1 {
+					-webkit-animation-delay: 0s;
+					-moz-animation-delay: 0s;
+					-ms-animation-delay: 0s;
+					animation-delay: 0s;
+				}
+				.container h2.frame-2 {
+					-webkit-animation-delay: 3s;
+					-moz-animation-delay: 3s;
+					-ms-animation-delay: 3s;
+					animation-delay: 3s;
+				}
+				.container h2.frame-3 {
+					-webkit-animation-delay: 6s;
+					-moz-animation-delay: 6s;
+					-ms-animation-delay: 6s;
+					animation-delay: 6s;
+				}
+				.container h2.frame-4 {
+					-webkit-animation-delay: 9s;
+					-moz-animation-delay: 9s;
+					-ms-animation-delay: 9s;
+					animation-delay: 9s;
+				}
+				.container h2.frame-5 {
+					-webkit-animation: none;
+					-moz-animation: none;
+					-ms-animation: none;
+					animation: none;
+					color: transparent;
+					text-shadow: 0px 0px 1px #fff;
+				}
+				.container h2.frame-5 span {
+					-webkit-animation: blurFadeIn 3s ease-in 12s backwards;
+					-moz-animation: blurFadeIn 1s ease-in 12s backwards;
+					-ms-animation: blurFadeIn 3s ease-in 12s backwards;
+					animation: blurFadeIn 3s ease-in 12s backwards;
+					color: transparent;
+					text-shadow: 0px 0px 1px #fff;
+				}
+				.container h2.frame-5 span:nth-child(2) {
+					-webkit-animation-delay: 13s;
+					-moz-animation-delay: 13s;
+					-ms-animation-delay: 13s;
+					animation-delay: 13s;
+				}
+				.container h2.frame-5 span:nth-child(3) {
+					-webkit-animation-delay: 14s;
+					-moz-animation-delay: 14s;
+					-ms-animation-delay: 14s;
+					animation-delay: 14s;
+				}
+				.circle-link {
+					position: absolute;
+					left: 50%;
+					font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+					bottom: 50px;
+					margin-left: -100px;
+					text-align: center;
+					line-height: 200px;
+					width: 200px;
+					height: 200px;
+					background: #cc0000;
+					color: #fff;
+					font-size: 25px;
+					-webkit-border-radius: 50%;
+					-moz-border-radius: 50%;
+					border-radius: 50%;
+					box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+					-webkit-animation: fadeInRotate 0.8s ease 16s backwards;
+					-moz-animation: fadeInRotate 0.8s ease 16s backwards;
+					-ms-animation: fadeInRotate 0.8s ease 16s backwards;
+					animation: fadeInRotate 0.8s ease 16s backwards;
+					-webkit-transform: scale(1) rotate(0deg);
+					-moz-transform: scale(1) rotate(0deg);
+					-o-transform: scale(1) rotate(0deg);
+					-ms-transform: scale(1) rotate(0deg);
+					transform: scale(1) rotate(0deg);
+
+					background-repeat: no-repeat;
+					background-position: -250px -250px, 0 0;
+
+					background-image: -webkit-linear-gradient(
+						top left,
+						rgba(255, 255, 255, 0.2) 0%,
+						rgba(255, 255, 255, 0.2) 37%,
+						rgba(255, 255, 255, 0.8) 45%,
+						rgba(255, 255, 255, 0.0) 50%
+					);
+					background-image: -moz-linear-gradient(
+						0 0,
+						rgba(255, 255, 255, 0.2) 0%,
+						rgba(255, 255, 255, 0.2) 37%,
+						rgba(255, 255, 255, 0.8) 45%,
+						rgba(255, 255, 255, 0.0) 50%
+					);
+					background-image: -o-linear-gradient(
+						0 0,
+						rgba(255, 255, 255, 0.2) 0%,
+						rgba(255, 255, 255, 0.2) 37%,
+						rgba(255, 255, 255, 0.8) 45%,
+						rgba(255, 255, 255, 0.0) 50%
+					);
+					background-image: linear-gradient(
+						0 0,
+						rgba(255, 255, 255, 0.2) 0%,
+						rgba(255, 255, 255, 0.2) 37%,
+						rgba(255, 255, 255, 0.8) 45%,
+						rgba(255, 255, 255, 0.0) 50%
+					);
+
+					-moz-background-size: 250% 250%, 100% 100%;
+						background-size: 250% 250%, 100% 100%;
+
+					-webkit-transition: background-position 0s ease;
+						-moz-transition: background-position 0s ease;
+						-o-transition: background-position 0s ease;
+							transition: background-position 0s ease;
+				}
+				.circle-link:hover {
+					background-position: 0 0, 0 0;
+
+					-webkit-transition-duration: 0.5s;
+						-moz-transition-duration: 0.5s;
+							transition-duration: 0.5s;
+				}
+
+				@-webkit-keyframes blurFadeInOut {
+					0% {
+						opacity: 0;
+						color: #cc0000;
+						text-shadow: 0px 0px 40px #fff;
+						-webkit-transform: scale(1.3);
+					}
+					20%, 75% {
+						opacity: 1;
+						color: #cc0000;
+						text-shadow: 0px 0px 1px #fff;
+						-webkit-transform: scale(1);
+					}
+					100% {
+						opacity: 0;
+						text-shadow: 0px 0px 50px #fff;
+						-webkit-transform: scale(0);
+					}
+				}
+				@-webkit-keyframes blurFadeIn {
+					0% {
+						opacity: 0;
+						color: #cc0000;
+						text-shadow: 0px 0px 40px #fff;
+						-webkit-transform: scale(1.3);
+					}
+					50% {
+						opacity: 0.5;
+						color: #cc0000;
+						text-shadow: 0px 0px 10px #fff;
+						-webkit-transform: scale(1.1);
+					}
+					100% {
+						opacity: 1;
+						text-shadow: 0px 0px 1px #fff;
+						-webkit-transform: scale(1);
+					}
+				}
+				@-webkit-keyframes fadeInBack {
+					0% {
+						opacity: 0;
+						-webkit-transform: scale(0);
+					}
+					50% {
+						opacity: 0.4;
+						-webkit-transform: scale(2);
+					}
+					100% {
+						opacity: 0.2;
+						-webkit-transform: scale(5);
+					}
+				}
+				@-webkit-keyframes fadeInRotate {
+					0% {
+						opacity: 0;
+						-webkit-transform: scale(0) rotate(360deg);
+					}
+					100% {
+						opacity: 1;
+						-webkit-transform: scale(1) rotate(0deg);
+					}
+				}
+
+				@-moz-keyframes blurFadeInOut {
+					0% {
+						opacity: 0;
+						color: #cc0000;
+						text-shadow: 0px 0px 40px #fff;
+						-moz-transform: scale(1.3);
+					}
+					20%, 75% {
+						opacity: 1;
+						color: #cc0000;
+						text-shadow: 0px 0px 1px #fff;
+						-moz-transform: scale(1);
+					}
+					100% {
+						opacity: 0;
+						text-shadow: 0px 0px 50px #fff;
+						-moz-transform: scale(0);
+					}
+				}
+				@-moz-keyframes blurFadeIn {
+					0% {
+						opacity: 0;
+						color: #cc0000;
+						text-shadow: 0px 0px 40px #fff;
+						-moz-transform: scale(1.3);
+					}
+					100% {
+						opacity: 1;
+						text-shadow: 0px 0px 1px #fff;
+						-moz-transform: scale(1);
+					}
+				}
+				@-moz-keyframes fadeInBack {
+					0% {
+						opacity: 0;
+						-moz-transform: scale(0);
+					}
+					50% {
+						opacity: 0.4;
+						-moz-transform: scale(2);
+					}
+					100% {
+						opacity: 0.2;
+						-moz-transform: scale(5);
+					}
+				}
+				@-moz-keyframes fadeInRotate {
+					0% {
+						opacity: 0;
+						-moz-transform: scale(0) rotate(360deg);
+					}
+					100% {
+						opacity: 1;
+						-moz-transform: scale(1) rotate(0deg);
+					}
+				}
+
+				@keyframes blurFadeInOut {
+					0% {
+						opacity: 0;
+						color: #cc0000;
+						text-shadow: 0px 0px 40px #fff;
+						transform: scale(1.3);
+					}
+					20%, 75% {
+						opacity: 1;
+
+						color: #cc0000;
+						text-shadow: 0px 0px 1px #fff;
+						transform: scale(1);
+					}
+					100% {
+						opacity: 0;
+						text-shadow: 0px 0px 50px #fff;
+						transform: scale(0);
+					}
+				}
+				@keyframes blurFadeIn {
+					0% {
+						opacity: 0;
+						color: #cc0000;
+						text-shadow: 0px 0px 40px #fff;
+						transform: scale(1.3);
+					}
+					50% {
+						opacity: 0.5;
+						color: #cc0000;
+						text-shadow: 0px 0px 10px #fff;
+						transform: scale(1.1);
+					}
+					100% {
+						opacity: 1;
+						text-shadow: 0px 0px 1px #fff;
+						transform: scale(1);
+					}
+				}
+				@keyframes fadeInBack {
+					0% {
+						opacity: 0;
+						transform: scale(0);
+					}
+					50% {
+						opacity: 0.4;
+						transform: scale(2);
+					}
+					100% {
+						opacity: 0.2;
+						transform: scale(5);
+					}
+				}
+				@keyframes fadeInRotate {
+					0% {
+						opacity: 0;
+						transform: scale(0) rotate(360deg);
+					}
+					100% {
+						opacity: 1;
+						transform: scale(1) rotate(0deg);
+					}
+				}
+			</style>
+			<div class="container">
+				<div class="content">
+					<h2 class="frame-1">YouTube Music Desktop App</h2>
+					<h2 class="frame-2">With built-in ad blocker</h2>
+					<h2 class="frame-3">And built-in downloader</h2>
+					<h2 class="frame-4">Cross-platform</h2>
+					<h2 class="frame-5">
+						<span>Free,</span>
+						<span>Open source</span>
+					</h2>
+					<a class="circle-link" href="https://github.com/th-ch/youtube-music/releases/latest">
+						Download
+					</a>
+				</div>
+			</div>
+		</div>
+	</foreignObject>
+</svg>

yarn.lock

@@ -469,15 +469,15 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@ffmpeg/core@^0.8.4":
+"@ffmpeg/core@^0.8.5":
-  version "0.8.4"
+  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/@ffmpeg/core/-/core-0.8.4.tgz#69062a9b257792a9a8445e1f01e68c3e5e7fe58b"
+  resolved "https://registry.yarnpkg.com/@ffmpeg/core/-/core-0.8.5.tgz#2d0b7d4409a4348fa6a1888c247de706ffc0e63f"
-  integrity sha512-gEr4qXZpShZpIVUO3hc5Vz7bkk/jLYuzVVQtHluUwrui5eAooQwExOGiEovzLVkRwjJ707/qqfmTrK3r80UkWw==
+  integrity sha512-hemVFmhVLbD/VZaCG2BvCzFglKytMIMJ5aJfc12eXN4O4cG0wXnGTMVzlK1KKW/6viHhJMPkc9h4UDnJW8Uivg==
 
-"@ffmpeg/ffmpeg@^0.9.5":
+"@ffmpeg/ffmpeg@^0.9.6":
-  version "0.9.5"
+  version "0.9.6"
-  resolved "https://registry.yarnpkg.com/@ffmpeg/ffmpeg/-/ffmpeg-0.9.5.tgz#6624747dc331632bc7c581e8d4f2046abc933798"
+  resolved "https://registry.yarnpkg.com/@ffmpeg/ffmpeg/-/ffmpeg-0.9.6.tgz#b44fa1ab34dd860785bb7c317dbfbe8b9ded7036"
-  integrity sha512-Vtxgi5C89n36pJ3I1/l6xd2qSwn+s1tAtLvFJ98N9P2ZorBvxXCEwTkt2yL7GuOUX9wpdG/vLFqp7iLso8LDwg==
+  integrity sha512-ov5FAV3dHRJ/+ZxQH9V5GvY/iczwq5vrKWeu4tpytxZewTSAhZ1aKD/sFBzd79nQNF+CTktxUp3LWuGECXBNeA==
   dependencies:
     is-url "^1.2.4"
     node-fetch "^2.6.1"