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

[Snyk] Upgrade electron-store from 7.0.1 to 7.0.2
fix: upgrade electron-store from 7.0.1 to 7.0.2
2026-01-11 02:31:45 +00:00 · 2021-03-09 19:50:17 +01:00 · 2021-03-05 02:19:09 +00:00 · 2021-03-04 23:09:27 +01:00 · 2021-03-04 23:09:01 +01:00 · 2021-03-04 22:57:41 +01:00
47 changed files with 4989 additions and 2051 deletions
--- a/config/defaults.js
+++ b/config/defaults.js
@ -12,6 +12,9 @@ const defaultConfig = {
 		startAtLogin: false,
 		disableHardwareAcceleration: false,
 		restartOnConfigChanges: false,
+		trayClickPlayPause: false,
+		autoResetAppCache: false,
+		resumeOnStart: true,
 	},
 	plugins: {
 		// Enabled plugins
--- a/config/index.js
+++ b/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(),
--- a/config/store.js
+++ b/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)) {
--- a/docs/favicon/favicon.ico
+++ b/docs/favicon/favicon.ico
--- a/docs/favicon/favicon_144.png
+++ b/docs/favicon/favicon_144.png
--- a/docs/favicon/favicon_32.png
+++ b/docs/favicon/favicon_32.png
--- a/docs/favicon/favicon_48.png
+++ b/docs/favicon/favicon_48.png
--- a/docs/favicon/favicon_96.png
+++ b/docs/favicon/favicon_96.png
--- a/docs/img/adblock.svg
+++ b/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>
--- a/docs/img/bg-bottom.svg
+++ b/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>
--- a/docs/img/bg-top.svg
+++ b/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>
--- a/docs/img/code.svg
+++ b/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>
--- a/docs/img/download.svg
+++ b/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>
--- a/docs/img/footer.svg
+++ b/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>
--- a/docs/img/plugins.svg
+++ b/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>
--- a/docs/img/youtube-music.png
+++ b/docs/img/youtube-music.png
--- a/docs/img/youtube-music.svg
+++ b/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>
--- a/docs/index.html
+++ b/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>
--- a/docs/js/main.js
+++ b/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);
+});
--- a/docs/style/fonts.css
+++ b/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;
+}
--- a/docs/style/style.css
+++ b/docs/style/style.css
--- a/index.js
+++ b/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",
@ -28,8 +35,6 @@ if (config.get("options.disableHardwareAcceleration")) {
 // Adds debug features like hotkeys for triggering dev tools and reload
 require("electron-debug")();

-// these are the providers for the plugins, this shouldn't be hardcoded but it's temporarily
-const providers = ["song-info"];
 // Prevent window being garbage collected
 let mainWindow;
 autoUpdater.autoDownload = false;
@ -56,15 +61,6 @@ function loadPlugins(win) {
 		}
 	});

-	providers.forEach(provider => {
-		console.log("Loaded provider - " + provider);
-		const providerPath = path.join(__dirname, "providers", provider, "back.js");
-		fileExists(providerPath, () => {
-			const handle = require(providerPath);
-			handle(win);
-		});
-	});
-
 	config.plugins.getEnabled().forEach(([plugin, options]) => {
 		console.log("Loaded plugin - " + plugin);
 		const pluginPath = path.join(__dirname, "plugins", plugin, "back.js");
@ -78,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,
@ -86,7 +83,9 @@ function createMainWindow() {
 		backgroundColor: "#000",
 		show: false,
 		webPreferences: {
-			contextIsolation: true,
+			// TODO: re-enable contextIsolation once it can work with ffmepg.wasm
+			// Possible bundling? https://github.com/ffmpegwasm/ffmpeg.wasm/issues/126
+			contextIsolation: false,
 			preload: path.join(__dirname, "preload.js"),
 			nodeIntegrationInSubFrames: true,
 			nativeWindowOpen: true, // window.open return Window object(like in regular browsers), not BrowserWindowProxy
@ -104,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", () => {
@ -205,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")) {
@ -221,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";
--- a/menu.js
+++ b/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()
 				? [
 						{
@ -116,6 +132,15 @@ const mainMenuTemplate = (win) => [
 							config.set("options.appVisible", false);
 						},
 					},
+					{ type: "separator" },
+					{
+						label: "Play/Pause on click",
+						type: "checkbox",
+						checked: config.get("options.trayClickPlayPause"),
+						click: (item) => {
+							config.set("options.trayClickPlayPause", item.checked);
+						},
+					},
 				],
 			},
 			{ type: "separator" },
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
 	"name": "youtube-music",
 	"productName": "YouTube Music",
-	"version": "1.8.1",
+	"version": "1.11.0",
 	"description": "YouTube Music Desktop App - including custom plugins",
 	"license": "MIT",
 	"repository": "th-ch/youtube-music",
@ -18,12 +18,25 @@
 			"icon": "assets/generated/icons/mac/icon.icns"
 		},
 		"win": {
-			"icon": "assets/generated/icons/win/icon.ico"
+			"icon": "assets/generated/icons/win/icon.ico",
+			"target": [
+				"nsis",
+				"portable"
+			]
+		},
+		"nsis": {
+			"runAfterFinish": false
 		},
 		"linux": {
 			"icon": "assets/generated/icons/png",
 			"category": "AudioVideo",
-			"target": ["AppImage", "snap", "freebsd", "deb", "rpm"]
+			"target": [
+				"AppImage",
+				"snap",
+				"freebsd",
+				"deb",
+				"rpm"
+			]
 		}
 	},
 	"scripts": {
@ -49,30 +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",
-		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.8.0",
+		"@ffmpeg/ffmpeg": "^0.9.7",
+		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.8.1",
+		"browser-id3-writer": "^4.4.0",
+		"discord-rpc": "^3.2.0",
 		"downloads-folder": "^3.0.1",
-		"electron-debug": "^3.1.0",
+		"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-builder": "^22.8.1",
+		"electron": "^11.2.3",
+		"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"
--- a/plugins/disable-autoplay/front.js
+++ b/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;
--- a/plugins/discord/back.js
+++ b/plugins/discord/back.js
@ -0,0 +1,51 @@
+const Discord = require("discord-rpc");
+
+const getSongInfo = require("../../providers/song-info");
+
+const rpc = new Discord.Client({
+	transport: "ipc",
+});
+
+// Application ID registered by @semvis123
+const clientId = "790655993809338398";
+
+module.exports = (win) => {
+	const registerCallback = getSongInfo(win);
+
+	// If the page is ready, register the callback
+	win.on("ready-to-show", () => {
+		rpc.on("ready", () => {
+			// Register the callback
+			registerCallback((songInfo) => {
+				// Song information changed, so lets update the rich presence
+				const activityInfo = {
+					details: songInfo.title,
+					state: songInfo.artist,
+					largeImageKey: "logo",
+					largeImageText: songInfo.views + " - " + songInfo.likes,
+				};
+
+				if (songInfo.isPaused) {
+					// Add an idle icon to show that the song is paused
+					activityInfo.smallImageKey = "idle";
+					activityInfo.smallImageText = "idle/paused";
+				} else {
+					// Add the start and end time of the song
+					const songStartTime = Date.now() - songInfo.elapsedSeconds * 1000;
+					activityInfo.startTimestamp = songStartTime;
+					activityInfo.endTimestamp =
+						songStartTime + songInfo.songDuration * 1000;
+				}
+
+				rpc.setActivity(activityInfo);
+			});
+		});
+
+		// Startup the rpc client
+		rpc
+			.login({
+				clientId,
+			})
+			.catch(console.error);
+	});
+};
--- a/plugins/downloader/actions.js
+++ b/plugins/downloader/actions.js
@ -1,6 +1,7 @@
 const CHANNEL = "downloader";
 const ACTIONS = {
 	ERROR: "error",
+	METADATA: "metadata",
 };

 module.exports = {
--- a/plugins/downloader/back.js
+++ b/plugins/downloader/back.js
@ -1,7 +1,10 @@
+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");
 const { ACTIONS, CHANNEL } = require("./actions.js");

@ -16,18 +19,54 @@ const sendError = (win, err) => {
 	dialog.showMessageBox(dialogOpts);
 };

+let metadata = {};
+
 function handle(win) {
 	injectCSS(win.webContents, join(__dirname, "style.css"));
+	const registerCallback = getSongInfo(win);
+	registerCallback((info) => {
+		metadata = info;
+	});

 	listenAction(CHANNEL, (event, action, error) => {
 		switch (action) {
 			case ACTIONS.ERROR:
 				sendError(win, error);
 				break;
+			case ACTIONS.METADATA:
+				event.returnValue = JSON.stringify(metadata);
+				break;
 			default:
 				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;
--- a/plugins/downloader/front.js
+++ b/plugins/downloader/front.js
@ -1,3 +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");
@ -11,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)) {
@ -28,6 +31,9 @@ const reinit = () => {
 	}
 };

+// TODO: re-enable once contextIsolation is set to true
+// contextBridge.exposeInMainWorld("downloader", {
+// 	download: () => {
 global.download = () => {
 	const videoUrl = window.location.href;

@ -48,6 +54,7 @@ global.download = () => {
 		pluginOptions
 	);
 };
+// });

 function observeMenu(options) {
 	pluginOptions = { ...pluginOptions, ...options };
--- a/plugins/downloader/youtube-dl.js
+++ b/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");

@ -12,6 +12,9 @@ const filenamify = require("filenamify");
 const FFmpeg = require("@ffmpeg/ffmpeg/dist/ffmpeg.min");
 const ytdl = require("ytdl-core");

+const { triggerActionSync } = require("../utils");
+const { ACTIONS, CHANNEL } = require("./actions.js");
+
 const { createFFmpeg } = FFmpeg;
 const ffmpeg = createFFmpeg({
 	log: false,
@ -54,7 +57,12 @@ const downloadVideoToMP3 = (
 		.on("info", (info, format) => {
 			videoName = info.videoDetails.title.replace("|", "").toString("ascii");
 			if (is.dev()) {
-				console.log("Downloading video - name:", videoName);
+				console.log(
+					"Downloading video - name:",
+					videoName,
+					"- quality:",
+					format.audioBitrate + "kbits/s"
+				);
 			}
 		})
 		.on("error", sendError)
@ -85,28 +93,53 @@ const toMP3 = async (
 		ffmpeg.FS("writeFile", safeVideoName, buffer);

 		sendFeedback("Converting…");
+		const metadata = getMetadata();
 		await ffmpeg.run(
 			"-i",
 			safeVideoName,
+			...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)
 		);
-
-		reinit();
+		ipcRenderer.once("add-metadata-done", reinit);
 	} catch (e) {
 		sendError(e);
 	}
 };

+const getMetadata = () => {
+	return JSON.parse(triggerActionSync(CHANNEL, ACTIONS.METADATA));
+};
+
+const getFFmpegMetadataArgs = (metadata) => {
+	if (!metadata) {
+		return;
+	}
+
+	return [
+		"-metadata",
+		`title=${metadata.title}`,
+		"-metadata",
+		`artist=${metadata.artist}`,
+	];
+};
+
 module.exports = {
 	downloadVideoToMP3,
 };
--- a/plugins/navigation/actions.js
+++ b/plugins/navigation/actions.js
@ -1,24 +1,24 @@
-const { triggerAction } = require('../utils');
+const { triggerAction } = require("../utils");

 const CHANNEL = "navigation";
 const ACTIONS = {
-    NEXT: "next",
-    BACK: 'back',
-}
+	NEXT: "next",
+	BACK: "back",
+};

 function goToNextPage() {
-    triggerAction(CHANNEL, ACTIONS.NEXT);
+	triggerAction(CHANNEL, ACTIONS.NEXT);
 }

 function goToPreviousPage() {
-    triggerAction(CHANNEL, ACTIONS.BACK);
+	triggerAction(CHANNEL, ACTIONS.BACK);
 }

 module.exports = {
-    CHANNEL: CHANNEL,
-    ACTIONS: ACTIONS,
-    global: {
-        goToNextPage: goToNextPage,
-        goToPreviousPage: goToPreviousPage,
-    }
+	CHANNEL: CHANNEL,
+	ACTIONS: ACTIONS,
+	actions: {
+		goToNextPage: goToNextPage,
+		goToPreviousPage: goToPreviousPage,
+	},
 };
--- a/plugins/navigation/back.js
+++ b/plugins/navigation/back.js
@ -1,23 +1,23 @@
 const path = require("path");

 const { injectCSS, listenAction } = require("../utils");
-const { ACTIONS, CHANNEL }        = require("./actions.js");
+const { ACTIONS, CHANNEL } = require("./actions.js");

 function handle(win) {
 	injectCSS(win.webContents, path.join(__dirname, "style.css"));
 	listenAction(CHANNEL, (event, action) => {
 		switch (action) {
-			case ACTIONS.NEXT: 
+			case ACTIONS.NEXT:
 				if (win.webContents.canGoForward()) {
 					win.webContents.goForward();
 				}
 				break;
-			case ACTIONS.BACK: 
+			case ACTIONS.BACK:
 				if (win.webContents.canGoBack()) {
 					win.webContents.goBack();
 				}
 				break;
-			default: 
+			default:
 				console.log("Unknown action: " + action);
 		}
 	});
--- a/plugins/notifications/back.js
+++ b/plugins/notifications/back.js
@ -1,30 +1,40 @@
-const {Notification} = require('electron');
+const { Notification } = require("electron");
+const getSongInfo = require("../../providers/song-info");

 const notify = info => {
-	let notificationImage = 'assets/youtube-music.png';
+	let notificationImage = "assets/youtube-music.png";

 	if (info.image) {
-		notificationImage = info.image.resize({height: 256, width: 256});
+		notificationImage = info.image.resize({ height: 256, width: 256 });
 	}

 	// Fill the notification with content
 	const notification = {
-		title: info.title || 'Playing',
+		title: info.title || "Playing",
 		body: info.artist,
 		icon: notificationImage,
-		silent: true
+		silent: true,
 	};
+		
 	// Send the notification
-	new Notification(notification).show();
+	currentNotification = new Notification(notification);
+	currentNotification.show()
+	
+	return currentNotification;
 };

-module.exports = win => {
-	win.on('ready-to-show', () => {
+module.exports = (win) => {
+	const registerCallback = getSongInfo(win);
+	let oldNotification;
+	win.on("ready-to-show", () => {
 		// Register the callback for new song information
-		global.songInfo.onNewData(songInfo => {
+		registerCallback(songInfo => {
 			// If song is playing send notification
-			if (!songInfo.isPaused) {
-				notify(songInfo);
+			if (!songInfo.isPaused) {	
+				// 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);
 			}
 		});
 	});
--- a/plugins/playback-speed/front.js
+++ b/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,
+			});
+		}
+	);
+};
--- a/plugins/playback-speed/templates/slider.html
+++ b/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>
--- a/plugins/shortcuts/back.js
+++ b/plugins/shortcuts/back.js
@ -1,12 +1,7 @@
 const { globalShortcut } = require("electron");
 const electronLocalshortcut = require("electron-localshortcut");

-const {
-	playPause,
-	nextTrack,
-	previousTrack,
-	startSearch
-} = require("./youtube.js");
+const getSongControls = require("../../providers/song-controls");

 function _registerGlobalShortcut(webContents, shortcut, action) {
 	globalShortcut.register(shortcut, () => {
@ -20,12 +15,35 @@ function _registerLocalShortcut(win, shortcut, action) {
 	});
 }

-function registerShortcuts(win) {
+function registerShortcuts(win, options) {
+	const songControls = getSongControls(win);
+	const { playPause, next, previous, search } = songControls;
+
 	_registerGlobalShortcut(win.webContents, "MediaPlayPause", playPause);
-	_registerGlobalShortcut(win.webContents, "MediaNextTrack", nextTrack);
-	_registerGlobalShortcut(win.webContents, "MediaPreviousTrack", previousTrack);
-	_registerLocalShortcut(win, "CommandOrControl+F", startSearch);
-	_registerLocalShortcut(win, "CommandOrControl+L", startSearch);
+	_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;
--- a/plugins/shortcuts/youtube.js
+++ b/plugins/shortcuts/youtube.js
@ -1,29 +0,0 @@
-function _keyboardInput(webContents, key) {
-	return webContents.sendInputEvent({
-		type   : "keydown",
-		keyCode: key
-	});
-}
-
-function playPause(webContents) {
-	return _keyboardInput(webContents, "Space");
-}
-
-function nextTrack(webContents) {
-	return _keyboardInput(webContents, "j");
-}
-
-function previousTrack(webContents) {
-	return _keyboardInput(webContents, "k");
-}
-
-function startSearch(webContents) {
-	return _keyboardInput(webContents, "/");
-}
-
-module.exports = {
-	playPause    : playPause,
-	nextTrack    : nextTrack,
-	previousTrack: previousTrack,
-	startSearch  : startSearch
-};
--- a/plugins/touchbar/back.js
+++ b/plugins/touchbar/back.js
@ -1,15 +1,18 @@
-const {TouchBar} = require('electron');
+const { TouchBar } = require("electron");
 const {
 	TouchBarButton,
 	TouchBarLabel,
 	TouchBarSpacer,
 	TouchBarSegmentedControl,
-	TouchBarScrubber
+	TouchBarScrubber,
 } = TouchBar;

+const getSongInfo = require("../../providers/song-info");
+const getSongControls = require("../../providers/song-controls");
+
 // Songtitle label
 const songTitle = new TouchBarLabel({
-	label: ''
+	label: "",
 });
 // This will store the song controls once available
 let controls = [];
@ -22,23 +25,23 @@ const pausePlayButton = new TouchBarButton();

 // The song control buttons (control functions are in the same order)
 const buttons = new TouchBarSegmentedControl({
-	mode: 'buttons',
+	mode: "buttons",
 	segments: [
 		new TouchBarButton({
-			label: '⏮'
+			label: "⏮",
 		}),
 		pausePlayButton,
 		new TouchBarButton({
-			label: '⏭'
+			label: "⏭",
 		}),
 		new TouchBarButton({
-			label: '👎'
+			label: "👎",
 		}),
 		new TouchBarButton({
-			label: '👍'
-		})
+			label: "👍",
+		}),
 	],
-	change: i => controls[i]()
+	change: (i) => controls[i](),
 });

 // This is the touchbar object, this combines everything with proper layout
@ -46,38 +49,37 @@ const touchBar = new TouchBar({
 	items: [
 		new TouchBarScrubber({
 			items: [songImage, songTitle],
-			continuous: false
+			continuous: false,
 		}),
 		new TouchBarSpacer({
-			size: 'flexible'
+			size: "flexible",
 		}),
-		buttons
-	]
+		buttons,
+	],
 });

-module.exports = win => {
+module.exports = (win) => {
+	const registerCallback = getSongInfo(win);
+	const { playPause, next, previous, like, dislike } = getSongControls(win);
+
 	// If the page is ready, register the callback
-	win.on('ready-to-show', () => {
-		controls = [
-			global.songControls.previous,
-			global.songControls.pause,
-			global.songControls.next,
-			global.songControls.like,
-			global.songControls.dislike
-		];
+	win.on("ready-to-show", () => {
+		controls = [previous, playPause, next, like, dislike];

 		// Register the callback
-		global.songInfo.onNewData(songInfo => {
+		registerCallback((songInfo) => {
 			// Song information changed, so lets update the touchBar

 			// Set the song title
 			songTitle.label = songInfo.title;

 			// Changes the pause button if paused
-			pausePlayButton.label = songInfo.isPaused ? '▶️' : '⏸';
+			pausePlayButton.label = songInfo.isPaused ? "▶️" : "⏸";

 			// Get image source
-			songImage.icon = songInfo.image ? songInfo.image.resize({height: 23}) : null;
+			songImage.icon = songInfo.image
+				? songInfo.image.resize({ height: 23 })
+				: null;

 			win.setTouchBar(touchBar);
 		});
--- a/plugins/utils.js
+++ b/plugins/utils.js
@ -4,15 +4,15 @@ const path = require("path");
 const { ipcMain, ipcRenderer } = require("electron");

 // Creates a DOM element from a HTML string
-module.exports.ElementFromHtml = html => {
-	var template           = document.createElement("template");
-	    html               = html.trim();                         // Never return a text node of whitespace as the result
-	    template.innerHTML = html;
+module.exports.ElementFromHtml = (html) => {
+	var template = document.createElement("template");
+	html = html.trim(); // Never return a text node of whitespace as the result
+	template.innerHTML = html;
 	return template.content.firstChild;
 };

 // Creates a DOM element from a HTML file
-module.exports.ElementFromFile = filepath => {
+module.exports.ElementFromFile = (filepath) => {
 	return module.exports.ElementFromHtml(fs.readFileSync(filepath, "utf8"));
 };

@ -24,12 +24,16 @@ module.exports.triggerAction = (channel, action, ...args) => {
 	return ipcRenderer.send(channel, action, ...args);
 };

+module.exports.triggerActionSync = (channel, action, ...args) => {
+	return ipcRenderer.sendSync(channel, action, ...args);
+};
+
 module.exports.listenAction = (channel, callback) => {
 	return ipcMain.on(channel, callback);
 };

 module.exports.fileExists = (path, callbackIfExists) => {
-	fs.access(path, fs.F_OK, err => {
+	fs.access(path, fs.F_OK, (err) => {
 		if (err) {
 			return;
 		}
@ -45,10 +49,10 @@ module.exports.injectCSS = (webContents, filepath) => {
 };

 module.exports.getAllPlugins = () => {
-	const isDirectory = source => fs.lstatSync(source).isDirectory();
+	const isDirectory = (source) => fs.lstatSync(source).isDirectory();
 	return fs
 		.readdirSync(__dirname)
-		.map(name => path.join(__dirname, name))
+		.map((name) => path.join(__dirname, name))
 		.filter(isDirectory)
-		.map(name => path.basename(name));
+		.map((name) => path.basename(name));
 };
--- a/preload.js
+++ b/preload.js
@ -1,6 +1,6 @@
 const path = require("path");

-const { remote } = require("electron");
+const { contextBridge, remote } = require("electron");

 const config = require("./config");
 const { fileExists } = require("./plugins/utils");
@ -10,7 +10,10 @@ const plugins = config.plugins.getEnabled();
 plugins.forEach(([plugin, options]) => {
 	const pluginPath = path.join(__dirname, "plugins", plugin, "actions.js");
 	fileExists(pluginPath, () => {
-		const actions = require(pluginPath).global || {};
+		const actions = require(pluginPath).actions || {};
+
+		// TODO: re-enable once contextIsolation is set to true
+		// contextBridge.exposeInMainWorld(plugin + "Actions", actions);
 		Object.keys(actions).forEach((actionName) => {
 			global[actionName] = actions[actionName];
 		});
--- a/providers/dom-elements.js
+++ b/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 };
--- a/providers/song-controls.js
+++ b/providers/song-controls.js
@ -0,0 +1,52 @@
+// This is used for to control the songs
+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"]),
+	};
+};
--- a/providers/song-info.js
+++ b/providers/song-info.js
@ -0,0 +1,137 @@
+const { nativeImage } = require("electron");
+
+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";
+
+// This selects the song subinfo, this includes artist, views, likes
+const subInfoSelector =
+	"#layout > ytmusic-player-bar > div.middle-controls.style-scope.ytmusic-player-bar > div.content-info-wrapper.style-scope.ytmusic-player-bar > span";
+
+// This selects the progress bar, used for songlength and current progress
+const progressSelector = "#progress-bar";
+
+// 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 getImageSrc = (win) => {
+	return win.webContents
+		.executeJavaScript("document.querySelector('" + imageSelector + "').src")
+		.catch((error) => {
+			console.log(error);
+		});
+};
+
+// Grab the subinfo using the selector
+const getSubInfo = async (win) => {
+	// Get innerText of subinfo element
+	const subInfoString = await win.webContents.executeJavaScript(
+		'document.querySelector("' + subInfoSelector + '").innerText'
+	);
+
+	// Split and clean the string
+	const splittedSubInfo = subInfoString.replaceAll("\n", "").split(" • ");
+
+	// Make sure we always return 3 elements in the aray
+	const subInfo = [];
+	for (let i = 0; i < 3; i++) {
+		// Fill array with empty string if not defined
+		subInfo.push(splittedSubInfo[i] || "");
+	}
+
+	return subInfo;
+};
+
+// Grab the progress using the selector
+const getProgress = async (win) => {
+	// Get max value of the progressbar element
+	const songDuration = await win.webContents.executeJavaScript(
+		'document.querySelector("' + progressSelector + '").max'
+	);
+	// Get current value of the progressbar element
+	const elapsedSeconds = await win.webContents.executeJavaScript(
+		'document.querySelector("' + progressSelector + '").value'
+	);
+
+	return { songDuration, elapsedSeconds };
+};
+
+// Grab the native image using the src
+const getImage = async (src) => {
+	const result = await fetch(src);
+	const buffer = await result.buffer();
+	return nativeImage.createFromBuffer(buffer);
+};
+
+const getPausedStatus = async (win) => {
+	const title = await win.webContents.executeJavaScript("document.title");
+	return !title.includes("-");
+};
+
+// Fill songInfo with empty values
+const songInfo = {
+	title: "",
+	artist: "",
+	views: "",
+	likes: "",
+	imageSrc: "",
+	image: null,
+	isPaused: true,
+	songDuration: 0,
+	elapsedSeconds: 0,
+};
+
+const registerProvider = (win) => {
+	// This variable will be filled with the callbacks once they register
+	const callbacks = [];
+
+	// This function will allow plugins to register callback that will be triggered when data changes
+	const registerCallback = (callback) => {
+		callbacks.push(callback);
+	};
+
+	win.on("page-title-updated", async () => {
+		// Save the old title temporarily
+		const oldTitle = songInfo.title;
+		// Get and set the new data
+		songInfo.title = await getTitle(win);
+		songInfo.isPaused = await getPausedStatus(win);
+
+		const { songDuration, elapsedSeconds } = await getProgress(win);
+		songInfo.songDuration = songDuration;
+		songInfo.elapsedSeconds = elapsedSeconds;
+
+		// If title changed then we do need to update other info
+		if (oldTitle !== songInfo.title) {
+			const subInfo = await getSubInfo(win);
+			songInfo.artist = subInfo[0];
+			songInfo.views = subInfo[1];
+			songInfo.likes = subInfo[2];
+			songInfo.imageSrc = await getImageSrc(win);
+			songInfo.image = await getImage(songInfo.imageSrc);
+		}
+
+		// Trigger the callbacks
+		callbacks.forEach((c) => {
+			c(songInfo);
+		});
+	});
+
+	return registerCallback;
+};
+
+module.exports = registerProvider;
--- a/providers/song-info/back.js
+++ b/providers/song-info/back.js
@ -1,120 +0,0 @@
-const {nativeImage} = require('electron');
-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';
-
-// This selects the song subinfo, this includes artist, views, likes
-const subInfoSelector = '#layout > ytmusic-player-bar > div.middle-controls.style-scope.ytmusic-player-bar > div.content-info-wrapper.style-scope.ytmusic-player-bar > span';
-
-// This is used for to control the songs
-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 getImageSrc = win => {
-	return win.webContents.executeJavaScript(
-		'document.querySelector(\'' + imageSelector + '\').src'
-	).catch(error => {
-		console.log(error);
-	});
-};
-
-// Grab the subinfo using the selector
-const getSubInfo = async win => {
-	// Get innerText of subinfo element
-	const subInfoString = await win.webContents.executeJavaScript(
-		'document.querySelector("' + subInfoSelector + '").innerText');
-
-	// Split and clean the string
-	const splittedSubInfo = subInfoString.replaceAll('\n', '').split(' • ');
-
-	// Make sure we always return 3 elements in the aray
-	const subInfo = [];
-	for (let i = 0; i < 3; i++) {
-		// Fill array with empty string if not defined
-		subInfo.push(splittedSubInfo[i] || '');
-	}
-
-	return subInfo;
-};
-
-// Grab the native image using the src
-const getImage = async src => {
-	const result = await fetch(src);
-	const buffer = await result.buffer();
-	return nativeImage.createFromBuffer(buffer);
-};
-
-const getPausedStatus = async win => {
-	const title = await win.webContents.executeJavaScript('document.title');
-	return !title.includes('-');
-};
-
-// This variable will be filled with the callbacks once they register
-const callbacks = [];
-
-module.exports = win => {
-	// Fill songInfo with empty values
-	global.songInfo = {
-		title: '',
-		artist: '',
-		views: '',
-		likes: '',
-		imageSrc: '',
-		image: null,
-		isPaused: true
-	};
-	// The song control functions
-	global.songControls = {
-		previous: () => presskey(win, 'k'),
-		next: () => presskey(win, 'j'),
-		pause: () => presskey(win, 'space'),
-		like: () => presskey(win, '_'),
-		dislike: () => presskey(win, '+')
-	};
-
-	// This function will allow plugins to register callback that will be triggered when data changes
-	global.songInfo.onNewData = callback => {
-		callbacks.push(callback);
-	};
-
-	win.on('page-title-updated', async () => {
-		// Save the old title temporarily
-		const oldTitle = global.songInfo.title;
-		// Get and set the new data
-		global.songInfo.title = await getTitle(win);
-		global.songInfo.isPaused = await getPausedStatus(win);
-
-		// If title changed then we do need to update other info
-		if (oldTitle !== global.songInfo.title) {
-			const subInfo = await getSubInfo(win);
-			global.songInfo.artist = subInfo[0];
-			global.songInfo.views = subInfo[1];
-			global.songInfo.likes = subInfo[2];
-			global.songInfo.imageSrc = await getImageSrc(win);
-			global.songInfo.image = await getImage(global.songInfo.imageSrc);
-		}
-
-		// Trigger the callbacks
-		callbacks.forEach(c => {
-			c(global.songInfo);
-		});
-	});
-};
--- a/tray.js
+++ b/tray.js
@ -4,7 +4,7 @@ const { Menu, nativeImage, Tray } = require("electron");

 const config = require("./config");
 const { mainMenuTemplate } = require("./menu");
-const { clickInYoutubeMusic } = require("./utils/youtube-music");
+const getSongControls = require("./providers/song-controls");

 // Prevent tray being garbage collected
 let tray;
@ -15,6 +15,7 @@ module.exports.setUpTray = (app, win) => {
 		return;
 	}

+	const { playPause, next, previous } = getSongControls(win);
 	const iconPath = path.join(__dirname, "assets", "youtube-music-tray.png");
 	let trayIcon = nativeImage.createFromPath(iconPath).resize({
 		width: 16,
@ -24,35 +25,30 @@ module.exports.setUpTray = (app, win) => {
 	tray.setToolTip("Youtube Music");
 	tray.setIgnoreDoubleClickEvents(true);
 	tray.on("click", () => {
-		win.isVisible() ? win.hide() : win.show();
+		if (config.get("options.trayClickPlayPause")) {
+			playPause();
+		} else {
+			win.isVisible() ? win.hide() : win.show();
+		}
 	});

 	const trayMenu = Menu.buildFromTemplate([
 		{
 			label: "Play/Pause",
 			click: () => {
-				clickInYoutubeMusic(
-					win,
-					"#left-controls > div > paper-icon-button.play-pause-button.style-scope.ytmusic-player-bar"
-				);
+				playPause();
 			},
 		},
 		{
 			label: "Next",
 			click: () => {
-				clickInYoutubeMusic(
-					win,
-					"#left-controls > div > paper-icon-button.next-button.style-scope.ytmusic-player-bar"
-				);
+				next();
 			},
 		},
 		{
 			label: "Previous",
 			click: () => {
-				clickInYoutubeMusic(
-					win,
-					"#left-controls > div > paper-icon-button.previous-button.style-scope.ytmusic-player-bar"
-				);
+				previous();
 			},
 		},
 		{
--- a/utils/youtube-music.js
+++ b/utils/youtube-music.js
@ -1,8 +0,0 @@
-const clickInYoutubeMusic = (win, selector) => {
-	win.webContents.executeJavaScript(
-		`document.querySelector("${selector}").click();`,
-		true
-	);
-};
-
-module.exports = { clickInYoutubeMusic };
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
th-ch	c5bda4f3be	Merge pull request #178 from th-ch/snyk-upgrade-da4beb25f2fa1631098996298cd49f89 [Snyk] Upgrade electron-store from 7.0.1 to 7.0.2	2021-03-09 19:50:17 +01:00
snyk-bot	3dc92b4939	fix: upgrade electron-store from 7.0.1 to 7.0.2 Snyk has created this PR to upgrade electron-store from 7.0.1 to 7.0.2. 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	2021-03-05 02:19:09 +00:00
TC	150146385f	Bump version	2021-03-04 23:09:27 +01:00
TC	f50bd32fa3	Fix resumeOnStart option	2021-03-04 23:09:01 +01:00
th-ch	0dcf820944	Merge pull request #177 from NNowakowski/resume-last-song-on-start Added function to toggle resuming of last song when app starts	2021-03-04 22:57:41 +01:00
th-ch	6fd16684f7	Merge pull request #175 from th-ch/snyk-upgrade-024effb4b0bec6e73345b87366580cf3 [Snyk] Upgrade discord-rpc from 3.1.4 to 3.2.0	2021-03-04 22:54:13 +01:00
TC	eaa957168f	Add plugin to disable autoplay	2021-03-04 22:47:53 +01:00
TC	796a7aaaf1	Fix download/speed menu item	2021-03-04 21:29:37 +01:00
Nico Nowakowski	9aaae7b2d9	🚀 Added function to toggle resuming of last song when app starts	2021-03-04 14:14:49 +01:00
snyk-bot	c00609223b	fix: upgrade discord-rpc from 3.1.4 to 3.2.0 Snyk has created this PR to upgrade discord-rpc from 3.1.4 to 3.2.0. 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	2021-03-04 02:19:26 +00:00
th-ch	5641c3fc87	Merge pull request #154 from th-ch/snyk-upgrade-3f26f6e01fe99104189d358a840963dd [Snyk] Upgrade @cliqz/adblocker-electron from 1.19.0 to 1.20.0	2021-02-24 23:11:02 +01:00
semvis123	dd1bdae947	Added metadata to downloader plugin, and updated packages	2021-02-24 22:53:31 +01:00
TC	70973b2281	Clear cache after 20s if option is enabled	2021-02-24 21:08:25 +01:00
TC	5842a6d42f	Handle uncaught errors	2021-02-24 20:53:41 +01:00
snyk-bot	538ab52abd	fix: upgrade @cliqz/adblocker-electron from 1.19.0 to 1.20.0 Snyk has created this PR to upgrade @cliqz/adblocker-electron from 1.19.0 to 1.20.0. 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	2021-02-12 02:19:15 +00:00
TC	5a1358b310	Bump version	2021-02-07 18:30:01 +01:00
TC	024ed9085c	Allow custom shortcuts in plugin	2021-02-07 18:29:35 +01:00
TC	b2c9e445b7	Fix shortcuts	2021-02-07 18:29:08 +01:00
TC	5b8d5d5ee4	Do not run the app after Windows install	2021-02-07 14:43:37 +01:00
TC	a82efaf91b	Bump YoutubeNonStop	2021-02-07 14:38:30 +01:00
TC	980090f108	Remember window position	2021-02-07 13:25:01 +01:00
TC	f7f31850d3	Add plugin to control playback speed like in YouTube (from 0.25 to 2)	2021-02-07 11:46:57 +01:00
th-ch	3415ce3965	Merge pull request #146 from th-ch/snyk-upgrade-aba6333ac62e918200d72118a7613fb6 [Snyk] Upgrade @ffmpeg/ffmpeg from 0.9.6 to 0.9.7	2021-02-06 22:34:21 +01:00
th-ch	436d9ef3e1	Merge pull request #144 from semvis123/master Reuse the same notification, instead of creating a new one each time the song changes.	2021-02-06 22:30:35 +01:00
TC	da61621a62	Check updates after 2s	2021-02-06 22:25:23 +01:00
TC	3976d1c862	Add option to reset cache	2021-02-06 22:15:57 +01:00
snyk-bot	a9980190d0	fix: upgrade @ffmpeg/ffmpeg from 0.9.6 to 0.9.7 Snyk has created this PR to upgrade @ffmpeg/ffmpeg from 0.9.6 to 0.9.7. 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	2021-02-05 02:19:17 +00:00
Sem Visscher	e75dfcf41c	little fixes	2021-02-01 22:00:18 +01:00
Sem Visscher	1fdf2416ad	Update back.js	2021-02-01 21:34:56 +01:00
Sem Visscher	df627788c9	small formatting changes	2021-02-01 20:23:46 +01:00
Sem Visscher	c1ee58b47f	Reuse the same notifcation, instead of creating a new notification each time.	2021-02-01 20:18:16 +01:00
th-ch	d6f7c54370	Merge pull request #136 from th-ch/snyk-upgrade-57f12acf80f9a08801a63b7852a10ff8 [Snyk] Upgrade ytdl-core from 4.2.1 to 4.3.0	2021-01-23 12:53:18 +01:00
snyk-bot	3a03fb51cd	fix: upgrade ytdl-core from 4.2.1 to 4.3.0 Snyk has created this PR to upgrade ytdl-core from 4.2.1 to 4.3.0. 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	2021-01-22 02:21:11 +00:00
TC	e19964edf6	GH page: fix canvas size	2021-01-18 21:58:18 +01:00
TC	3bcf409f2b	GH page	2021-01-17 20:32:23 +01:00
TC	37289b9cbe	Downloader: 'artist - title' format for filename	2021-01-16 10:19:10 +01:00
TC	227902b7cc	Add shortcuts to provider	2021-01-15 23:16:47 +01:00
TC	644950ccc0	Bump version	2021-01-15 09:31:34 +01:00
TC	d848937e6a	Rename discord plugin	2021-01-14 23:16:59 +01:00
th-ch	446aa8becc	Merge pull request #121 from th-ch/snyk-upgrade-d29b51f488ba9deb228b72952a3f7b8e [Snyk] Upgrade electron-debug from 3.1.0 to 3.2.0	2021-01-14 23:12:27 +01:00
TC	d52dbee13c	Prettier utils	2021-01-14 23:09:16 +01:00
TC	ed09304ed7	Refactor tray to use provider + play/pause on click	2021-01-14 23:09:04 +01:00
TC	2861473097	Set title/artist metadata in downloader	2021-01-14 23:01:26 +01:00
semvis123	39dc22973e	Merge pull request #1 from th-ch/master bring the new commits to this fork	2021-01-14 22:24:21 +01:00
th-ch	25fd48697b	Merge pull request #125 from th-ch/refactor-providers Refactor providers	2021-01-14 21:03:26 +01:00
TC	aec542e95e	Update discord plugin for new provider + wait for ready	2021-01-13 22:22:22 +01:00
TC	eae95befe1	Merge branch 'master' of github.com:th-ch/youtube-music into refactor-providers # By TC (9) and semvis123 (2) # Via GitHub (4) and semvis123 (1) * 'master' of github.com:th-ch/youtube-music: renamed DiscordRPC to Discord Downloader plugin: log audio bitrate Disable context isolation (to load ffmpeg wasm) Use contextBridge in preload script + update navigation plugin Fix downloader plugin with context isolation Bump version Add portable target to windows builds Added Discord rich presence and added extra properties to songinfo provider Bump version Allow custom audio extensions in downloader Defensive: handle null/undefined ffmpeg args	2021-01-13 22:10:10 +01:00
th-ch	f0200e7b38	Merge pull request #124 from semvis123/master Added Discord rich presence and added extra properties to songInfo provider	2021-01-13 22:08:10 +01:00
semvis123	70775f4988	renamed DiscordRPC to Discord	2021-01-13 21:56:53 +01:00
th-ch	074840ef56	Merge pull request #127 from th-ch/fix-plugins-context-isolation Fix plugins with context isolation	2021-01-13 21:44:37 +01:00
TC	b54c501eeb	Downloader plugin: log audio bitrate	2021-01-13 21:36:16 +01:00
th-ch	6d587cb432	Merge pull request #126 from th-ch/windows-portable Windows portable exe	2021-01-13 21:32:53 +01:00
TC	39c8031cd7	Disable context isolation (to load ffmpeg wasm)	2021-01-13 21:28:42 +01:00
TC	9ad1dad6df	Use contextBridge in preload script + update navigation plugin	2021-01-12 22:54:04 +01:00
TC	79e8fc2fac	Fix downloader plugin with context isolation	2021-01-12 22:52:21 +01:00
TC	67c4422eb8	Bump version	2021-01-12 21:37:02 +01:00
TC	18df1223af	Add portable target to windows builds	2021-01-12 21:36:38 +01:00
TC	f7cbf2c221	No autoloading of providers (loaded on demand in plugins)	2021-01-12 21:19:01 +01:00
TC	87d2693e2b	Use refactored provider in shortcuts plugin	2021-01-12 21:18:32 +01:00
TC	de1e4196d9	Use refactored provider in notification plugin	2021-01-12 21:18:05 +01:00
TC	9110e79c16	Use refactored providers in touchbar plugin	2021-01-12 21:17:40 +01:00
TC	0743034de0	Split providers in 2	2021-01-12 21:17:08 +01:00
TC	f1ddb92886	nit: prettier	2021-01-12 21:16:29 +01:00
semvis123	a8ce87f2cc	Added Discord rich presence and added extra properties to songinfo provider	2021-01-12 20:16:49 +01:00
snyk-bot	86a329a61b	fix: upgrade electron-debug from 3.1.0 to 3.2.0 Snyk has created this PR to upgrade electron-debug from 3.1.0 to 3.2.0. 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	2021-01-12 02:24:30 +00:00
				`@ -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>
				`@ -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>
				`@ -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>
				`@ -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"></></text></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>
				`@ -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>
				`@ -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>`