Merge pull request #13 from th-ch/snyk-upgrade-5770951f6ab79d4e413754bb7cab1225

[Snyk] Upgrade electron-localshortcut from 3.1.0 to 3.2.1

.npmrc

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

.travis.yml

@@ -13,8 +13,8 @@ matrix:
       language: generic
 
 cache:
+  yarn: false
   directories:
-    - node_modules
     - $HOME/.cache/electron
     - $HOME/.cache/electron-builder
 
@@ -30,13 +30,15 @@ script:
         -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"
+        electronuserland/builder:10 \
+        /bin/bash -c "yarn && npm run release:linux"
     else
       npm run release:mac
     fi
 before_cache:
   - rm -rf $HOME/.cache/electron-builder
+before_install:
+  - rm -rf node_modules
 
 branches:
   except:

appveyor.yml

@@ -11,10 +11,10 @@ init:
   - git config --global core.autocrlf input
 
 install:
-  - ps: Install-Product node 8 x64
-  - npm install
+  - ps: Install-Product node 10 x64
+  - yarn
 
 build_script:
-  - npm run release:win
+  - yarn run release:win
 
 test: off

index.js

@@ -2,7 +2,7 @@
 const path = require("path");
 
 const electron        = require("electron");
-const isDev           = require("electron-is-dev");
+const is              = require("electron-is");
 const { autoUpdater } = require("electron-updater");
 
 const { setApplicationMenu }       = require("./menu");
@@ -42,11 +42,13 @@ function createMainWindow() {
 		backgroundColor: "#000",
 		show           : false,
 		webPreferences : {
-			nodeIntegration: false,
-			preload        : path.join(__dirname, "preload.js")
+			nodeIntegration : false,
+			preload         : path.join(__dirname, "preload.js"),
+			nativeWindowOpen: true,                                 // window.open return Window object(like in regular browsers), not BrowserWindowProxy
+			affinity        : "main-window"                         // main window, and addition windows should work in one process
 		},
-		frame        : false,
-		titleBarStyle: "hiddenInset"
+		frame        : !is.macOS(),
+		titleBarStyle: is.macOS() ? "hiddenInset": "default"
 	});
 	if (windowMaximized) {
 		win.maximize();
@@ -57,7 +59,7 @@ function createMainWindow() {
 
 	injectCSS(win.webContents, path.join(__dirname, "youtube-music.css"));
 	win.webContents.on("did-finish-load", () => {
-		if (isDev) {
+		if (is.dev()) {
 			console.log("did finish load");
 			win.webContents.openDevTools();
 		}
@@ -73,7 +75,7 @@ function createMainWindow() {
 	});
 
 	win.webContents.on("did-fail-load", () => {
-		if (isDev) {
+		if (is.dev()) {
 			console.log("did fail load");
 		}
 		win.webContents.loadFile(path.join(__dirname, "error.html"));
@@ -86,6 +88,17 @@ function createMainWindow() {
 		}
 	});
 
+	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";
+		}
+	);
+
 	win.on("move", () => {
 		let position = win.getPosition();
 		store.set("window-position", { x: position[0], y: position[1] });
@@ -129,7 +142,7 @@ app.on("activate", () => {
 app.on("ready", () => {
 	setApplicationMenu();
 	mainWindow = createMainWindow();
-	if (!isDev) {
+	if (!is.dev()) {
 		autoUpdater.checkForUpdatesAndNotify();
 		autoUpdater.on("update-available", () => {
 			const dialogOpts = {

package.json

@@ -1,60 +1,65 @@
 {
-	"name"       : "youtube-music",
+	"name": "youtube-music",
 	"productName": "YouTube Music",
-	"version"    : "1.1.3",
+	"version": "1.2.0",
 	"description": "YouTube Music Desktop App - including custom plugins",
-	"license"    : "MIT",
-	"repository" : "th-ch/youtube-music",
-	"author"     : {
-		"name" : "th-ch",
+	"license": "MIT",
+	"repository": "th-ch/youtube-music",
+	"author": {
+		"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"
 		},
 		"linux": {
-			"icon"    : "assets/generated/icons/png",
+			"icon": "assets/generated/icons/png",
 			"category": "AudioVideo"
 		}
 	},
 	"scripts": {
-		"test"         : "xo",
-		"start"        : "electron .",
-		"icon"         : "rimraf assets/generated && electron-icon-maker --input=assets/youtube-music.png --output=assets/generated",
-		"postinstall"  : "npm run icon && npm rebuild && node plugins/adblocker/generator.js && electron-rebuild",
-		"clean"        : "rimraf dist",
-		"build"        : "npm run clean && build --win --mac --linux",
-		"build:mac"    : "npm run clean && build --mac",
-		"build:win"    : "npm run clean && build --win",
-		"release:linux": "npm run clean && build --linux -p always",
-		"release:mac"  : "npm run clean && build --mac -p always",
-		"release:win"  : "npm run clean && build --win -p always"
+		"test": "xo",
+		"start": "electron .",
+		"icon": "rimraf assets/generated && electron-icon-maker --input=assets/youtube-music.png --output=assets/generated",
+		"generate:package": "node utils/generate-package-json.js",
+		"postinstall": "yarn run generate:package YoutubeNonStop && yarn run icon && npm rebuild && node plugins/adblocker/generator.js && electron-rebuild",
+		"clean": "rimraf dist",
+		"build": "yarn run clean && build --win --mac --linux",
+		"build:mac": "yarn run clean && build --mac",
+		"build:win": "yarn run clean && build --win",
+		"release:linux": "yarn run clean && build --linux -p always",
+		"release:mac": "yarn run clean && build --mac -p always",
+		"release:win": "yarn run clean && build --win -p always"
+	},
+	"engines": {
+		"npm": "Please use yarn and not npm"
 	},
 	"dependencies": {
-		"ad-block"              : "^4.1.3",
-		"electron-debug"        : "^2.0.0",
-		"electron-is-dev"       : "^1.0.1",
-		"electron-localshortcut": "^3.1.0",
-		"electron-store"        : "^2.0.0",
-		"electron-updater"      : "^4.0.6"
+		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.7.1",
+		"ad-block": "^4.1.3",
+		"electron-debug": "^2.2.0",
+		"electron-is": "^3.0.0",
+		"electron-localshortcut": "^3.2.1",
+		"electron-store": "^3.1.0",
+		"electron-updater": "^4.2.2"
 	},
 	"devDependencies": {
-		"devtron"                    : "^1.4.0",
-		"electron"                   : "^4.0.8",
-		"electron-builder"           : "^20.40.2",
+		"devtron": "^1.4.0",
+		"electron": "^4.0.8",
+		"electron-builder": "^20.40.2",
 		"electron-devtools-installer": "^2.2.4",
-		"electron-icon-maker"        : "0.0.4",
-		"electron-rebuild"           : "^1.8.4",
-		"rimraf"                     : "^2.6.3",
-		"xo"                         : "^0.24.0"
+		"electron-icon-maker": "0.0.4",
+		"electron-rebuild": "^1.8.4",
+		"rimraf": "^2.6.3",
+		"xo": "^0.24.0"
 	},
 	"xo": {
 		"envs": [

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/navigation/back.js

@@ -1,7 +1,10 @@
-const { listenAction } = require("../utils");
-const { ACTIONS, CHANNEL } = require("./actions.js");
+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"));
 	listenAction(CHANNEL, (event, action) => {
 		switch (action) {
 			case ACTIONS.NEXT: 

plugins/navigation/front.js

@@ -1,14 +1,15 @@
-const { ElementFromFile, templatePath } = require('../utils');
+const { ElementFromFile, templatePath } = require("../utils");
 
 function run() {
-    const forwardButton = ElementFromFile(templatePath(__dirname, 'forward.html'));
-    const backButton = ElementFromFile(templatePath(__dirname, 'back.html'));
-    const menu = document.querySelector("ytmusic-pivot-bar-renderer");
+	const forwardButton = ElementFromFile(
+		templatePath(__dirname, "forward.html")
+	);
+	const backButton = ElementFromFile(templatePath(__dirname, "back.html"));
+	const menu       = document.querySelector("ytmusic-pivot-bar-renderer");
 
-    if (menu) {
-        menu.prepend(forwardButton);
-        menu.prepend(backButton);
-    }
+	if (menu) {
+		menu.prepend(backButton, forwardButton);
+	}
 }
 
 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,51 @@
-<ytmusic-pivot-bar-item-renderer class="style-scope ytmusic-pivot-bar-renderer" tab-id="FEmusic_back" role="tab" onclick="goToPreviousPage()">
-    <yt-icon class="tab-icon style-scope ytmusic-pivot-bar-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 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">
-                </path>
-            </g>
-        </svg>
-    </yt-icon>
+<div
+	class="style-scope ytmusic-pivot-bar-renderer navigation-item"
+	tab-id="FEmusic_back"
+	role="tab"
+	onclick="goToPreviousPage()"
+>
+	<div
+		class="tab-icon style-scope ytmusic-pivot-bar-item-renderer yt-icon-container"
+	>
+		<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
+					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"
+				></path>
+			</g>
+		</svg>
+	</div>
 
-    <paper-icon-button class="search-icon style-scope ytmusic-search-box" role="button" tabindex="0" aria-disabled="false" title="Go to previous page">
-        <iron-icon id="icon" class="style-scope paper-icon-button">
-            <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 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">
-                    </path>
-                </g>
-            </svg>
-        </iron-icon>
-    </paper-icon-button>
-</ytmusic-pivot-bar-item-renderer>
+	<div
+		class="search-icon style-scope ytmusic-search-box"
+		role="button"
+		tabindex="0"
+		aria-disabled="false"
+		title="Go to previous page"
+	>
+		<div id="icon" class="style-scope paper-icon-button navigation-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%;"
+			>
+				<g class="style-scope iron-icon">
+					<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"
+					></path>
+				</g>
+			</svg>
+		</div>
+	</div>
+</div>

plugins/navigation/templates/forward.html

@@ -1,26 +1,53 @@
-<ytmusic-pivot-bar-item-renderer class="style-scope ytmusic-pivot-bar-renderer" tab-id="FEmusic_next" role="tab" onclick="goToNextPage()">
-    <yt-icon class="tab-icon style-scope ytmusic-pivot-bar-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="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
+<div
+	class="style-scope ytmusic-pivot-bar-renderer navigation-item"
+	tab-id="FEmusic_next"
+	role="tab"
+	onclick="goToNextPage()"
+>
+	<div class="tab-icon style-scope ytmusic-pivot-bar-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="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
                 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
-                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">
-                </path>
-            </g>
-        </svg>
-    </yt-icon>
+                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"
+				></path>
+			</g>
+		</svg>
+	</div>
 
-    <paper-icon-button class="search-icon style-scope ytmusic-search-box" role="button" tabindex="0" aria-disabled="false" title="Go to next page">
-        <iron-icon id="icon" class="style-scope paper-icon-button">
-            <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 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
+	<div
+		class="search-icon style-scope ytmusic-search-box"
+		role="button"
+		tabindex="0"
+		aria-disabled="false"
+		title="Go to next page"
+	>
+		<div id="icon" class="style-scope paper-icon-button navigation-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%;"
+			>
+				<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
                     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">
-                    </path>
-                </g>
-            </svg>
-        </iron-icon>
-    </paper-icon-button>
-</ytmusic-pivot-bar-item-renderer>
+                    c5.1-5.1,7.9-11.9,7.8-19.1C390.5,238.7,387.8,231.9,382.7,226.8z"
+					></path>
+				</g>
+			</svg>
+		</div>
+	</div>
+</div>

readme.md

@@ -1,9 +1,11 @@
 # 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)
+[![Known Vulnerabilities](https://snyk.io/test/github/th-ch/youtube-music/badge.svg)](https://snyk.io/test/github/th-ch/youtube-music)
 
 ![Screenshot](screenshot.jpg "Screenshot")
 
@@ -22,14 +24,15 @@ You can check out the [latest release](https://github.com/th-ch/youtube-music/re
 - **No Google Login**: remove Google login buttons and links from the interface
 - **Shortcuts**: use your usual shortcuts (media keys, Ctrl/CMD + F…) to control YouTube Music
 - **Navigation**: next/back navigation arrows directly integrated in the interface, like in your favorite browser
+- **Auto confirm when paused**: when the "Continue Watching?" modal appears, automatically click "Yes"
 
 ## Dev
 
 ```sh
 git clone https://github.com/th-ch/youtube-music
 cd youtube-music
-npm install
-npm start
+yarn
+yarn start
 ```
 
 ## Build your own plugins
@@ -80,7 +83,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();
 };
 ```
 

store/index.js

@@ -8,7 +8,7 @@ const store = new Store({
 			height: 550
 		},
 		url    : "https://music.youtube.com",
-		plugins: ["navigation", "shortcuts", "adblocker", "no-google-login"]
+		plugins: ["navigation", "shortcuts", "adblocker"]
 	}
 });
 

utils/generate-package-json.js

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+
+const { existsSync, writeFile } = require("fs");
+const { join } = require("path");
+const { promisify } = require("util");
+
+/**
+ * Generates a fake package.json for given packages that don't have any.
+ * Allows electron-builder to resolve them
+ */
+
+const generatePackageJson = async packageName => {
+	var filepath = join("node_modules", packageName, "package.json");
+	if (!existsSync(filepath)) {
+		console.log(
+			`No package.json found for ${packageName} module, generating one…`
+		);
+		pkg = {
+			name: packageName,
+			version: "0.0.0",
+			description: "-",
+			repository: { type: "git", url: "-" },
+			readme: "-"
+		};
+		const writeFileAsync = promisify(writeFile);
+		await writeFileAsync(filepath, JSON.stringify(pkg, null, 2));
+	}
+};
+
+if (require.main === module) {
+	process.argv.slice(2).forEach(async packageName => {
+		await generatePackageJson(packageName);
+	});
+}

youtube-music.css

@@ -23,3 +23,8 @@ ytmusic-app-layout {
 ytmusic-search-box.ytmusic-nav-bar {
 	margin-top: 12px;
 }
+
+/* Blocking annoying elements */
+ytmusic-mealbar-promo-renderer {
+	display: none !important;
+}