From 796a7aaaf1ecaf80b2ef113137f2222499803e29 Mon Sep 17 00:00:00 2001
From: TC <th-ch@users.noreply.github.com>
Date: Thu, 4 Mar 2021 21:29:37 +0100
Subject: [PATCH] Fix download/speed menu item

---
 plugins/downloader/front.js                  |  3 +-
 plugins/playback-speed/front.js              |  8 +--
 plugins/playback-speed/templates/slider.html | 53 +++++++-------------
 providers/dom-elements.js                    |  5 +-
 4 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/plugins/downloader/front.js b/plugins/downloader/front.js
index 732fd161..77485d4a 100644
--- a/plugins/downloader/front.js
+++ b/plugins/downloader/front.js
@@ -1,5 +1,6 @@
 const { contextBridge } = require("electron");
 
+const { getSongMenu } = require("../../providers/dom-elements");
 const { ElementFromFile, templatePath, triggerAction } = require("../utils");
 const { ACTIONS, CHANNEL } = require("./actions.js");
 const { downloadVideoToMP3 } = require("./youtube-dl");
@@ -13,7 +14,7 @@ let pluginOptions = {};
 
 const observer = new MutationObserver((mutations, observer) => {
 	if (!menu) {
-		menu = document.querySelector("ytmusic-menu-popup-renderer paper-listbox");
+		menu = getSongMenu();
 	}
 
 	if (menu && !menu.contains(downloadButton)) {
diff --git a/plugins/playback-speed/front.js b/plugins/playback-speed/front.js
index a44b72e0..fff07fee 100644
--- a/plugins/playback-speed/front.js
+++ b/plugins/playback-speed/front.js
@@ -1,4 +1,7 @@
-const { watchDOMElement } = require("../../providers/dom-elements");
+const {
+	getSongMenu,
+	watchDOMElement,
+} = require("../../providers/dom-elements");
 const { ElementFromFile, templatePath } = require("../utils");
 
 const slider = ElementFromFile(templatePath(__dirname, "slider.html"));
@@ -49,8 +52,7 @@ module.exports = () => {
 
 	watchDOMElement(
 		"menu",
-		(document) =>
-			document.querySelector("ytmusic-menu-popup-renderer paper-listbox"),
+		(document) => getSongMenu(document),
 		(menuElement) => {
 			if (!menuElement.contains(slider)) {
 				menuElement.prepend(slider);
diff --git a/plugins/playback-speed/templates/slider.html b/plugins/playback-speed/templates/slider.html
index c9ad0ac4..67ced7a4 100644
--- a/plugins/playback-speed/templates/slider.html
+++ b/plugins/playback-speed/templates/slider.html
@@ -5,7 +5,7 @@
 	aria-disabled="false"
 	aria-selected="false"
 >
-	<paper-slider
+	<tp-yt-paper-slider
 		id="playback-speed-slider"
 		class="volume-slider style-scope ytmusic-player-bar on-hover"
 		max="100"
@@ -22,68 +22,53 @@
 		aria-disabled="false"
 		value="50"
 		><!--css-build:shady-->
-		<div id="sliderContainer" class="style-scope paper-slider">
-			<div class="bar-container style-scope paper-slider">
-				<paper-progress
+		<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 paper-slider"
+					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;"
+					style="touch-action: none"
 					><!--css-build:shady-->
 
-					<div id="progressContainer" class="style-scope paper-progress">
+					<div id="progressContainer" class="style-scope tp-yt-paper-progress">
 						<div
 							id="secondaryProgress"
-							class="style-scope paper-progress"
+							class="style-scope tp-yt-paper-progress"
 							hidden="true"
-							style="transform: scaleX(0);"
+							style="transform: scaleX(0)"
 						></div>
 						<div
 							id="primaryProgress"
-							class="style-scope paper-progress"
-							style="transform: scaleX(0.5);"
+							class="style-scope tp-yt-paper-progress"
+							style="transform: scaleX(0.5)"
 						></div>
 					</div>
-				</paper-progress>
+				</tp-yt-paper-progress>
 			</div>
-			<dom-if class="style-scope paper-slider"
+			<dom-if class="style-scope tp-yt-paper-slider"
 				><template is="dom-if"></template
 			></dom-if>
 			<div
 				id="sliderKnob"
-				class="slider-knob style-scope paper-slider"
-				style="left: 50%; touch-action: none;"
+				class="slider-knob style-scope tp-yt-paper-slider"
+				style="left: 50%; touch-action: none"
 			>
 				<div
-					class="slider-knob-inner style-scope paper-slider"
+					class="slider-knob-inner style-scope tp-yt-paper-slider"
 					value="50"
 				></div>
-				<paper-ripple
-					id="ink"
-					center=""
-					class="circle style-scope paper-slider"
-					style="display: none;"
-					><!--css-build:shady-->
-
-					<div
-						id="background"
-						class="style-scope paper-ripple"
-						style="opacity: 0.006008;"
-					></div>
-					<div id="waves" class="style-scope paper-ripple"></div>
-				</paper-ripple>
 			</div>
 		</div>
-		<dom-if class="style-scope paper-slider"
-			><template is="dom-if"></template
-		></dom-if>
-	</paper-slider>
+		<dom-if class="style-scope tp-yt-paper-slider"
+			><template is="dom-if"></template></dom-if
+	></tp-yt-paper-slider>
 
 	<div
 		class="text style-scope ytmusic-toggle-menu-service-item-renderer"
diff --git a/providers/dom-elements.js b/providers/dom-elements.js
index d4ffb6e4..4ebd38dc 100644
--- a/providers/dom-elements.js
+++ b/providers/dom-elements.js
@@ -17,4 +17,7 @@ const watchDOMElement = (name, selectorFn, cb) => {
 	});
 };
 
-module.exports = { watchDOMElement };
+const getSongMenu = () =>
+	document.querySelector("ytmusic-menu-popup-renderer tp-yt-paper-listbox");
+
+module.exports = { getSongMenu, watchDOMElement };