Merge pull request #406 from th-ch/snyk-upgrade-3c48abddd3d31d59f08172a32b5dd378

[Snyk] Upgrade @cliqz/adblocker-electron from 1.22.4 to 1.22.5

.github/workflows/build.yml

@@ -0,0 +1,62 @@
+name: Build YouTube Music
+
+on:
+  - push
+
+jobs:
+  build:
+    name: Build YouTube Music
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: true
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup NodeJS
+        uses: actions/setup-node@v1
+        with:
+          node-version: "14.x"
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Test
+        uses: GabrielBB/xvfb-action@v1
+        with:
+          run: yarn test
+
+      - name: Build on Mac
+        if: startsWith(matrix.os, 'macOS')
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+        run: |
+          yarn run release:mac
+
+      - name: Build on Linux
+        if: startsWith(matrix.os, 'ubuntu')
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+        run: |
+          yarn run release:linux
+
+      - name: Build on Windows
+        if: startsWith(matrix.os, 'windows')
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+        run: |
+          yarn run release:win

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+scripts-prepend-node-path=true

.travis.yml

@@ -1,43 +0,0 @@
-matrix:
-  include:
-    - os: osx
-      osx_image: xcode9.4
-      language: node_js
-      node_js: "10"
-      env:
-        - ELECTRON_CACHE=$HOME/.cache/electron
-        - ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder
-
-    - os: linux
-      services: docker
-      language: generic
-
-cache:
-  directories:
-    - node_modules
-    - $HOME/.cache/electron
-    - $HOME/.cache/electron-builder
-
-script:
-  - |
-    if [ "$TRAVIS_OS_NAME" == "linux" ]; then
-      docker run --rm \
-        $(env | \
-          grep -Eo '^[^\s=]*(DEBUG|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS|APPVEYOR_|CSC_|_TOKEN|_KEY|AWS_|STRIP|BUILD_)[^\s=]*' | \
-          sed '/^$/d;s/^/-e /' | \
-          paste -sd ' ' \
-        ) \
-        -v ${PWD}:/project \
-        -v ~/.cache/electron:/root/.cache/electron \
-        -v ~/.cache/electron-builder:/root/.cache/electron-builder \
-        electronuserland/builder \
-        /bin/bash -c "npm install && npm run release:linux"
-    else
-      npm run release:mac
-    fi
-before_cache:
-  - rm -rf $HOME/.cache/electron-builder
-
-branches:
-  except:
-    - "/^v\\d+\\.\\d+\\.\\d+$/"

appveyor.yml

@@ -1,20 +0,0 @@
-image: Visual Studio 2017
-
-platform:
-  - x64
-
-cache:
-  - node_modules
-  - '%USERPROFILE%\.electron'
-
-init:
-  - git config --global core.autocrlf input
-
-install:
-  - ps: Install-Product node 8 x64
-  - npm install
-
-build_script:
-  - npm run release:win
-
-test: off

config/defaults.js

@@ -0,0 +1,82 @@
+const defaultConfig = {
+	"window-size": {
+		width: 1100,
+		height: 550,
+	},
+	url: "https://music.youtube.com",
+	options: {
+		tray: false,
+		appVisible: true,
+		autoUpdates: true,
+		hideMenu: false,
+		startAtLogin: false,
+		disableHardwareAcceleration: false,
+		restartOnConfigChanges: false,
+		trayClickPlayPause: false,
+		autoResetAppCache: false,
+		resumeOnStart: true,
+		proxy: "",
+	},
+	plugins: {
+		// Enabled plugins
+		navigation: {
+			enabled: true,
+		},
+		adblocker: {
+			enabled: true,
+			cache: true,
+			additionalBlockLists: [], // Additional list of filters, e.g "https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters.txt"
+		},
+		// Disabled plugins
+		shortcuts: {
+			enabled: false,
+		},
+		downloader: {
+			enabled: false,
+			ffmpegArgs: [], // e.g. ["-b:a", "192k"] for an audio bitrate of 192kb/s
+			downloadFolder: undefined, // Custom download folder (absolute path)
+		},
+		"last-fm": {
+			enabled: false,
+			api_root: "http://ws.audioscrobbler.com/2.0/",
+			api_key: "04d76faaac8726e60988e14c105d421a", // api key registered by @semvis123
+			secret: "a5d2a36fdf64819290f6982481eaffa2",
+		},
+		discord: {
+			enabled: false,
+			activityTimoutEnabled: true, // if enabled, the discord rich presence gets cleared when music paused after the time specified below
+			activityTimoutTime: 10 * 60 * 1000 // 10 minutes
+		},
+		notifications: {
+			enabled: false,
+			unpauseNotification: false,
+			urgency: "normal", //has effect only on Linux 
+			interactive: false //has effect only on Windows
+		},
+		"precise-volume": {
+			enabled: false,
+			steps: 1, //percentage of volume to change
+			arrowsShortcut: true, //enable ArrowUp + ArrowDown local shortcuts
+			globalShortcuts: {
+				enabled: false, // enable global shortcuts
+				volumeUp: "Shift+PageUp", // Keybind default can be changed
+				volumeDown: "Shift+PageDown"
+			},
+			savedVolume: undefined //plugin save volume between session here
+		},
+		sponsorblock: {
+			enabled: false,
+			apiURL: "https://sponsor.ajay.app",
+			categories: [
+				"sponsor",
+				"intro",
+				"outro",
+				"interaction",
+				"selfpromo",
+				"music_offtopic",
+			],
+		},
+	},
+};
+
+module.exports = defaultConfig;

config/index.js

@@ -0,0 +1,23 @@
+const defaultConfig = require("./defaults");
+const plugins = require("./plugins");
+const store = require("./store");
+
+const set = (key, value) => {
+	store.set(key, value);
+};
+
+const get = (key) => {
+	return store.get(key);
+};
+
+module.exports = {
+	defaultConfig,
+	get,
+	set,
+	edit: () => store.openInEditor(),
+	watch: (cb) => {
+		store.onDidChange("options", cb);
+		store.onDidChange("plugins", cb);
+	},
+	plugins,
+};

config/plugins.js

@@ -0,0 +1,46 @@
+const store = require("./store");
+
+function getEnabled() {
+	const plugins = store.get("plugins");
+	const enabledPlugins = Object.entries(plugins).filter(([plugin, options]) =>
+		isEnabled(plugin)
+	);
+	return enabledPlugins;
+}
+
+function isEnabled(plugin) {
+	const pluginConfig = store.get("plugins")[plugin];
+	return pluginConfig !== undefined && pluginConfig.enabled;
+}
+
+function setOptions(plugin, options) {
+	const plugins = store.get("plugins");
+	store.set("plugins", {
+		...plugins,
+		[plugin]: {
+			...plugins[plugin],
+			...options,
+		},
+	});
+}
+
+function getOptions(plugin) {
+	return store.get("plugins")[plugin];
+}
+
+function enable(plugin) {
+	setOptions(plugin, { enabled: true });
+}
+
+function disable(plugin) {
+	setOptions(plugin, { enabled: false });
+}
+
+module.exports = {
+	isEnabled,
+	getEnabled,
+	enable,
+	disable,
+	setOptions,
+	getOptions,
+};

config/store.js

@@ -0,0 +1,45 @@
+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)) {
+			console.warn("Plugins are not in array format, cannot migrate");
+			return;
+		}
+
+		// Include custom options
+		const plugins = {
+			adblocker: {
+				enabled: true,
+				cache: true,
+				additionalBlockLists: [],
+			},
+			downloader: {
+				enabled: false,
+				ffmpegArgs: [], // e.g. ["-b:a", "192k"] for an audio bitrate of 192kb/s
+				downloadFolder: undefined, // Custom download folder (absolute path)
+			},
+		};
+		enabledPlugins.forEach((enabledPlugin) => {
+			plugins[enabledPlugin] = {
+				...plugins[enabledPlugin],
+				enabled: true,
+			};
+		});
+		store.set("plugins", plugins);
+	},
+};
+
+module.exports = new Store({
+	defaults,
+	clearInvalidConfig: false,
+	migrations,
+});

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

@@ -1,15 +1,42 @@
 "use strict";
 const path = require("path");
 
-const electron        = require("electron");
+const electron = require("electron");
-const is              = require("electron-is");
+const enhanceWebRequest = require("electron-better-web-request").default;
+const is = require("electron-is");
+const unhandled = require("electron-unhandled");
 const { autoUpdater } = require("electron-updater");
 
-const { setApplicationMenu }       = require("./menu");
+const config = require("./config");
-const { getEnabledPlugins, store } = require("./store");
+const { setApplicationMenu } = require("./menu");
-const { fileExists, injectCSS }    = require("./plugins/utils");
+const { fileExists, injectCSS } = require("./plugins/utils");
+const { isTesting } = require("./utils/testing");
+const { setUpTray } = require("./tray");
+const { setupSongInfo } = require("./providers/song-info");
+
+// Catch errors and log them
+unhandled({
+	logger: console.error,
+	showDialog: false,
+});
 
 const app = electron.app;
+app.commandLine.appendSwitch(
+	"js-flags",
+	// WebAssembly flags
+	"--experimental-wasm-threads --experimental-wasm-bulk-memory"
+);
+app.allowRendererProcessReuse = true; // https://github.com/electron/electron/issues/18397
+if (config.get("options.disableHardwareAcceleration")) {
+	if (is.dev()) {
+		console.log("Disabling hardware acceleration");
+	}
+	app.disableHardwareAcceleration();
+}
+
+if (config.get("options.proxy")) {
+	app.commandLine.appendSwitch("proxy-server", config.get("options.proxy"));
+}
 
 // Adds debug features like hotkeys for triggering dev tools and reload
 require("electron-debug")();
@@ -31,30 +58,7 @@ function onClosed() {
 	mainWindow = null;
 }
 
-function createMainWindow() {
+function loadPlugins(win) {
-	const windowSize      = store.get("window-size");
-	const windowMaximized = store.get("window-maximized");
-
-	const win = new electron.BrowserWindow({
-		icon           : icon,
-		width          : windowSize.width,
-		height         : windowSize.height,
-		backgroundColor: "#000",
-		show           : false,
-		webPreferences : {
-			nodeIntegration: false,
-			preload        : path.join(__dirname, "preload.js")
-		},
-		frame        : !is.macOS(),
-		titleBarStyle: is.macOS() ? "hiddenInset": "default"
-	});
-	if (windowMaximized) {
-		win.maximize();
-	}
-
-	win.webContents.loadURL(store.get("url"));
-	win.on("closed", onClosed);
-
 	injectCSS(win.webContents, path.join(__dirname, "youtube-music.css"));
 	win.webContents.on("did-finish-load", () => {
 		if (is.dev()) {
@@ -63,50 +67,178 @@ function createMainWindow() {
 		}
 	});
 
-	getEnabledPlugins().forEach(plugin => {
+	config.plugins.getEnabled().forEach(([plugin, options]) => {
 		console.log("Loaded plugin - " + plugin);
 		const pluginPath = path.join(__dirname, "plugins", plugin, "back.js");
 		fileExists(pluginPath, () => {
 			const handle = require(pluginPath);
-			handle(win);
+			handle(win, options);
 		});
 	});
+}
 
-	win.webContents.on("did-fail-load", () => {
+function createMainWindow() {
-		if (is.dev()) {
+	const windowSize = config.get("window-size");
-			console.log("did fail load");
+	const windowMaximized = config.get("window-maximized");
-		}
+	const windowPosition = config.get("window-position");
-		win.webContents.loadFile(path.join(__dirname, "error.html"));
+	const useInlineMenu = config.plugins.isEnabled("in-app-menu");
-	});
 
-	win.webContents.on("did-navigate-in-page", () => {
+	const win = new electron.BrowserWindow({
-		const url = win.webContents.getURL();
+		icon: icon,
-		if (url.startsWith("https://music.youtube.com")) {
+		width: windowSize.width,
-			store.set("url", url);
+		height: windowSize.height,
-		}
+		backgroundColor: "#000",
+		show: false,
+		webPreferences: {
+			// 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
+			enableRemoteModule: true,
+			affinity: "main-window", // main window, and addition windows should work in one process
+			...(isTesting()
+				? {
+					// Only necessary when testing with Spectron
+					contextIsolation: false,
+					nodeIntegration: true,
+				}
+				: undefined),
+		},
+		frame: !is.macOS() && !useInlineMenu,
+		titleBarStyle: useInlineMenu
+			? "hidden"
+			: is.macOS()
+			? "hiddenInset"
+			: "default",
+		autoHideMenuBar: config.get("options.hideMenu"),
 	});
+	if (windowPosition) {
+		const { x, y } = windowPosition;
+		win.setPosition(x, y);
+	}
+	if (windowMaximized) {
+		win.maximize();
+	}
+
+	const urlToLoad = config.get("options.resumeOnStart")
+		? config.get("url")
+		: config.defaultConfig.url;
+	win.webContents.loadURL(urlToLoad);
+	win.on("closed", onClosed);
 
 	win.on("move", () => {
 		let position = win.getPosition();
-		store.set("window-position", { x: position[0], y: position[1] });
+		config.set("window-position", { x: position[0], y: position[1] });
 	});
 
 	win.on("resize", () => {
 		const windowSize = win.getSize();
 
-		store.set("window-maximized", win.isMaximized());
+		config.set("window-maximized", win.isMaximized());
 		if (!win.isMaximized()) {
-			store.set("window-size", { width: windowSize[0], height: windowSize[1] });
+			config.set("window-size", {
+				width: windowSize[0],
+				height: windowSize[1],
+			});
 		}
 	});
 
-	win.once("ready-to-show", () => {
+	win.webContents.on("render-process-gone", (event, webContents, details) => {
-		win.show();
+		showUnresponsiveDialog(win, details);
 	});
 
+	win.once("ready-to-show", () => {
+		if (config.get("options.appVisible")) {
+			win.show();
+		}
+	});
+
+	removeContentSecurityPolicy();
+
 	return win;
 }
 
+app.once("browser-window-created", (event, win) => {
+	setupSongInfo(win);
+	loadPlugins(win);
+
+	win.webContents.on("did-fail-load", (
+		_event,
+		errorCode,
+		errorDescription,
+		validatedURL,
+		isMainFrame,
+		frameProcessId,
+		frameRoutingId,
+	) => {
+		const log = JSON.stringify({
+			error: "did-fail-load",
+			errorCode,
+			errorDescription,
+			validatedURL,
+			isMainFrame,
+			frameProcessId,
+			frameRoutingId,
+		}, null, "\t");
+		if (is.dev()) {
+			console.log(log);
+		}
+		if( !(config.plugins.isEnabled("in-app-menu") && errorCode === -3)) { // -3 is a false positive with in-app-menu
+			win.webContents.send("log", log);
+			win.webContents.loadFile(path.join(__dirname, "error.html"));
+		}
+	});
+
+	win.webContents.on("will-prevent-unload", (event) => {
+		event.preventDefault();
+	});
+
+	win.webContents.on("did-navigate-in-page", () => {
+		const url = win.webContents.getURL();
+		if (url.startsWith("https://music.youtube.com")) {
+			config.set("url", url);
+		}
+	});
+
+	win.webContents.on("will-navigate", (_, url) => {
+		if (url.startsWith("https://accounts.google.com")) {
+			// Force user-agent "Firefox Windows" for Google OAuth to work
+			// From https://github.com/firebase/firebase-js-sdk/issues/2478#issuecomment-571356751
+			// Only set on accounts.google.com, otherwise querySelectors in preload scripts fail (?)
+			// Uses custom user agent to Google alert with a correct device type (https://github.com/th-ch/youtube-music/issues/327)
+			// User agents are from https://developers.whatismybrowser.com/useragents/explore/
+			const userAgents = {
+				mac: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:70.0) Gecko/20100101 Firefox/70.0",
+				windows: "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:90.0) Gecko/20100101 Firefox/90.0",
+				linux: "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0",
+			}
+			
+			const userAgent = 
+				is.macOS() ? userAgents.mac :
+				is.windows() ? userAgents.windows :
+				userAgents.linux;
+
+			win.webContents.session.webRequest.onBeforeSendHeaders((details, cb) => {
+				details.requestHeaders["User-Agent"] = userAgent;
+				cb({ requestHeaders: details.requestHeaders });
+			});
+		}
+	});
+
+	win.webContents.on(
+		"new-window",
+		(e, url, frameName, disposition, options) => {
+			// hook on new opened window
+
+			// at now new window in mainWindow renderer process.
+			// Also, this will automatically get an option `nodeIntegration=false`(not override to true, like in iframe's) - like in regular browsers
+			options.webPreferences.affinity = "main-window";
+		}
+	);
+});
+
 app.on("window-all-closed", () => {
 	if (process.platform !== "darwin") {
 		app.quit();
@@ -127,30 +259,106 @@ app.on("activate", () => {
 });
 
 app.on("ready", () => {
-	setApplicationMenu();
+	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);
+	}
+
+	// Register appID on windows
+	if (is.windows()) {
+		const appID = "com.github.th-ch.youtube-music";
+		app.setAppUserModelId(appID);
+		const appLocation = process.execPath;
+		const appData = app.getPath("appData");
+		// check shortcut validity if not in dev mode / running portable app
+		if (!is.dev() && !appLocation.startsWith(path.join(appData, "..", "Local", "Temp"))) {
+			const shortcutPath = path.join(appData, "Microsoft", "Windows", "Start Menu", "Programs", "YouTube Music.lnk");
+			try { // check if shortcut is registered and valid
+				const shortcutDetails = electron.shell.readShortcutLink(shortcutPath); // throw error if doesn't exist yet
+				if (shortcutDetails.target !== appLocation || shortcutDetails.appUserModelId !== appID) {
+					throw "needUpdate";
+				}
+			} catch (error) { // if not valid -> Register shortcut
+				electron.shell.writeShortcutLink(
+					shortcutPath,
+					error === "needUpdate" ? "update" : "create",
+					{
+						target: appLocation,
+						cwd: appLocation.slice(0, appLocation.lastIndexOf(path.sep)),
+						description: "YouTube Music Desktop App - including custom plugins",
+						appUserModelId: appID
+					}
+				);
+			}
+		}
+	}
+
 	mainWindow = createMainWindow();
-	if (!is.dev()) {
+	setApplicationMenu(mainWindow);
-		autoUpdater.checkForUpdatesAndNotify();
+	if (config.get("options.restartOnConfigChanges")) {
+		config.watch(() => {
+			app.relaunch();
+			app.exit();
+		});
+	}
+	setUpTray(app, mainWindow);
+
+	// Autostart at login
+	app.setLoginItemSettings({
+		openAtLogin: config.get("options.startAtLogin"),
+	});
+
+	if (!is.dev() && config.get("options.autoUpdates")) {
+		const updateTimeout = setTimeout(() => {
+			autoUpdater.checkForUpdatesAndNotify();
+			clearTimeout(updateTimeout);
+		}, 2000);
 		autoUpdater.on("update-available", () => {
+			const downloadLink =
+				"https://github.com/th-ch/youtube-music/releases/latest";
 			const dialogOpts = {
-				type   : "info",
+				type: "info",
-				buttons: ["OK"],
+				buttons: ["OK", "Download", "Disable updates"],
-				title  : "Application Update",
+				title: "Application Update",
 				message: "A new version is available",
-				detail : 
+				detail: `A new version is available and can be downloaded at ${downloadLink}`,
-					"A new version is available and can be downloaded at https://github.com/th-ch/youtube-music/releases/latest"
 			};
-			electron.dialog.showMessageBox(dialogOpts);
+			electron.dialog.showMessageBox(dialogOpts).then((dialogOutput) => {
+				switch (dialogOutput.response) {
+					// Download
+					case 1:
+						electron.shell.openExternal(downloadLink);
+						break;
+					// Disable updates
+					case 2:
+						config.set("options.autoUpdates", false);
+						break;
+					default:
+						break;
+				}
+			});
 		});
 	}
 
 	// Optimized for Mac OS X
-	if (process.platform === "darwin") {
+	if (is.macOS() && !config.get("options.appVisible")) {
-		var forceQuit = false;
+		app.dock.hide();
-		app.on("before-quit", () => {
+	}
-			forceQuit = true;
+
-		});
+	let forceQuit = false;
-		mainWindow.on("close", event => {
+	app.on("before-quit", () => {
+		forceQuit = true;
+	});
+
+	if (is.macOS() || config.get("options.tray")) {
+		mainWindow.on("close", (event) => {
+			// Hide the window instead of quitting (quit is available in tray options)
 			if (!forceQuit) {
 				event.preventDefault();
 				mainWindow.hide();
@@ -158,3 +366,65 @@ app.on("ready", () => {
 		});
 	}
 });
+
+function showUnresponsiveDialog(win, details) {
+	if (!!details) {
+		console.log("Unresponsive Error!\n"+JSON.stringify(details, null, "\t"))
+	}
+	electron.dialog.showMessageBox(win, {
+		type: "error",
+		title: "Window Unresponsive",
+		message: "The Application is Unresponsive",
+		details: "We are sorry for the inconvenience! please choose what to do:",
+		buttons: ["Wait", "Relaunch", "Quit"],
+		cancelId: 0
+	}).then( result => {
+		switch (result.response) {
+			case 1: //if relaunch - relaunch+exit
+				app.relaunch();
+			case 2:
+				app.quit();
+				break;
+			default:
+				break;
+		}
+	});
+}
+
+function removeContentSecurityPolicy(
+	session = electron.session.defaultSession
+) {
+	// Allows defining multiple "onHeadersReceived" listeners
+	// by enhancing the session.
+	// Some plugins (e.g. adblocker) also define a "onHeadersReceived" listener
+	enhanceWebRequest(session);
+
+	// Custom listener to tweak the content security policy
+	session.webRequest.onHeadersReceived(function (details, callback) {
+		if (
+			!details.responseHeaders["content-security-policy-report-only"] &&
+			!details.responseHeaders["content-security-policy"]
+		)
+			return callback({ cancel: false });
+		delete details.responseHeaders["content-security-policy-report-only"];
+		delete details.responseHeaders["content-security-policy"];
+		callback({ cancel: false, responseHeaders: details.responseHeaders });
+	});
+
+	// When multiple listeners are defined, apply them all
+	session.webRequest.setResolver("onHeadersReceived", (listeners) => {
+		const response = listeners.reduce(
+			async (accumulator, listener) => {
+				if (accumulator.cancel) {
+					return accumulator;
+				}
+
+				const result = await listener.apply();
+				return { ...accumulator, ...result };
+			},
+			{ cancel: false }
+		);
+
+		return response;
+	});
+}

jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	globals: {
+		__APP__: undefined, // A different app will be launched in each test environment
+	},
+	testTimeout: 30000, // 30s
+};

menu.js

@@ -1,33 +1,254 @@
+const { existsSync } = require("fs");
+const path = require("path");
+
 const { app, Menu } = require("electron");
+const is = require("electron-is");
 
-const { getAllPlugins }                                = require("./plugins/utils");
+const { getAllPlugins } = require("./plugins/utils");
-const { isPluginEnabled, enablePlugin, disablePlugin } = require("./store");
+const config = require("./config");
 
-module.exports.setApplicationMenu = () => {
+// true only if in-app-menu was loaded on launch
-	const menuTemplate = [
+const inAppMenuActive = config.plugins.isEnabled("in-app-menu");
-		{
+
-			label  : "Plugins",
+const pluginEnabledMenu = (plugin, label = "", hasSubmenu = false, refreshMenu = undefined) => ({
-			submenu: getAllPlugins().map(plugin => {
+	label: label || plugin,
-				return {
+	type: "checkbox",
-					label  : plugin,
+	checked: config.plugins.isEnabled(plugin),
-					type   : "checkbox",
+	click: (item) => {
-					checked: isPluginEnabled(plugin),
+		if (item.checked) {
-					click  : item => {
+			config.plugins.enable(plugin);
-						if (item.checked) {
+		} else {
-							enablePlugin(plugin);
+			config.plugins.disable(plugin);
-						} else {
-							disablePlugin(plugin);
-						}
-					}
-				};
-			})
 		}
-	];
+		if (hasSubmenu) {
+			refreshMenu();
+		}
+	},
+});
 
+const mainMenuTemplate = (win) => {
+	const refreshMenu = () => {
+		this.setApplicationMenu(win);
+		if (inAppMenuActive) {
+			win.webContents.send("updateMenu", true);
+		}
+	}
+	return [
+		{
+			label: "Plugins",
+			submenu: [
+				...getAllPlugins().map((plugin) => {
+					const pluginPath = path.join(__dirname, "plugins", plugin, "menu.js")
+					if (existsSync(pluginPath)) {
+						if (!config.plugins.isEnabled(plugin)) {
+							return pluginEnabledMenu(plugin, "", true, refreshMenu);
+						}
+						const getPluginMenu = require(pluginPath);
+						return {
+							label: plugin,
+							submenu: [
+								pluginEnabledMenu(plugin, "Enabled", true, refreshMenu),
+								...getPluginMenu(win, config.plugins.getOptions(plugin), refreshMenu),
+							],
+						};
+					}
+
+					return pluginEnabledMenu(plugin);
+				}),
+			],
+		},
+		{
+			label: "Options",
+			submenu: [
+				{
+					label: "Auto-update",
+					type: "checkbox",
+					checked: config.get("options.autoUpdates"),
+					click: (item) => {
+						config.set("options.autoUpdates", 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()
+					? [
+						{
+							label: "Hide menu",
+							type: "checkbox",
+							checked: config.get("options.hideMenu"),
+							click: (item) => {
+								config.set("options.hideMenu", item.checked);
+							},
+						},
+					]
+					: []),
+				...(is.windows() || is.macOS()
+					? // Only works on Win/Mac
+					// https://www.electronjs.org/docs/api/app#appsetloginitemsettingssettings-macos-windows
+					[
+						{
+							label: "Start at login",
+							type: "checkbox",
+							checked: config.get("options.startAtLogin"),
+							click: (item) => {
+								config.set("options.startAtLogin", item.checked);
+							},
+						},
+					]
+					: []),
+				{
+					label: "Tray",
+					submenu: [
+						{
+							label: "Disabled",
+							type: "radio",
+							checked: !config.get("options.tray"),
+							click: () => {
+								config.set("options.tray", false);
+								config.set("options.appVisible", true);
+							},
+						},
+						{
+							label: "Enabled + app visible",
+							type: "radio",
+							checked:
+								config.get("options.tray") && config.get("options.appVisible"),
+							click: () => {
+								config.set("options.tray", true);
+								config.set("options.appVisible", true);
+							},
+						},
+						{
+							label: "Enabled + app hidden",
+							type: "radio",
+							checked:
+								config.get("options.tray") && !config.get("options.appVisible"),
+							click: () => {
+								config.set("options.tray", true);
+								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" },
+				{
+					label: "Advanced options",
+					submenu: [
+						{
+							label: "Disable hardware acceleration",
+							type: "checkbox",
+							checked: config.get("options.disableHardwareAcceleration"),
+							click: (item) => {
+								config.set("options.disableHardwareAcceleration", item.checked);
+							},
+						},
+						{
+							label: "Restart on config changes",
+							type: "checkbox",
+							checked: config.get("options.restartOnConfigChanges"),
+							click: (item) => {
+								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);
+							},
+						},
+						{ type: "separator" },
+						is.macOS() ?
+							{
+								label: "Toggle DevTools",
+								// Cannot use "toggleDevTools" role in MacOS
+								click: () => {
+									const { webContents } = win;
+									if (webContents.isDevToolsOpened()) {
+										webContents.closeDevTools();
+									} else {
+										const devToolsOptions = {};
+										webContents.openDevTools(devToolsOptions);
+									}
+								},
+							} :
+							{ role: "toggleDevTools" },
+						{
+							label: "Edit config.json",
+							click: () => {
+								config.edit();
+							},
+						},
+					]
+				},
+			],
+		},
+		{
+			label: "View",
+			submenu: [
+				{ role: "reload" },
+				{ role: "forceReload" },
+				{ type: "separator" },
+				{ role: "zoomIn" },
+				{ role: "zoomOut" },
+				{ role: "resetZoom" },
+			],
+		},
+		{
+			label: "Navigation",
+			submenu: [
+				{
+					label: "Go back",
+					click: () => {
+						if (win.webContents.canGoBack()) {
+							win.webContents.goBack();
+						}
+					},
+				},
+				{
+					label: "Go forward",
+					click: () => {
+						if (win.webContents.canGoForward()) {
+							win.webContents.goForward();
+						}
+					},
+				},
+				{
+					label: "Restart App",
+					click: () => {
+						app.relaunch();
+						app.quit();
+					},
+				},
+				{ role: "quit" },
+			],
+		},
+	];
+}
+
+module.exports.mainMenuTemplate = mainMenuTemplate;
+module.exports.setApplicationMenu = (win) => {
+	const menuTemplate = [...mainMenuTemplate(win)];
 	if (process.platform === "darwin") {
-		const name = app.getName();
+		const name = app.name;
 		menuTemplate.unshift({
-			label  : name,
+			label: name,
 			submenu: [
 				{ role: "about" },
 				{ type: "separator" },
@@ -36,9 +257,9 @@ module.exports.setApplicationMenu = () => {
 				{ role: "unhide" },
 				{ type: "separator" },
 				{
-					label      : "Select All",
+					label: "Select All",
 					accelerator: "CmdOrCtrl+A",
-					selector   : "selectAll:"
+					selector: "selectAll:",
 				},
 				{ label: "Cut", accelerator: "CmdOrCtrl+X", selector: "cut:" },
 				{ label: "Copy", accelerator: "CmdOrCtrl+C", selector: "copy:" },
@@ -46,8 +267,8 @@ module.exports.setApplicationMenu = () => {
 				{ type: "separator" },
 				{ role: "minimize" },
 				{ role: "close" },
-				{ role: "quit" }
+				{ role: "quit" },
-			]
+			],
 		});
 	}
 

package.json

@@ -1,65 +1,123 @@
 {
-	"name"       : "youtube-music",
+	"name": "youtube-music",
 	"productName": "YouTube Music",
-	"version"    : "1.1.4",
+	"version": "1.13.0",
 	"description": "YouTube Music Desktop App - including custom plugins",
-	"license"    : "MIT",
+	"license": "MIT",
-	"repository" : "th-ch/youtube-music",
+	"repository": "th-ch/youtube-music",
-	"author"     : {
+	"author": {
-		"name" : "th-ch",
+		"name": "th-ch",
 		"email": "th-ch@users.noreply.github.com",
-		"url"  : "https://github.com/th-ch/youtube-music"
+		"url": "https://github.com/th-ch/youtube-music"
 	},
 	"build": {
-		"appId"      : "com.github.th-ch.youtube-music",
+		"appId": "com.github.th-ch.youtube-music",
 		"productName": "YouTube Music",
-		"mac"        : {
+		"mac": {
 			"identity": null,
-			"icon"    : "assets/generated/icons/mac/icon.icns"
+			"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",
+			"icon": "assets/generated/icons/png",
-			"category": "AudioVideo"
+			"category": "AudioVideo",
+			"target": [
+				"AppImage",
+				"snap",
+				"freebsd",
+				"deb",
+				"rpm"
+			]
 		}
 	},
 	"scripts": {
-		"test"         : "xo",
+		"test": "jest",
-		"start"        : "electron .",
+		"start": "electron .",
-		"icon"         : "rimraf assets/generated && electron-icon-maker --input=assets/youtube-music.png --output=assets/generated",
+		"start:debug": "ELECTRON_ENABLE_LOGGING=1 electron .",
-		"postinstall"  : "npm run icon && npm rebuild && node plugins/adblocker/generator.js && electron-rebuild",
+		"icon": "rimraf assets/generated && electron-icon-maker --input=assets/youtube-music.png --output=assets/generated",
-		"clean"        : "rimraf dist",
+		"generate:package": "node utils/generate-package-json.js",
-		"build"        : "npm run clean && build --win --mac --linux",
+		"postinstall": "yarn run icon && yarn run plugins",
-		"build:mac"    : "npm run clean && build --mac",
+		"clean": "rimraf dist",
-		"build:win"    : "npm run clean && build --win",
+		"build": "yarn run clean && electron-builder --win --mac --linux",
-		"release:linux": "npm run clean && build --linux -p always",
+		"build:linux": "yarn run clean && electron-builder --linux",
-		"release:mac"  : "npm run clean && build --mac -p always",
+		"build:mac": "yarn run clean && electron-builder --mac",
-		"release:win"  : "npm run clean && build --win -p always"
+		"build:win": "yarn run clean && electron-builder --win",
+		"lint": "xo",
+		"plugins": "yarn run plugin:adblocker && yarn run plugin:autoconfirm",
+		"plugin:adblocker": "rimraf plugins/adblocker/ad-blocker-engine.bin && node plugins/adblocker/blocker.js",
+		"plugin:autoconfirm": "yarn run generate:package YoutubeNonStop",
+		"release:linux": "yarn run clean && electron-builder --linux -p always -c.snap.publish=github",
+		"release:mac": "yarn run clean && electron-builder --mac -p always",
+		"release:win": "yarn run clean && electron-builder --win -p always"
+	},
+	"engines": {
+		"node": ">=14.0.0",
+		"npm": "Please use yarn and not npm"
 	},
 	"dependencies": {
-		"ad-block"              : "^4.1.3",
+		"@cliqz/adblocker-electron": "^1.22.5",
-		"electron-debug"        : "^2.0.0",
+		"@ffmpeg/core": "^0.10.0",
-		"electron-is"           : "^3.0.0",
+		"@ffmpeg/ffmpeg": "^0.10.0",
-		"electron-localshortcut": "^3.1.0",
+		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.9.0",
-		"electron-store"        : "^2.0.0",
+		"async-mutex": "^0.3.1",
-		"electron-updater"      : "^4.0.6"
+		"browser-id3-writer": "^4.4.0",
+		"chokidar": "^3.5.2",
+		"custom-electron-titlebar": "^3.2.7",
+		"discord-rpc": "^3.2.0",
+		"electron-better-web-request": "^1.0.1",
+		"electron-debug": "^3.2.0",
+		"electron-is": "^3.0.0",
+		"electron-localshortcut": "^3.2.1",
+		"electron-store": "^7.0.3",
+		"electron-unhandled": "^3.0.2",
+		"electron-updater": "^4.4.6",
+		"filenamify": "^4.3.0",
+		"md5": "^2.3.0",
+		"mpris-service": "^2.1.2",
+		"node-fetch": "^2.6.1",
+		"node-notifier": "^9.0.1",
+		"ytdl-core": "^4.9.1",
+		"ytpl": "^2.2.3"
 	},
 	"devDependencies": {
-		"devtron"                    : "^1.4.0",
+		"electron": "^12.0.8",
-		"electron"                   : "^4.0.8",
+		"electron-builder": "^22.10.5",
-		"electron-builder"           : "^20.40.2",
+		"electron-devtools-installer": "^3.1.1",
-		"electron-devtools-installer": "^2.2.4",
+		"electron-icon-maker": "0.0.5",
-		"electron-icon-maker"        : "0.0.4",
+		"get-port": "^5.1.1",
-		"electron-rebuild"           : "^1.8.4",
+		"jest": "^26.6.3",
-		"rimraf"                     : "^2.6.3",
+		"rimraf": "^3.0.2",
-		"xo"                         : "^0.24.0"
+		"spectron": "^14.0.0",
+		"xo": "^0.40.3"
+	},
+	"resolutions": {
+		"glob-parent": "5.1.2",
+		"minimist": "1.2.5",
+		"yargs-parser": "18.1.3"
 	},
 	"xo": {
 		"envs": [
 			"node",
 			"browser"
-		]
+		],
+		"rules": {
+			"quotes": [
+				"error",
+				"double",
+				{
+					"avoidEscape": true,
+					"allowTemplateLiterals": true
+				}
+			]
+		}
 	}
 }

plugins/adblocker/.gitignore

@@ -1 +1 @@
-detector.buffer
+/ad-blocker-engine.bin

plugins/adblocker/back.js

@@ -1,3 +1,8 @@
-const { blockWindowAds } = require("./blocker");
+const { loadAdBlockerEngine } = require("./blocker");
-
+module.exports = (win, options) =>
-module.exports = win => blockWindowAds(win.webContents);
+	loadAdBlockerEngine(
+		win.webContents.session,
+		options.cache,
+		options.additionalBlockLists,
+		options.disableDefaultLists
+	);

plugins/adblocker/blocker.js

@@ -1,12 +1,60 @@
-const { initialize, containsAds } = require("./contains-ads");
+const { promises } = require("fs"); // used for caching
+const path = require("path");
 
-module.exports.blockWindowAds = webContents => {
+const { ElectronBlocker } = require("@cliqz/adblocker-electron");
-	initialize();
+const fetch = require("node-fetch");
-	webContents.session.webRequest.onBeforeRequest(
+
-		["*://*./*"],
+const SOURCES = [
-		(details, cb) => {
+	"https://raw.githubusercontent.com/kbinani/adblock-youtube-ads/master/signed.txt",
-			const shouldBeBlocked = containsAds(details.url);
+	// uBlock Origin
-			cb({ cancel: shouldBeBlocked });
+	"https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters.txt",
-		}
+	"https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters-2021.txt",
-	);
+	// Fanboy Annoyances
+	"https://secure.fanboy.co.nz/fanboy-annoyance_ubo.txt",
+];
+
+const loadAdBlockerEngine = (
+	session = undefined,
+	cache = true,
+	additionalBlockLists = [],
+	disableDefaultLists = false
+) => {
+	// Only use cache if no additional blocklists are passed
+	const cachingOptions =
+		cache && additionalBlockLists.length === 0
+			? {
+					path: path.resolve(__dirname, "ad-blocker-engine.bin"),
+					read: promises.readFile,
+					write: promises.writeFile,
+			  }
+			: undefined;
+	const lists = [
+		...(disableDefaultLists ? [] : SOURCES),
+		...additionalBlockLists,
+	];
+
+	ElectronBlocker.fromLists(
+		fetch,
+		lists,
+		{
+			// when generating the engine for caching, do not load network filters
+			// So that enhancing the session works as expected
+			// Allowing to define multiple webRequest listeners
+			loadNetworkFilters: session !== undefined,
+		},
+		cachingOptions
+	)
+		.then((blocker) => {
+			if (session) {
+				blocker.enableBlockingInSession(session);
+			} else {
+				console.log("Successfully generated adBlocker engine.");
+			}
+		})
+		.catch((err) => console.log("Error loading adBlocker engine", err));
 };
+
+module.exports = { loadAdBlockerEngine };
+if (require.main === module) {
+	loadAdBlockerEngine(); // Generate the engine without enabling it
+}

plugins/adblocker/contains-ads.js

@@ -1,24 +0,0 @@
-const fs = require("fs");
-const path    = require("path");
-const Blocker = require("ad-block");
-
-const client = new Blocker.AdBlockClient();
-const file   = path.resolve(__dirname, "detector.buffer");
-
-module.exports.client     = client;
-module.exports.initialize = () =>
-	new Promise((resolve, reject) => {
-		fs.readFile(file, (err, buffer) => {
-			if (err) {
-				return reject(err);
-			}
-			client.deserialize(buffer);
-			return resolve();
-		});
-	});
-
-const none = Blocker.FilterOptions.noFilterOption;
-const isAd = (req, base) => client.matches(req, none, base);
-
-module.exports.containsAds = (req, base) => isAd(req, base);
-module.exports.isAd        = isAd;

plugins/adblocker/front.js

@@ -0,0 +1,4 @@
+module.exports = () => {
+	// Preload adblocker to inject scripts/styles
+	require("@cliqz/adblocker-electron-preload/dist/preload.cjs");
+};

plugins/adblocker/generator.js

@@ -1,67 +0,0 @@
-// This file generates the detector buffer
-const fs      = require("fs");
-const path    = require("path");
-const Blocker = require("ad-block");
-const https   = require("https");
-
-const SOURCES = [
-	"https://raw.githubusercontent.com/kbinani/adblock-youtube-ads/master/signed.txt"
-];
-
-function parseAdblockList(client, adblockList) {
-	const urls      = adblockList.split("\n");
-	const totalSize = urls.length;
-	console.log(
-		"Parsing " + totalSize + " urls (this can take a couple minutes)."
-	);
-	urls.map(line => client.parse(line));
-	console.log("Created buffer.");
-}
-
-function writeBuffer(client) {
-	const output = path.resolve(__dirname, "detector.buffer");
-	fs.writeFile(output, client.serialize(64), err => {
-		if (err) {
-			console.error(err);
-			return;
-		}
-		console.log("Wrote buffer to detector.buffer!");
-	});
-}
-
-function generateDetectorBuffer() {
-	const client           = new Blocker.AdBlockClient();
-	let   nbSourcesFetched = 0;
-
-	// fetch updated versions
-	SOURCES.forEach(source => {
-		console.log("Downloading " + source);
-		https
-			.get(source, resp => {
-				let data = "";
-
-				// A chunk of data has been recieved.
-				resp.on("data", chunk => {
-					data += chunk;
-				});
-
-				// The whole response has been received. Print out the result.
-				resp.on("end", () => {
-					parseAdblockList(client, data);
-					nbSourcesFetched++;
-
-					if (nbSourcesFetched === SOURCES.length) {
-						writeBuffer(client);
-					}
-				});
-			})
-			.on("error", err => {
-				console.log("Error: " + err.message);
-			});
-	});
-}
-
-module.exports = generateDetectorBuffer;
-if (require.main === module) {
-	generateDetectorBuffer();
-}

plugins/auto-confirm-when-paused/front.js

@@ -0,0 +1,12 @@
+// Define global chrome object to be compliant with the extension code
+global.chrome = {
+	runtime: {
+		getManifest: () => ({
+			version: 1
+		})
+	}
+};
+
+module.exports = () => {
+	require("YoutubeNonStop/autoconfirm.js");
+};

plugins/disable-autoplay/front.js

@@ -0,0 +1,10 @@
+const { ontimeupdate } = require("../../providers/video-element");
+
+module.exports = () => {
+	ontimeupdate((videoElement) => {
+		if (videoElement.currentTime === 0 && videoElement.duration !== NaN) {
+			// auto-confirm-when-paused plugin can interfere here if not disabled!
+			videoElement.pause();
+		}
+	});
+};

plugins/discord/back.js

@@ -0,0 +1,61 @@
+const Discord = require("discord-rpc");
+
+const registerCallback = require("../../providers/song-info");
+
+const rpc = new Discord.Client({
+	transport: "ipc",
+});
+
+// Application ID registered by @semvis123
+const clientId = "790655993809338398";
+
+let clearActivity;
+
+module.exports = (win, {activityTimoutEnabled, activityTimoutTime}) => {
+	// If the page is ready, register the callback
+	win.once("ready-to-show", () => {
+		rpc.once("ready", () => {
+			// Register the callback
+			registerCallback((songInfo) => {
+				if (songInfo.title.length === 0 && songInfo.artist.length === 0) {
+					return;
+				}
+				// Song information changed, so lets update the rich presence
+				const activityInfo = {
+					details: songInfo.title,
+					state: songInfo.artist,
+					largeImageKey: "logo",
+					largeImageText: [
+						songInfo.uploadDate,
+						songInfo.views.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " views"
+					].join(' || '),
+					buttons: [
+						{ label: "Listen Along", url: songInfo.url },
+					]
+				};
+
+				if (songInfo.isPaused) {
+					// Add an idle icon to show that the song is paused
+					activityInfo.smallImageKey = "idle";
+					activityInfo.smallImageText = "idle/paused";
+					// Set start the timer so the activity gets cleared after a while if enabled
+					if (activityTimoutEnabled)
+						clearActivity = setTimeout(()=>rpc.clearActivity(), activityTimoutTime||10000);
+				} else {
+					// stop the clear activity timout
+					clearTimeout(clearActivity);
+					// 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);
+	});
+};

plugins/downloader/actions.js

@@ -0,0 +1,11 @@
+const CHANNEL = "downloader";
+const ACTIONS = {
+	ERROR: "error",
+	METADATA: "metadata",
+	PROGRESS: "progress",
+};
+
+module.exports = {
+	CHANNEL: CHANNEL,
+	ACTIONS: ACTIONS,
+};

plugins/downloader/back.js

@@ -0,0 +1,87 @@
+const { writeFileSync } = require("fs");
+const { join } = require("path");
+
+const ID3Writer = require("browser-id3-writer");
+const { dialog, ipcMain } = require("electron");
+
+const registerCallback = require("../../providers/song-info");
+const { injectCSS, listenAction } = require("../utils");
+const { cropMaxWidth } = require("./utils");
+const { ACTIONS, CHANNEL } = require("./actions.js");
+const { getImage } = require("../../providers/song-info");
+
+const sendError = (win, error) => {
+	win.setProgressBar(-1); // close progress bar
+	dialog.showMessageBox({
+		type: "info",
+		buttons: ["OK"],
+		title: "Error in download!",
+		message: "Argh! Apologies, download failed…",
+		detail: error.toString(),
+	});
+};
+
+let nowPlayingMetadata = {};
+
+function handle(win) {
+	injectCSS(win.webContents, join(__dirname, "style.css"));
+	registerCallback((info) => {
+		nowPlayingMetadata = info;
+	});
+
+	listenAction(CHANNEL, (event, action, arg) => {
+		switch (action) {
+			case ACTIONS.ERROR: // arg = error
+				sendError(win, arg);
+				break;
+			case ACTIONS.METADATA:
+				event.returnValue = JSON.stringify(nowPlayingMetadata);
+				break;
+			case ACTIONS.PROGRESS: // arg = progress
+				win.setProgressBar(arg);
+				break;
+			default:
+				console.log("Unknown action: " + action);
+		}
+	});
+
+	ipcMain.on("add-metadata", async (event, filePath, songBuffer, currentMetadata) => {
+		let fileBuffer = songBuffer;
+		const songMetadata = currentMetadata.imageSrcYTPL ? // This means metadata come from ytpl.getInfo();
+			{
+				...currentMetadata,
+				image: cropMaxWidth(await getImage(currentMetadata.imageSrcYTPL))
+			} :
+			{ ...nowPlayingMetadata, ...currentMetadata };
+
+		try {
+			const coverBuffer = songMetadata.image && !songMetadata.image.isEmpty() ?
+				songMetadata.image.toPNG() : null;
+
+			const writer = new ID3Writer(songBuffer);
+
+			// Create the metadata tags
+			writer
+				.setFrame("TIT2", songMetadata.title)
+				.setFrame("TPE1", [songMetadata.artist]);
+			if (coverBuffer) {
+				writer.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;
+module.exports.sendError = sendError;

plugins/downloader/front.js

@@ -0,0 +1,87 @@
+const { contextBridge } = require("electron");
+
+const { defaultConfig } = require("../../config");
+const { getSongMenu } = require("../../providers/dom-elements");
+const { ElementFromFile, templatePath, triggerAction } = require("../utils");
+const { ACTIONS, CHANNEL } = require("./actions.js");
+const { downloadVideoToMP3 } = require("./youtube-dl");
+
+let menu = null;
+let progress = null;
+const downloadButton = ElementFromFile(
+	templatePath(__dirname, "download.html")
+);
+let pluginOptions = {};
+
+const observer = new MutationObserver((mutations, observer) => {
+	if (!menu) {
+		menu = getSongMenu();
+	}
+
+	if (menu && !menu.contains(downloadButton)) {
+		menu.prepend(downloadButton);
+		progress = document.querySelector("#ytmcustom-download");
+	}
+});
+
+const reinit = () => {
+	triggerAction(CHANNEL, ACTIONS.PROGRESS, -1); // closes progress bar
+	if (!progress) {
+		console.warn("Cannot update progress");
+	} else {
+		progress.innerHTML = "Download";
+	}
+};
+
+const baseUrl = defaultConfig.url;
+
+// TODO: re-enable once contextIsolation is set to true
+// contextBridge.exposeInMainWorld("downloader", {
+// 	download: () => {
+global.download = () => {
+	triggerAction(CHANNEL, ACTIONS.PROGRESS, 2); // starts with indefinite progress bar
+	let metadata;
+	let videoUrl = getSongMenu()
+		// selector of first button which is always "Start Radio"
+		?.querySelector('ytmusic-menu-navigation-item-renderer.iron-selected[tabindex="0"] #navigation-endpoint')
+		?.getAttribute("href");
+	if (videoUrl) {
+		videoUrl = baseUrl + "/" + videoUrl;
+		metadata = null;
+	} else {
+		metadata = global.songInfo;
+		videoUrl = metadata.url || window.location.href;
+	}
+
+	downloadVideoToMP3(
+		videoUrl,
+		(feedback, ratio = undefined) => {
+			if (!progress) {
+				console.warn("Cannot update progress");
+			} else {
+				progress.innerHTML = feedback;
+			}
+			if (ratio) {
+				triggerAction(CHANNEL, ACTIONS.PROGRESS, ratio);
+			}
+		},
+		(error) => {
+			triggerAction(CHANNEL, ACTIONS.ERROR, error);
+			reinit();
+		},
+		reinit,
+		pluginOptions,
+		metadata
+	);
+};
+// });
+
+function observeMenu(options) {
+	pluginOptions = { ...pluginOptions, ...options };
+	observer.observe(document, {
+		childList: true,
+		subtree: true,
+	});
+}
+
+module.exports = observeMenu;

plugins/downloader/menu.js

@@ -0,0 +1,115 @@
+const { existsSync, mkdirSync } = require("fs");
+const { join } = require("path");
+const { URL } = require("url");
+
+const { dialog } = require("electron");
+const is = require("electron-is");
+const ytpl = require("ytpl");
+const chokidar = require('chokidar');
+
+const { setOptions } = require("../../config/plugins");
+const registerCallback = require("../../providers/song-info");
+const { sendError } = require("./back");
+const { defaultMenuDownloadLabel, getFolder } = require("./utils");
+
+let downloadLabel = defaultMenuDownloadLabel;
+let metadataURL = undefined;
+let callbackIsRegistered = false;
+
+module.exports = (win, options) => {
+	if (!callbackIsRegistered) {
+		registerCallback((info) => {
+			metadataURL = info.url;
+		});
+		callbackIsRegistered = true;
+	}
+
+	return [
+		{
+			label: downloadLabel,
+			click: async () => {
+				const currentURL = metadataURL || win.webContents.getURL();
+				const playlistID = new URL(currentURL).searchParams.get("list");
+				if (!playlistID) {
+					sendError(win, new Error("No playlist ID found"));
+					return;
+				}
+
+				console.log(`trying to get playlist ID: '${playlistID}'`);
+				let playlist;
+				try {
+					playlist = await ytpl(playlistID, {
+						limit: options.playlistMaxItems || Infinity,
+					});
+				} catch (e) {
+					sendError(win, e);
+					return;
+				}
+				const playlistTitle = playlist.title;
+
+				const folder = getFolder(options.downloadFolder);
+				const playlistFolder = join(folder, playlistTitle);
+				if (existsSync(playlistFolder)) {
+					sendError(
+						win,
+						new Error(`The folder ${playlistFolder} already exists`)
+					);
+					return;
+				}
+				mkdirSync(playlistFolder, { recursive: true });
+
+				dialog.showMessageBox({
+					type: "info",
+					buttons: ["OK"],
+					title: "Started Download",
+					message: `Downloading Playlist "${playlistTitle}"`,
+					detail: `(${playlist.items.length} songs)`,
+				});
+
+				if (is.dev()) {
+					console.log(
+						`Downloading playlist "${playlistTitle}" (${playlist.items.length} songs)`
+					);
+				}
+
+				const steps = 1 / playlist.items.length;
+				let progress = 0;
+
+				win.setProgressBar(2); // starts with indefinite bar
+
+				let dirWatcher = chokidar.watch(playlistFolder);
+				dirWatcher.on('add', () => {
+					progress += steps;
+					if (progress >= 0.9999) {
+						win.setProgressBar(-1); // close progress bar
+						dirWatcher.close().then(() => dirWatcher = null);
+					} else {
+						win.setProgressBar(progress);
+					}
+				});
+
+				playlist.items.forEach((song) => {
+					win.webContents.send(
+						"downloader-download-playlist",
+						song.url,
+						playlistTitle,
+						options
+					);
+				});
+			},
+		},
+		{
+			label: "Choose download folder",
+			click: () => {
+				let result = dialog.showOpenDialogSync({
+					properties: ["openDirectory", "createDirectory"],
+					defaultPath: getFolder(options.downloadFolder),
+				});
+				if (result) {
+					options.downloadFolder = result[0];
+					setOptions("downloader", options);
+				} // else = user pressed cancel
+			},
+		},
+	];
+};

plugins/downloader/style.css

@@ -0,0 +1,21 @@
+.menu-item {
+	display: var(--ytmusic-menu-item_-_display);
+	height: var(--ytmusic-menu-item_-_height);
+	align-items: var(--ytmusic-menu-item_-_align-items);
+	padding: var(--ytmusic-menu-item_-_padding);
+	cursor: pointer;
+}
+
+.menu-item > .yt-simple-endpoint:hover {
+	background-color: var(--ytmusic-menu-item-hover-background-color);
+}
+
+.menu-icon {
+	flex: var(--ytmusic-menu-item-icon_-_flex);
+	margin: var(--ytmusic-menu-item-icon_-_margin);
+	fill: var(--ytmusic-menu-item-icon_-_fill);
+	stroke: var(--iron-icon-stroke-color, none);
+	width: var(--iron-icon-width, 24px);
+	height: var(--iron-icon-height, 24px);
+	animation: var(--iron-icon_-_animation);
+}

plugins/downloader/templates/download.html

@@ -0,0 +1,45 @@
+<div
+	class="style-scope menu-item ytmusic-menu-popup-renderer"
+	role="option"
+	tabindex="-1"
+	aria-disabled="false"
+	aria-selected="false"
+	onclick="download()"
+>
+	<div
+		id="navigation-endpoint"
+		class="yt-simple-endpoint style-scope ytmusic-menu-navigation-item-renderer"
+		tabindex="-1"
+	>
+		<div
+			class="icon menu-icon style-scope ytmusic-menu-navigation-item-renderer"
+		>
+			<svg
+				viewBox="0 0 24 24"
+				preserveAspectRatio="xMidYMid meet"
+				focusable="false"
+				class="style-scope yt-icon"
+				style="pointer-events: none; display: block; width: 100%; height: 100%"
+			>
+				<g class="style-scope yt-icon">
+					<path
+						d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012v-8.861H25.462z"
+						class="style-scope yt-icon"
+						fill="#aaaaaa"
+					/>
+					<path
+						d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193C15.092,18.979,14.62,18.426,14.62,18.426z"
+						class="style-scope yt-icon"
+						fill="#aaaaaa"
+					/>
+				</g>
+			</svg>
+		</div>
+		<div
+			class="text style-scope ytmusic-menu-navigation-item-renderer"
+			id="ytmcustom-download"
+		>
+			Download
+		</div>
+	</div>
+</div>

plugins/downloader/utils.js

@@ -0,0 +1,31 @@
+const electron = require("electron");
+
+module.exports.getFolder = (customFolder) =>
+	customFolder || (electron.app || electron.remote.app).getPath("downloads");
+module.exports.defaultMenuDownloadLabel = "Download playlist";
+
+const orderedQualityList = ["maxresdefault", "hqdefault", "mqdefault", "sdddefault"];
+module.exports.urlToJPG = (imgUrl, videoId) => {
+	if (!imgUrl || imgUrl.includes(".jpg")) return imgUrl;
+	//it will almost never get further than hqdefault
+	for (const quality of orderedQualityList) {
+		if (imgUrl.includes(quality)) {
+			return `https://img.youtube.com/vi/${videoId}/${quality}.jpg`;
+		}
+	}
+	return `https://img.youtube.com/vi/${videoId}/default.jpg`;
+}
+
+module.exports.cropMaxWidth = (image) => {
+	const imageSize = image.getSize();
+	// standart youtube artwork width with margins from both sides is 280 + 720 + 280
+	if (imageSize.width === 1280 && imageSize.height === 720) {
+		return image.crop({
+			x: 280,
+			y: 0,
+			width: 720,
+			height: 720
+		});
+	}
+	return image;
+}

plugins/downloader/youtube-dl.js

@@ -0,0 +1,199 @@
+const { randomBytes } = require("crypto");
+const { join } = require("path");
+
+const Mutex = require("async-mutex").Mutex;
+const { ipcRenderer } = require("electron");
+const is = require("electron-is");
+const filenamify = require("filenamify");
+
+// Browser version of FFmpeg (in renderer process) instead of loading @ffmpeg/ffmpeg
+// because --js-flags cannot be passed in the main process when the app is packaged
+// See https://github.com/electron/electron/issues/22705
+const FFmpeg = require("@ffmpeg/ffmpeg/dist/ffmpeg.min");
+const ytdl = require("ytdl-core");
+
+const { triggerAction, triggerActionSync } = require("../utils");
+const { ACTIONS, CHANNEL } = require("./actions.js");
+const { getFolder, urlToJPG } = require("./utils");
+const { cleanupName } = require("../../providers/song-info");
+
+const { createFFmpeg } = FFmpeg;
+const ffmpeg = createFFmpeg({
+	log: false,
+	logger: () => {}, // console.log,
+	progress: () => {}, // console.log,
+});
+const ffmpegMutex = new Mutex();
+
+const downloadVideoToMP3 = async (
+	videoUrl,
+	sendFeedback,
+	sendError,
+	reinit,
+	options,
+	metadata = undefined,
+	subfolder = ""
+) => {
+	sendFeedback("Downloading…");
+
+	if (metadata === null) {
+		const { videoDetails } = await ytdl.getInfo(videoUrl);
+		const thumbnails = videoDetails?.thumbnails;
+		metadata = {
+			artist:
+				videoDetails?.media?.artist ||
+				cleanupName(videoDetails?.author?.name) ||
+				"",
+			title: videoDetails?.media?.song || videoDetails?.title || "",
+			imageSrcYTPL: thumbnails ? 
+				urlToJPG(thumbnails[thumbnails.length - 1].url, videoDetails?.videoId)
+				: ""
+		}
+	}
+
+	let videoName = "YouTube Music - Unknown title";
+	let videoReadableStream;
+	try {
+		videoReadableStream = ytdl(videoUrl, {
+			filter: "audioonly",
+			quality: "highestaudio",
+			highWaterMark: 32 * 1024 * 1024, // 32 MB
+			requestOptions: { maxRetries: 3 },
+		});
+	} catch (err) {
+		sendError(err);
+		return;
+	}
+
+	const chunks = [];
+	videoReadableStream
+		.on("data", (chunk) => {
+			chunks.push(chunk);
+		})
+		.on("progress", (_chunkLength, downloaded, total) => {
+			const ratio = downloaded / total;
+			const progress = Math.floor(ratio * 100);
+			sendFeedback("Download: " + progress + "%", ratio);
+		})
+		.on("info", (info, format) => {
+			videoName = info.videoDetails.title.replace("|", "").toString("ascii");
+			if (is.dev()) {
+				console.log(
+					"Downloading video - name:",
+					videoName,
+					"- quality:",
+					format.audioBitrate + "kbits/s"
+				);
+			}
+		})
+		.on("error", sendError)
+		.on("end", async () => {
+			const buffer = Buffer.concat(chunks);
+			await toMP3(
+				videoName,
+				buffer,
+				sendFeedback,
+				sendError,
+				reinit,
+				options,
+				metadata,
+				subfolder
+			);
+		});
+};
+
+const toMP3 = async (
+	videoName,
+	buffer,
+	sendFeedback,
+	sendError,
+	reinit,
+	options,
+	existingMetadata = undefined,
+	subfolder = ""
+) => {
+	const safeVideoName = randomBytes(32).toString("hex");
+	const extension = options.extension || "mp3";
+	const releaseFFmpegMutex = await ffmpegMutex.acquire();
+
+	try {
+		if (!ffmpeg.isLoaded()) {
+			sendFeedback("Loading…", 2); // indefinite progress bar after download
+			await ffmpeg.load();
+		}
+
+		sendFeedback("Preparing file…");
+		ffmpeg.FS("writeFile", safeVideoName, buffer);
+
+		sendFeedback("Converting…");
+		const metadata = existingMetadata || getMetadata();
+		await ffmpeg.run(
+			"-i",
+			safeVideoName,
+			...getFFmpegMetadataArgs(metadata),
+			...(options.ffmpegArgs || []),
+			safeVideoName + "." + extension
+		);
+
+		const folder = getFolder(options.downloadFolder);
+		const name = metadata.title
+			? `${metadata.artist ? `${metadata.artist} - ` : ""}${metadata.title}`
+			: videoName;
+		const filename = filenamify(name + "." + extension, {
+			replacement: "_",
+			maxLength: 255,
+		});
+
+		const filePath = join(folder, subfolder, filename);
+		const fileBuffer = ffmpeg.FS("readFile", safeVideoName + "." + extension);
+
+		// Add the metadata
+		sendFeedback("Adding metadata…");
+		ipcRenderer.send("add-metadata", filePath, fileBuffer, {
+			artist: metadata.artist,
+			title: metadata.title,
+			imageSrcYTPL: metadata.imageSrcYTPL
+		});
+		ipcRenderer.once("add-metadata-done", reinit);
+	} catch (e) {
+		sendError(e);
+	} finally {
+		releaseFFmpegMutex();
+	}
+};
+
+const getMetadata = () => {
+	return JSON.parse(triggerActionSync(CHANNEL, ACTIONS.METADATA));
+};
+
+const getFFmpegMetadataArgs = (metadata) => {
+	if (!metadata) {
+		return;
+	}
+
+	return [
+		...(metadata.title ? ["-metadata", `title=${metadata.title}`] : []),
+		...(metadata.artist ? ["-metadata", `artist=${metadata.artist}`] : []),
+	];
+};
+
+module.exports = {
+	downloadVideoToMP3,
+};
+
+ipcRenderer.on(
+	"downloader-download-playlist",
+	(_, url, playlistFolder, options) => {
+		downloadVideoToMP3(
+			url,
+			() => {},
+			(error) => {
+				triggerAction(CHANNEL, ACTIONS.ERROR, error);
+			},
+			() => {},
+			options,
+			null,
+			playlistFolder
+		);
+	}
+);

plugins/hide-video-player/back.js

@@ -0,0 +1,6 @@
+const { injectCSS } = require("../utils");
+const path = require("path");
+
+module.exports = win => {
+	injectCSS(win.webContents, path.join(__dirname, "style.css"));
+};

plugins/hide-video-player/style.css

@@ -0,0 +1,11 @@
+/* Hide the video player */
+#main-panel {
+	display: none !important;
+}
+
+/* Make the side-panel full width */
+.side-panel.ytmusic-player-page {
+	max-width: 100% !important;
+	width: 100% !important;
+	margin: 0 !important;
+}

plugins/in-app-menu/back.js

@@ -0,0 +1,33 @@
+const path = require("path");
+
+const electronLocalshortcut = require("electron-localshortcut");
+
+const config = require("../../config");
+const { injectCSS } = require("../utils");
+
+//tracks menu visibility
+let visible = true;
+
+module.exports = (win) => {
+	// css for custom scrollbar + disable drag area(was causing bugs)
+	injectCSS(win.webContents, path.join(__dirname, "style.css"));
+
+	win.once("ready-to-show", () => {
+		//register keyboard shortcut && hide menu if hideMenu is enabled
+		if (config.get("options.hideMenu")) {
+			electronLocalshortcut.register(win, "Esc", () => {
+				setMenuVisibility(!visible);
+			});
+		}
+	});
+
+	win.webContents.once("did-finish-load", () => {
+		// fix bug with menu not applying on start when no internet connection available
+		setMenuVisibility(!config.get("options.hideMenu"));
+	});
+
+	function setMenuVisibility(value) {
+		visible = value;
+		win.webContents.send("updateMenu", visible);
+	}
+};

plugins/in-app-menu/front.js

@@ -0,0 +1,16 @@
+const { remote, ipcRenderer } = require("electron");
+
+const customTitlebar = require("custom-electron-titlebar");
+
+module.exports = () => {
+	const bar = new customTitlebar.Titlebar({
+		backgroundColor: customTitlebar.Color.fromHex("#050505"),
+		itemBackgroundColor: customTitlebar.Color.fromHex("#121212"),
+	});
+	bar.updateTitle(" ");
+	document.title = "Youtube Music";
+
+	ipcRenderer.on("updateMenu", function (_event, showMenu) {
+		bar.updateMenu(showMenu ? remote.Menu.getApplicationMenu() : null);
+	});
+};

plugins/in-app-menu/style.css

@@ -0,0 +1,74 @@
+/* increase font size for menu and menuItems */
+.titlebar,
+.menubar-menu-container .action-label {
+	font-size: 14px !important;
+}
+
+/* fixes scrollbar positioning relative to nav bar  */
+#nav-bar-background.ytmusic-app-layout {
+	right: 15px !important;
+}
+
+/* remove window dragging for nav bar (conflict with titlebar drag) */
+ytmusic-nav-bar,
+.tab-titleiron-icon,
+ytmusic-pivot-bar-item-renderer {
+	-webkit-app-region: unset !important;
+}
+
+/* navbar background black */
+.center-content.ytmusic-nav-bar {
+	background: #030303;
+}
+
+/* move up item selectrion renderer by 15 px */
+ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_] #header.ytmusic-item-section-renderer {
+	top: 75 !important;
+}
+
+/* fix weird positioning in search screen*/
+ytmusic-header-renderer.ytmusic-search-page {
+	position: unset !important;
+}
+
+/* Move navBar downwards */
+ytmusic-app-layout > [slot="nav-bar"],
+#nav-bar-background.ytmusic-app-layout {
+	top: 17px !important;
+}
+
+/* fix page progress bar position*/
+yt-page-navigation-progress,
+#progress.yt-page-navigation-progress {
+	top: 30px !important;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+	width: 12px;
+	background-color: #030303;
+	border-radius: 100px;
+	-moz-border-radius: 100px;
+	-webkit-border-radius: 100px;
+}
+/* hover effect for both scrollbar area, and scrollbar 'thumb' */
+::-webkit-scrollbar:hover {
+	background-color: rgba(15, 15, 15, 0.699);
+}
+
+/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
+::-webkit-scrollbar-thumb:vertical {
+	background-clip: padding-box;
+	border: 2px solid rgba(0, 0, 0, 0);
+
+	background: #3a3a3a;
+	border-radius: 100px;
+	-moz-border-radius: 100px;
+	-webkit-border-radius: 100px;
+}
+::-webkit-scrollbar-thumb:vertical:active {
+	background: #4d4c4c; /* Some darker color when you click it */
+	border-radius: 100px;
+	-moz-border-radius: 100px;
+	-webkit-border-radius: 100px;
+}

plugins/last-fm/back.js

@@ -0,0 +1,160 @@
+const fetch = require('node-fetch');
+const md5 = require('md5');
+const { shell } = require('electron');
+const { setOptions } = require('../../config/plugins');
+const registerCallback = require('../../providers/song-info');
+const defaultConfig = require('../../config/defaults');
+
+const createFormData = params => {
+	// creates the body for in the post request
+	const formData = new URLSearchParams();
+	for (const key in params) {
+		formData.append(key, params[key]);
+	}
+	return formData;
+}
+const createQueryString = (params, api_sig) => {
+	// creates a querystring
+	const queryData = [];
+	params.api_sig = api_sig;
+	for (const key in params) {
+		queryData.push(`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`);
+	}
+	return '?'+queryData.join('&');
+}
+
+const createApiSig = (params, secret) => { 
+	// this function creates the api signature, see: https://www.last.fm/api/authspec
+	const keys = [];
+	for (const key in params) {
+		keys.push(key);
+	}
+	keys.sort();
+	let sig = '';
+	for (const key of keys) {
+		if (String(key) === 'format')
+			continue
+		sig += `${key}${params[key]}`;
+	}
+	sig += secret;
+	sig = md5(sig);
+	return sig;
+}
+
+const createToken = async ({ api_key, api_root, secret }) => {
+	// creates and stores the auth token
+	const data = {
+		method: 'auth.gettoken',
+		api_key: api_key,
+		format: 'json'
+	};
+	const api_sig = createApiSig(data, secret);
+	let response = await fetch(`${api_root}${createQueryString(data, api_sig)}`);
+	response = await response.json();
+	return response?.token;
+}
+
+const authenticate = async config => {
+	// asks the user for authentication
+	config.token = await createToken(config);
+	setOptions('last-fm', config);
+	shell.openExternal(`https://www.last.fm/api/auth/?api_key=${config.api_key}&token=${config.token}`);
+	return config;
+}
+
+const getAndSetSessionKey = async config => {
+	// get and store the session key
+	const data = {
+		api_key: config.api_key,
+		format: 'json',
+		method: 'auth.getsession',
+		token: config.token,
+	};
+	const api_sig = createApiSig(data, config.secret);
+	let res = await fetch(`${config.api_root}${createQueryString(data, api_sig)}`);
+	res = await res.json();
+	if (res.error)
+		await authenticate(config);
+	config.session_key = res?.session?.key;
+	setOptions('last-fm', config);
+	return config;
+}
+
+const postSongDataToAPI = async (songInfo, config, data) => {
+	// this sends a post request to the api, and adds the common data
+	if (!config.session_key)
+		await getAndSetSessionKey(config);
+
+	const postData = {
+		track: songInfo.title,
+		duration: songInfo.songDuration,
+		artist: songInfo.artist,
+		api_key: config.api_key,
+		sk: config.session_key,
+		format: 'json',
+		...data,
+	};
+
+	postData.api_sig = createApiSig(postData, config.secret);
+	fetch('https://ws.audioscrobbler.com/2.0/', {method: 'POST', body: createFormData(postData)})
+		.catch(res => {
+			if (res.response.data.error == 9) {
+				// session key is invalid, so remove it from the config and reauthenticate
+				config.session_key = undefined;
+				setOptions('last-fm', config);
+				authenticate(config);
+			}
+		});
+}
+
+const addScrobble = (songInfo, config) => {
+	// this adds one scrobbled song to last.fm
+	const data = {
+		method: 'track.scrobble',
+		timestamp: ~~((Date.now() - songInfo.elapsedSeconds) / 1000),
+	};
+	postSongDataToAPI(songInfo, config, data);
+}
+
+const setNowPlaying = (songInfo, config) => {
+	// this sets the now playing status in last.fm
+	const data = {
+		method: 'track.updateNowPlaying',
+	};
+	postSongDataToAPI(songInfo, config, data);
+}
+
+
+// this will store the timeout that will trigger addScrobble
+let scrobbleTimer = undefined;
+
+const lastfm = async (_win, config) => {
+	if (!config.api_root) {
+		// settings are not present, creating them with the default values
+		config = defaultConfig.plugins['last-fm'];
+		config.enabled = true;
+		setOptions('last-fm', config);
+	}
+
+	if (!config.session_key) {
+		// not authenticated
+		config = await getAndSetSessionKey(config);
+	}
+
+	registerCallback( songInfo => {
+		// set remove the old scrobble timer
+		clearTimeout(scrobbleTimer);
+		if (!songInfo.isPaused) {
+			setNowPlaying(songInfo, config);
+			// scrobble when the song is half way through, or has passed the 4 minute mark
+			const scrobbleTime = Math.min(Math.ceil(songInfo.songDuration / 2), 4 * 60);
+			if (scrobbleTime > songInfo.elapsedSeconds) {
+				// scrobble still needs to happen
+				const timeToWait = (scrobbleTime - songInfo.elapsedSeconds) * 1000;
+				scrobbleTimer = setTimeout(addScrobble, timeToWait, songInfo, config);
+			}
+		}
+	});
+}
+
+module.exports = lastfm;

plugins/lyrics-genius/back.js

@@ -0,0 +1,52 @@
+const { join } = require("path");
+
+const { ipcMain } = require("electron");
+const is = require("electron-is");
+const fetch = require("node-fetch");
+
+const { cleanupName } = require("../../providers/song-info");
+const { injectCSS } = require("../utils");
+
+module.exports = async (win) => {
+	injectCSS(win.webContents, join(__dirname, "style.css"));
+
+	ipcMain.on("search-genius-lyrics", async (event, extractedSongInfo) => {
+		const metadata = JSON.parse(extractedSongInfo);
+		const queryString = `${cleanupName(metadata.artist)} ${cleanupName(
+			metadata.title
+		)}`;
+
+		let response = await fetch(
+			`https://genius.com/api/search/multi?per_page=5&q=${encodeURI(
+				queryString
+			)}`
+		);
+		if (!response.ok) {
+			event.returnValue = null;
+			return;
+		}
+
+		const info = await response.json();
+		let url = "";
+		try {
+			url = info.response.sections.filter(
+				(section) => section.type === "song"
+			)[0].hits[0].result.url;
+		} catch {
+			event.returnValue = null;
+			return;
+		}
+
+		if (is.dev()) {
+			console.log("Fetching lyrics from Genius:", url);
+		}
+
+		response = await fetch(url);
+		if (!response.ok) {
+			event.returnValue = null;
+			return;
+		}
+
+		event.returnValue = await response.text();
+	});
+};

plugins/lyrics-genius/front.js

@@ -0,0 +1,65 @@
+const { ipcRenderer } = require("electron");
+
+module.exports = () => {
+	ipcRenderer.on("update-song-info", (_, extractedSongInfo) => {
+		const lyricsTab = document.querySelector('tp-yt-paper-tab[tabindex="-1"]');
+
+		// Check if disabled
+		if (!lyricsTab || !lyricsTab.hasAttribute("disabled")) {
+			return;
+		}
+
+		const html = ipcRenderer.sendSync(
+			"search-genius-lyrics",
+			extractedSongInfo
+		);
+		if (!html) {
+			return;
+		}
+
+		const wrapper = document.createElement("div");
+		wrapper.innerHTML = html;
+		const lyricsSelector1 = wrapper.querySelector(".lyrics");
+		const lyricsSelector2 = wrapper.querySelector(
+			'[class^="Lyrics__Container"]'
+		);
+		const lyrics = lyricsSelector1
+			? lyricsSelector1.innerHTML
+			: lyricsSelector2
+			? lyricsSelector2.innerHTML
+			: null;
+		if (!lyrics) {
+			return;
+		}
+
+		lyricsTab.removeAttribute("disabled");
+		lyricsTab.removeAttribute("aria-disabled");
+		document.querySelector("tp-yt-paper-tab").onclick = () => {
+			lyricsTab.removeAttribute("disabled");
+			lyricsTab.removeAttribute("aria-disabled");
+		};
+
+		lyricsTab.onclick = () => {
+			const tabContainer = document.querySelector("ytmusic-tab-renderer");
+			console.log("tabContainer", tabContainer);
+			const observer = new MutationObserver((_, observer) => {
+				const lyricsContainer = document.querySelector(
+					'[page-type="MUSIC_PAGE_TYPE_TRACK_LYRICS"] > ytmusic-message-renderer'
+				);
+				if (lyricsContainer) {
+					lyricsContainer.innerHTML = `<div id="contents" class="style-scope ytmusic-section-list-renderer genius-lyrics">
+			 			${lyrics}
+
+			 			<yt-formatted-string class="footer style-scope ytmusic-description-shelf-renderer">Source&nbsp;: Genius</yt-formatted-string>
+					</div>`;
+					observer.disconnect();
+				}
+			});
+			observer.observe(tabContainer, {
+				attributes: true,
+				childList: true,
+				subtree: true,
+			});
+		};
+	});
+};

plugins/lyrics-genius/style.css

@@ -0,0 +1,7 @@
+/* Disable links in Genius lyrics */
+.genius-lyrics a {
+	color: var(--ytmusic-text-primary);
+	display: inline-block;
+	pointer-events: none;
+	text-decoration: none;
+}

plugins/navigation/actions.js

@@ -1,24 +1,24 @@
-const { triggerAction } = require('../utils');
+const { triggerAction } = require("../utils");
 
 const CHANNEL = "navigation";
 const ACTIONS = {
-    NEXT: "next",
+	NEXT: "next",
-    BACK: 'back',
+	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,
+	CHANNEL: CHANNEL,
-    ACTIONS: ACTIONS,
+	ACTIONS: ACTIONS,
-    global: {
+	actions: {
-        goToNextPage: goToNextPage,
+		goToNextPage: goToNextPage,
-        goToPreviousPage: goToPreviousPage,
+		goToPreviousPage: goToPreviousPage,
-    }
+	},
 };

plugins/navigation/back.js

@@ -1,20 +1,26 @@
-const { listenAction } = require("../utils");
+const path = require("path");
+
+const { injectCSS, listenAction } = require("../utils");
 const { ACTIONS, CHANNEL } = require("./actions.js");
 
 function handle(win) {
+	injectCSS(win.webContents, path.join(__dirname, "style.css"), () => {
+		win.webContents.send("navigation-css-ready");
+	});
+
 	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);
 		}
 	});

plugins/navigation/front.js

@@ -1,14 +1,19 @@
-const { ElementFromFile, templatePath } = require('../utils');
+const { ipcRenderer } = require("electron");
+
+const { ElementFromFile, templatePath } = require("../utils");
 
 function run() {
-    const forwardButton = ElementFromFile(templatePath(__dirname, 'forward.html'));
+	ipcRenderer.on("navigation-css-ready", () => {
-    const backButton = ElementFromFile(templatePath(__dirname, 'back.html'));
+		const forwardButton = ElementFromFile(
-    const menu = document.querySelector("ytmusic-pivot-bar-renderer");
+			templatePath(__dirname, "forward.html")
+		);
+		const backButton = ElementFromFile(templatePath(__dirname, "back.html"));
+		const menu = document.querySelector("ytmusic-pivot-bar-renderer");
 
-    if (menu) {
+		if (menu) {
-        menu.prepend(forwardButton);
+			menu.prepend(backButton, forwardButton);
-        menu.prepend(backButton);
+		}
-    }
+	});
 }
 
 module.exports = run;

plugins/navigation/style.css

@@ -0,0 +1,36 @@
+.navigation-item {
+	font-family: Roboto, Noto Naskh Arabic UI, Arial, sans-serif;
+	font-size: 20px;
+	line-height: var(--ytmusic-title-1_-_line-height);
+	font-weight: 500;
+	color: #fff;
+	--yt-endpoint-color: #fff;
+	--yt-endpoint-hover-color: #fff;
+	--yt-endpoint-visited-color: #fff;
+	display: inline-flex;
+	align-items: center;
+	color: rgba(255, 255, 255, 0.5);
+	cursor: pointer;
+	margin: 0 var(--ytmusic-pivot-bar-tab-margin);
+}
+
+.navigation-item:hover {
+	color: #fff;
+}
+
+.navigation-icon {
+	display: inline-flex;
+	-ms-flex-align: center;
+	-webkit-align-items: center;
+	align-items: center;
+	-ms-flex-pack: center;
+	-webkit-justify-content: center;
+	justify-content: center;
+	position: relative;
+	vertical-align: middle;
+	fill: var(--iron-icon-fill-color, currentcolor);
+	stroke: none;
+	width: var(--iron-icon-width, 24px);
+	height: var(--iron-icon-height, 24px);
+	animation: var(--iron-icon_-_animation);
+}

plugins/navigation/templates/back.html

@@ -1,21 +1,33 @@
-<ytmusic-pivot-bar-item-renderer class="style-scope ytmusic-pivot-bar-renderer" tab-id="FEmusic_back" role="tab" onclick="goToPreviousPage()">
+<div
-    <yt-icon class="tab-icon style-scope ytmusic-pivot-bar-item-renderer">
+	class="style-scope ytmusic-pivot-bar-renderer navigation-item"
-        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
+	tab-id="FEmusic_back"
-            <g class="style-scope yt-icon">
+	role="tab"
-                <path class="st0" d="M109.3 265.2l218.9 218.9c5.1 5.1 11.8 7.9 19 7.9s14-2.8 19-7.9l16.1-16.1c10.5-10.5 10.5-27.6 0-38.1L198.6 246.1 382.7 62c5.1-5.1 7.9-11.8 7.9-19 0-7.2-2.8-14-7.9-19L366.5 7.9c-5.1-5.1-11.8-7.9-19-7.9-7.2 0-14 2.8-19 7.9L109.3 227c-5.1 5.1-7.9 11.9-7.8 19.1 0 7.2 2.8 14 7.8 19.1z" class="style-scope yt-icon">
+	onclick="goToPreviousPage()"
-                </path>
+>
-            </g>
+	<div
-        </svg>
+		class="search-icon style-scope ytmusic-search-box"
-    </yt-icon>
+		role="button"
-
+		tabindex="0"
-    <paper-icon-button class="search-icon style-scope ytmusic-search-box" role="button" tabindex="0" aria-disabled="false" title="Go to previous page">
+		aria-disabled="false"
-        <iron-icon id="icon" class="style-scope paper-icon-button">
+		title="Go to previous page"
-            <svg viewBox="0 0 492 492"  preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
+	>
-                <g class="style-scope iron-icon">
+		<div
-                    <path class="st0" d="M109.3 265.2l218.9 218.9c5.1 5.1 11.8 7.9 19 7.9s14-2.8 19-7.9l16.1-16.1c10.5-10.5 10.5-27.6 0-38.1L198.6 246.1 382.7 62c5.1-5.1 7.9-11.8 7.9-19 0-7.2-2.8-14-7.9-19L366.5 7.9c-5.1-5.1-11.8-7.9-19-7.9-7.2 0-14 2.8-19 7.9L109.3 227c-5.1 5.1-7.9 11.9-7.8 19.1 0 7.2 2.8 14 7.8 19.1z">
+			id="icon"
-                    </path>
+			class="tab-icon style-scope paper-icon-button navigation-icon"
-                </g>
+		>
-            </svg>
+			<svg
-        </iron-icon>
+				viewBox="0 0 492 492"
-    </paper-icon-button>
+				preserveAspectRatio="xMidYMid meet"
-</ytmusic-pivot-bar-item-renderer>
+				focusable="false"
+				class="style-scope iron-icon"
+				style="pointer-events: none; display: block; width: 100%; height: 100%"
+			>
+				<g class="style-scope iron-icon">
+					<path
+						d="M109.3 265.2l218.9 218.9c5.1 5.1 11.8 7.9 19 7.9s14-2.8 19-7.9l16.1-16.1c10.5-10.5 10.5-27.6 0-38.1L198.6 246.1 382.7 62c5.1-5.1 7.9-11.8 7.9-19 0-7.2-2.8-14-7.9-19L366.5 7.9c-5.1-5.1-11.8-7.9-19-7.9-7.2 0-14 2.8-19 7.9L109.3 227c-5.1 5.1-7.9 11.9-7.8 19.1 0 7.2 2.8 14 7.8 19.1z"
+					></path>
+				</g>
+			</svg>
+		</div>
+	</div>
+</div>

plugins/navigation/templates/forward.html

@@ -1,26 +1,35 @@
-<ytmusic-pivot-bar-item-renderer class="style-scope ytmusic-pivot-bar-renderer" tab-id="FEmusic_next" role="tab" onclick="goToNextPage()">
+<div
-    <yt-icon class="tab-icon style-scope ytmusic-pivot-bar-item-renderer">
+	class="style-scope ytmusic-pivot-bar-renderer navigation-item"
-        <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
+	tab-id="FEmusic_next"
-            <g class="style-scope yt-icon">
+	role="tab"
-                <path d="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12
+	onclick="goToNextPage()"
-                c-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028
+>
-                c0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265
+	<div
-                c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z" class="style-scope yt-icon">
+		class="search-icon style-scope ytmusic-search-box"
-                </path>
+		role="button"
-            </g>
+		tabindex="0"
-        </svg>
+		aria-disabled="false"
-    </yt-icon>
+		title="Go to next page"
-
+	>
-    <paper-icon-button class="search-icon style-scope ytmusic-search-box" role="button" tabindex="0" aria-disabled="false" title="Go to next page">
+		<div
-        <iron-icon id="icon" class="style-scope paper-icon-button">
+			id="icon"
-            <svg viewBox="0 0 492 492"  preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
+			class="tab-icon style-scope paper-icon-button navigation-icon"
-                <g class="style-scope iron-icon">
+		>
-                    <path class="st0" d="M382.7,226.8L163.7,7.9c-5.1-5.1-11.8-7.9-19-7.9s-14,2.8-19,7.9L109.5,24c-10.5,10.5-10.5,27.6,0,38.1
+			<svg
+				viewBox="0 0 492 492"
+				preserveAspectRatio="xMidYMid meet"
+				focusable="false"
+				class="style-scope iron-icon"
+				style="pointer-events: none; display: block; width: 100%; height: 100%;"
+			>
+				<g class="style-scope iron-icon">
+					<path
+						d="M382.7,226.8L163.7,7.9c-5.1-5.1-11.8-7.9-19-7.9s-14,2.8-19,7.9L109.5,24c-10.5,10.5-10.5,27.6,0,38.1
                     l183.9,183.9L109.3,430c-5.1,5.1-7.9,11.8-7.9,19c0,7.2,2.8,14,7.9,19l16.1,16.1c5.1,5.1,11.8,7.9,19,7.9s14-2.8,19-7.9L382.7,265
-                    c5.1-5.1,7.9-11.9,7.8-19.1C390.5,238.7,387.8,231.9,382.7,226.8z">
+                    c5.1-5.1,7.9-11.9,7.8-19.1C390.5,238.7,387.8,231.9,382.7,226.8z"
-                    </path>
+					></path>
-                </g>
+				</g>
-            </svg>
+			</svg>
-        </iron-icon>
+		</div>
-    </paper-icon-button>
+	</div>
-</ytmusic-pivot-bar-item-renderer>
+</div>

plugins/notifications/back.js

@@ -0,0 +1,46 @@
+const { Notification } = require("electron");
+const is = require("electron-is");
+const registerCallback = require("../../providers/song-info");
+const { notificationImage } = require("./utils");
+
+const setupInteractive = require("./interactive")
+
+const notify = (info, options) => {
+
+	// Fill the notification with content
+	const notification = {
+		title: info.title || "Playing",
+		body: info.artist,
+		icon: notificationImage(info),
+		silent: true,
+		urgency: options.urgency,
+	};
+
+	// Send the notification
+	const currentNotification = new Notification(notification);
+	currentNotification.show()
+
+	return currentNotification;
+};
+
+const setup = (options) => {
+	let oldNotification;
+	let currentUrl;
+
+	registerCallback(songInfo => {
+		if (!songInfo.isPaused && (songInfo.url !== currentUrl || options.unpauseNotification)) {
+			// Close the old notification
+			oldNotification?.close();
+			currentUrl = songInfo.url;
+			// This fixes a weird bug that would cause the notification to be updated instead of showing
+			setTimeout(() => { oldNotification = notify(songInfo, options) }, 10);
+		}
+	});
+}
+
+module.exports = (win, options) => {
+	// Register the callback for new song information
+	is.windows() && options.interactive ?
+		setupInteractive(win, options.unpauseNotification) :
+		setup(options);
+};

plugins/notifications/interactive.js

@@ -0,0 +1,103 @@
+const { notificationImage, icons } = require("./utils");
+const getSongControls = require('../../providers/song-controls');
+const registerCallback = require("../../providers/song-info");
+const notifier = require("node-notifier");
+
+//store song controls reference on launch
+let controls;
+let notificationOnUnpause;
+
+module.exports = (win, unpauseNotification) => {
+    //Save controls and onPause option
+    const { playPause, next, previous } = getSongControls(win);
+    controls = { playPause, next, previous };
+    notificationOnUnpause = unpauseNotification;
+
+    let currentUrl;
+
+    // Register songInfoCallback
+    registerCallback(songInfo => {
+		if (!songInfo.isPaused && (songInfo.url !== currentUrl || notificationOnUnpause)) {
+            currentUrl = songInfo.url;
+            sendToaster(songInfo);
+		}
+	});
+
+    win.webContents.once("closed", () => {
+        deleteNotification()
+    });
+}
+
+//delete old notification
+let toDelete;
+function deleteNotification() {
+    if (toDelete !== undefined) {
+        // To remove the notification it has to be done this way
+        const removeNotif = Object.assign(toDelete, {
+            remove: toDelete.id
+        })
+        notifier.notify(removeNotif)
+
+        toDelete = undefined;
+    }
+}
+
+//New notification
+function sendToaster(songInfo) {
+    deleteNotification();
+    //download image and get path
+    let imgSrc = notificationImage(songInfo, true);
+    toDelete = {
+        //app id undefined - will break buttons
+        title: songInfo.title || "Playing",
+        message: songInfo.artist,
+        id: parseInt(Math.random() * 1000000, 10),
+        icon: imgSrc,
+        actions: [
+            icons.previous,
+            songInfo.isPaused ? icons.play : icons.pause,
+            icons.next
+        ],
+        sound: false,
+    };
+    //send notification
+    notifier.notify(
+        toDelete,
+        (err, data) => {
+            // Will also wait until notification is closed.
+            if (err) {
+                console.log(`ERROR = ${err.toString()}\n DATA = ${data}`);
+            }
+            switch (data) {
+                //buttons
+                case icons.previous.normalize():
+                    controls.previous();
+                    return;
+                case icons.next.normalize():
+                    controls.next();
+                    return;
+                case icons.play.normalize():
+                    controls.playPause();
+                    // dont delete notification on play/pause
+                    toDelete = undefined;
+                    //manually send notification if not sending automatically
+                    if (!notificationOnUnpause) {
+                        songInfo.isPaused = false;
+                        sendToaster(songInfo);
+                    }
+                    return;
+                case icons.pause.normalize():
+                    controls.playPause();
+                    songInfo.isPaused = true;
+                    toDelete = undefined;
+                    sendToaster(songInfo);
+                    return;
+                //Native datatype
+                case "dismissed":
+                case "timeout":
+                    deleteNotification();
+            }
+        }
+
+    );
+}

plugins/notifications/menu.js

@@ -0,0 +1,30 @@
+const { urgencyLevels, setOption } = require("./utils");
+const is = require("electron-is");
+
+module.exports = (win, options) => [
+	...(is.linux() ?
+		[{
+			label: "Notification Priority",
+			submenu: urgencyLevels.map(level => ({
+				label: level.name,
+				type: "radio",
+				checked: options.urgency === level.value,
+				click: () => setOption(options, "urgency", level.value)
+			})),
+		}] :
+		[]),
+	...(is.windows() ?
+		[{
+			label: "Interactive Notifications",
+			type: "checkbox",
+			checked: options.interactive,
+			click: (item) => setOption(options, "interactive", item.checked)
+		}] :
+		[]),
+	{
+		label: "Show notification on unpause",
+		type: "checkbox",
+		checked: options.unpauseNotification,
+		click: (item) => setOption(options, "unpauseNotification", item.checked)
+	},
+];

plugins/notifications/utils.js

@@ -0,0 +1,56 @@
+const { setOptions } = require("../../config/plugins");
+const path = require("path");
+const { app } = require("electron");
+const fs = require("fs");
+
+const icon = "assets/youtube-music.png";
+const tempIcon = path.join(app.getPath("userData"), "tempIcon.png");
+
+module.exports.icons = {
+	play: "\u{1405}", // ᐅ
+	pause: "\u{2016}", // ‖
+	next: "\u{1433}", // ᐳ
+	previous: "\u{1438}" // ᐸ
+}
+
+module.exports.setOption = (options, option, value) => {
+	options[option] = value;
+	setOptions("notifications", options)
+}
+
+module.exports.urgencyLevels = [
+	{ name: "Low", value: "low" },
+	{ name: "Normal", value: "normal" },
+	{ name: "High", value: "critical" },
+];
+
+module.exports.notificationImage = function (songInfo, saveIcon = false) {
+	//return local path to temp icon
+	if (saveIcon && !!songInfo.image) {
+		try {
+			fs.writeFileSync(tempIcon,
+				centerNativeImage(songInfo.image)
+					.toPNG()
+			);
+		} catch (err) {
+			console.log(`Error writing song icon to disk:\n${err.toString()}`)
+			return icon;
+		}
+		return tempIcon;
+	}
+	//else: return image
+	return songInfo.image
+		? centerNativeImage(songInfo.image)
+		: icon
+};
+
+function centerNativeImage(nativeImage) {
+	const tempImage = nativeImage.resize({ height: 256 });
+	const margin = Math.max((tempImage.getSize().width - 256), 0);
+
+	return tempImage.crop({
+		x: Math.round(margin / 2),
+		y: 0,
+		width: 256, height: 256
+	})
+}

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,87 @@
+<div
+	class="style-scope menu-item ytmusic-menu-popup-renderer"
+	role="option"
+	tabindex="-1"
+	aria-disabled="false"
+	aria-selected="false"
+>
+	<div
+		id="navigation-endpoint"
+		class="yt-simple-endpoint style-scope ytmusic-menu-navigation-item-renderer"
+		tabindex="-1"
+	>
+		<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-menu-navigation-item-renderer"
+			id="ytmcustom-playback-speed"
+		>
+			Speed (<span id="playback-speed-value">1</span>)
+		</div>
+	</div>
+</div>

plugins/precise-volume/back.js

@@ -0,0 +1,23 @@
+const { isEnabled } = require("../../config/plugins");
+
+/*
+This is used to determine if plugin is actually active
+(not if its only enabled in options)
+*/
+let enabled = false;
+
+module.exports = (win) => {
+	enabled = true;
+
+	// youtube-music register some of the target listeners after DOMContentLoaded
+	// did-finish-load is called after all elements finished loading, including said listeners
+	// Thats the reason the timing is controlled from main
+	win.webContents.once("did-finish-load", () => {
+		win.webContents.send("restoreAddEventListener");
+		win.webContents.send("setupVideoPlayerVolumeMousewheel", !isEnabled("hide-video-player"));
+	});
+};
+
+module.exports.enabled = () => {
+	return enabled;
+};

plugins/precise-volume/front.js

@@ -0,0 +1,208 @@
+const { ipcRenderer, remote } = require("electron");
+
+const { setOptions } = require("../../config/plugins");
+
+function $(selector) { return document.querySelector(selector); }
+
+module.exports = (options) => {
+
+	setupPlaybar(options);
+
+	setupSliderObserver(options);
+
+	setupLocalArrowShortcuts(options);
+
+	if (options.globalShortcuts?.enabled) {
+		setupGlobalShortcuts(options);
+	}
+
+	firstRun(options);
+
+	// This way the ipc listener gets cleared either way
+	ipcRenderer.once("setupVideoPlayerVolumeMousewheel", (_event, toEnable) => {
+		if (toEnable)
+			setupVideoPlayerOnwheel(options);
+	});
+};
+
+/** Add onwheel event to video player */
+function setupVideoPlayerOnwheel(options) {
+	$("#main-panel").addEventListener("wheel", event => {
+		event.preventDefault();
+		// Event.deltaY < 0 means wheel-up
+		changeVolume(event.deltaY < 0, options);
+	});
+}
+
+function toPercent(volume) {
+	return Math.round(Number.parseFloat(volume) * 100);
+}
+
+function saveVolume(volume, options) {
+	options.savedVolume = volume;
+	setOptions("precise-volume", options);
+}
+
+/** Restore saved volume and setup tooltip */
+function firstRun(options) {
+	const videoStream = $(".video-stream");
+	const slider = $("#volume-slider");
+	// Those elements load abit after DOMContentLoaded
+	if (videoStream && slider) {
+		// Set saved volume IF it pass checks
+		if (options.savedVolume
+			&& options.savedVolume >= 0 && options.savedVolume <= 100
+			&& Math.abs(slider.value - options.savedVolume) < 5
+			// If plugin was disabled and volume changed then diff>4
+		) {
+			videoStream.volume = options.savedVolume / 100;
+			slider.value = options.savedVolume;
+		}
+		// Set current volume as tooltip
+		setTooltip(toPercent(videoStream.volume));
+	} else {
+		setTimeout(firstRun, 500, options); // Try again in 500 milliseconds
+	}
+}
+
+/** Add onwheel event to play bar and also track if play bar is hovered*/
+function setupPlaybar(options) {
+	const playerbar = $("ytmusic-player-bar");
+
+	playerbar.addEventListener("wheel", event => {
+		event.preventDefault();
+		// Event.deltaY < 0 means wheel-up
+		changeVolume(event.deltaY < 0, options);
+	});
+
+	// Keep track of mouse position for showVolumeSlider()
+	playerbar.addEventListener("mouseenter", () => {
+		playerbar.classList.add("on-hover");
+	});
+
+	playerbar.addEventListener("mouseleave", () => {
+		playerbar.classList.remove("on-hover");
+	});
+}
+
+/** if (toIncrease = false) then volume decrease */
+function changeVolume(toIncrease, options) {
+	// Need to change both the actual volume and the slider
+	const videoStream = $(".video-stream");
+	const slider = $("#volume-slider");
+	// Apply volume change if valid
+	const steps = (options.steps || 1) / 100;
+	videoStream.volume = toIncrease ?
+		Math.min(videoStream.volume + steps, 1) :
+		Math.max(videoStream.volume - steps, 0);
+
+	// Save the new volume
+	saveVolume(toPercent(videoStream.volume), options);
+	// Slider value automatically rounds to multiples of 5
+	slider.value = options.savedVolume;
+	// Change tooltips to new value
+	setTooltip(options.savedVolume);
+	// Show volume slider on volume change
+	showVolumeSlider(slider);
+}
+
+let volumeHoverTimeoutID;
+
+function showVolumeSlider(slider) {
+	// This class display the volume slider if not in minimized mode
+	slider.classList.add("on-hover");
+	// Reset timeout if previous one hasn't completed
+	if (volumeHoverTimeoutID) {
+		clearTimeout(volumeHoverTimeoutID);
+	}
+	// Timeout to remove volume preview after 3 seconds if playbar isn't hovered
+	volumeHoverTimeoutID = setTimeout(() => {
+		volumeHoverTimeoutID = null;
+		if (!$("ytmusic-player-bar").classList.contains("on-hover")) {
+			slider.classList.remove("on-hover");
+		}
+	}, 3000);
+}
+
+/** Save volume + Update the volume tooltip when volume-slider is manually changed */
+function setupSliderObserver(options) {
+	const sliderObserver = new MutationObserver(mutations => {
+		for (const mutation of mutations) {
+			// This checks that volume-slider was manually set
+			if (mutation.oldValue !== mutation.target.value &&
+				(!options.savedVolume || Math.abs(options.savedVolume - mutation.target.value) > 4)) {
+				// Diff>4 means it was manually set
+				setTooltip(mutation.target.value);
+				saveVolume(mutation.target.value, options);
+			}
+		}
+	});
+
+	// Observing only changes in 'value' of volume-slider
+	sliderObserver.observe($("#volume-slider"), {
+		attributeFilter: ["value"],
+		attributeOldValue: true
+	});
+}
+
+// Set new volume as tooltip for volume slider and icon + expanding slider (appears when window size is small)
+const tooltipTargets = [
+	"#volume-slider",
+	"tp-yt-paper-icon-button.volume",
+	"#expand-volume-slider",
+	"#expand-volume"
+];
+
+function setTooltip(volume) {
+	for (target of tooltipTargets) {
+		$(target).title = `${volume}%`;
+	}
+}
+
+function setupGlobalShortcuts(options) {
+	if (options.globalShortcuts.volumeUp) {
+		remote.globalShortcut.register((options.globalShortcuts.volumeUp), () => changeVolume(true, options));
+	}
+	if (options.globalShortcuts.volumeDown) {
+		remote.globalShortcut.register((options.globalShortcuts.volumeDown), () => changeVolume(false, options));
+	}
+}
+
+function setupLocalArrowShortcuts(options) {
+	if (options.arrowsShortcut) {
+		addListener();
+	}
+
+	// Change options from renderer to keep sync
+	ipcRenderer.on("setArrowsShortcut", (_event, isEnabled) => {
+		options.arrowsShortcut = isEnabled;
+		setOptions("precise-volume", options);
+		// This allows changing this setting without restarting app
+		if (isEnabled) {
+			addListener();
+		} else {
+			removeListener();
+		}
+	});
+
+	function addListener() {
+		window.addEventListener('keydown', callback);
+	}
+
+	function removeListener() {
+		window.removeEventListener("keydown", callback);
+	}
+
+	function callback(event) {
+		switch (event.code) {
+			case "ArrowUp":
+				event.preventDefault();
+				changeVolume(true, options);
+				break;
+			case "ArrowDown":
+				event.preventDefault();
+				changeVolume(false, options);
+				break;
+		}
+	}
+}

plugins/precise-volume/menu.js

@@ -0,0 +1,19 @@
+const { enabled } = require("./back");
+const { setOptions } = require("../../config/plugins");
+
+module.exports = (win, options) => [
+	{
+		label: "Arrowkeys controls",
+		type: "checkbox",
+		checked: !!options.arrowsShortcut,
+		click: (item) => {
+			// Dynamically change setting if plugin enabled
+			if (enabled()) {
+				win.webContents.send("setArrowsShortcut", item.checked);
+			} else { // Fallback to usual method if disabled
+				options.arrowsShortcut = item.checked;
+				setOptions("precise-volume", options);
+			}
+		}
+	}
+];

plugins/precise-volume/preload.js

@@ -0,0 +1,33 @@
+const { ipcRenderer } = require("electron");
+const is = require("electron-is");
+
+let ignored = {
+    id: ["volume-slider", "expand-volume-slider"],
+    types: ["mousewheel", "keydown", "keyup"]
+};
+
+function overrideAddEventListener() {
+    // Save native addEventListener
+    Element.prototype._addEventListener = Element.prototype.addEventListener;
+    // Override addEventListener to Ignore specific events in volume-slider
+    Element.prototype.addEventListener = function (type, listener, useCapture = false) {
+        if (!(
+            ignored.id.includes(this.id) &&
+            ignored.types.includes(type)
+        )) {
+            this._addEventListener(type, listener, useCapture);
+        } else if (is.dev()) {
+            console.log(`Ignoring event: "${this.id}.${type}()"`);
+        }
+    };
+}
+
+module.exports = () => {
+    overrideAddEventListener();
+    // Restore original function after did-finish-load to avoid keeping Element.prototype altered
+    ipcRenderer.once("restoreAddEventListener", () => { // Called from main to make sure page is completly loaded
+        Element.prototype.addEventListener = Element.prototype._addEventListener;
+        Element.prototype._addEventListener = undefined;
+        ignored = undefined;
+    });
+};

plugins/shortcuts/back.js

@@ -1,12 +1,9 @@
 const { globalShortcut } = require("electron");
+const is = require("electron-is");
 const electronLocalshortcut = require("electron-localshortcut");
 
-const {
+const getSongControls = require("../../providers/song-controls");
-	playPause,
+const { setupMPRIS } = require("./mpris");
-	nextTrack,
-	previousTrack,
-	startSearch
-} = require("./youtube.js");
 
 function _registerGlobalShortcut(webContents, shortcut, action) {
 	globalShortcut.register(shortcut, () => {
@@ -20,12 +17,51 @@ 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, "MediaNextTrack", next);
-	_registerGlobalShortcut(win.webContents, "MediaPreviousTrack", previousTrack);
+	_registerGlobalShortcut(win.webContents, "MediaPreviousTrack", previous);
-	_registerLocalShortcut(win, "CommandOrControl+F", startSearch);
+	_registerLocalShortcut(win, "CommandOrControl+F", search);
-	_registerLocalShortcut(win, "CommandOrControl+L", startSearch);
+	_registerLocalShortcut(win, "CommandOrControl+L", search);
+
+	if (is.linux()) {
+		try {
+			const player = setupMPRIS();
+
+			player.on("raise", () => {
+				win.setSkipTaskbar(false);
+				win.show();
+			});
+			player.on("playpause", playPause);
+			player.on("next", next);
+			player.on("previous", previous);
+		} catch (e) {
+			console.warn("Error in MPRIS", e);
+		}
+	}
+
+	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;

plugins/shortcuts/mpris.js

@@ -0,0 +1,19 @@
+const mpris = require("mpris-service");
+
+function setupMPRIS() {
+	const player = mpris({
+		name: "youtube-music",
+		identity: "YouTube Music",
+		canRaise: true,
+		supportedUriSchemes: ["https"],
+		supportedMimeTypes: ["audio/mpeg"],
+		supportedInterfaces: ["player"],
+		desktopEntry: "youtube-music",
+	});
+
+	return player;
+}
+
+module.exports = {
+	setupMPRIS,
+};

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
-};

plugins/sponsorblock/back.js

@@ -0,0 +1,51 @@
+const fetch = require("node-fetch");
+
+const defaultConfig = require("../../config/defaults");
+const registerCallback = require("../../providers/song-info");
+const { sortSegments } = require("./segments");
+
+let videoID;
+
+module.exports = (win, options) => {
+	const { apiURL, categories } = {
+		...defaultConfig.plugins.sponsorblock,
+		...options,
+	};
+
+	registerCallback(async (info) => {
+		const newURL = info.url || win.webContents.getURL();
+		const newVideoID = new URL(newURL).searchParams.get("v");
+
+		if (videoID !== newVideoID) {
+			videoID = newVideoID;
+			const segments = await fetchSegments(apiURL, categories);
+			win.webContents.send("sponsorblock-skip", segments);
+		}
+	});
+};
+
+const fetchSegments = async (apiURL, categories) => {
+	const sponsorBlockURL = `${apiURL}/api/skipSegments?videoID=${videoID}&categories=${JSON.stringify(
+		categories
+	)}`;
+	try {
+		const resp = await fetch(sponsorBlockURL, {
+			method: "GET",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			redirect: "follow",
+		});
+		if (resp.status !== 200) {
+			return [];
+		}
+		const segments = await resp.json();
+		const sortedSegments = sortSegments(
+			segments.map((submission) => submission.segment)
+		);
+
+		return sortedSegments;
+	} catch {
+		return [];
+	}
+};

plugins/sponsorblock/front.js

@@ -0,0 +1,27 @@
+const { ipcRenderer } = require("electron");
+
+const is = require("electron-is");
+
+const { ontimeupdate } = require("../../providers/video-element");
+
+let currentSegments = [];
+
+module.exports = () => {
+	ipcRenderer.on("sponsorblock-skip", (_, segments) => {
+		currentSegments = segments;
+	});
+
+	ontimeupdate((videoElement) => {
+		currentSegments.forEach((segment) => {
+			if (
+				videoElement.currentTime >= segment[0] &&
+				videoElement.currentTime <= segment[1]
+			) {
+				videoElement.currentTime = segment[1];
+				if (is.dev()) {
+					console.log("SponsorBlock: skipping segment", segment);
+				}
+			}
+		});
+	});
+};

plugins/sponsorblock/segments.js

@@ -0,0 +1,29 @@
+// Segments are an array [ [start, end], … ]
+module.exports.sortSegments = (segments) => {
+	segments.sort((segment1, segment2) =>
+		segment1[0] === segment2[0]
+			? segment1[1] - segment2[1]
+			: segment1[0] - segment2[0]
+	);
+
+	const compiledSegments = [];
+	let currentSegment;
+
+	segments.forEach((segment) => {
+		if (!currentSegment) {
+			currentSegment = segment;
+			return;
+		}
+
+		if (currentSegment[1] < segment[0]) {
+			compiledSegments.push(currentSegment);
+			currentSegment = segment;
+			return;
+		}
+
+		currentSegment[1] = Math.max(currentSegment[1], segment[1]);
+	});
+	compiledSegments.push(currentSegment);
+
+	return compiledSegments;
+};

plugins/sponsorblock/tests/segments.test.js

@@ -0,0 +1,34 @@
+const { sortSegments } = require("../segments");
+
+test("Segment sorting", () => {
+	expect(
+		sortSegments([
+			[0, 3],
+			[7, 8],
+			[5, 6],
+		])
+	).toEqual([
+		[0, 3],
+		[5, 6],
+		[7, 8],
+	]);
+
+	expect(
+		sortSegments([
+			[0, 5],
+			[6, 8],
+			[4, 6],
+		])
+	).toEqual([[0, 8]]);
+
+	expect(
+		sortSegments([
+			[0, 6],
+			[7, 8],
+			[4, 6],
+		])
+	).toEqual([
+		[0, 6],
+		[7, 8],
+	]);
+});

plugins/taskbar-mediacontrol/back.js

@@ -0,0 +1,53 @@
+const getSongControls = require('../../providers/song-controls');
+const registerCallback = require('../../providers/song-info');
+const path = require('path');
+
+let controls;
+let currentSongInfo;
+
+module.exports = win => {
+	const { playPause, next, previous } = getSongControls(win);
+	controls = { playPause, next, previous };
+
+	registerCallback(songInfo => {
+		//update currentsonginfo for win.on('show')
+		currentSongInfo = songInfo;
+		// update thumbar
+		setThumbar(win, songInfo);
+	});
+
+	// need to set thumbar again after win.show 
+	win.on("show", () => {
+		setThumbar(win, currentSongInfo)
+	})
+};
+
+function setThumbar(win, songInfo) {
+	// Wait for song to start before setting thumbar
+	if (!songInfo?.title) {
+		return;
+	}
+
+	// Win32 require full rewrite of components
+	win.setThumbarButtons([
+		{
+			tooltip: 'Previous',
+			icon: get('backward.png'),
+			click() { controls.previous(win.webContents); }
+		}, {
+			tooltip: 'Play/Pause',
+			// Update icon based on play state
+			icon: songInfo.isPaused ? get('play.png') : get('pause.png'),
+			click() { controls.playPause(win.webContents); }
+		}, {
+			tooltip: 'Next',
+			icon: get('forward.png'),
+			click() { controls.next(win.webContents); }
+		}
+	]);
+}
+
+// Util
+function get(file) {
+	return path.join(__dirname, "assets", file);
+}

plugins/touchbar/back.js

@@ -0,0 +1,86 @@
+const { TouchBar } = require("electron");
+const {
+	TouchBarButton,
+	TouchBarLabel,
+	TouchBarSpacer,
+	TouchBarSegmentedControl,
+	TouchBarScrubber,
+} = TouchBar;
+
+const registerCallback = require("../../providers/song-info");
+const getSongControls = require("../../providers/song-controls");
+
+// Songtitle label
+const songTitle = new TouchBarLabel({
+	label: "",
+});
+// This will store the song controls once available
+let controls = [];
+
+// This will store the song image once available
+const songImage = {};
+
+// Pause/play button
+const pausePlayButton = new TouchBarButton();
+
+// The song control buttons (control functions are in the same order)
+const buttons = new TouchBarSegmentedControl({
+	mode: "buttons",
+	segments: [
+		new TouchBarButton({
+			label: "⏮",
+		}),
+		pausePlayButton,
+		new TouchBarButton({
+			label: "⏭",
+		}),
+		new TouchBarButton({
+			label: "👎",
+		}),
+		new TouchBarButton({
+			label: "👍",
+		}),
+	],
+	change: (i) => controls[i](),
+});
+
+// This is the touchbar object, this combines everything with proper layout
+const touchBar = new TouchBar({
+	items: [
+		new TouchBarScrubber({
+			items: [songImage, songTitle],
+			continuous: false,
+		}),
+		new TouchBarSpacer({
+			size: "flexible",
+		}),
+		buttons,
+	],
+});
+
+module.exports = (win) => {
+	const { playPause, next, previous, like, dislike } = getSongControls(win);
+
+	// If the page is ready, register the callback
+	win.once("ready-to-show", () => {
+		controls = [previous, playPause, next, like, dislike];
+
+		// Register the callback
+		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 ? "▶️" : "⏸";
+
+			// Get image source
+			songImage.icon = songInfo.image
+				? songInfo.image.resize({ height: 23 })
+				: null;
+
+			win.setTouchBar(touchBar);
+		});
+	});
+};

plugins/tuna-obs/back.js

@@ -0,0 +1,33 @@
+const { ipcRenderer } = require("electron");
+const fetch = require('node-fetch');
+
+const registerCallback = require("../../providers/song-info");
+
+const post = (data) => {
+	const port = 1608;
+	headers = {'Content-Type': 'application/json',
+		'Accept': 'application/json',
+		'Access-Control-Allow-Headers': '*',
+		'Access-Control-Allow-Origin': '*'}
+	const url = `http://localhost:${port}/`;
+	fetch(url, {method: 'POST', headers, body:JSON.stringify({data})});
+}
+
+module.exports = async (win) => {
+	registerCallback((songInfo) => {
+
+		// Register the callback
+		if (songInfo.title.length === 0 && songInfo.artist.length === 0) {
+			return;
+		}
+
+		const duration =  Number(songInfo.songDuration)*1000
+		const progress = Number(songInfo.elapsedSeconds)*1000
+		const cover_url = songInfo.imageSrc
+		const album_url = songInfo.imageSrc
+		const title = songInfo.title
+		const artists = [songInfo.artist]
+		const status = !songInfo.isPaused ? 'Playing': 'Paused'
+		post({ cover_url, title, artists, status, progress, duration, album_url});
+	})
+}

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 => {
+module.exports.ElementFromHtml = (html) => {
-	var template           = document.createElement("template");
+	var template = document.createElement("template");
-	    html               = html.trim();                         // Never return a text node of whitespace as the result
+	html = html.trim(); // Never return a text node of whitespace as the result
-	    template.innerHTML = html;
+	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"));
 };
 
@@ -20,8 +20,12 @@ module.exports.templatePath = (pluginPath, name) => {
 	return path.join(pluginPath, "templates", name);
 };
 
-module.exports.triggerAction = (channel, action) => {
+module.exports.triggerAction = (channel, action, ...args) => {
-	return ipcRenderer.send(channel, action);
+	return ipcRenderer.send(channel, action, ...args);
+};
+
+module.exports.triggerActionSync = (channel, action, ...args) => {
+	return ipcRenderer.sendSync(channel, action, ...args);
 };
 
 module.exports.listenAction = (channel, callback) => {
@@ -29,7 +33,7 @@ module.exports.listenAction = (channel, callback) => {
 };
 
 module.exports.fileExists = (path, callbackIfExists) => {
-	fs.access(path, fs.F_OK, err => {
+	fs.access(path, fs.F_OK, (err) => {
 		if (err) {
 			return;
 		}
@@ -38,17 +42,20 @@ module.exports.fileExists = (path, callbackIfExists) => {
 	});
 };
 
-module.exports.injectCSS = (webContents, filepath) => {
+module.exports.injectCSS = (webContents, filepath, cb = undefined) => {
-	webContents.on("did-finish-load", () => {
+	webContents.on("did-finish-load", async () => {
-		webContents.insertCSS(fs.readFileSync(filepath, "utf8"));
+		await webContents.insertCSS(fs.readFileSync(filepath, "utf8"));
+		if (cb) {
+			cb();
+		}
 	});
 };
 
 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));
 };

preload.js

@@ -1,32 +1,53 @@
 const path = require("path");
 
-const { getCurrentWindow } = require("electron").remote;
+const { remote } = require("electron");
 
-const { getEnabledPlugins, store } = require("./store");
+const config = require("./config");
-const { fileExists }               = require("./plugins/utils");
+const { fileExists } = require("./plugins/utils");
+const setupFrontLogger = require("./providers/front-logger");
+const setupSongControl = require("./providers/song-controls-front");
+const setupSongInfo = require("./providers/song-info-front");
 
-const plugins = getEnabledPlugins();
+const plugins = config.plugins.getEnabled();
 
-plugins.forEach(plugin => {
+plugins.forEach(([plugin, options]) => {
-	const pluginPath = path.join(__dirname, "plugins", plugin, "actions.js");
+	const preloadPath = path.join(__dirname, "plugins", plugin, "preload.js");
-	fileExists(pluginPath, () => {
+	fileExists(preloadPath, () => {
-		const actions = require(pluginPath).global || {};
+		const run = require(preloadPath);
-		Object.keys(actions).forEach(actionName => {
+		run(options);
+	});
+
+	const actionPath = path.join(__dirname, "plugins", plugin, "actions.js");
+	fileExists(actionPath, () => {
+		const actions = require(actionPath).actions || {};
+
+		// TODO: re-enable once contextIsolation is set to true
+		// contextBridge.exposeInMainWorld(plugin + "Actions", actions);
+		Object.keys(actions).forEach((actionName) => {
 			global[actionName] = actions[actionName];
 		});
 	});
 });
 
 document.addEventListener("DOMContentLoaded", () => {
-	plugins.forEach(plugin => {
+	plugins.forEach(([plugin, options]) => {
 		const pluginPath = path.join(__dirname, "plugins", plugin, "front.js");
 		fileExists(pluginPath, () => {
 			const run = require(pluginPath);
-			run();
+			run(options);
 		});
 	});
 
+	// inject song-info provider
+	setupSongInfo();
+
+	// inject song-control provider
+	setupSongControl();
+
+	// inject front logger
+	setupFrontLogger();
+
 	// Add action for reloading
 	global.reload = () =>
-		getCurrentWindow().webContents.loadURL(store.get("url"));
+		remote.getCurrentWindow().webContents.loadURL(config.get("url"));
 });

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/front-logger.js

@@ -0,0 +1,13 @@
+const { ipcRenderer } = require("electron");
+
+function logToString(log) {
+	return (typeof log === "string") ?
+		log :
+		JSON.stringify(log, null, "\t");
+}
+
+module.exports = () => {
+	ipcRenderer.on("log", (_event, log) => {
+		console.log(logToString(log));
+	});
+};

providers/song-controls-front.js

@@ -0,0 +1,18 @@
+const { ipcRenderer } = require("electron");
+
+let videoStream = document.querySelector(".video-stream");
+module.exports = () => {
+    ipcRenderer.on("playPause", () => {
+        if (!videoStream) {
+            videoStream = document.querySelector(".video-stream");
+        }
+
+        if (videoStream.paused) {
+            videoStream.play();
+        } else {
+            videoStream.yns_pause ?
+                videoStream.yns_pause() :
+                videoStream.pause();
+        }
+    });
+};

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: () => win.webContents.send("playPause"),
+		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"]),
+	};
+};

providers/song-info-front.js

@@ -0,0 +1,31 @@
+const { ipcRenderer } = require("electron");
+
+const { getImage } = require("./song-info");
+
+global.songInfo = {};
+
+ipcRenderer.on("update-song-info", async (_, extractedSongInfo) => {
+	global.songInfo = JSON.parse(extractedSongInfo);
+	global.songInfo.image = await getImage(global.songInfo.imageSrc);
+});
+
+const injectListener = () => {
+	const oldXHR = window.XMLHttpRequest;
+	function newXHR() {
+		const realXHR = new oldXHR();
+		realXHR.addEventListener(
+			"readystatechange",
+			() => {
+				if (realXHR.readyState === 4 && realXHR.status === 200
+					&& realXHR.responseURL.includes("/player")) {
+						// if the request contains the song info, send the response to ipcMain
+						ipcRenderer.send("song-info-request", realXHR.responseText);
+				}
+			},
+			false
+		);
+		return realXHR;
+	}
+	window.XMLHttpRequest = newXHR;
+};
+module.exports = injectListener;

providers/song-info.js

@@ -0,0 +1,125 @@
+const { ipcMain, nativeImage } = require("electron");
+
+const fetch = require("node-fetch");
+
+// This selects the progress bar, used for current progress
+const progressSelector = "#progress-bar";
+
+
+// Grab the progress using the selector
+const getProgress = async (win) => {
+	// Get current value of the progressbar element
+	return win.webContents.executeJavaScript(
+		'document.querySelector("' + progressSelector + '").value'
+	);
+};
+
+// Grab the native image using the src
+const getImage = async (src) => {
+	const result = await fetch(src);
+	const buffer = await result.buffer();
+	const output = nativeImage.createFromBuffer(buffer);
+	if (output.isEmpty() && !src.endsWith(".jpg") && src.includes(".jpg")) { // fix hidden webp files (https://github.com/th-ch/youtube-music/issues/315)
+		return getImage(src.slice(0, src.lastIndexOf(".jpg")+4));
+	} else {
+		return output;
+	}
+};
+
+// To find the paused status, we check if the title contains `-`
+const getPausedStatus = async (win) => {
+	const title = await win.webContents.executeJavaScript("document.title");
+	return !title.includes("-");
+};
+
+const getArtist = async (win) => {
+	return win.webContents.executeJavaScript(`
+		document.querySelector(".subtitle.ytmusic-player-bar .yt-formatted-string")
+			?.textContent
+	`);
+}
+
+// Fill songInfo with empty values
+const songInfo = {
+	title: "",
+	artist: "",
+	views: 0,
+	uploadDate: "",
+	imageSrc: "",
+	image: null,
+	isPaused: undefined,
+	songDuration: 0,
+	elapsedSeconds: 0,
+	url: "",
+};
+
+const handleData = async (responseText, win) => {
+	let data = JSON.parse(responseText);
+	songInfo.title = cleanupName(data?.videoDetails?.title);
+	songInfo.artist =
+		(await getArtist(win)) || cleanupName(data?.videoDetails?.author);
+	songInfo.views = data?.videoDetails?.viewCount;
+	songInfo.imageSrc = data?.videoDetails?.thumbnail?.thumbnails?.pop()?.url;
+	songInfo.songDuration = data?.videoDetails?.lengthSeconds;
+	songInfo.image = await getImage(songInfo.imageSrc);
+	songInfo.uploadDate = data?.microformat?.microformatDataRenderer?.uploadDate;
+	songInfo.url = data?.microformat?.microformatDataRenderer?.urlCanonical;
+
+	win.webContents.send("update-song-info", JSON.stringify(songInfo));
+};
+
+// 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);
+};
+
+const registerProvider = (win) => {
+	win.on("page-title-updated", async () => {
+		// Get and set the new data
+		songInfo.isPaused = await getPausedStatus(win);
+
+		const elapsedSeconds = await getProgress(win);
+		songInfo.elapsedSeconds = elapsedSeconds;
+
+		// Trigger the callbacks
+		callbacks.forEach((c) => {
+			c(songInfo);
+		});
+	});
+
+	// This will be called when the song-info-front finds a new request with song data
+	ipcMain.on("song-info-request", async (_, responseText) => {
+		await handleData(responseText, win);
+		callbacks.forEach((c) => {
+			c(songInfo);
+		});
+	});
+};
+
+const suffixesToRemove = [
+	" - Topic",
+	"VEVO",
+	" (Performance Video)",
+	" (Official Music Video)",
+	" (Official Video)",
+	" (Clip officiel)",
+];
+function cleanupName(artist) {
+	if (!artist) {
+		return artist;
+	}
+	for (const suffix of suffixesToRemove) {
+		if (artist.endsWith(suffix)) {
+			return artist.slice(0, -suffix.length);
+		}
+	}
+	return artist;
+}
+
+module.exports = registerCallback;
+module.exports.setupSongInfo = registerProvider;
+module.exports.getImage = getImage;
+module.exports.cleanupName = cleanupName;

providers/video-element.js

@@ -0,0 +1,22 @@
+let videoElement = null;
+
+module.exports.ontimeupdate = (cb) => {
+	const observer = new MutationObserver((mutations, observer) => {
+		if (!videoElement) {
+			videoElement = document.querySelector("video");
+			if (videoElement) {
+				observer.disconnect();
+				videoElement.ontimeupdate = () => cb(videoElement);
+			}
+		}
+	});
+
+	if (!videoElement) {
+		observer.observe(document, {
+			childList: true,
+			subtree: true,
+		});
+	} else {
+		videoElement.ontimeupdate = () => cb(videoElement);
+	}
+};

readme.md

@@ -1,11 +1,24 @@
 # YouTube Music
-[![GitHub release](https://img.shields.io/github/release/th-ch/youtube-music.svg)](https://GitHub.com/th-ch/youtube-music/releases/)
-[![GitHub license](https://img.shields.io/github/license/th-ch/youtube-music.svg)](https://github.com/th-ch/youtube-music/blob/master/LICENSE)
-[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)
-[![Build status](https://ci.appveyor.com/api/projects/status/tgre12r150ynvwl2?svg=true)](https://ci.appveyor.com/project/th-ch/youtube-music)
-[![Build Status](https://travis-ci.org/th-ch/youtube-music.svg?branch=master)](https://travis-ci.org/th-ch/youtube-music)
 
-![Screenshot](screenshot.jpg "Screenshot")
+<div align="center">
+
+[![GitHub release](https://img.shields.io/github/release/th-ch/youtube-music.svg?style=for-the-badge&logo=youtube-music)](https://github.com/th-ch/youtube-music/releases/)
+[![GitHub license](https://img.shields.io/github/license/th-ch/youtube-music.svg?style=for-the-badge)](https://github.com/th-ch/youtube-music/blob/master/LICENSE)
+[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=for-the-badge)](https://github.com/sindresorhus/xo)
+[![Build status](https://img.shields.io/github/workflow/status/th-ch/youtube-music/Build%20YouTube%20Music?style=for-the-badge&logo=youtube-music)](https://GitHub.com/th-ch/youtube-music/releases/)
+[![Known Vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/th-ch/youtube-music?style=for-the-badge)](https://snyk.io/test/github/th-ch/youtube-music)
+[![GitHub All Releases](https://img.shields.io/github/downloads/th-ch/youtube-music/total?style=for-the-badge&logo=youtube-music)](https://GitHub.com/th-ch/youtube-music/releases/)
+[![AUR](https://img.shields.io/aur/version/youtube-music-bin?color=blueviolet&style=for-the-badge&logo=youtube-music)](https://aur.archlinux.org/packages/youtube-music-bin)
+
+</div>
+
+![Screenshot](web/screenshot.jpg "Screenshot")
+
+<div align="center">
+	<a href="https://github.com/th-ch/youtube-music/releases/latest">
+		<img src="web/youtube-music.svg" width="400" height="100">
+	</a>
+</div>
 
 **Electron wrapper around YouTube Music featuring:**
 
@@ -16,20 +29,36 @@
 
 You can check out the [latest release](https://github.com/th-ch/youtube-music/releases/latest) to quickly find the latest version.
 
-## Available plugins:
+### Arch Linux
 
+Install the `youtube-music-bin` package from the AUR. For AUR installation instructions, take a look at this [wiki page](https://wiki.archlinux.org/index.php/Arch_User_Repository#Installing_packages).
+
+## Available plugins:
 - **Ad Blocker**: block all ads and tracking out of the box
-- **No Google Login**: remove Google login buttons and links from the interface
+- **Auto confirm when paused**: when the ["Continue Watching?"](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png) modal appears, automatically click "Yes"
-- **Shortcuts**: use your usual shortcuts (media keys, Ctrl/CMD + F…) to control YouTube Music
+- **Disable autoplay**: makes every song start in "paused" mode
+- [**Discord**](https://discord.com/): show your friends what you listen to with [Rich Presence](https://user-images.githubusercontent.com/28219076/104362104-a7a0b980-5513-11eb-9744-bb89eabe0016.png)
+- **Downloader**: downloads MP3 [directly from the interface](https://user-images.githubusercontent.com/61631665/129977677-83a7d067-c192-45e1-98ae-b5a4927393be.png) [(youtube-dl)](https://github.com/ytdl-org/youtube-dl)
+- **Hide video player**: no video in the interface when playing music
+- **In-app menu**: [gives bars a fancy, dark look](https://user-images.githubusercontent.com/78568641/112215894-923dbf00-8c29-11eb-95c3-3ce15db27eca.png)
+- [**Last.fm**](https://www.last.fm/): scrobbles support
 - **Navigation**: next/back navigation arrows directly integrated in the interface, like in your favorite browser
+- **No Google Login**: remove Google login buttons and links from the interface
+- **Notifications**: display a [notification](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png) when a song starts playing
+- **Playback speed**: listen fast, listen slow! [Adds a slider that controls song speed](https://user-images.githubusercontent.com/61631665/129976003-e55db5ba-bf42-448c-a059-26a009775e68.png)
+- **Precise volume**: customizable volume steps for more comfort, allows controlling the volume precisely using mousewheel
+- **Shortcuts**: use your usual shortcuts (media keys, Ctrl/CMD + F…) to control YouTube Music, you may setup custom global hotkeys for play/pause/next/previous song
+- [**SponsorBlock**](https://github.com/ajayyy/SponsorBlock): skips non-music parts
+- **Taskbar media control**: control app from your [Windows taskbar](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png)
+- **Touchbar**: custom TouchBar layout for macOS
 
 ## Dev
 
 ```sh
 git clone https://github.com/th-ch/youtube-music
 cd youtube-music
-npm install
+yarn
-npm start
+yarn start
 ```
 
 ## Build your own plugins
@@ -80,7 +109,7 @@ module.exports = win => {
 // front.js
 module.exports = () => {
 	// Remove the login button
-	document.querySelector('.sign-in-link.ytmusic-nav-bar').remove();
+	document.querySelector(".sign-in-link.ytmusic-nav-bar").remove();
 };
 ```
 
@@ -89,11 +118,19 @@ module.exports = () => {
 ## Build
 
 ```sh
-npm run build
+yarn build
 ```
 
 Builds the app for macOS, Linux, and Windows, using [electron-builder](https://github.com/electron-userland/electron-builder).
 
+## Tests
+
+```sh
+yarn test
+```
+
+Uses [Spectron](https://www.electronjs.org/spectron) to test the app.
+
 ## License
 
 MIT © [th-ch](https://github.com/th-ch/youtube-music)

store/index.js

@@ -1,21 +0,0 @@
-const Store = require("electron-store");
-const plugins = require("./plugins");
-
-const store = new Store({
-	defaults: {
-		"window-size": {
-			width : 1100,
-			height: 550
-		},
-		url    : "https://music.youtube.com",
-		plugins: ["navigation", "shortcuts", "adblocker"]
-	}
-});
-
-module.exports = {
-	store            : store,
-	isPluginEnabled  : plugin => plugins.isEnabled(store, plugin),
-	getEnabledPlugins: () => plugins.getEnabledPlugins(store),
-	enablePlugin     : plugin => plugins.enablePlugin(store, plugin),
-	disablePlugin    : plugin => plugins.disablePlugin(store, plugin)
-};

store/plugins.js

@@ -1,31 +0,0 @@
-function getEnabledPlugins(store) {
-	return store.get("plugins");
-}
-
-function isEnabled(store, plugin) {
-	return store.get("plugins").indexOf(plugin) > -1;
-}
-
-function enablePlugin(store, plugin) {
-	let plugins = getEnabledPlugins(store);
-	if (plugins.indexOf(plugin) === -1) {
-		plugins.push(plugin);
-		store.set("plugins", plugins);
-	}
-}
-
-function disablePlugin(store, plugin) {
-	let plugins = getEnabledPlugins(store);
-	let index   = plugins.indexOf(plugin);
-	if (index > -1) {
-		plugins.splice(index, 1);
-		store.set("plugins", plugins);
-	}
-}
-
-module.exports = {
-	isEnabled        : isEnabled,
-	getEnabledPlugins: getEnabledPlugins,
-	enablePlugin     : enablePlugin,
-	disablePlugin    : disablePlugin
-};