fix(playerSpeed): playback speed change listener was broken

YouTube-Enhancer · Dec 5, 2024 · ec6e82c · ec6e82c
1 parent 33ff22c
commit ec6e82c
Showing 1 changed file with 25 additions and 13 deletions.
diff --git a/src/features/playerSpeed/index.ts b/src/features/playerSpeed/index.ts
@@ -80,6 +80,7 @@ export function restorePlayerSpeed() {
 	// Set the video playback speed
 	video.playbackRate = Number(playerSpeed);
 }
+const speedValueRegex = /(?<!\d\.)([0-1](\.\d+)?|2)(?![\d.])/;
 export function setupPlaybackSpeedChangeListener() {
 	const settingsPanelMenu = document.querySelector<HTMLDivElement>("div.ytp-settings-menu:not(#yte-feature-menu)");
 	const speedMenuItemClickListener = (event: Event) => {
@@ -88,7 +89,6 @@ export function setupPlaybackSpeedChangeListener() {
 		const { textContent: speedValue } = speedMenuItem;
 		// If the playback speed is not available, return
 		if (!speedValue) return;
-		const speedValueRegex = /(?<!\d\.)([0-1](\.\d+)?|2)(?![\d.])/;
 		let playerSpeed: number = 1;
 		if (speedValueRegex.test(speedValue)) {
 			const speedValueMatch = speedValue.match(speedValueRegex);
@@ -106,17 +106,34 @@ export function setupPlaybackSpeedChangeListener() {
 			const panelHeader = targetElement.querySelector<HTMLDivElement>("div.ytp-panel > div.ytp-panel-header");
 			const panelMenu = targetElement.querySelector<HTMLDivElement>("div.ytp-panel > div.ytp-panel-menu");
 			const menuItems = panelMenu?.querySelectorAll<HTMLDivElement>("div.ytp-menuitem");
-			if (panelHeader && panelMenu && menuItems && menuItems.length === 8) {
-				menuItems.forEach((menuItem) => {
-					eventManager.addEventListener(menuItem, "click", speedMenuItemClickListener, "playerSpeed");
-				});
+			if (panelHeader && panelMenu && menuItems && menuItems.length === 9) {
+				const [customSpeedMenuItem] = menuItems;
+				const customSpeedActive = customSpeedMenuItem.getAttribute("aria-checked") === "true";
+				if (customSpeedActive) {
+					const customSpeedLabel = customSpeedMenuItem.querySelector<HTMLDivElement>("div.ytp-menuitem-label");
+					if (!customSpeedLabel) return;
+					const { textContent: customSpeedLabelValue } = customSpeedLabel;
+					if (!customSpeedLabelValue) return;
+					if (speedValueRegex.test(customSpeedLabelValue)) {
+						const speedValueMatch = customSpeedLabelValue.match(speedValueRegex);
+						if (speedValueMatch) {
+							const playerSpeed = Number(speedValueMatch[1]);
+							window.localStorage.setItem("playerSpeed", String(playerSpeed));
+						}
+					}
+				} else {
+					menuItems.forEach((menuItem) => {
+						eventManager.addEventListener(menuItem, "click", speedMenuItemClickListener, "playerSpeed");
+					});
+				}
 			}
 		});
 	});
 	const customSpeedSliderObserver = new MutationObserver((mutationsList: MutationRecord[]) => {
 		mutationsList.forEach((mutation) => {
 			const { target: targetElement } = mutation as { target: HTMLDivElement } & MutationRecord;
-			const speedValue = targetElement.getAttribute("aria-valuenow");
+			if (!targetElement.matches(".ytp-speedslider-text")) return;
+			const { textContent: speedValue } = targetElement;
 			// If the playback speed is not available, return
 			if (!speedValue) return;
 			const playerSpeed = parseFloat(speedValue);
@@ -132,13 +149,8 @@ export function setupPlaybackSpeedChangeListener() {
 			childList: true,
 			subtree: true
 		});
-		const menuItems = [
-			...document.querySelectorAll<HTMLDivElement>('div.ytp-settings-menu:not(#yte-feature-menu) > .ytp-panel > .ytp-panel-menu [role="menuitem"]')
-		];
-		const speedMenuItem = menuItems.find(
-			(el) =>
-				el.children[0].innerHTML ===
-				`<svg height="24" viewBox="0 0 24 24" width="24"><path d="M10,8v8l6-4L10,8L10,8z M6.3,5L5.7,4.2C7.2,3,9,2.2,11,2l0.1,1C9.3,3.2,7.7,3.9,6.3,5z            M5,6.3L4.2,5.7C3,7.2,2.2,9,2,11 l1,.1C3.2,9.3,3.9,7.7,5,6.3z            M5,17.7c-1.1-1.4-1.8-3.1-2-4.8L2,13c0.2,2,1,3.8,2.2,5.4L5,17.7z            M11.1,21c-1.8-0.2-3.4-0.9-4.8-2 l-0.6,.8C7.2,21,9,21.8,11,22L11.1,21z            M22,12c0-5.2-3.9-9.4-9-10l-0.1,1c4.6,.5,8.1,4.3,8.1,9s-3.5,8.5-8.1,9l0.1,1 C18.2,21.5,22,17.2,22,12z" fill="white"></path></svg>`
+		const speedMenuItem = document.querySelector(
+			".ytp-menuitem:has(.ytp-menuitem-icon svg path[d='M10,8v8l6-4L10,8L10,8z M6.3,5L5.7,4.2C7.2,3,9,2.2,11,2l0.1,1C9.3,3.2,7.7,3.9,6.3,5z            M5,6.3L4.2,5.7C3,7.2,2.2,9,2,11 l1,.1C3.2,9.3,3.9,7.7,5,6.3z            M5,17.7c-1.1-1.4-1.8-3.1-2-4.8L2,13c0.2,2,1,3.8,2.2,5.4L5,17.7z            M11.1,21c-1.8-0.2-3.4-0.9-4.8-2 l-0.6,.8C7.2,21,9,21.8,11,22L11.1,21z            M22,12c0-5.2-3.9-9.4-9-10l-0.1,1c4.6,.5,8.1,4.3,8.1,9s-3.5,8.5-8.1,9l0.1,1 C18.2,21.5,22,17.2,22,12z'])"
 		);
 		if (!speedMenuItem) return;
 		const {