From 35bcd4f689afb502b13f7a31af78db67000ee657 Mon Sep 17 00:00:00 2001 From: VampireChicken12 Date: Sat, 12 Oct 2024 01:03:13 -0400 Subject: [PATCH] fix: Make speed limit higher #637 --- src/components/Settings/Settings.tsx | 28 +++++------- src/features/playbackSpeedButtons/index.ts | 30 ++++++------- src/features/scrollWheelSpeedControl/index.ts | 4 +- src/features/scrollWheelSpeedControl/utils.ts | 29 +++++------- src/i18n/constants.ts | 44 +++++++++---------- src/types/index.ts | 6 +-- src/utils/constants.ts | 8 ++-- src/utils/utilities.ts | 3 +- 8 files changed, 71 insertions(+), 81 deletions(-) diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx index 59a95b63..ddffecf0 100644 --- a/src/components/Settings/Settings.tsx +++ b/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" /> diff --git a/src/features/playbackSpeedButtons/index.ts b/src/features/playbackSpeedButtons/index.ts index b3ffcfc7..9c6d74c1 100644 --- a/src/features/playbackSpeedButtons/index.ts +++ b/src/features/playbackSpeedButtons/index.ts @@ -1,4 +1,4 @@ -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"; @@ -6,17 +6,17 @@ 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: ButtonName, @@ -46,10 +46,11 @@ export async function updatePlaybackSpeedButtonTooltip 4) return; + if (currentPlaybackSpeed + adjustmentAmount > 16 || currentPlaybackSpeed + adjustmentAmount < youtubePlayerMinSpeed) return; const playerContainer = document.querySelector("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", { diff --git a/src/features/scrollWheelSpeedControl/index.ts b/src/features/scrollWheelSpeedControl/index.ts index f5365ba1..dc764c99 100644 --- a/src/features/scrollWheelSpeedControl/index.ts +++ b/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 } diff --git a/src/features/scrollWheelSpeedControl/utils.ts b/src/features/scrollWheelSpeedControl/utils.ts index eeea217c..ba51d0cb 100644 --- a/src/features/scrollWheelSpeedControl/utils.ts +++ b/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("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 }); })(); }); } diff --git a/src/i18n/constants.ts b/src/i18n/constants.ts index 772eb3d3..b86a717d 100644 --- a/src/i18n/constants.ts +++ b/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 = { "en-US": 100, diff --git a/src/types/index.ts b/src/types/index.ts index 25805377..3fed8918 100644 --- a/src/types/index.ts +++ b/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; diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 23bad81d..5b9c5a5e 100644 --- a/src/utils/constants.ts +++ b/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 diff --git a/src/utils/utilities.ts b/src/utils/utilities.ts index a20e7884..545a28e1 100644 --- a/src/utils/utilities.ts +++ b/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;