fix: Make speed limit higher #637

src/components/Settings/Settings.tsx

@@ -12,7 +12,7 @@ import SettingSearch from "@/src/components/Settings/components/SettingSearch";
 import { deepDarkPreset } from "@/src/deepDarkPresets";
 import { type i18nInstanceType, i18nService } from "@/src/i18n";
 import { availableLocales, localeDirection, localePercentages } from "@/src/i18n/constants";
-import { buttonNames, youtubePlaybackSpeedButtonsRates, youtubePlayerSpeedRates } from "@/src/types";
+import { buttonNames, youtubePlayerMaxSpeed, youtubePlayerMinSpeed, youtubePlayerSpeedStep } from "@/src/types";
 import { configurationImportSchema, defaultConfiguration as defaultSettings } from "@/src/utils/constants";
 import { updateStoredSettings } from "@/src/utils/updateStoredSettings";
 import { cn, deepMerge, formatDateForFileName, getPathValue, isButtonSelectDisabled, parseStoredValue } from "@/src/utils/utilities";
@@ -339,16 +339,6 @@ export default function Settings() {
 			value: "lower"
 		}
 	] as SelectOption<"player_quality_fallback_strategy">[];
-	const YouTubePlayerSpeedOptions = youtubePlayerSpeedRates.map((rate) => ({
-		label: rate?.toString(),
-		value: rate?.toString()
-		// This cast is here because I'm not sure what the proper type is
-	})) as SelectOption<"player_speed">[];
-	const YouTubePlaybackSpeedButtonsOptions = youtubePlaybackSpeedButtonsRates.map((rate) => ({
-		label: rate?.toString(),
-		value: rate?.toString()
-		// This cast is here because I'm not sure what the proper type is
-	})) as SelectOption<"playback_buttons_speed">[];
 	const ScreenshotFormatOptions: SelectOption<"screenshot_format">[] = [
 		{ label: "PNG", value: "png" },
 		{ label: "JPEG", value: "jpeg" },
@@ -1022,20 +1012,24 @@ export default function Settings() {
 						id="player_speed"
 						label={t("settings.sections.playbackSpeed.select.label")}
 						onChange={setValueOption("player_speed")}
-						options={YouTubePlayerSpeedOptions}
-						selectedOption={getSelectedOption("player_speed")?.toString()}
 						title={t("settings.sections.playbackSpeed.select.title")}
-						type="select"
+						value={settings.player_speed}
+						max={youtubePlayerMaxSpeed}
+						min={youtubePlayerSpeedStep}
+						step={youtubePlayerSpeedStep}
+						type="number"
 					/>
 					<Setting
 						disabled={settings.enable_playback_speed_buttons?.toString() !== "true"}
 						id="playback_buttons_speed"
 						label={t("settings.sections.playbackSpeed.playbackSpeedButtons.select.label")}
 						onChange={setValueOption("playback_buttons_speed")}
-						options={YouTubePlaybackSpeedButtonsOptions}
-						selectedOption={getSelectedOption("playback_buttons_speed")?.toString()}
+						value={settings.playback_buttons_speed}
+						max={1}
+						min={youtubePlayerSpeedStep}
+						step={youtubePlayerSpeedStep}
 						title={t("settings.sections.playbackSpeed.playbackSpeedButtons.select.title")}
-						type="select"
+						type="number"
 					/>
 				</SettingSection>
 				<SettingSection title={t("settings.sections.volumeBoost.title")}>

src/features/playbackSpeedButtons/index.ts

@@ -1,22 +1,22 @@
-import type { YouTubePlayerDiv } from "@/src/types";
+import { youtubePlayerMinSpeed, type YouTubePlayerDiv } from "@/src/types";
 
 import { addFeatureButton, removeFeatureButton } from "@/src/features/buttonPlacement";
 import { checkIfFeatureButtonExists, getFeatureButton } from "@/src/features/buttonPlacement/utils";
 import { setPlayerSpeed } from "@/src/features/playerSpeed";
 import { getFeatureIcon } from "@/src/icons";
 import eventManager from "@/src/utils/EventManager";
 import OnScreenDisplayManager from "@/src/utils/OnScreenDisplayManager";
-import { createTooltip, isShortsPage, isWatchPage, waitForSpecificMessage } from "@/src/utils/utilities";
+import { createTooltip, isWatchPage, waitForSpecificMessage, round } from "@/src/utils/utilities";
 
 import type { AddButtonFunction, RemoveButtonFunction } from "../index";
 let currentPlaybackSpeed = 1;
 export function calculatePlaybackButtonSpeed(speed: number, playbackSpeedPerClick: number, direction: "decrease" | "increase") {
 	const calculatedSpeed =
-		speed == 4 && direction == "increase" ? 4
-		: speed == 0.25 && direction == "decrease" ? 0.25
+		speed == 16 && direction == "increase" ? 16
+		: speed == youtubePlayerMinSpeed && direction == "decrease" ? youtubePlayerMinSpeed
 		: direction == "decrease" ? speed - playbackSpeedPerClick
 		: speed + playbackSpeedPerClick;
-	return calculatedSpeed;
+	return round(calculatedSpeed, 2);
 }
 export async function updatePlaybackSpeedButtonTooltip<ButtonName extends "decreasePlaybackSpeedButton" | "increasePlaybackSpeedButton">(
 	buttonName: ButtonName,
@@ -46,10 +46,11 @@ export async function updatePlaybackSpeedButtonTooltip<ButtonName extends "decre
 		id: `yte-feature-${buttonName}-tooltip`
 	});
 	button.dataset.title = window.i18nextInstance.t(
-		currentPlaybackSpeed == 4 && buttonName == "increasePlaybackSpeedButton" ? `pages.content.features.playbackSpeedButtons.increaseLimit`
-		: currentPlaybackSpeed == 0.25 && buttonName == "decreasePlaybackSpeedButton" ? `pages.content.features.playbackSpeedButtons.decreaseLimit`
+		currentPlaybackSpeed == 16 && buttonName == "increasePlaybackSpeedButton" ? `pages.content.features.playbackSpeedButtons.increaseLimit`
+		: currentPlaybackSpeed == youtubePlayerMinSpeed && buttonName == "decreasePlaybackSpeedButton" ?
+			`pages.content.features.playbackSpeedButtons.decreaseLimit`
 			// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-		: `pages.content.features.playbackSpeedButtons.buttons.${buttonName as "decreasePlaybackSpeedButton" | "increasePlaybackSpeedButton"}.label`,
+		:	`pages.content.features.playbackSpeedButtons.buttons.${buttonName as "decreasePlaybackSpeedButton" | "increasePlaybackSpeedButton"}.label`,
 		{
 			SPEED: speed
 		}
@@ -65,8 +66,7 @@ function playbackSpeedButtonClickListener(speedPerClick: number, direction: "dec
 			const adjustmentAmount = direction === "increase" ? speedPerClick : -speedPerClick;
 			try {
 				({ playbackRate: currentPlaybackSpeed } = videoElement);
-				if (currentPlaybackSpeed + adjustmentAmount <= 0) return;
-				if (currentPlaybackSpeed + adjustmentAmount > 4) return;
+				if (currentPlaybackSpeed + adjustmentAmount > 16 || currentPlaybackSpeed + adjustmentAmount < youtubePlayerMinSpeed) return;
 				const playerContainer = document.querySelector<YouTubePlayerDiv>("div#movie_player");
 				if (!playerContainer) return;
 				const {
@@ -86,12 +86,12 @@ function playbackSpeedButtonClickListener(speedPerClick: number, direction: "dec
 					},
 					"yte-osd",
 					{
-						max: 4,
+						max: 16,
 						type: "speed",
-						value: currentPlaybackSpeed + adjustmentAmount
+						value: round(currentPlaybackSpeed + adjustmentAmount, 2)
 					}
 				);
-				const speed = currentPlaybackSpeed + adjustmentAmount;
+				const speed = round(currentPlaybackSpeed + adjustmentAmount, 2);
 				await setPlayerSpeed(speed);
 				await updatePlaybackSpeedButtonTooltip("increasePlaybackSpeedButton", calculatePlaybackButtonSpeed(speed, speedPerClick, "increase"));
 				await updatePlaybackSpeedButtonTooltip("decreasePlaybackSpeedButton", calculatePlaybackButtonSpeed(speed, speedPerClick, "decrease"));
@@ -129,7 +129,7 @@ export const addIncreasePlaybackSpeedButton: AddButtonFunction = async () => {
 		"increasePlaybackSpeedButton",
 		increasePlaybackSpeedButtonPlacement,
 		window.i18nextInstance.t(
-			currentPlaybackSpeed == 4 ?
+			currentPlaybackSpeed == 16 ?
 				`pages.content.features.playbackSpeedButtons.increaseLimit`
 			:	"pages.content.features.playbackSpeedButtons.buttons.increasePlaybackSpeedButton.label",
 			{
@@ -169,7 +169,7 @@ export const addDecreasePlaybackSpeedButton: AddButtonFunction = async () => {
 		"decreasePlaybackSpeedButton",
 		decreasePlaybackSpeedButtonPlacement,
 		window.i18nextInstance.t(
-			currentPlaybackSpeed == 0.25 ?
+			currentPlaybackSpeed == youtubePlayerMinSpeed ?
 				`pages.content.features.playbackSpeedButtons.decreaseLimit`
 			:	"pages.content.features.playbackSpeedButtons.buttons.decreasePlaybackSpeedButton.label",
 			{

src/features/scrollWheelSpeedControl/index.ts

@@ -72,7 +72,7 @@ export default async function adjustSpeedOnScrollWheel() {
 			// Adjust the speed based on the scroll direction
 			const scrollDelta = wheelEvent.deltaY < 0 ? 1 : -1;
 			// Adjust the speed based on the scroll direction and options
-			const { newSpeed } = await adjustSpeed(playerContainer, scrollDelta, speed_adjustment_steps);
+			const { newSpeed } = await adjustSpeed(scrollDelta, speed_adjustment_steps);
 			await updatePlaybackSpeedButtonTooltip(
 				"increasePlaybackSpeedButton",
 				calculatePlaybackButtonSpeed(newSpeed, playback_buttons_speed, "increase")
@@ -93,7 +93,7 @@ export default async function adjustSpeedOnScrollWheel() {
 				},
 				"yte-osd",
 				{
-					max: 4,
+					max: 16,
 					type: "speed",
 					value: newSpeed
 				}

src/features/scrollWheelSpeedControl/utils.ts

@@ -1,7 +1,8 @@
-import type { Selector, YouTubePlayerDiv } from "@/src/types";
+import { setPlayerSpeed } from "@/src/features/playerSpeed";
+import { youtubePlayerMinSpeed, type Selector } from "@/src/types";
 
 import eventManager from "@/src/utils/EventManager";
-import { browserColorLog, clamp, round, toDivisible } from "@/src/utils/utilities";
+import { browserColorLog, round } from "@/src/utils/utilities";
 
 /**
  * Adjust the speed based on the scroll direction.
@@ -11,23 +12,17 @@ import { browserColorLog, clamp, round, toDivisible } from "@/src/utils/utilitie
  * @param speedStep - The speed adjustment steps.
  * @returns Promise that resolves with the new speed.
  */
-export function adjustSpeed(
-	playerContainer: YouTubePlayerDiv,
-	scrollDelta: number,
-	speedStep: number
-): Promise<{ newSpeed: number; oldSpeed: number }> {
+export function adjustSpeed(scrollDelta: number, speedStep: number): Promise<{ newSpeed: number; oldSpeed: number }> {
 	return new Promise((resolve) => {
 		void (async () => {
-			if (!playerContainer.getPlaybackRate) return;
-			if (!playerContainer.setPlaybackRate) return;
-			const video = playerContainer.querySelector("video");
-			if (!video) return;
-			const { playbackRate: speed } = video;
-			const newSpeed = round(clamp(toDivisible(parseFloat((speed + scrollDelta * speedStep).toFixed(2)), speedStep), 0.25, 4), 2);
-			browserColorLog(`Adjusting speed by ${speedStep} to ${newSpeed}. Old speed was ${speed}`, "FgMagenta");
-			await playerContainer.setPlaybackRate(newSpeed);
-			if (video) video.playbackRate = newSpeed;
-			resolve({ newSpeed, oldSpeed: speed });
+			const videoElement = document.querySelector<HTMLVideoElement>("video");
+			if (!videoElement) return;
+			const { playbackRate: currentPlaybackSpeed } = videoElement;
+			const adjustmentAmount = speedStep * scrollDelta;
+			if (currentPlaybackSpeed + adjustmentAmount > 16 || currentPlaybackSpeed + adjustmentAmount < youtubePlayerMinSpeed) return;
+			const speed = round(currentPlaybackSpeed + adjustmentAmount, 2);
+			setPlayerSpeed(speed);
+			resolve({ newSpeed: speed, oldSpeed: currentPlaybackSpeed });
 		})();
 	});
 }

src/i18n/constants.ts

@@ -1,26 +1,26 @@
 export const availableLocales = [
-	"ca-ES",
-	"cs-CZ",
-	"de-DE",
-	"en-GB",
-	"en-US",
-	"es-ES",
-	"fa-IR",
-	"fr-FR",
-	"he-IL",
-	"hi-IN",
-	"it-IT",
-	"ja-JP",
-	"ko-KR",
-	"pl-PL",
-	"pt-BR",
-	"ru-RU",
-	"sv-SE",
-	"tr-TR",
-	"uk-UA",
-	"vi-VN",
-	"zh-CN",
-	"zh-TW"
+  "ca-ES",
+  "cs-CZ",
+  "de-DE",
+  "en-GB",
+  "en-US",
+  "es-ES",
+  "fa-IR",
+  "fr-FR",
+  "he-IL",
+  "hi-IN",
+  "it-IT",
+  "ja-JP",
+  "ko-KR",
+  "pl-PL",
+  "pt-BR",
+  "ru-RU",
+  "sv-SE",
+  "tr-TR",
+  "uk-UA",
+  "vi-VN",
+  "zh-CN",
+  "zh-TW"
 ] as const;
 export const localePercentages: Record<AvailableLocales, number> = {
 	"en-US": 100,

src/types/index.ts

@@ -107,9 +107,9 @@ export const youtubePlayerQualityLevels = [
 export type YoutubePlayerQualityLevel = (typeof youtubePlayerQualityLevels)[number];
 export const PlayerQualityFallbackStrategy = ["higher", "lower"] as const;
 export type PlayerQualityFallbackStrategy = (typeof PlayerQualityFallbackStrategy)[number];
-export const youtubePlayerSpeedRatesExtended = [2.25, 2.5, 2.75, 3, 3.25, 3.75, 4] as const;
-export const youtubePlayerSpeedRates = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, ...youtubePlayerSpeedRatesExtended] as const;
-export const youtubePlaybackSpeedButtonsRates = [0.25, 0.5, 0.75, 1] as const;
+export const youtubePlayerMaxSpeed = 16;
+export const youtubePlayerMinSpeed = 0.07;
+export const youtubePlayerSpeedStep = 0.01;
 export const screenshotTypes = ["file", "clipboard"] as const;
 export type ScreenshotType = (typeof screenshotTypes)[number];
 export const screenshotFormats = ["png", "jpeg", "webp"] as const;

src/utils/constants.ts

@@ -19,7 +19,9 @@ import {
 	screenshotTypes,
 	videoHistoryResumeTypes,
 	volumeBoostModes,
-	youtubePlayerQualityLevels
+	youtubePlayerMinSpeed,
+	youtubePlayerQualityLevels,
+	youtubePlayerSpeedStep
 } from "../types";
 
 export const outputFolderName = "dist";
@@ -187,10 +189,10 @@ export const configurationImportSchema: TypeToPartialZodSchema<
 	osd_display_padding: z.number().optional(),
 	osd_display_position: z.enum(onScreenDisplayPositions).optional(),
 	osd_display_type: z.enum(onScreenDisplayTypes).optional(),
-	playback_buttons_speed: z.number().min(0.25).max(4.0).step(0.25).optional(),
+	playback_buttons_speed: z.number().min(youtubePlayerSpeedStep).max(1.0).step(youtubePlayerSpeedStep).optional(),
 	player_quality: z.enum(youtubePlayerQualityLevels).optional(),
 	player_quality_fallback_strategy: z.enum(PlayerQualityFallbackStrategy).optional(),
-	player_speed: z.number().min(0.25).max(4.0).step(0.25).optional(),
+	player_speed: z.number().min(youtubePlayerMinSpeed).max(16.0).step(youtubePlayerSpeedStep).optional(),
 	playlist_length_get_method: z.enum(playlistLengthGetMethod).optional(),
 	playlist_watch_time_get_method: z.enum(playlistWatchTimeGetMethod).optional(),
 	remembered_volumes: z

src/utils/utilities.ts

@@ -47,8 +47,7 @@ export const removeSpecialCharacters = (value: string) => {
 export const unique = (values: string[]) => [...new Set(values)];
 
 export const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
-
-export const round = (value: number, decimals = 0) => Number(`${Math.round(Number(`${value}e${decimals}`))}e-${decimals}`);
+export const round = (value: number, decimals = 0) => Number(`${Math.round(Number(`${value + Number.EPSILON}e${decimals}`))}e-${decimals}`);
 
 export const toDivisible = (value: number, divider: number): number => Math.ceil(value / divider) * divider;