Merge pull request #178 from th-ch/snyk-upgrade-da4beb25f2fa1631098996298cd49f89

[Snyk] Upgrade electron-store from 7.0.1 to 7.0.2

config/defaults.js

@@ -13,6 +13,8 @@ const defaultConfig = {
 		disableHardwareAcceleration: false,
 		restartOnConfigChanges: false,
 		trayClickPlayPause: false,
+		autoResetAppCache: false,
+		resumeOnStart: true,
 	},
 	plugins: {
 		// Enabled plugins

config/index.js

@@ -1,3 +1,4 @@
+const defaultConfig = require("./defaults");
 const plugins = require("./plugins");
 const store = require("./store");
 
@@ -10,6 +11,7 @@ const get = (key) => {
 };
 
 module.exports = {
+	defaultConfig,
 	get,
 	set,
 	edit: () => store.openInEditor(),

config/store.js

@@ -3,6 +3,11 @@ const Store = require("electron-store");
 const defaults = require("./defaults");
 
 const migrations = {
+	">=1.11.0": (store) => {
+		if (store.get("options.resumeOnStart") === undefined) {
+			store.set("options.resumeOnStart", true);
+		}
+	},
 	">=1.7.0": (store) => {
 		const enabledPlugins = store.get("plugins");
 		if (!Array.isArray(enabledPlugins)) {

docs/img/adblock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><g transform="translate(183.604 196.396)" stroke="#fff" stroke-width="2.23"><path style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;block-progression:tb;marker:none" d="M-116.99 106.245l31.82 31.82 236.31-236.31-31.82-31.82z" color="#000" font-weight="400" font-family="Sans" overflow="visible" fill="#fff" stroke="none"/><circle r="171.304" cy="4" cx="16" fill="none" stroke-width="44.6"/></g></svg>

docs/img/bg-bottom.svg

@@ -0,0 +1 @@
+<svg width="1440" height="347" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#606483" stop-opacity="0" offset="0%"/><stop stop-color="#0B0D19" stop-opacity=".72" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="b"><stop stop-color="#0B0D19" offset="0%"/><stop stop-color="#0B0D19" stop-opacity="0" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M177.486 208.219c78.18 89.285 218.65-81.067 218.65-119.337 0-38.27-86.408-69.295-193-69.295-106.59 0-193 31.024-193 69.295 0 38.27 89.17 30.051 167.35 119.337z" transform="rotate(6 -140.175 3980.948)" fill="url(#a)"/><path d="M252.464 335.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z" fill="url(#a)" transform="rotate(24 321.92 -247.724)"/><path d="M302.512 242.909c88.025 32.428 156-25.04 156-55.93 0-30.888-69.844-55.928-156-55.928-86.157 0-156 25.04-156 55.929 0 30.888 67.974 23.5 156 55.929z" fill="url(#b)" transform="rotate(24 338.741 -285.505)"/></g></svg>

docs/img/bg-top.svg

@@ -0,0 +1 @@
+<svg width="1440" height="318" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="38.706%" y1="-187.115%" x2="18.675%" y2="110.984%" id="a"><stop stop-color="#FFF" stop-opacity="0" offset="0%"/><stop stop-color="#c3352e" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c"><stop stop-color="#606483" stop-opacity="0" offset="0%"/><stop stop-color="#0B0D19" stop-opacity=".72" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="d"><stop stop-color="#0B0D19" stop-opacity=".32" offset="0%"/><stop stop-color="#0B0D19" stop-opacity="0" offset="100%"/></linearGradient><filter id="b"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M88.494 90c67.04 7.177 161.094-24.753 224.996-90H.2c25.3 48.079 42.361 85.083 88.294 90z" transform="translate(1051)" fill="url(#a)" filter="url(#b)"/><path d="M250.464 367.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z" fill="url(#c)" transform="rotate(143 810.285 354.367)"/><path d="M373.408 256.178c88.026 32.429 156-25.04 156-55.929 0-30.888-69.843-55.929-156-55.929-86.156 0-156 25.04-156 55.93 0 30.888 67.975 23.5 156 55.928z" fill="url(#d)" transform="rotate(136 905.21 332.676)"/></g></svg>

docs/img/code.svg

@@ -0,0 +1 @@
+<svg width="96" height="48" xmlns="http://www.w3.org/2000/svg"><text y="35" x="48" fill="#fff" stroke-width="0" font-size="36" font-family="Monospace" text-anchor="middle" stroke="#fff">&lt;/&gt;</text></svg>

docs/img/download.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="style-scope yt-icon" style="width:100%;height:100%" pointer-events="none" display="block" fill="#fff"><g class="style-scope yt-icon"><path d="M25.462 19.105v6.848H4.515v-6.848H.489v8.861c0 1.111.9 2.012 2.016 2.012h24.967c1.115 0 2.016-.9 2.016-2.012v-8.861h-4.026zM14.62 18.426l-5.764-6.965s-.877-.828.074-.828h3.248V9.217.494S12.049 0 12.793 0h4.572c.536 0 .524.416.524.416V10.424h2.998c1.154 0 .285.867.285.867s-4.904 6.51-5.588 7.193c-.492.495-.964-.058-.964-.058z" class="style-scope yt-icon"/></g></svg>

docs/img/footer.svg

@@ -0,0 +1 @@
+<svg width="1440" height="582" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#606483" stop-opacity="0" offset="0%"/><stop stop-color="#363636" stop-opacity=".72" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="39.334%" y2="79.282%" id="b"><stop stop-color="#363636" offset="0%"/><stop stop-color="#363636" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="33.3%" cy="43.394%" fx="33.3%" fy="43.394%" r="57.93%" gradientTransform="matrix(.24796 -.96592 .92535 .25883 -.151 .643)" id="c"><stop stop-color="#c3352e" stop-opacity="0" offset="0%"/><stop stop-color="#c3352e" stop-opacity=".64" offset="51.712%"/><stop stop-color="#c3352e" stop-opacity=".24" offset="100%"/></radialGradient><filter id="d"><feTurbulence type="fractalNoise" numOctaves="2" baseFrequency=".3" result="turb"/><feComposite in="turb" operator="arithmetic" k1=".1" k2=".1" k3=".1" k4=".1" result="result1"/><feComposite operator="in" in="result1" in2="SourceGraphic" result="finalFilter"/><feBlend mode="multiply" in="finalFilter" in2="SourceGraphic"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M252.464 335.471c101.27 115.965 283.227-105.29 283.227-154.996 0-49.705-111.929-90-250-90s-250 40.295-250 90c0 49.706 115.503 39.032 216.773 154.996z" fill="url(#a)" transform="rotate(24 -272.272 -82.087)"/><path d="M302.512 242.909c88.025 32.428 156-25.04 156-55.93 0-30.888-69.844-55.928-156-55.928-86.157 0-156 25.04-156 55.929 0 30.888 67.974 23.5 156 55.929z" fill="url(#b)" transform="rotate(24 -255.451 -119.868)"/><path d="M103.064 315.218c128.156 12.998 192.38 157.059 218.627 106.632 26.247-50.427-44.059-106.456 60.397-202.707 104.457-96.252-143.2-285.785-172.392-122.551C180.503 259.825-25.091 302.22 103.064 315.218z" transform="translate(1176 -33)" fill="url(#c)" filter="url(#d)"/></g></svg>

docs/img/plugins.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" fill="#fff"><path d="M45.563 29.174l-22-15A1 1 0 0022 15v30a.999.999 0 001.563.826l22-15a1 1 0 000-1.652zM24 43.107V16.893L43.225 30 24 43.107z"/><path d="M30 0C13.458 0 0 13.458 0 30s13.458 30 30 30 30-13.458 30-30S46.542 0 30 0zm0 58C14.561 58 2 45.439 2 30S14.561 2 30 2s28 12.561 28 28-12.561 28-28 28z"/></svg>

docs/img/youtube-music.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176 176" width="32" height="32"><circle fill="red" cx="88" cy="88" r="88"/><path fill="#FFF" d="M88 46c23.1 0 42 18.8 42 42s-18.8 42-42 42-42-18.8-42-42 18.9-42 42-42m0-4c-25.4 0-46 20.6-46 46s20.6 46 46 46 46-20.6 46-46-20.6-46-46-46z"/><path fill="#FFF" d="M72 111l39-24-39-22z"/></svg>

docs/index.html

@@ -0,0 +1,490 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>YouTube Music Desktop App (Unofficial)</title>
+		<link
+			rel="icon"
+			href="./favicon/favicon.ico"
+			sizes="16x16"
+			type="image/x-icon"
+		/>
+		<link
+			rel="icon"
+			href="./favicon/favicon_32.png"
+			sizes="32x32"
+			type="image/png"
+		/>
+		<link
+			rel="icon"
+			href="./favicon/favicon_48.png"
+			sizes="48x48"
+			type="image/png"
+		/>
+		<link
+			rel="icon"
+			href="./favicon/favicon_96.png"
+			sizes="96x96"
+			type="image/png"
+		/>
+		<link
+			rel="icon"
+			href="./favicon/favicon_144.png"
+			sizes="144x144"
+			type="image/png"
+		/>
+
+		<meta name="theme-color" content="#131313" />
+		<meta
+			name="description"
+			content="YouTube Music Unofficial Desktop App with built-in ad blocker and downloader"
+		/>
+		<meta
+			property="og:site_name"
+			content="YouTube&nbsp;Music&nbsp;Desktop&nbsp;App"
+		/>
+		<meta
+			property="og:url"
+			class="meta-url"
+			content="https://th-ch.github.io/youtube-music"
+		/>
+		<meta property="og:type" content="website" />
+		<meta
+			name="twitter:url"
+			class="meta-url"
+			content="https://th-ch.github.io/youtube-music"
+		/>
+
+		<link href="./style/fonts.css" rel="stylesheet" />
+		<link rel="stylesheet" href="./style/style.css" />
+		<script src="https://unpkg.com/scrollreveal"></script>
+	</head>
+	<body class="has-animations vsc-initialized" style="height: 100%;">
+		<div class="body-wrap boxed-container">
+			<header class="site-header text-light">
+				<div class="container">
+					<div class="site-header-inner">
+						<div class="brand header-brand">
+							<h1 class="m-0">
+								<a href="https://github.com/th-ch/youtube-music">
+									<img
+										class="header-logo-image"
+										src="./img/youtube-music.svg"
+										alt="YouTube Music"
+									/>
+								</a>
+							</h1>
+						</div>
+					</div>
+				</div>
+			</header>
+
+			<main>
+				<section class="hero text-center text-light">
+					<div class="hero-bg"></div>
+					<div class="hero-particles-container">
+						<canvas id="hero-particles"></canvas>
+					</div>
+					<div class="container-sm">
+						<div class="hero-inner">
+							<div class="hero-copy">
+								<h1 class="hero-title mt-0">
+									Custom YouTube Music Desktop App
+								</h1>
+								<p class="hero-paragraph">
+									Open source, cross-platform, unofficial YouTube Music Desktop
+									App with built-in <strong>ad blocker</strong> and
+									<strong>downloader</strong>
+								</p>
+								<div class="hero-cta">
+									<a
+										class="button button-primary button-wide-mobile"
+										href="https://github.com/th-ch/youtube-music/releases/latest"
+										>Download</a
+									>
+								</div>
+							</div>
+							<div class="mockup-container">
+								<div class="mockup-bg">
+									<img
+										src="./img/youtube-music.png"
+										id="mockup-header-img"
+										alt="YouTube Music"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</section>
+
+				<section class="features-extended section">
+					<div class="features-extended-inner section-inner">
+						<div class="features-extended-wrap">
+							<div class="container">
+								<div class="feature-extended">
+									<div class="feature-extended-image">
+										<img
+											class="device-mockup"
+											src="./img/adblock.svg"
+											width="100px"
+											alt="Adblocker"
+											data-sr-id="0"
+											style="
+												visibility: visible;
+												opacity: 1;
+												transform: matrix3d(
+													1,
+													0,
+													0,
+													0,
+													0,
+													1,
+													0,
+													0,
+													0,
+													0,
+													1,
+													0,
+													0,
+													0,
+													0,
+													1
+												);
+												transition: opacity 0.6s
+														cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
+													transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
+											"
+										/>
+									</div>
+									<div
+										class="feature-extended-body"
+										data-sr-id="5"
+										style="
+											visibility: visible;
+											opacity: 1;
+											transform: matrix3d(
+												1,
+												0,
+												0,
+												0,
+												0,
+												1,
+												0,
+												0,
+												0,
+												0,
+												1,
+												0,
+												0,
+												0,
+												0,
+												1
+											);
+											transition: opacity 0.6s
+													cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
+												transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
+										"
+									>
+										<h3 class="mt-0 mb-16">Built-in adblocker</h3>
+										<p class="m-0">Block all ads and tracking out of the box</p>
+									</div>
+								</div>
+								<div class="feature-extended">
+									<div class="feature-extended-image">
+										<img
+											class="device-mockup"
+											src="./img/download.svg"
+											alt="Downloader"
+											data-sr-id="2"
+											style="
+												visibility: visible;
+												opacity: 1;
+												transform: matrix3d(
+													1,
+													0,
+													0,
+													0,
+													0,
+													1,
+													0,
+													0,
+													0,
+													0,
+													1,
+													0,
+													0,
+													0,
+													0,
+													1
+												);
+												transition: opacity 0.6s
+														cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
+													transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
+											"
+										/>
+									</div>
+									<div
+										class="feature-extended-body"
+										data-sr-id="6"
+										style="
+											visibility: visible;
+											opacity: 1;
+											transform: matrix3d(
+												1,
+												0,
+												0,
+												0,
+												0,
+												1,
+												0,
+												0,
+												0,
+												0,
+												1,
+												0,
+												0,
+												0,
+												0,
+												1
+											);
+											transition: opacity 0.6s
+													cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
+												transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
+										"
+									>
+										<h3 class="mt-0 mb-16">Built-in downloader</h3>
+										<p class="m-0">
+											Download (like youtube-dl) to custom formats (mp3, opus,
+											etc) directly from the interface
+										</p>
+									</div>
+								</div>
+								<div class="feature-extended">
+									<div class="feature-extended-image">
+										<img
+											class="device-mockup"
+											src="./img/plugins.svg"
+											alt="Plugins"
+											data-sr-id="3"
+											style="
+												visibility: visible;
+												opacity: 1;
+												transform: matrix3d(
+													1,
+													0,
+													0,
+													0,
+													0,
+													1,
+													0,
+													0,
+													0,
+													0,
+													1,
+													0,
+													0,
+													0,
+													0,
+													1
+												);
+												transition: opacity 0.6s
+														cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
+													transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
+											"
+										/>
+									</div>
+									<div
+										class="feature-extended-body"
+										data-sr-id="7"
+										style="
+											visibility: visible;
+											opacity: 1;
+											transform: matrix3d(
+												1,
+												0,
+												0,
+												0,
+												0,
+												1,
+												0,
+												0,
+												0,
+												0,
+												1,
+												0,
+												0,
+												0,
+												0,
+												1
+											);
+											transition: opacity 0.6s
+													cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
+												transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
+										"
+									>
+										<h3 class="mt-0 mb-16">Many other plugins in one click</h3>
+										<p class="m-0">
+											Enhance your user experience with media keys, integrations
+											(Discord), cosmetic filters, notifications, TouchBar,
+											auto-unpause and many more! Every plugin can be enabled or
+											disabled in one click.
+										</p>
+									</div>
+								</div>
+								<div class="feature-extended">
+									<div class="feature-extended-image">
+										<img
+											class="device-mockup"
+											src="./img/code.svg"
+											alt="Code"
+											data-sr-id="4"
+											style="
+												visibility: visible;
+												width: 200%;
+												opacity: 1;
+												transform: matrix3d(
+													1,
+													0,
+													0,
+													0,
+													0,
+													1,
+													0,
+													0,
+													0,
+													0,
+													1,
+													0,
+													0,
+													0,
+													0,
+													1
+												);
+												transition: opacity 0.6s
+														cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
+													transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
+											"
+										/>
+									</div>
+									<div
+										class="feature-extended-body"
+										data-sr-id="8"
+										style="
+											visibility: visible;
+											opacity: 1;
+											transform: matrix3d(
+												1,
+												0,
+												0,
+												0,
+												0,
+												1,
+												0,
+												0,
+												0,
+												0,
+												1,
+												0,
+												0,
+												0,
+												0,
+												1
+											);
+											transition: opacity 0.6s
+													cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
+												transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
+										"
+									>
+										<h3 class="mt-0 mb-16">Open source & Cross platform</h3>
+										<p class="m-0">
+											Available for Windows (installer and portable), Mac and
+											Linux (AppImage, deb, etc)
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="main-particles-container">
+						<canvas id="main-particles"></canvas>
+					</div>
+				</section>
+			</main>
+
+			<footer class="site-footer">
+				<div class="footer-particles-container">
+					<canvas id="footer-particles"></canvas>
+				</div>
+				<div class="site-footer-top">
+					<section class="cta section text-light">
+						<div class="container-sm">
+							<div class="cta-inner section-inner">
+								<div class="cta-header text-center">
+									<h2 class="section-title mt-0">Download and/or contribute</h2>
+									<p class="section-paragraph">Pull requests welcome!</p>
+									<div class="cta-cta">
+										<a
+											class="button button-primary button-wide-mobile"
+											href="https://github.com/th-ch/youtube-music"
+											>Go to code</a
+										>
+									</div>
+								</div>
+							</div>
+						</div>
+					</section>
+				</div>
+				<div class="site-footer-bottom">
+					<div class="container">
+						<div class="site-footer-inner">
+							<div class="brand footer-brand">
+								<a href="https://github.com/th-ch/youtube-music">
+									<img src="./img/youtube-music.svg" alt="YouTube Music logo" />
+								</a>
+							</div>
+							<ul class="footer-links list-reset">
+								<li>
+									<a href="https://github.com/th-ch/youtube-music">Main page</a>
+								</li>
+								<li>
+									<a href="https://github.com/th-ch/youtube-music/issues"
+										>Issues</a
+									>
+								</li>
+								<li>
+									<a href="https://github.com/th-ch/youtube-music/pulls"
+										>Pull requests</a
+									>
+								</li>
+							</ul>
+							<ul class="footer-social-links list-reset">
+								<li>
+									<a href="https://github.com/th-ch/youtube-music">
+										<span class="screen-reader-text">GitHub</span>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											width="16"
+											height="16"
+											viewBox="0 0 1792 1792"
+										>
+											<path
+												d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z"
+												fill="#fff"
+											/>
+										</svg>
+									</a>
+								</li>
+							</ul>
+							<div class="footer-copyright">© 2021 th-ch</div>
+						</div>
+					</div>
+				</div>
+			</footer>
+		</div>
+
+		<script src="./js/main.js"></script>
+	</body>
+</html>

docs/js/main.js

@@ -0,0 +1,262 @@
+// Constants
+const element = document.documentElement,
+  body = document.body,
+  revealOnScroll = (window.sr = ScrollReveal({ mobile: false }));
+
+// Load animations
+element.classList.remove("no-js");
+element.classList.add("js");
+window.addEventListener("load", function () {
+  body.classList.add("is-loaded");
+});
+
+if (body.classList.contains("has-animations")) {
+  window.addEventListener("load", function () {
+    revealOnScroll.reveal(".feature-extended .device-mockup", {
+      duration: 600,
+      distance: "100px",
+      easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
+      origin: "bottom",
+      viewFactor: 0.6,
+    });
+    revealOnScroll.reveal(".feature-extended .feature-extended-body", {
+      duration: 600,
+      distance: "40px",
+      easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
+      origin: "top",
+      viewFactor: 0.6,
+    });
+  });
+}
+
+// Bubble canvas
+let bubbleCanvas = function (t) {
+  let e = this;
+  e.parentNode = t;
+  e.setCanvasSize();
+  window.addEventListener("resize", function () {
+    e.setCanvasSize();
+  });
+  e.mouseX = 0;
+  e.mouseY = 0;
+  window.addEventListener("mousemove", function (t) {
+    (e.mouseX = t.clientX), (e.mouseY = t.clientY);
+  });
+  e.randomise();
+};
+
+bubbleCanvas.prototype.setCanvasSize = function () {
+  this.canvasWidth = this.parentNode.clientWidth;
+  this.canvasHeight = this.parentNode.clientHeight;
+};
+
+bubbleCanvas.prototype.generateDecimalBetween = function (start, end) {
+  return (Math.random() * (start - end) + end).toFixed(2);
+};
+
+bubbleCanvas.prototype.update = function () {
+  let t = this;
+  t.translateX = t.translateX - t.movementX;
+  t.translateY = t.translateY - t.movementY;
+  t.posX += (t.mouseX / (t.staticity / t.magnetism) - t.posX) / t.smoothFactor;
+  t.posY += (t.mouseY / (t.staticity / t.magnetism) - t.posY) / t.smoothFactor;
+  if (
+    t.translateY + t.posY < 0 ||
+    t.translateX + t.posX < 0 ||
+    t.translateX + t.posX > t.canvasWidth
+  ) {
+    t.randomise();
+    t.translateY = t.canvasHeight;
+  }
+};
+
+bubbleCanvas.prototype.randomise = function () {
+  this.colors = ["195,53,46", "172,54,46"];
+
+  this.velocity = 20;
+  this.smoothFactor = 50;
+  this.staticity = 30;
+  this.magnetism = 0.1 + 4 * Math.random();
+  this.color = this.colors[Math.floor(Math.random() * this.colors.length)];
+  this.alpha = this.generateDecimalBetween(5, 10) / 10;
+  this.size = this.generateDecimalBetween(1, 4);
+  this.posX = 0;
+  this.posY = 0;
+  this.movementX = this.generateDecimalBetween(-2, 2) / this.velocity;
+  this.movementY = this.generateDecimalBetween(1, 20) / this.velocity;
+  this.translateX = this.generateDecimalBetween(0, this.canvasWidth);
+  this.translateY = this.generateDecimalBetween(0, this.canvasHeight);
+};
+
+let drawBubbleCanvas = function (t) {
+  this.canvas = document.getElementById(t);
+  this.ctx = this.canvas.getContext("2d");
+  this.dpr = window.devicePixelRatio;
+};
+
+drawBubbleCanvas.prototype.start = function (bubbleDensity) {
+  let t = this;
+  t.bubbleDensity = bubbleDensity;
+  t.setCanvasSize();
+  window.addEventListener("resize", function () {
+    t.setCanvasSize();
+  });
+  t.bubblesList = [];
+  t.generateBubbles();
+  t.animate();
+};
+
+drawBubbleCanvas.prototype.setCanvasSize = function () {
+  this.container = this.canvas.parentNode;
+  this.w = this.container.offsetWidth;
+  this.h = this.container.offsetHeight;
+  this.wdpi = this.w * this.dpr;
+  this.hdpi = this.h * this.dpr;
+  this.canvas.width = this.wdpi;
+  this.canvas.height = this.hdpi;
+  this.canvas.style.width = this.w + "px";
+  this.canvas.style.height = this.h + "px";
+  this.ctx.scale(this.dpr, this.dpr);
+};
+
+drawBubbleCanvas.prototype.animate = function () {
+  let t = this;
+  t.ctx.clearRect(0, 0, t.canvas.clientWidth, t.canvas.clientHeight);
+  t.bubblesList.forEach(function (e) {
+    e.update();
+    t.ctx.translate(e.translateX, e.translateY);
+    t.ctx.beginPath();
+    t.ctx.arc(e.posX, e.posY, e.size, 0, 2 * Math.PI);
+    t.ctx.fillStyle = "rgba(" + e.color + "," + e.alpha + ")";
+    t.ctx.fill();
+    t.ctx.setTransform(t.dpr, 0, 0, t.dpr, 0, 0);
+  });
+  requestAnimationFrame(this.animate.bind(this));
+};
+
+drawBubbleCanvas.prototype.addBubble = function (t) {
+  return this.bubblesList.push(t);
+};
+
+drawBubbleCanvas.prototype.generateBubbles = function () {
+  let t = this;
+  for (let e = 0; e < t.bubbleDensity; e++)
+    t.addBubble(new bubbleCanvas(t.canvas.parentNode));
+};
+
+// Night sky with stars canvas
+let starCanvas = function (t) {
+  this.canvas = document.getElementById(t);
+  this.ctx = this.canvas.getContext("2d");
+  this.dpr = window.devicePixelRatio;
+};
+
+starCanvas.prototype.start = function () {
+  let w;
+  let h;
+
+  const setCanvasExtents = () => {
+	w = this.canvas.parentNode.clientWidth;
+	h = this.canvas.parentNode.clientHeight;
+    this.canvas.width = w;
+    this.canvas.height = h;
+  };
+
+  setCanvasExtents();
+
+  window.onresize = () => {
+    setCanvasExtents();
+  };
+
+  const makeStars = (count) => {
+    const out = [];
+    for (let i = 0; i < count; i++) {
+      const s = {
+        x: Math.random() * w - w / 2,
+        y: Math.random() * h - h / 2,
+        z: Math.random() * 1000,
+      };
+      out.push(s);
+    }
+    return out;
+  };
+
+  let stars = makeStars(10000);
+
+  const clear = () => {
+    this.ctx.fillStyle = "#212121";
+    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+  };
+
+  const putPixel = (x, y, brightness) => {
+    const intensity = brightness * 255;
+    const rgb = "rgb(" + intensity + "," + intensity + "," + intensity + ")";
+    this.ctx.beginPath();
+    this.ctx.arc(x, y, 0.9, 0, 2 * Math.PI);
+    this.ctx.fillStyle = rgb;
+    this.ctx.fill();
+  };
+
+  const moveStars = (distance) => {
+    const count = stars.length;
+    for (var i = 0; i < count; i++) {
+      const s = stars[i];
+      s.z -= distance;
+      while (s.z <= 1) {
+        s.z += 1000;
+      }
+    }
+  };
+
+  let prevTime;
+  const init = (time) => {
+    prevTime = time;
+    requestAnimationFrame(tick);
+  };
+
+  const tick = (time) => {
+    let elapsed = time - prevTime;
+    prevTime = time;
+
+    moveStars(elapsed * 0.1);
+
+    clear();
+
+    const cx = w / 2;
+    const cy = h / 2;
+
+    const count = stars.length;
+    for (var i = 0; i < count; i++) {
+      const star = stars[i];
+
+      const x = cx + star.x / (star.z * 0.001);
+      const y = cy + star.y / (star.z * 0.001);
+
+      if (x < 0 || x >= w || y < 0 || y >= h) {
+        continue;
+      }
+
+      const d = star.z / 1000.0;
+      const b = 1 - d * d;
+
+      putPixel(x, y, b);
+    }
+
+    requestAnimationFrame(tick);
+  };
+
+  requestAnimationFrame(init);
+};
+
+// Start canvas animations
+window.addEventListener("load", function () {
+  // Stars
+  const headCanvas = new starCanvas("hero-particles");
+  // Bubbles
+  const footerCanvas = new drawBubbleCanvas("footer-particles");
+  const mainCanvas = new drawBubbleCanvas("main-particles");
+
+  headCanvas.start();
+  footerCanvas.start(30);
+  mainCanvas.start(200);
+});

docs/style/fonts.css

@@ -0,0 +1,48 @@
+/* hebrew */
+@font-face {
+  font-family: 'Heebo';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H0TbFhsqMA6aw.woff2) format('woff2');
+  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* latin */
+@font-face {
+  font-family: 'Heebo';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H2TbFhsqMA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* hebrew */
+@font-face {
+  font-family: 'Heebo';
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H0TbFhsqMA6aw.woff2) format('woff2');
+  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+/* latin */
+@font-face {
+  font-family: 'Heebo';
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://fonts.gstatic.com/s/heebo/v9/NGS6v5_NC0k9P9H2TbFhsqMA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Oxygen';
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://fonts.gstatic.com/s/oxygen/v10/2sDcZG1Wl4LcnbuCNWgzZmW5Kb8VZBHR.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Oxygen';
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://fonts.gstatic.com/s/oxygen/v10/2sDcZG1Wl4LcnbuCNWgzaGW5Kb8VZA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

index.js

@@ -3,6 +3,7 @@ const path = require("path");
 
 const electron = require("electron");
 const is = require("electron-is");
+const unhandled = require("electron-unhandled");
 const { autoUpdater } = require("electron-updater");
 
 const config = require("./config");
@@ -11,6 +12,12 @@ const { fileExists, injectCSS } = require("./plugins/utils");
 const { isTesting } = require("./utils/testing");
 const { setUpTray } = require("./tray");
 
+// Catch errors and log them
+unhandled({
+	logger: console.error,
+	showDialog: false,
+});
+
 const app = electron.app;
 app.commandLine.appendSwitch(
 	"js-flags",
@@ -67,6 +74,7 @@ function loadPlugins(win) {
 function createMainWindow() {
 	const windowSize = config.get("window-size");
 	const windowMaximized = config.get("window-maximized");
+	const windowPosition = config.get("window-position");
 
 	const win = new electron.BrowserWindow({
 		icon: icon,
@@ -95,11 +103,18 @@ function createMainWindow() {
 		titleBarStyle: is.macOS() ? "hiddenInset" : "default",
 		autoHideMenuBar: config.get("options.hideMenu"),
 	});
+	if (windowPosition) {
+		const { x, y } = windowPosition;
+		win.setPosition(x, y);
+	}
 	if (windowMaximized) {
 		win.maximize();
 	}
 
-	win.webContents.loadURL(config.get("url"));
+	const urlToLoad = config.get("options.resumeOnStart")
+		? config.get("url")
+		: config.defaultConfig.url;
+	win.webContents.loadURL(urlToLoad);
 	win.on("closed", onClosed);
 
 	win.on("move", () => {
@@ -196,6 +211,17 @@ app.on("activate", () => {
 });
 
 app.on("ready", () => {
+	if (config.get("options.autoResetAppCache")) {
+		// Clear cache after 20s
+		const clearCacheTimeout = setTimeout(() => {
+			if (is.dev()) {
+				console.log("Clearing app cache.");
+			}
+			electron.session.defaultSession.clearCache();
+			clearTimeout(clearCacheTimeout);
+		}, 20000);
+	}
+
 	mainWindow = createMainWindow();
 	setApplicationMenu(mainWindow);
 	if (config.get("options.restartOnConfigChanges")) {
@@ -212,7 +238,10 @@ app.on("ready", () => {
 	});
 
 	if (!is.dev() && config.get("options.autoUpdates")) {
-		autoUpdater.checkForUpdatesAndNotify();
+		const updateTimeout = setTimeout(() => {
+			autoUpdater.checkForUpdatesAndNotify();
+			clearTimeout(updateTimeout);
+		}, 2000);
 		autoUpdater.on("update-available", () => {
 			const downloadLink =
 				"https://github.com/th-ch/youtube-music/releases/latest";

menu.js

@@ -58,6 +58,22 @@ const mainMenuTemplate = (win) => [
 					config.set("options.restartOnConfigChanges", item.checked);
 				},
 			},
+			{
+				label: "Reset App cache when app starts",
+				type: "checkbox",
+				checked: config.get("options.autoResetAppCache"),
+				click: (item) => {
+					config.set("options.autoResetAppCache", item.checked);
+				},
+			},
+			{
+				label: "Resume last song when app starts",
+				type: "checkbox",
+				checked: config.get("options.resumeOnStart"),
+				click: (item) => {
+					config.set("options.resumeOnStart", item.checked);
+				},
+			},
 			...(is.windows() || is.linux()
 				? [
 						{

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "youtube-music",
 	"productName": "YouTube Music",
-	"version": "1.9.0",
+	"version": "1.11.0",
 	"description": "YouTube Music Desktop App - including custom plugins",
 	"license": "MIT",
 	"repository": "th-ch/youtube-music",
@@ -19,7 +19,13 @@
 		},
 		"win": {
 			"icon": "assets/generated/icons/win/icon.ico",
-			"target": ["nsis", "portable"]
+			"target": [
+				"nsis",
+				"portable"
+			]
+		},
+		"nsis": {
+			"runAfterFinish": false
 		},
 		"linux": {
 			"icon": "assets/generated/icons/png",
@@ -56,31 +62,33 @@
 		"npm": "Please use yarn and not npm"
 	},
 	"dependencies": {
-		"@cliqz/adblocker-electron": "^1.19.0",
+		"@cliqz/adblocker-electron": "^1.20.0",
 		"@ffmpeg/core": "^0.8.5",
-		"@ffmpeg/ffmpeg": "^0.9.6",
+		"@ffmpeg/ffmpeg": "^0.9.7",
-		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.8.0",
+		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.8.1",
-		"discord-rpc": "^3.1.4",
+		"browser-id3-writer": "^4.4.0",
+		"discord-rpc": "^3.2.0",
 		"downloads-folder": "^3.0.1",
 		"electron-debug": "^3.2.0",
 		"electron-is": "^3.0.0",
 		"electron-localshortcut": "^3.2.1",
-		"electron-store": "^6.0.1",
+		"electron-store": "^7.0.2",
+		"electron-unhandled": "^3.0.2",
 		"electron-updater": "^4.3.6",
 		"filenamify": "^4.2.0",
 		"node-fetch": "^2.6.1",
-		"ytdl-core": "^4.1.2"
+		"ytdl-core": "^4.4.5"
 	},
 	"devDependencies": {
-		"electron": "^11.1.1",
+		"electron": "^11.2.3",
-		"electron-builder": "^22.8.1",
+		"electron-builder": "^22.9.1",
 		"electron-devtools-installer": "^3.1.1",
 		"electron-icon-maker": "0.0.5",
 		"get-port": "^5.1.1",
-		"jest": "^26.4.2",
+		"jest": "^26.6.3",
 		"rimraf": "^3.0.2",
 		"spectron": "^13.0.0",
-		"xo": "^0.33.1"
+		"xo": "^0.37.1"
 	},
 	"resolutions": {
 		"yargs-parser": "18.1.3"

plugins/disable-autoplay/front.js

@@ -0,0 +1,25 @@
+let videoElement = null;
+
+const observer = new MutationObserver((mutations, observer) => {
+	if (!videoElement) {
+		videoElement = document.querySelector("video");
+	}
+
+	if (videoElement) {
+		videoElement.ontimeupdate = () => {
+			if (videoElement.currentTime === 0 && videoElement.duration !== NaN) {
+				// auto-confirm-when-paused plugin can interfere here if not disabled!
+				videoElement.pause();
+			}
+		};
+	}
+});
+
+function observeVideoElement() {
+	observer.observe(document, {
+		childList: true,
+		subtree: true,
+	});
+}
+
+module.exports = observeVideoElement;

plugins/downloader/back.js

@@ -1,6 +1,8 @@
+const { writeFileSync } = require("fs");
 const { join } = require("path");
 
-const { dialog } = require("electron");
+const ID3Writer = require("browser-id3-writer");
+const { dialog, ipcMain } = require("electron");
 
 const getSongInfo = require("../../providers/song-info");
 const { injectCSS, listenAction } = require("../utils");
@@ -23,10 +25,7 @@ function handle(win) {
 	injectCSS(win.webContents, join(__dirname, "style.css"));
 	const registerCallback = getSongInfo(win);
 	registerCallback((info) => {
-		metadata = {
+		metadata = info;
-			...info,
-			image: info.image ? info.image.toDataURL() : undefined,
-		};
 	});
 
 	listenAction(CHANNEL, (event, action, error) => {
@@ -41,6 +40,33 @@ function handle(win) {
 				console.log("Unknown action: " + action);
 		}
 	});
+
+	ipcMain.on("add-metadata", (event, filePath, songBuffer) => {
+		let fileBuffer = songBuffer;
+
+		try {
+			const coverBuffer = metadata.image.toPNG();
+			const writer = new ID3Writer(songBuffer);
+
+			// Create the metadata tags
+			writer
+				.setFrame("TIT2", metadata.title)
+				.setFrame("TPE1", [metadata.artist])
+				.setFrame("APIC", {
+					type: 3,
+					data: coverBuffer,
+					description: "",
+				});
+			writer.addTag();
+			fileBuffer = Buffer.from(writer.arrayBuffer);
+		} catch (error) {
+			sendError(win, error);
+		}
+
+		writeFileSync(filePath, fileBuffer);
+		// Notify the youtube-dl file
+		event.reply("add-metadata-done");
+	});
 }
 
 module.exports = handle;

plugins/downloader/front.js

@@ -1,5 +1,6 @@
 const { contextBridge } = require("electron");
 
+const { getSongMenu } = require("../../providers/dom-elements");
 const { ElementFromFile, templatePath, triggerAction } = require("../utils");
 const { ACTIONS, CHANNEL } = require("./actions.js");
 const { downloadVideoToMP3 } = require("./youtube-dl");
@@ -13,7 +14,7 @@ let pluginOptions = {};
 
 const observer = new MutationObserver((mutations, observer) => {
 	if (!menu) {
-		menu = document.querySelector("ytmusic-menu-popup-renderer paper-listbox");
+		menu = getSongMenu();
 	}
 
 	if (menu && !menu.contains(downloadButton)) {

plugins/downloader/youtube-dl.js

@@ -1,8 +1,8 @@
 const { randomBytes } = require("crypto");
-const { writeFileSync } = require("fs");
 const { join } = require("path");
 
 const downloadsFolder = require("downloads-folder");
+const { ipcRenderer } = require("electron");
 const is = require("electron-is");
 const filenamify = require("filenamify");
 
@@ -93,31 +93,41 @@ const toMP3 = async (
 		ffmpeg.FS("writeFile", safeVideoName, buffer);
 
 		sendFeedback("Converting…");
+		const metadata = getMetadata();
 		await ffmpeg.run(
 			"-i",
 			safeVideoName,
-			...getFFmpegMetadataArgs(),
+			...getFFmpegMetadataArgs(metadata),
 			...(options.ffmpegArgs || []),
 			safeVideoName + "." + extension
 		);
 
 		const folder = options.downloadFolder || downloadsFolder();
-		const filename = filenamify(videoName + "." + extension, {
+		const name = metadata
+			? `${metadata.artist} - ${metadata.title}`
+			: videoName;
+		const filename = filenamify(name + "." + extension, {
 			replacement: "_",
 		});
-		writeFileSync(
+
+		// Add the metadata
+		sendFeedback("Adding metadata…");
+		ipcRenderer.send(
+			"add-metadata",
 			join(folder, filename),
 			ffmpeg.FS("readFile", safeVideoName + "." + extension)
 		);
-
+		ipcRenderer.once("add-metadata-done", reinit);
-		reinit();
 	} catch (e) {
 		sendError(e);
 	}
 };
 
-const getFFmpegMetadataArgs = () => {
+const getMetadata = () => {
-	const metadata = JSON.parse(triggerActionSync(CHANNEL, ACTIONS.METADATA));
+	return JSON.parse(triggerActionSync(CHANNEL, ACTIONS.METADATA));
+};
+
+const getFFmpegMetadataArgs = (metadata) => {
 	if (!metadata) {
 		return;
 	}

plugins/notifications/back.js

@@ -1,8 +1,7 @@
 const { Notification } = require("electron");
-
 const getSongInfo = require("../../providers/song-info");
 
-const notify = (info) => {
+const notify = info => {
 	let notificationImage = "assets/youtube-music.png";
 
 	if (info.image) {
@@ -16,19 +15,26 @@ const notify = (info) => {
 		icon: notificationImage,
 		silent: true,
 	};
+		
 	// Send the notification
-	new Notification(notification).show();
+	currentNotification = new Notification(notification);
+	currentNotification.show()
+	
+	return currentNotification;
 };
 
 module.exports = (win) => {
 	const registerCallback = getSongInfo(win);
-
+	let oldNotification;
 	win.on("ready-to-show", () => {
 		// Register the callback for new song information
-		registerCallback((songInfo) => {
+		registerCallback(songInfo => {
 			// If song is playing send notification
-			if (!songInfo.isPaused) {
+			if (!songInfo.isPaused) {	
-				notify(songInfo);
+				// Close the old notification
+				oldNotification?.close();
+				// This fixes a weird bug that would cause the notification to be updated instead of showing
+				setTimeout(()=>{ oldNotification = notify(songInfo) }, 10);
 			}
 		});
 	});

plugins/playback-speed/front.js

@@ -0,0 +1,83 @@
+const {
+	getSongMenu,
+	watchDOMElement,
+} = require("../../providers/dom-elements");
+const { ElementFromFile, templatePath } = require("../utils");
+
+const slider = ElementFromFile(templatePath(__dirname, "slider.html"));
+
+const MIN_PLAYBACK_SPEED = 0.25;
+const MAX_PLAYBACK_SPEED = 2;
+
+let videoElement;
+let playbackSpeedPercentage = 50; // = Playback speed of 1
+
+const computePlayBackSpeed = () => {
+	if (playbackSpeedPercentage <= 50) {
+		// Slow down video by setting a playback speed between MIN_PLAYBACK_SPEED and 1
+		return (
+			MIN_PLAYBACK_SPEED +
+			((1 - MIN_PLAYBACK_SPEED) / 50) * playbackSpeedPercentage
+		);
+	}
+
+	// Accelerate video by setting a playback speed between 1 and MAX_PLAYBACK_SPEED
+	return 1 + ((MAX_PLAYBACK_SPEED - 1) / 50) * (playbackSpeedPercentage - 50);
+};
+
+const updatePlayBackSpeed = () => {
+	const playbackSpeed = Math.round(computePlayBackSpeed() * 100) / 100;
+
+	if (!videoElement || videoElement.playbackRate === playbackSpeed) {
+		return;
+	}
+
+	videoElement.playbackRate = playbackSpeed;
+
+	const playbackSpeedElement = document.querySelector("#playback-speed-value");
+	if (playbackSpeedElement) {
+		playbackSpeedElement.innerHTML = playbackSpeed;
+	}
+};
+
+module.exports = () => {
+	watchDOMElement(
+		"video",
+		(document) => document.querySelector("video"),
+		(element) => {
+			videoElement = element;
+			updatePlayBackSpeed();
+		}
+	);
+
+	watchDOMElement(
+		"menu",
+		(document) => getSongMenu(document),
+		(menuElement) => {
+			if (!menuElement.contains(slider)) {
+				menuElement.prepend(slider);
+			}
+
+			const playbackSpeedElement = document.querySelector(
+				"#playback-speed-slider #sliderKnob .slider-knob-inner"
+			);
+
+			const playbackSpeedObserver = new MutationObserver((mutations) => {
+				mutations.forEach(function (mutation) {
+					if (mutation.type == "attributes") {
+						const value = playbackSpeedElement.getAttribute("value");
+						playbackSpeedPercentage = parseInt(value, 10);
+						if (isNaN(playbackSpeedPercentage)) {
+							playbackSpeedPercentage = 50;
+						}
+						updatePlayBackSpeed();
+						return;
+					}
+				});
+			});
+			playbackSpeedObserver.observe(playbackSpeedElement, {
+				attributes: true,
+			});
+		}
+	);
+};

plugins/playback-speed/templates/slider.html

@@ -0,0 +1,79 @@
+<div
+	class="menu-item ytmusic-menu-popup-renderer"
+	role="option"
+	tabindex="-1"
+	aria-disabled="false"
+	aria-selected="false"
+>
+	<tp-yt-paper-slider
+		id="playback-speed-slider"
+		class="volume-slider style-scope ytmusic-player-bar on-hover"
+		max="100"
+		min="0"
+		step="5"
+		dir="ltr"
+		title="Playback speed"
+		aria-label="Playback speed"
+		role="slider"
+		tabindex="0"
+		aria-valuemin="0"
+		aria-valuemax="100"
+		aria-valuenow="50"
+		aria-disabled="false"
+		value="50"
+		><!--css-build:shady-->
+		<div id="sliderContainer" class="style-scope tp-yt-paper-slider">
+			<div class="bar-container style-scope tp-yt-paper-slider">
+				<tp-yt-paper-progress
+					id="sliderBar"
+					aria-hidden="true"
+					class="style-scope tp-yt-paper-slider"
+					role="progressbar"
+					value="50"
+					aria-valuenow="50"
+					aria-valuemin="0"
+					aria-valuemax="100"
+					aria-disabled="false"
+					style="touch-action: none"
+					><!--css-build:shady-->
+
+					<div id="progressContainer" class="style-scope tp-yt-paper-progress">
+						<div
+							id="secondaryProgress"
+							class="style-scope tp-yt-paper-progress"
+							hidden="true"
+							style="transform: scaleX(0)"
+						></div>
+						<div
+							id="primaryProgress"
+							class="style-scope tp-yt-paper-progress"
+							style="transform: scaleX(0.5)"
+						></div>
+					</div>
+				</tp-yt-paper-progress>
+			</div>
+			<dom-if class="style-scope tp-yt-paper-slider"
+				><template is="dom-if"></template
+			></dom-if>
+			<div
+				id="sliderKnob"
+				class="slider-knob style-scope tp-yt-paper-slider"
+				style="left: 50%; touch-action: none"
+			>
+				<div
+					class="slider-knob-inner style-scope tp-yt-paper-slider"
+					value="50"
+				></div>
+			</div>
+		</div>
+		<dom-if class="style-scope tp-yt-paper-slider"
+			><template is="dom-if"></template></dom-if
+	></tp-yt-paper-slider>
+
+	<div
+		class="text style-scope ytmusic-toggle-menu-service-item-renderer"
+		id="ytmcustom-playback-speed"
+	>
+		Speed (<span id="playback-speed-value">1</span>)
+	</div>
+</div>

plugins/shortcuts/back.js

@@ -15,14 +15,35 @@ function _registerLocalShortcut(win, shortcut, action) {
 	});
 }
 
-function registerShortcuts(win) {
+function registerShortcuts(win, options) {
-	const { playPause, next, previous, search } = getSongControls(win);
+	const songControls = getSongControls(win);
+	const { playPause, next, previous, search } = songControls;
 
 	_registerGlobalShortcut(win.webContents, "MediaPlayPause", playPause);
 	_registerGlobalShortcut(win.webContents, "MediaNextTrack", next);
 	_registerGlobalShortcut(win.webContents, "MediaPreviousTrack", previous);
 	_registerLocalShortcut(win, "CommandOrControl+F", search);
 	_registerLocalShortcut(win, "CommandOrControl+L", search);
+
+	const { global, local } = options;
+	(global || []).forEach(({ shortcut, action }) => {
+		console.debug("Registering global shortcut", shortcut, ":", action);
+		if (!action || !songControls[action]) {
+			console.warn("Invalid action", action);
+			return;
+		}
+
+		_registerGlobalShortcut(win.webContents, shortcut, songControls[action]);
+	});
+	(local || []).forEach(({ shortcut, action }) => {
+		console.debug("Registering local shortcut", shortcut, ":", action);
+		if (!action || !songControls[action]) {
+			console.warn("Invalid action", action);
+			return;
+		}
+
+		_registerLocalShortcut(win, shortcut, songControls[action]);
+	});
 }
 
 module.exports = registerShortcuts;

providers/dom-elements.js

@@ -0,0 +1,23 @@
+let domElements = {};
+
+const watchDOMElement = (name, selectorFn, cb) => {
+	const observer = new MutationObserver((mutations, observer) => {
+		if (!domElements[name]) {
+			domElements[name] = selectorFn(document);
+		}
+
+		if (domElements[name]) {
+			cb(domElements[name]);
+		}
+	});
+
+	observer.observe(document, {
+		childList: true,
+		subtree: true,
+	});
+};
+
+const getSongMenu = () =>
+	document.querySelector("ytmusic-menu-popup-renderer tp-yt-paper-listbox");
+
+module.exports = { getSongMenu, watchDOMElement };

providers/song-controls.js

@@ -1,18 +1,52 @@
 // This is used for to control the songs
-const pressKey = (window, key) => {
+const pressKey = (window, key, modifiers = []) => {
 	window.webContents.sendInputEvent({
 		type: "keydown",
+		modifiers,
 		keyCode: key,
 	});
 };
 
 module.exports = (win) => {
 	return {
+		// Playback
 		previous: () => pressKey(win, "k"),
 		next: () => pressKey(win, "j"),
 		playPause: () => pressKey(win, "space"),
 		like: () => pressKey(win, "_"),
 		dislike: () => pressKey(win, "+"),
+		go10sBack: () => pressKey(win, "h"),
+		go10sForward: () => pressKey(win, "l"),
+		go1sBack: () => pressKey(win, "h", ["shift"]),
+		go1sForward: () => pressKey(win, "l", ["shift"]),
+		shuffle: () => pressKey(win, "s"),
+		switchRepeat: () => pressKey(win, "r"),
+		// General
+		volumeMinus10: () => pressKey(win, "-"),
+		volumePlus10: () => pressKey(win, "="),
+		dislikeAndNext: () => pressKey(win, "-", ["shift"]),
+		like: () => pressKey(win, "=", ["shift"]),
+		fullscreen: () => pressKey(win, "f"),
+		muteUnmute: () => pressKey(win, "m"),
+		maximizeMinimisePlayer: () => pressKey(win, "q"),
+		// Navigation
+		goToHome: () => {
+			pressKey(win, "g");
+			pressKey(win, "h");
+		},
+		goToLibrary: () => {
+			pressKey(win, "g");
+			pressKey(win, "l");
+		},
+		goToHotlist: () => {
+			pressKey(win, "g");
+			pressKey(win, "t");
+		},
+		goToSettings: () => {
+			pressKey(win, "g");
+			pressKey(win, ",");
+		},
 		search: () => pressKey(win, "/"),
+		showShortcuts: () => pressKey(win, "/", ["shift"]),
 	};
 };