Skip to content

Commit

Permalink
fix(playback speed buttons): label not updating when player speed cha…
Browse files Browse the repository at this point in the history 
…nges
  • Loading branch information
@VampireChicken12
VampireChicken12 committed Jul 4, 2024
1 parent 8f1a026 commit a88d29d
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 26 deletions.
75 changes: 50 additions & 25 deletions src/features/playbackSpeedButtons/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,15 @@ import { createTooltip, isShortsPage, isWatchPage, waitForSpecificMessage } from

import type { AddButtonFunction, RemoveButtonFunction } from "../index";
let currentPlaybackSpeed = 1;

async function updateTooltip<ButtonName extends "decreasePlaybackSpeedButton" | "increasePlaybackSpeedButton">(
export function calculatePlaybackButtonSpeed(speed: number, playbackSpeedPerClick: number, direction: "decrease" | "increase") {
const calculatedSpeed =
speed == 4 && direction == "increase" ? 4
: speed == 0.25 && direction == "decrease" ? 0.25
: direction == "decrease" ? speed - playbackSpeedPerClick
: speed + playbackSpeedPerClick;
return calculatedSpeed;
}
export async function updatePlaybackSpeedButtonTooltip<ButtonName extends "decreasePlaybackSpeedButton" | "increasePlaybackSpeedButton">(
buttonName: ButtonName,
speed: number
) {
Expand All @@ -22,8 +29,7 @@ async function updateTooltip<ButtonName extends "decreasePlaybackSpeedButton" |
button_placements: {
decreasePlaybackSpeedButton: decreasePlaybackSpeedButtonPlacement,
increasePlaybackSpeedButton: increasePlaybackSpeedButtonPlacement
},
playback_buttons_speed: playbackSpeedPerClick
}
}
}
} = optionsData;
Expand All @@ -43,25 +49,22 @@ async function updateTooltip<ButtonName extends "decreasePlaybackSpeedButton" |
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
: `pages.content.features.playbackSpeedButtons.buttons.${buttonName as "decreasePlaybackSpeedButton" | "increasePlaybackSpeedButton"}.label`,
{
SPEED:
speed == 4 || speed == 0.25 ? String(speed)
: buttonName == "decreasePlaybackSpeedButton" ? String(speed - playbackSpeedPerClick)
: String(speed + playbackSpeedPerClick)
SPEED: speed
}
);
update();
}

function playbackSpeedButtonClickListener(amount: number): () => void {
function playbackSpeedButtonClickListener(speedPerClick: number, direction: "decrease" | "increase"): () => void {
return () => {
void (async () => {
const videoElement = document.querySelector<HTMLVideoElement>("video");
if (!videoElement) return;
const adjustmentAmount = direction === "increase" ? speedPerClick : -speedPerClick;
try {
const { playbackRate: playbackRate } = videoElement;
currentPlaybackSpeed = playbackRate;
if (currentPlaybackSpeed + amount <= 0) return;
if (currentPlaybackSpeed + amount > 4) return;
({ playbackRate: currentPlaybackSpeed } = videoElement);
if (currentPlaybackSpeed + adjustmentAmount <= 0) return;
if (currentPlaybackSpeed + adjustmentAmount > 4) return;
const playerContainer =
isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
: isShortsPage() ? document.querySelector<YouTubePlayerDiv>("div#shorts-player")
Expand All @@ -87,13 +90,19 @@ function playbackSpeedButtonClickListener(amount: number): () => void {
{
max: 4,
type: "speed",
value: currentPlaybackSpeed + amount
value: currentPlaybackSpeed + adjustmentAmount
}
);
const speed = currentPlaybackSpeed + amount;
const speed = currentPlaybackSpeed + adjustmentAmount;
await setPlayerSpeed(speed);
await updateTooltip("increasePlaybackSpeedButton", speed);
await updateTooltip("decreasePlaybackSpeedButton", speed);
await updatePlaybackSpeedButtonTooltip(
"increasePlaybackSpeedButton",
calculatePlaybackButtonSpeed(currentPlaybackSpeed, speedPerClick, "increase")
);
await updatePlaybackSpeedButtonTooltip(
"decreasePlaybackSpeedButton",
calculatePlaybackButtonSpeed(currentPlaybackSpeed, speedPerClick, "decrease")
);
} catch (error) {
console.error(error);
}
Expand All @@ -113,14 +122,22 @@ export const addIncreasePlaybackSpeedButton: AddButtonFunction = async () => {
}
} = optionsData;
if (!enable_playback_speed_buttons) return;
const videoElement = document.querySelector<HTMLVideoElement>("video");
if (!videoElement) return;
({ playbackRate: currentPlaybackSpeed } = videoElement);
await addFeatureButton(
"increasePlaybackSpeedButton",
increasePlaybackSpeedButtonPlacement,
window.i18nextInstance.t("pages.content.features.playbackSpeedButtons.buttons.increasePlaybackSpeedButton.label", {
SPEED: currentPlaybackSpeed + playbackSpeedPerClick
}),
window.i18nextInstance.t(
currentPlaybackSpeed == 4 ?
`pages.content.features.playbackSpeedButtons.increaseLimit`
: "pages.content.features.playbackSpeedButtons.buttons.increasePlaybackSpeedButton.label",
{
SPEED: calculatePlaybackButtonSpeed(currentPlaybackSpeed, playbackSpeedPerClick, "increase")
}
),
getFeatureIcon("increasePlaybackSpeedButton", increasePlaybackSpeedButtonPlacement),
playbackSpeedButtonClickListener(playbackSpeedPerClick),
playbackSpeedButtonClickListener(playbackSpeedPerClick, "increase"),
false
);
};
Expand All @@ -137,14 +154,22 @@ export const addDecreasePlaybackSpeedButton: AddButtonFunction = async () => {
}
} = optionsData;
if (!enable_playback_speed_buttons) return;
const videoElement = document.querySelector<HTMLVideoElement>("video");
if (!videoElement) return;
({ playbackRate: currentPlaybackSpeed } = videoElement);
await addFeatureButton(
"decreasePlaybackSpeedButton",
decreasePlaybackSpeedButtonPlacement,
window.i18nextInstance.t("pages.content.features.playbackSpeedButtons.buttons.decreasePlaybackSpeedButton.label", {
SPEED: currentPlaybackSpeed - playbackSpeedPerClick
}),
window.i18nextInstance.t(
currentPlaybackSpeed == 0.25 ?
`pages.content.features.playbackSpeedButtons.decreaseLimit`
: "pages.content.features.playbackSpeedButtons.buttons.decreasePlaybackSpeedButton.label",
{
SPEED: calculatePlaybackButtonSpeed(currentPlaybackSpeed, playbackSpeedPerClick, "decrease")
}
),
getFeatureIcon("decreasePlaybackSpeedButton", decreasePlaybackSpeedButtonPlacement),
playbackSpeedButtonClickListener(-playbackSpeedPerClick),
playbackSpeedButtonClickListener(-playbackSpeedPerClick, "decrease"),
false
);
};
Expand Down
28 changes: 27 additions & 1 deletion src/pages/embedded/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,10 @@ import { disablePauseBackgroundPlayers, enablePauseBackgroundPlayers } from "@/s
import {
addDecreasePlaybackSpeedButton,
addIncreasePlaybackSpeedButton,
calculatePlaybackButtonSpeed,
removeDecreasePlaybackSpeedButton,
removeIncreasePlaybackSpeedButton
removeIncreasePlaybackSpeedButton,
updatePlaybackSpeedButtonTooltip
} from "@/src/features/playbackSpeedButtons";
import setPlayerQuality from "@/src/features/playerQuality";
import { restorePlayerSpeed, setPlayerSpeed, setupPlaybackSpeedChangeListener } from "@/src/features/playerSpeed";
Expand Down Expand Up @@ -326,10 +328,34 @@ window.addEventListener("DOMContentLoaded", function () {
const {
data: { enableForcedPlaybackSpeed, playerSpeed }
} = message;
const {
data: {
options: { playback_buttons_speed: playbackSpeedPerClick }
}
} = await waitForSpecificMessage("options", "request_data", "content");
if (enableForcedPlaybackSpeed && playerSpeed) {
await updatePlaybackSpeedButtonTooltip(
"increasePlaybackSpeedButton",
calculatePlaybackButtonSpeed(playerSpeed, playbackSpeedPerClick, "increase")
);
await updatePlaybackSpeedButtonTooltip(
"decreasePlaybackSpeedButton",
calculatePlaybackButtonSpeed(playerSpeed, playbackSpeedPerClick, "decrease")
);
await setPlayerSpeed(Number(playerSpeed));
} else if (!enableForcedPlaybackSpeed) {
restorePlayerSpeed();
const videoElement = document.querySelector<HTMLVideoElement>("video");
if (!videoElement) return;
const { playbackRate: currentSpeed } = videoElement;
await updatePlaybackSpeedButtonTooltip(
"increasePlaybackSpeedButton",
calculatePlaybackButtonSpeed(currentSpeed, playbackSpeedPerClick, "increase")
);
await updatePlaybackSpeedButtonTooltip(
"decreasePlaybackSpeedButton",
calculatePlaybackButtonSpeed(currentSpeed, playbackSpeedPerClick, "decrease")
);
}
break;
}
Expand Down

0 comments on commit a88d29d

Please sign in to comment.