Bump version

Add touchbar plugin to list
Merge pull request #101 from semvis123/master
2026-01-11 18:41:47 +00:00 · 2020-12-20 20:17:24 +01:00 · 2020-12-20 20:16:35 +01:00 · 2020-12-20 20:14:49 +01:00 · 2020-12-19 22:03:40 +01:00 · 2020-12-19 21:50:24 +01:00
6 changed files with 510 additions and 13 deletions
--- a/package.json
+++ b/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/ffmpeg": "^0.9.5",
+		"@ffmpeg/core": "^0.8.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",
--- a/plugins/touchbar/back.js
+++ b/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);
+	});
+};
--- a/readme.md
+++ b/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

--- a/web/screenshot.jpg
+++ b/web/screenshot.jpg
--- a/web/youtube-music.svg
+++ b/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>
--- a/yarn.lock
+++ b/yarn.lock
@ -469,15 +469,15 @@
    minimatch "^3.0.4"
    strip-json-comments "^3.1.1"

-"@ffmpeg/core@^0.8.4":
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/@ffmpeg/core/-/core-0.8.4.tgz#69062a9b257792a9a8445e1f01e68c3e5e7fe58b"
-  integrity sha512-gEr4qXZpShZpIVUO3hc5Vz7bkk/jLYuzVVQtHluUwrui5eAooQwExOGiEovzLVkRwjJ707/qqfmTrK3r80UkWw==
+"@ffmpeg/core@^0.8.5":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@ffmpeg/core/-/core-0.8.5.tgz#2d0b7d4409a4348fa6a1888c247de706ffc0e63f"
+  integrity sha512-hemVFmhVLbD/VZaCG2BvCzFglKytMIMJ5aJfc12eXN4O4cG0wXnGTMVzlK1KKW/6viHhJMPkc9h4UDnJW8Uivg==

-"@ffmpeg/ffmpeg@^0.9.5":
-  version "0.9.5"
-  resolved "https://registry.yarnpkg.com/@ffmpeg/ffmpeg/-/ffmpeg-0.9.5.tgz#6624747dc331632bc7c581e8d4f2046abc933798"
-  integrity sha512-Vtxgi5C89n36pJ3I1/l6xd2qSwn+s1tAtLvFJ98N9P2ZorBvxXCEwTkt2yL7GuOUX9wpdG/vLFqp7iLso8LDwg==
+"@ffmpeg/ffmpeg@^0.9.6":
+  version "0.9.6"
+  resolved "https://registry.yarnpkg.com/@ffmpeg/ffmpeg/-/ffmpeg-0.9.6.tgz#b44fa1ab34dd860785bb7c317dbfbe8b9ded7036"
+  integrity sha512-ov5FAV3dHRJ/+ZxQH9V5GvY/iczwq5vrKWeu4tpytxZewTSAhZ1aKD/sFBzd79nQNF+CTktxUp3LWuGECXBNeA==
  dependencies:
    is-url "^1.2.4"
    node-fetch "^2.6.1"
Author	SHA1	Message	Date
TC	af02b60ce3	Bump version	2020-12-20 20:17:24 +01:00
th-ch	fbdae0452c	Add touchbar plugin to list	2020-12-20 20:16:35 +01:00
th-ch	d68d73eb4c	Merge pull request #101 from semvis123/master Added Touch Bar plugin	2020-12-20 20:14:49 +01:00
th-ch	2de27d2e24	Merge pull request #99 from th-ch/snyk-upgrade-d3ff12c0e23681ac817994e603d37491 [Snyk] Upgrade @ffmpeg/core from 0.8.4 to 0.8.5	2020-12-19 22:03:40 +01:00
TC	15591e24d7	Merge branch 'master' of github.com:th-ch/youtube-music into snyk-upgrade-d3ff12c0e23681ac817994e603d37491 # By snyk-bot # Via GitHub (1) and snyk-bot (1) * 'master' of github.com:th-ch/youtube-music: fix: upgrade @ffmpeg/ffmpeg from 0.9.5 to 0.9.6	2020-12-19 21:50:24 +01:00
th-ch	715d59e3d4	Merge pull request #100 from th-ch/snyk-upgrade-9aa7c0fdfaaeba26ca66fb92b731a1af [Snyk] Upgrade @ffmpeg/ffmpeg from 0.9.5 to 0.9.6	2020-12-19 21:32:10 +01:00
Sem Vissscher	f71e0e9da9	Switched like/dislike positions Switched like/dislike positions to match youtube musics layout	2020-12-16 20:30:01 +01:00
Sem Vissscher	ba3779db07	Updated comment - touchbar plugin	2020-12-16 20:10:05 +01:00
Sem Vissscher	d99aa0242f	Added like and dislike buttons	2020-12-16 19:54:44 +01:00
Sem Vissscher	3ea859de09	Added song image	2020-12-16 19:44:26 +01:00
Sem Vissscher	7473677477	touchbar plugin - fixed code style	2020-12-16 15:57:24 +01:00
Sem Vissscher	c3e2c13808	added initial touchbar support	2020-12-16 15:52:01 +01:00
snyk-bot	5074ba2f48	fix: upgrade @ffmpeg/ffmpeg from 0.9.5 to 0.9.6 Snyk has created this PR to upgrade @ffmpeg/ffmpeg from 0.9.5 to 0.9.6. See this package in npm: See this project in Snyk: https://app.snyk.io/org/th-ch/project/81809c53-bb7b-46b9-a0d7-806d45d74ac6?utm_source=github&utm_medium=upgrade-pr	2020-12-16 02:20:20 +00:00
snyk-bot	a8b8f1079f	fix: upgrade @ffmpeg/core from 0.8.4 to 0.8.5 Snyk has created this PR to upgrade @ffmpeg/core from 0.8.4 to 0.8.5. See this package in npm: See this project in Snyk: https://app.snyk.io/org/th-ch/project/81809c53-bb7b-46b9-a0d7-806d45d74ac6?utm_source=github&utm_medium=upgrade-pr	2020-12-16 02:20:16 +00:00
th-ch	e52987df92	Merge pull request #96 from th-ch/svg-readme [Readme] Web folder for readme assets + new SVG animation	2020-12-13 16:40:55 +01:00
TC	01fc965170	Web folder for readme assets + new svg animation	2020-12-13 16:19:33 +01:00
th-ch	ff71f29206	Merge pull request #94 from th-ch/linux-deb-rpm Add new Linux targets (deb, freebsd, rpm)	2020-12-13 13:40:07 +01:00
TC	a47c5144ac	Additional linux targets	2020-12-12 23:08:05 +01:00
TC	9b979b2273	Bump version	2020-12-12 22:28:38 +01:00
TC	81198192bb	Add new linux targets (deb, rpm)	2020-12-12 22:28:30 +01:00