) => setFilter(e.target.value)}
placeholder={t("settings.sections.settingSearch.placeholder")}
ref={inputRef}
diff --git a/src/components/Settings/components/SettingSection.tsx b/src/components/Settings/components/SettingSection.tsx
index d0fd0daa..0458e29f 100644
--- a/src/components/Settings/components/SettingSection.tsx
+++ b/src/components/Settings/components/SettingSection.tsx
@@ -25,11 +25,9 @@ export default function SettingSection({ children, className = "", title: sectio
(child.props.title !== undefined && child.props.title.toLowerCase().includes(filter.toLowerCase()))
);
}).length > 0;
- return (
- shouldSectionBeVisible && (
+ return shouldSectionBeVisible ?
{children}
- )
- );
+ : null;
}
diff --git a/src/components/Settings/components/SettingTitle.tsx b/src/components/Settings/components/SettingTitle.tsx
index 58ac1d0c..77422c6f 100644
--- a/src/components/Settings/components/SettingTitle.tsx
+++ b/src/components/Settings/components/SettingTitle.tsx
@@ -5,5 +5,5 @@ export default function SettingTitle() {
const { filter } = useSettingsFilter();
const { title } = useSectionTitle();
const shouldSettingTitleBeVisible = filter === "" ? true : title.toLowerCase().includes(filter.toLowerCase());
- return shouldSettingTitleBeVisible &&
;
+ return shouldSettingTitleBeVisible ?
: null;
}
diff --git a/src/features/automaticTheaterMode/index.ts b/src/features/automaticTheaterMode/index.ts
index 7efe2bcc..d110930a 100644
--- a/src/features/automaticTheaterMode/index.ts
+++ b/src/features/automaticTheaterMode/index.ts
@@ -1,20 +1,18 @@
import type { YouTubePlayerDiv } from "@/src/types";
-import { isWatchPage, waitForSpecificMessage } from "@/src/utils/utilities";
+import { isLivePage, isWatchPage, waitForSpecificMessage } from "@/src/utils/utilities";
export async function enableAutomaticTheaterMode() {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_automatic_theater_mode }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
// If automatic theater mode isn't enabled return
if (!enable_automatic_theater_mode) return;
- if (!isWatchPage()) return;
// Get the player element
- const playerContainer = isWatchPage() ? document.querySelector
("div#movie_player") : null;
+ const playerContainer = isWatchPage() || isLivePage() ? document.querySelector("div#movie_player") : null;
// If player element is not available, return
if (!playerContainer) return;
const { width } = await playerContainer.getSize();
diff --git a/src/features/automaticallyDisableClosedCaptions/index.ts b/src/features/automaticallyDisableClosedCaptions/index.ts
new file mode 100644
index 00000000..0559ae94
--- /dev/null
+++ b/src/features/automaticallyDisableClosedCaptions/index.ts
@@ -0,0 +1,31 @@
+import type { YouTubePlayerDiv } from "@/src/types";
+import { isLivePage, isWatchPage, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
+let captionsWhereEnabled = false;
+export async function enableAutomaticallyDisableClosedCaptions() {
+ const {
+ data: {
+ options: { enable_automatically_disable_closed_captions }
+ }
+ } = await waitForSpecificMessage("options", "request_data", "content");
+ if (!enable_automatically_disable_closed_captions) return;
+ await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
+ // Get the player element
+ const playerContainer = isWatchPage() || isLivePage() ? document.querySelector("div#movie_player") : null;
+ const subtitlesButton = document.querySelector("button.ytp-subtitles-button");
+ // If player element is not available, return
+ if (!playerContainer || !subtitlesButton) return;
+ captionsWhereEnabled = subtitlesButton.getAttribute("aria-pressed") === "true";
+ // Disable captions
+ playerContainer.unloadModule("captions");
+}
+export async function disableAutomaticallyDisableClosedCaptions() {
+ await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
+ // Get the player element
+ const playerContainer = isWatchPage() || isLivePage() ? document.querySelector("div#movie_player") : null;
+ // If player element is not available, return
+ if (!playerContainer) return;
+ // If captions weren't enabled, return
+ if (!captionsWhereEnabled) return;
+ // Re-enable captions
+ playerContainer.loadModule("captions");
+}
diff --git a/src/features/buttonPlacement/index.ts b/src/features/buttonPlacement/index.ts
index 97627ba4..6b845b65 100644
--- a/src/features/buttonPlacement/index.ts
+++ b/src/features/buttonPlacement/index.ts
@@ -36,14 +36,13 @@ export async function removeFeatureButton(buttonNam
const featureName = findKeyByValue(buttonName as MultiButtonNames) ?? (buttonName as SingleButtonFeatureNames);
if (placement === undefined) {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
({
data: {
options: {
button_placements: { [buttonName]: placement }
}
}
- } = optionsData);
+ } = await waitForSpecificMessage("options", "request_data", "content"));
}
switch (placement) {
case "feature_menu": {
diff --git a/src/features/copyTimestampUrlButton/index.ts b/src/features/copyTimestampUrlButton/index.ts
new file mode 100644
index 00000000..2e7b447b
--- /dev/null
+++ b/src/features/copyTimestampUrlButton/index.ts
@@ -0,0 +1,54 @@
+import type { AddButtonFunction, RemoveButtonFunction } from "@/src/features";
+
+import { addFeatureButton, removeFeatureButton } from "@/src/features/buttonPlacement";
+import { getFeatureButton } from "@/src/features/buttonPlacement/utils";
+import { getFeatureIcon } from "@/src/icons";
+import eventManager from "@/src/utils/EventManager";
+import { createTooltip, waitForSpecificMessage } from "@/src/utils/utilities";
+
+export const addCopyTimestampUrlButton: AddButtonFunction = async () => {
+ const {
+ data: {
+ options: {
+ button_placements: { copyTimestampUrlButton: copyTimestampUrlButtonPlacement },
+ enable_copy_timestamp_url_button: enableCopyTimestampUrlButton
+ }
+ }
+ } = await waitForSpecificMessage("options", "request_data", "content");
+ if (!enableCopyTimestampUrlButton) return;
+ function copyTimestampUrlButtonClickListener() {
+ const videoElement = document.querySelector("video");
+ if (!videoElement) return;
+ const videoId = new URLSearchParams(window.location.search).get("v");
+ const timestampUrl = `https://youtu.be/${videoId}?t=${videoElement.currentTime.toFixed()}`;
+ void navigator.clipboard.writeText(timestampUrl);
+ const button = getFeatureButton("copyTimestampUrlButton");
+ if (!button) return;
+ const { remove, update } = createTooltip({
+ direction: copyTimestampUrlButtonPlacement === "below_player" ? "down" : "up",
+ element: button,
+ featureName: "copyTimestampUrlButton",
+ id: "yte-feature-copyTimestampUrlButton-tooltip"
+ });
+ button.dataset.title = window.i18nextInstance.t("pages.content.features.copyTimestampUrlButton.button.copied");
+ update();
+ setTimeout(() => {
+ remove();
+ button.dataset.title = window.i18nextInstance.t("pages.content.features.copyTimestampUrlButton.button.label");
+ update();
+ }, 1000);
+ }
+ await addFeatureButton(
+ "copyTimestampUrlButton",
+ copyTimestampUrlButtonPlacement,
+ window.i18nextInstance.t("pages.content.features.copyTimestampUrlButton.button.label"),
+ getFeatureIcon("copyTimestampUrlButton", copyTimestampUrlButtonPlacement),
+ copyTimestampUrlButtonClickListener,
+ false
+ );
+};
+
+export const removeCopyTimestampUrlButton: RemoveButtonFunction = async (placement) => {
+ await removeFeatureButton("copyTimestampUrlButton", placement);
+ eventManager.removeEventListeners("copyTimestampUrlButton");
+};
diff --git a/src/features/customCSS/index.ts b/src/features/customCSS/index.ts
index c43f1eef..092d7ed3 100644
--- a/src/features/customCSS/index.ts
+++ b/src/features/customCSS/index.ts
@@ -4,12 +4,11 @@ import { createCustomCSSElement, customCSSExists, updateCustomCSS } from "./util
export const customCssID = "yte-custom-css";
export async function enableCustomCSS() {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { custom_css_code, enable_custom_css }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
// Check if custom CSS is enabled
if (!enable_custom_css) return;
if (customCSSExists()) {
diff --git a/src/features/deepDarkCSS/index.ts b/src/features/deepDarkCSS/index.ts
index 118c5320..0980f72f 100644
--- a/src/features/deepDarkCSS/index.ts
+++ b/src/features/deepDarkCSS/index.ts
@@ -5,12 +5,11 @@ import { createDeepDarkCSSElement, deepDarkCSSExists, getDeepDarkCustomThemeStyl
export const deepDarkCssID = "yte-deep-dark-css";
export async function enableDeepDarkCSS() {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { deep_dark_custom_theme_colors, deep_dark_preset, enable_deep_dark_theme }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
// Check if deep dark theme is enabled
if (!enable_deep_dark_theme) return;
if (deepDarkCSSExists()) {
diff --git a/src/features/featureMenu/index.ts b/src/features/featureMenu/index.ts
index fc3db3e1..054bac3e 100644
--- a/src/features/featureMenu/index.ts
+++ b/src/features/featureMenu/index.ts
@@ -66,12 +66,11 @@ async function createFeatureMenuButton() {
settingsButton.insertAdjacentElement("beforebegin", featureMenuButton);
playerContainer.insertAdjacentElement("afterbegin", featureMenu);
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { feature_menu_open_type: featureMenuOpenType }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
await waitForAllElements(["#yte-feature-menu", "#yte-feature-menu-button"]);
setupFeatureMenuEventListeners(featureMenuOpenType);
}
@@ -100,13 +99,11 @@ export async function enableFeatureMenu() {
}
function adjustAdsContainerStyles(featureMenuOpen: boolean) {
const adsContainer = document.querySelector("div.video-ads.ytp-ad-module");
- if (adsContainer) {
- const adsSpan = adsContainer.querySelector("span.ytp-ad-preview-container");
- if (adsSpan) {
- adsSpan.style.opacity = featureMenuOpen ? "0.4" : "";
- adsSpan.style.zIndex = featureMenuOpen ? "36" : "";
- }
- }
+ if (!adsContainer) return;
+ const adsSpan = adsContainer.querySelector("span.ytp-ad-preview-container");
+ if (!adsSpan) return;
+ adsSpan.style.opacity = featureMenuOpen ? "0.4" : "";
+ adsSpan.style.zIndex = featureMenuOpen ? "36" : "";
}
export function setupFeatureMenuEventListeners(featureMenuOpenType: FeatureMenuOpenType) {
eventManager.removeEventListeners("featureMenu");
@@ -152,9 +149,8 @@ export function setupFeatureMenuEventListeners(featureMenuOpenType: FeatureMenuO
if (!featureMenuButton) return;
if (event.target === featureMenuButton) return;
if (event.target === featureMenu) return;
- if (!featureMenu.contains(event.target as Node)) {
- hideFeatureMenu();
- }
+ if (featureMenu.contains(event.target as Node)) return;
+ hideFeatureMenu();
};
switch (featureMenuOpenType) {
@@ -165,11 +161,8 @@ export function setupFeatureMenuEventListeners(featureMenuOpenType: FeatureMenuO
"click",
() => {
const featureMenuVisible = featureMenu.style.display === "block";
- if (featureMenuVisible) {
- hideFeatureMenu();
- } else {
- showFeatureMenu();
- }
+ if (featureMenuVisible) return hideFeatureMenu();
+ showFeatureMenu();
},
"featureMenu"
);
@@ -192,10 +185,9 @@ export function setupFeatureMenuEventListeners(featureMenuOpenType: FeatureMenuO
featureMenuButton,
"mouseleave",
(event) => {
- if (![featureMenu, featureMenuButton].includes(event.target as HTMLButtonElement)) {
- removeFeatureMenuTooltip();
- hideFeatureMenu();
- }
+ if ([featureMenu, featureMenuButton].includes(event.target as HTMLButtonElement)) return;
+ removeFeatureMenuTooltip();
+ hideFeatureMenu();
},
"featureMenu"
);
@@ -223,18 +215,15 @@ export function setupFeatureMenuEventListeners(featureMenuOpenType: FeatureMenuO
}
function handleMutation(mutations: MutationRecord[]) {
mutations.forEach((mutation) => {
- if (mutation.type === "childList") {
- const addedNodes = Array.from(mutation.addedNodes);
- const isAdsElementAdded = addedNodes.some(
- (node) => (node as HTMLDivElement).classList?.contains("video-ads") && (node as HTMLDivElement).classList?.contains("ytp-ad-module")
- );
- if (isAdsElementAdded) {
- const featureMenu = document.querySelector("#yte-feature-menu");
- if (featureMenu) {
- adjustAdsContainerStyles(featureMenu.style.display === "block");
- }
- }
- }
+ if (mutation.type !== "childList") return;
+ const addedNodes = Array.from(mutation.addedNodes);
+ const isAdsElementAdded = addedNodes.some(
+ (node) => (node as HTMLDivElement).classList?.contains("video-ads") && (node as HTMLDivElement).classList?.contains("ytp-ad-module")
+ );
+ if (!isAdsElementAdded) return;
+ const featureMenu = document.querySelector("#yte-feature-menu");
+ if (!featureMenu) return;
+ adjustAdsContainerStyles(featureMenu.style.display === "block");
});
}
const observer = new MutationObserver(handleMutation);
diff --git a/src/features/featureMenu/utils.ts b/src/features/featureMenu/utils.ts
index f3cec0be..fe4a0e26 100644
--- a/src/features/featureMenu/utils.ts
+++ b/src/features/featureMenu/utils.ts
@@ -44,14 +44,11 @@ export async function addFeatureItemToMenu("#yte-feature-menu");
if (!featureMenu) return;
-
// Check if the feature item already exists in the menu
const featureExistsInMenu = featureMenu.querySelector(`#${getFeatureIds(buttonName).featureMenuItemId}`);
if (featureExistsInMenu) {
@@ -61,26 +58,21 @@ export async function addFeatureItemToMenu featureMenuClickListener(menuItem, listener, isToggle), featureName);
return;
}
-
// Get the feature menu panel
const featureMenuPanel = document.querySelector("#yte-panel-menu");
if (!featureMenuPanel) return;
-
// Get the IDs for the feature item
const { featureMenuItemIconId, featureMenuItemId, featureMenuItemLabelId } = getFeatureIds(buttonName);
-
// Create a menu item element
const menuItem = document.createElement("div");
menuItem.classList.add("ytp-menuitem");
menuItem.id = featureMenuItemId;
-
// Create the menu item icon element
const menuItemIcon = document.createElement("div");
menuItemIcon.id = featureMenuItemIconId;
menuItemIcon.classList.add("ytp-menuitem-icon");
menuItemIcon.appendChild(icon);
menuItem.appendChild(menuItemIcon);
-
// Create the menu item label element
const menuItemLabel = document.createElement("div");
menuItemLabel.classList.add("ytp-menuitem-label");
@@ -88,7 +80,6 @@ export async function addFeatureItemToMenu featureMenuClickListener(menuItem, listener, isToggle), featureName);
menuItem.appendChild(menuItemLabel);
-
// If it's a toggle item, create the toggle elements
if (isToggle) {
const menuItemContent = document.createElement("div");
@@ -103,10 +94,8 @@ export async function addFeatureItemToMenu("#yte-panel-menu");
if (!featureMenuPanel) return;
-
// Find the specific feature menu item
const featureMenuItem = featureMenuPanel.querySelector(`#${featureMenuItemId}`);
if (!featureMenuItem) return;
-
// Remove the feature menu item
featureMenuItem.remove();
-
// Check if there are any items left in the menu
if (featureMenuPanel.childElementCount === 0) {
// If no items are left, hide the menu
featureMenu.style.display = "none";
-
// Find the feature menu button
const featureMenuButton = document.querySelector("#yte-feature-menu-button");
if (!featureMenuButton) return;
-
// Hide the feature menu button since the menu is empty
featureMenuButton.style.display = "none";
}
-
// Adjust the height and width of the feature menu panel
featureMenu.style.height = `${40 * featureMenuPanel.childElementCount + 16}px`;
}
diff --git a/src/features/forwardRewindButtons/index.ts b/src/features/forwardRewindButtons/index.ts
index 6a0089f7..894cb510 100644
--- a/src/features/forwardRewindButtons/index.ts
+++ b/src/features/forwardRewindButtons/index.ts
@@ -9,7 +9,7 @@ import { Measure, seconds } from "safe-units";
import type { AddButtonFunction, RemoveButtonFunction } from "../index";
const speedButtonListener = async (direction: "backward" | "forward", timeAdjustment: number) => {
// Get the player element
- const playerContainer = isWatchPage() ? document.querySelector("div#movie_player") : null;
+ const playerContainer = document.querySelector("div#movie_player");
// If player element is not available, return
if (!playerContainer) return;
if (!playerContainer.seekTo) return;
@@ -27,8 +27,9 @@ export const addForwardButton: AddButtonFunction = async () => {
}
} = await waitForSpecificMessage("options", "request_data", "content");
if (!enable_forward_rewind_buttons) return;
+ if (!isWatchPage()) return;
// Get the player element
- const playerContainer = isWatchPage() ? document.querySelector("div#movie_player") : null;
+ const playerContainer = document.querySelector("div#movie_player");
// If player element is not available, return
if (!playerContainer) return;
const playerVideoData = await playerContainer.getVideoData();
@@ -56,8 +57,9 @@ export const addRewindButton: AddButtonFunction = async () => {
}
} = await waitForSpecificMessage("options", "request_data", "content");
if (!enable_forward_rewind_buttons) return;
+ if (!isWatchPage()) return;
// Get the player element
- const playerContainer = isWatchPage() ? document.querySelector("div#movie_player") : null;
+ const playerContainer = document.querySelector("div#movie_player");
// If player element is not available, return
if (!playerContainer) return;
const playerVideoData = await playerContainer.getVideoData();
diff --git a/src/features/hideEndScreenCards/index.ts b/src/features/hideEndScreenCards/index.ts
index 5cc9964f..560d0ae0 100644
--- a/src/features/hideEndScreenCards/index.ts
+++ b/src/features/hideEndScreenCards/index.ts
@@ -1,11 +1,11 @@
import type { AddButtonFunction, RemoveButtonFunction } from "@/src/features";
-import type { ButtonPlacement } from "@/src/types";
+import type { ButtonPlacement, YouTubePlayerDiv } from "@/src/types";
import { addFeatureButton, removeFeatureButton } from "@/src/features/buttonPlacement";
import { updateFeatureButtonTitle } from "@/src/features/buttonPlacement/utils";
import { getFeatureIcon } from "@/src/icons";
import eventManager from "@/src/utils/EventManager";
-import { modifyElementsClassList, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
+import { isWatchPage, modifyElementsClassList, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
import "./index.css";
export async function enableHideEndScreenCards() {
@@ -15,11 +15,13 @@ export async function enableHideEndScreenCards() {
}
} = await waitForSpecificMessage("options", "request_data", "content");
if (!enableHideEndScreenCards) return;
+ if (!isWatchPage()) return;
await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
hideEndScreenCards();
}
export async function disableHideEndScreenCards() {
+ if (!isWatchPage()) return;
await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
showEndScreenCards();
}
@@ -33,7 +35,13 @@ export const addHideEndScreenCardsButton: AddButtonFunction = async () => {
}
} = await waitForSpecificMessage("options", "request_data", "content");
if (!enableHideEndScreenCardsButton) return;
+ if (!isWatchPage()) return;
await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
+ // Get the player container element
+ const playerContainer = document.querySelector("div#movie_player");
+ if (!playerContainer) return;
+ const videoData = await playerContainer.getVideoData();
+ if (videoData.isLive) return;
const endScreenCardsAreHidden = isEndScreenCardsHidden();
const handleButtonClick = (placement: ButtonPlacement, checked?: boolean) => {
if (placement === "feature_menu") {
@@ -63,6 +71,7 @@ export const addHideEndScreenCardsButton: AddButtonFunction = async () => {
);
};
export const removeHideEndScreenCardsButton: RemoveButtonFunction = async (placement) => {
+ if (!isWatchPage()) return;
await removeFeatureButton("hideEndScreenCardsButton", placement);
eventManager.removeEventListeners("hideEndScreenCardsButton");
};
diff --git a/src/features/hideOfficialArtistVideosFromHomePage/index.css b/src/features/hideOfficialArtistVideosFromHomePage/index.css
new file mode 100644
index 00000000..d48d9764
--- /dev/null
+++ b/src/features/hideOfficialArtistVideosFromHomePage/index.css
@@ -0,0 +1,3 @@
+.yte-hide-official-artist-videos-from-home-page {
+ display: none !important;
+}
diff --git a/src/features/hideOfficialArtistVideosFromHomePage/index.ts b/src/features/hideOfficialArtistVideosFromHomePage/index.ts
new file mode 100644
index 00000000..5aa2973a
--- /dev/null
+++ b/src/features/hideOfficialArtistVideosFromHomePage/index.ts
@@ -0,0 +1,29 @@
+import type { Nullable } from "@/src/types";
+import "./index.css";
+import { waitForSpecificMessage } from "@/src/utils/utilities";
+import {
+ hideOfficialArtistVideosFromHomePage,
+ observeOfficialArtistVideosFromHomePage,
+ showOfficialArtistVideosFromHomePage
+} from "@/src/features/hideOfficialArtistVideosFromHomePage/utils";
+let officialArtistVideosObserver: Nullable = null;
+export async function enableHideOfficialArtistVideosFromHomePage() {
+ // Wait for the "options" message from the content script
+ const {
+ data: {
+ options: { enable_hide_official_artist_videos_from_home_page: enableHideOfficialArtistVideosFromHomePage }
+ }
+ } = await waitForSpecificMessage("options", "request_data", "content");
+ if (!enableHideOfficialArtistVideosFromHomePage) return;
+ hideOfficialArtistVideosFromHomePage();
+ if (officialArtistVideosObserver) officialArtistVideosObserver.disconnect();
+ officialArtistVideosObserver = observeOfficialArtistVideosFromHomePage();
+}
+
+export function disableHideOfficialArtistVideosFromHomePage() {
+ showOfficialArtistVideosFromHomePage();
+ if (officialArtistVideosObserver) {
+ officialArtistVideosObserver.disconnect();
+ officialArtistVideosObserver = null;
+ }
+}
diff --git a/src/features/hideOfficialArtistVideosFromHomePage/utils.ts b/src/features/hideOfficialArtistVideosFromHomePage/utils.ts
new file mode 100644
index 00000000..1285962d
--- /dev/null
+++ b/src/features/hideOfficialArtistVideosFromHomePage/utils.ts
@@ -0,0 +1,27 @@
+import { modifyElementsClassList } from "@/src/utils/utilities";
+
+export function observeOfficialArtistVideosFromHomePage() {
+ const observer = new MutationObserver(() => {
+ hideOfficialArtistVideosFromHomePage();
+ });
+ observer.observe(document.body, { childList: true, subtree: true });
+ return observer;
+}
+export function hideOfficialArtistVideosFromHomePage() {
+ const officialArtistVideos = document.querySelectorAll(
+ "ytd-rich-item-renderer:has(#byline-container #channel-name .badge-style-type-verified-artist)"
+ );
+ modifyElementsClassList(
+ "add",
+ Array.from(officialArtistVideos).map((element) => ({ className: "yte-hide-official-artist-videos-from-home-page", element }))
+ );
+}
+export function showOfficialArtistVideosFromHomePage() {
+ const officialArtistVideos = document.querySelectorAll(
+ "ytd-rich-item-renderer:has(#byline-container #channel-name .badge-style-type-verified-artist)"
+ );
+ modifyElementsClassList(
+ "remove",
+ Array.from(officialArtistVideos).map((element) => ({ className: "yte-hide-official-artist-videos-from-home-page", element }))
+ );
+}
diff --git a/src/features/hidePaidPromotionBanner/index.css b/src/features/hidePaidPromotionBanner/index.css
index 4d2753fe..56881169 100644
--- a/src/features/hidePaidPromotionBanner/index.css
+++ b/src/features/hidePaidPromotionBanner/index.css
@@ -1,3 +1,3 @@
.yte-hide-paid-promotion-banner {
display: none !important;
-}
\ No newline at end of file
+}
diff --git a/src/features/hideScrollBar/index.ts b/src/features/hideScrollBar/index.ts
index eecb0aea..d0d18e20 100644
--- a/src/features/hideScrollBar/index.ts
+++ b/src/features/hideScrollBar/index.ts
@@ -4,12 +4,11 @@ import { hideScrollBar } from "./utils";
export async function enableHideScrollBar() {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_hide_scrollbar }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
// If the hide scroll bar option is disabled, return
if (!enable_hide_scrollbar) return;
hideScrollBar();
diff --git a/src/features/hideScrollBar/utils.ts b/src/features/hideScrollBar/utils.ts
index fcc40d7f..eb71cea8 100644
--- a/src/features/hideScrollBar/utils.ts
+++ b/src/features/hideScrollBar/utils.ts
@@ -1,6 +1,6 @@
export function hideScrollBar() {
const style = document.createElement("style");
- style.innerHTML = `
+ style.textContent = `
::-webkit-scrollbar {
width: 0px;
height: 0px;
@@ -13,8 +13,9 @@ export function hideScrollBar() {
document.head.appendChild(style);
}
export function showScrollBar() {
- const style = document.getElementById("yte-hide-scroll-bar");
- if (style) {
+ let style = document.getElementById("yte-hide-scroll-bar");
+ while (style) {
style.remove();
+ style = document.getElementById("yte-hide-scroll-bar");
}
}
diff --git a/src/features/hideShorts/index.ts b/src/features/hideShorts/index.ts
index 49d6f035..c558c701 100644
--- a/src/features/hideShorts/index.ts
+++ b/src/features/hideShorts/index.ts
@@ -4,12 +4,11 @@ import { waitForSpecificMessage } from "@/src/utils/utilities";
let shortsObserver: Nullable = null;
export async function enableHideShorts() {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_hide_shorts }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
// If the hide shorts option is disabled, return
if (!enable_hide_shorts) return;
hideShorts();
diff --git a/src/features/hideTranslateComment/utils.ts b/src/features/hideTranslateComment/utils.ts
index c8b93640..40cb5745 100644
--- a/src/features/hideTranslateComment/utils.ts
+++ b/src/features/hideTranslateComment/utils.ts
@@ -11,10 +11,11 @@ export type EngagementPanelVisibility = (typeof engagementPanelVisibility)[numbe
export function observeTranslateComment(): MutationObserver {
const observer = new MutationObserver((mutationList) => {
mutationList
+ .filter((mutation) => mutation.type === "childList")
.filter(
(mutation) =>
- mutation.type !== "childList" ||
- !mutation.addedNodes.length ||
+ (mutation.target instanceof Element &&
+ mutation.target.matches("ytd-comment-thread-renderer #replies ytd-comment-replies-renderer #expander #contents")) ||
Array.from(mutation.addedNodes).some(
(addedNode) =>
addedNode instanceof Element &&
diff --git a/src/features/index.ts b/src/features/index.ts
index 7e39448d..64a34664 100644
--- a/src/features/index.ts
+++ b/src/features/index.ts
@@ -1,5 +1,6 @@
import type { AllButtonNames, ButtonPlacement } from "@/src/types";
+import { addCopyTimestampUrlButton, removeCopyTimestampUrlButton } from "@/src/features/copyTimestampUrlButton";
import { addForwardButton, addRewindButton, removeForwardButton, removeRewindButton } from "@/src/features/forwardRewindButtons";
import { addHideEndScreenCardsButton, removeHideEndScreenCardsButton } from "@/src/features/hideEndScreenCards";
import { addLoopButton, removeLoopButton } from "@/src/features/loopButton";
@@ -20,6 +21,10 @@ export type FeatureFuncRecord = {
};
export const featureButtonFunctions = {
+ copyTimestampUrlButton: {
+ add: addCopyTimestampUrlButton,
+ remove: removeCopyTimestampUrlButton
+ },
decreasePlaybackSpeedButton: {
add: addDecreasePlaybackSpeedButton,
remove: removeDecreasePlaybackSpeedButton
diff --git a/src/features/loopButton/index.ts b/src/features/loopButton/index.ts
index 05377dde..9a03efe3 100644
--- a/src/features/loopButton/index.ts
+++ b/src/features/loopButton/index.ts
@@ -13,7 +13,6 @@ import { loopButtonClickListener } from "./utils";
export const addLoopButton: AddButtonFunction = async () => {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: {
@@ -21,7 +20,7 @@ export const addLoopButton: AddButtonFunction = async () => {
enable_loop_button
}
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
// If the loop button option is disabled, return
if (!enable_loop_button) return;
// Get the volume control element
@@ -30,7 +29,6 @@ export const addLoopButton: AddButtonFunction = async () => {
if (!volumeControl) return;
const videoElement = document.querySelector("video.html5-main-video");
if (!videoElement) return;
-
await addFeatureButton(
"loopButton",
loopButtonPlacement,
diff --git a/src/features/maximizePlayerButton/index.ts b/src/features/maximizePlayerButton/index.ts
index e85cb33d..df1356a7 100644
--- a/src/features/maximizePlayerButton/index.ts
+++ b/src/features/maximizePlayerButton/index.ts
@@ -11,7 +11,6 @@ import { maximizePlayer, setupVideoPlayerTimeUpdate, updateProgressBarPositions
// TODO: fix the "default/theatre" view button and pip button not making the player minimize to the previous state.
export const addMaximizePlayerButton: AddButtonFunction = async () => {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: {
@@ -19,7 +18,7 @@ export const addMaximizePlayerButton: AddButtonFunction = async () => {
enable_maximize_player_button: enableMaximizePlayerButton
}
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
// If the maximize player button option is disabled, return
if (!enableMaximizePlayerButton) return;
// Add a click event listener to the maximize button
diff --git a/src/features/openTranscriptButton/index.ts b/src/features/openTranscriptButton/index.ts
index 8b5b0460..b38aaeb2 100644
--- a/src/features/openTranscriptButton/index.ts
+++ b/src/features/openTranscriptButton/index.ts
@@ -6,12 +6,11 @@ import { addOpenTranscriptButton } from "./utils";
export async function openTranscriptButton() {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_open_transcript_button: enableOpenTranscriptButton }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
// If the open transcript button option is disabled, return
if (!enableOpenTranscriptButton) return;
await waitForAllElements(["ytd-video-description-transcript-section-renderer button"]);
diff --git a/src/features/openTranscriptButton/utils.ts b/src/features/openTranscriptButton/utils.ts
index f4e52577..d4f39f1b 100644
--- a/src/features/openTranscriptButton/utils.ts
+++ b/src/features/openTranscriptButton/utils.ts
@@ -7,14 +7,13 @@ import { waitForSpecificMessage } from "@/src/utils/utilities";
export const addOpenTranscriptButton: AddButtonFunction = async () => {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: {
button_placements: { openTranscriptButton: openTranscriptButtonPlacement }
}
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
function transcriptButtonClickerListener() {
const transcriptButton = document.querySelector("ytd-video-description-transcript-section-renderer button");
if (!transcriptButton) return;
diff --git a/src/features/openYouTubeSettingsOnHover/index.ts b/src/features/openYouTubeSettingsOnHover/index.ts
index c63e1c76..97001ac2 100644
--- a/src/features/openYouTubeSettingsOnHover/index.ts
+++ b/src/features/openYouTubeSettingsOnHover/index.ts
@@ -5,12 +5,11 @@ import { isNewYouTubeVideoLayout, isWatchPage, waitForSpecificMessage } from "@/
export async function enableOpenYouTubeSettingsOnHover() {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_open_youtube_settings_on_hover: enableOpenYouTubeSettingsOnHover }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
// If the open YouTube settings on hover option is disabled, return
if (!enableOpenYouTubeSettingsOnHover) return;
const settingsButton = document.querySelector(".ytp-button.ytp-settings-button");
diff --git a/src/features/pauseBackgroundPlayers/index.ts b/src/features/pauseBackgroundPlayers/index.ts
index 874093b6..d2c9df06 100644
--- a/src/features/pauseBackgroundPlayers/index.ts
+++ b/src/features/pauseBackgroundPlayers/index.ts
@@ -7,17 +7,15 @@ const PauseBackgroundPlayers = () => {
};
export async function enablePauseBackgroundPlayers() {
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_pausing_background_players: pauseBackgroundPlayersEnabled }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
if (!pauseBackgroundPlayersEnabled) return;
// ignore home page and channel pages
if (window.location.href.match(/^https?:\/\/(?:www\.)?youtube\.com(\/?|\/channel\/.+|\/\@.+)$/gm)) return;
browserColorLog("Enabling pauseBackgroundPlayers", "FgMagenta");
-
let videoPlayerContainer: HTMLVideoElement | null = null;
if (!videoPlayerContainer) {
videoPlayerContainer = document.querySelector(".html5-main-video");
@@ -27,7 +25,6 @@ export async function enablePauseBackgroundPlayers() {
videoPlayerContainer.addEventListener("playing", PauseBackgroundPlayers);
}
}
-
let debounceTimeout: null | number = null;
const observer = new MutationObserver((mutationsList: MutationRecord[]) => {
if (debounceTimeout) clearTimeout(debounceTimeout);
@@ -40,7 +37,6 @@ export async function enablePauseBackgroundPlayers() {
}
}, 100);
});
-
if (videoPlayerContainer) {
observer.observe(videoPlayerContainer, { childList: true, subtree: true });
}
diff --git a/src/features/playbackSpeedButtons/index.ts b/src/features/playbackSpeedButtons/index.ts
index c45e9d42..9c6d74c1 100644
--- a/src/features/playbackSpeedButtons/index.ts
+++ b/src/features/playbackSpeedButtons/index.ts
@@ -1,32 +1,40 @@
-import type { YouTubePlayerDiv } from "@/src/types";
+import { youtubePlayerMinSpeed, type YouTubePlayerDiv } from "@/src/types";
import { addFeatureButton, removeFeatureButton } from "@/src/features/buttonPlacement";
-import { getFeatureButton } from "@/src/features/buttonPlacement/utils";
+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;
-
-async function updateTooltip(
+export function calculatePlaybackButtonSpeed(speed: number, playbackSpeedPerClick: number, direction: "decrease" | "increase") {
+ const calculatedSpeed =
+ speed == 16 && direction == "increase" ? 16
+ : speed == youtubePlayerMinSpeed && direction == "decrease" ? youtubePlayerMinSpeed
+ : direction == "decrease" ? speed - playbackSpeedPerClick
+ : speed + playbackSpeedPerClick;
+ return round(calculatedSpeed, 2);
+}
+export async function updatePlaybackSpeedButtonTooltip(
buttonName: ButtonName,
speed: number
) {
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: {
button_placements: {
decreasePlaybackSpeedButton: decreasePlaybackSpeedButtonPlacement,
increasePlaybackSpeedButton: increasePlaybackSpeedButtonPlacement
- },
- playback_buttons_speed: playbackSpeedPerClick
+ }
}
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
+ const videoElement = document.querySelector("video");
+ if (!videoElement) return;
+ ({ playbackRate: currentPlaybackSpeed } = videoElement);
const featureName = "playbackSpeedButtons";
const button = getFeatureButton(buttonName);
if (!button) return;
@@ -38,41 +46,34 @@ async function updateTooltip void {
+function playbackSpeedButtonClickListener(speedPerClick: number, direction: "decrease" | "increase"): () => void {
return () => {
void (async () => {
const videoElement = document.querySelector("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;
- const playerContainer =
- isWatchPage() ? document.querySelector("div#movie_player")
- : isShortsPage() ? document.querySelector("div#shorts-player")
- : null;
+ ({ playbackRate: currentPlaybackSpeed } = videoElement);
+ if (currentPlaybackSpeed + adjustmentAmount > 16 || currentPlaybackSpeed + adjustmentAmount < youtubePlayerMinSpeed) return;
+ const playerContainer = document.querySelector("div#movie_player");
if (!playerContainer) return;
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { osd_display_color, osd_display_hide_time, osd_display_opacity, osd_display_padding, osd_display_position }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
new OnScreenDisplayManager(
{
displayColor: osd_display_color,
@@ -85,15 +86,15 @@ function playbackSpeedButtonClickListener(amount: number): () => void {
},
"yte-osd",
{
- max: 4,
+ max: 16,
type: "speed",
- value: currentPlaybackSpeed + amount
+ value: round(currentPlaybackSpeed + adjustmentAmount, 2)
}
);
- const speed = currentPlaybackSpeed + amount;
+ const speed = round(currentPlaybackSpeed + adjustmentAmount, 2);
await setPlayerSpeed(speed);
- await updateTooltip("increasePlaybackSpeedButton", speed);
- await updateTooltip("decreasePlaybackSpeedButton", speed);
+ await updatePlaybackSpeedButtonTooltip("increasePlaybackSpeedButton", calculatePlaybackButtonSpeed(speed, speedPerClick, "increase"));
+ await updatePlaybackSpeedButtonTooltip("decreasePlaybackSpeedButton", calculatePlaybackButtonSpeed(speed, speedPerClick, "decrease"));
} catch (error) {
console.error(error);
}
@@ -102,7 +103,6 @@ function playbackSpeedButtonClickListener(amount: number): () => void {
}
export const addIncreasePlaybackSpeedButton: AddButtonFunction = async () => {
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: {
@@ -111,22 +111,38 @@ export const addIncreasePlaybackSpeedButton: AddButtonFunction = async () => {
playback_buttons_speed: playbackSpeedPerClick
}
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
if (!enable_playback_speed_buttons) return;
+ if (!isWatchPage()) return;
+ const videoElement = document.querySelector("video");
+ if (!videoElement) return;
+ ({ playbackRate: currentPlaybackSpeed } = videoElement);
+ const playerContainer = document.querySelector("div#movie_player");
+ if (!playerContainer) return;
+ const playerVideoData = await playerContainer.getVideoData();
+ if (playerVideoData.isLive && checkIfFeatureButtonExists("increasePlaybackSpeedButton", increasePlaybackSpeedButtonPlacement)) {
+ await removeFeatureButton("increasePlaybackSpeedButton", increasePlaybackSpeedButtonPlacement);
+ eventManager.removeEventListeners("playbackSpeedButtons");
+ }
+ if (playerVideoData.isLive) return;
await addFeatureButton(
"increasePlaybackSpeedButton",
increasePlaybackSpeedButtonPlacement,
- window.i18nextInstance.t("pages.content.features.playbackSpeedButtons.buttons.increasePlaybackSpeedButton.label", {
- SPEED: currentPlaybackSpeed + playbackSpeedPerClick
- }),
+ window.i18nextInstance.t(
+ currentPlaybackSpeed == 16 ?
+ `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
);
};
export const addDecreasePlaybackSpeedButton: AddButtonFunction = async () => {
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: {
@@ -135,16 +151,33 @@ export const addDecreasePlaybackSpeedButton: AddButtonFunction = async () => {
playback_buttons_speed: playbackSpeedPerClick
}
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
if (!enable_playback_speed_buttons) return;
+ if (!isWatchPage()) return;
+ const videoElement = document.querySelector("video");
+ if (!videoElement) return;
+ ({ playbackRate: currentPlaybackSpeed } = videoElement);
+ const playerContainer = document.querySelector("div#movie_player");
+ if (!playerContainer) return;
+ const playerVideoData = await playerContainer.getVideoData();
+ if (playerVideoData.isLive && checkIfFeatureButtonExists("decreasePlaybackSpeedButton", decreasePlaybackSpeedButtonPlacement)) {
+ await removeFeatureButton("decreasePlaybackSpeedButton", decreasePlaybackSpeedButtonPlacement);
+ eventManager.removeEventListeners("playbackSpeedButtons");
+ }
+ if (playerVideoData.isLive) return;
await addFeatureButton(
"decreasePlaybackSpeedButton",
decreasePlaybackSpeedButtonPlacement,
- window.i18nextInstance.t("pages.content.features.playbackSpeedButtons.buttons.decreasePlaybackSpeedButton.label", {
- SPEED: currentPlaybackSpeed - playbackSpeedPerClick
- }),
+ window.i18nextInstance.t(
+ currentPlaybackSpeed == youtubePlayerMinSpeed ?
+ `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
);
};
diff --git a/src/features/playerQuality/index.ts b/src/features/playerQuality/index.ts
index f6559dc9..486a3736 100644
--- a/src/features/playerQuality/index.ts
+++ b/src/features/playerQuality/index.ts
@@ -1,6 +1,6 @@
import type { YouTubePlayerDiv, YoutubePlayerQualityLevel } from "@/src/types";
-import { browserColorLog, chooseClosestQuality, isShortsPage, isWatchPage, waitForSpecificMessage } from "@/src/utils/utilities";
+import { browserColorLog, chooseClosestQuality, isLivePage, isShortsPage, isWatchPage, waitForSpecificMessage } from "@/src/utils/utilities";
/**
* Sets the player quality based on the options received from a specific message.
@@ -10,41 +10,32 @@ import { browserColorLog, chooseClosestQuality, isShortsPage, isWatchPage, waitF
*/
export default async function setPlayerQuality(): Promise {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_automatically_set_quality, player_quality, player_quality_fallback_strategy }
}
- } = optionsData;
-
+ } = await waitForSpecificMessage("options", "request_data", "content");
// If automatically set quality option is disabled, return
if (!enable_automatically_set_quality) return;
-
// If player quality is not specified, return
if (!player_quality) return;
-
// Get the player element
const playerContainer =
- isWatchPage() ? document.querySelector("div#movie_player")
+ isWatchPage() || isLivePage() ? document.querySelector("div#movie_player")
: isShortsPage() ? document.querySelector("div#shorts-player")
: null;
-
// If player element is not available, return
if (!playerContainer) return;
-
// If setPlaybackQuality method is not available in the player, return
if (!playerContainer.setPlaybackQuality) return;
-
// Get the available quality levels
const availableQualityLevels = (await playerContainer.getAvailableQualityLevels()) as YoutubePlayerQualityLevel[];
-
// Check if the specified player quality is available
if (player_quality && player_quality !== "auto") {
const closestQuality = chooseClosestQuality(player_quality, availableQualityLevels, player_quality_fallback_strategy);
if (!closestQuality) return;
// Log the message indicating the player quality being set
browserColorLog(`Setting player quality to ${closestQuality}`, "FgMagenta");
-
// Set the playback quality and update the default quality in the dataset
void playerContainer.setPlaybackQualityRange(closestQuality);
playerContainer.dataset.defaultQuality = closestQuality;
diff --git a/src/features/playerSpeed/index.ts b/src/features/playerSpeed/index.ts
index 0d684cfb..4cfe7748 100644
--- a/src/features/playerSpeed/index.ts
+++ b/src/features/playerSpeed/index.ts
@@ -24,12 +24,11 @@ export async function setPlayerSpeed(input?: number): Promise {
// If the input is a number, set the player speed to the given number
if (input === undefined) {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
({
data: {
options: { enable_forced_playback_speed: enablePlayerSpeed, player_speed: playerSpeed }
}
- } = optionsData);
+ } = await waitForSpecificMessage("options", "request_data", "content"));
} else if (typeof input === "number") {
playerSpeed = input;
}
@@ -45,7 +44,6 @@ export async function setPlayerSpeed(input?: number): Promise {
// If player element is not available, return
if (!playerContainer) return;
const video = document.querySelector("video.html5-main-video");
-
// If setPlaybackRate method is not available in the player, return
if (!playerContainer.setPlaybackRate) return;
const playerVideoData = await playerContainer.getVideoData();
@@ -53,7 +51,6 @@ export async function setPlayerSpeed(input?: number): Promise {
if (playerVideoData.isLive) return;
// Log the message indicating the player speed being set
browserColorLog(`Setting player speed to ${playerSpeed}`, "FgMagenta");
-
// Set the playback speed
void playerContainer.setPlaybackRate(playerSpeed);
// Set the video playback speed
@@ -70,11 +67,11 @@ export function restorePlayerSpeed() {
isWatchPage() ? document.querySelector("div#movie_player")
: isShortsPage() ? document.querySelector("div#shorts-player")
: null;
- const video = document.querySelector("video.html5-main-video");
// If player element is not available, return
if (!playerContainer) return;
// If setPlaybackRate method is not available in the player, return
if (!playerContainer.setPlaybackRate) return;
+ const video = document.querySelector("video.html5-main-video");
if (!video) return;
// Log the message indicating the player speed being set
browserColorLog(`Restoring player speed to ${playerSpeed}`, "FgMagenta");
@@ -101,12 +98,10 @@ export function setupPlaybackSpeedChangeListener() {
}
window.localStorage.setItem("playerSpeed", String(playerSpeed));
};
-
// Create an observer instance
const playerSpeedMenuObserver = new MutationObserver((mutationsList: MutationRecord[]) => {
mutationsList.forEach((mutation) => {
const { target: targetElement } = mutation as { target: HTMLDivElement } & MutationRecord;
-
// Check if the target element has the desired structure
const panelHeader = targetElement.querySelector("div.ytp-panel > div.ytp-panel-header");
const panelMenu = targetElement.querySelector("div.ytp-panel > div.ytp-panel-menu");
@@ -129,7 +124,6 @@ export function setupPlaybackSpeedChangeListener() {
});
});
const config: MutationObserverInit = { childList: true, subtree: true };
-
if (settingsPanelMenu) {
playerSpeedMenuObserver.observe(settingsPanelMenu, config);
customSpeedSliderObserver.observe(settingsPanelMenu, {
diff --git a/src/features/playlistLength/index.ts b/src/features/playlistLength/index.ts
new file mode 100644
index 00000000..f36f8303
--- /dev/null
+++ b/src/features/playlistLength/index.ts
@@ -0,0 +1,49 @@
+import type { Nullable } from "@/src/types";
+
+import eventManager from "@/src/utils/EventManager";
+import { YouTube_Enhancer_Public_Youtube_Data_API_V3_Key } from "@/src/utils/constants";
+import { isWatchPage, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
+
+import { headerSelector, initializePlaylistLength, playlistItemsSelector } from "./utils";
+let documentObserver: Nullable = null;
+export async function enablePlaylistLength() {
+ const IsWatchPage = isWatchPage();
+ const {
+ data: {
+ options: {
+ enable_playlist_length,
+ playlist_length_get_method: playlistLengthGetMethod,
+ playlist_watch_time_get_method: playlistWatchTimeGetMethod,
+ youtube_data_api_v3_key
+ }
+ }
+ } = await waitForSpecificMessage("options", "request_data", "content");
+ if (!enable_playlist_length) return;
+ const urlContainsListParameter = window.location.href.includes("list=");
+ if (!urlContainsListParameter) return;
+ await waitForAllElements([headerSelector(), playlistItemsSelector()]);
+ const apiKey = youtube_data_api_v3_key === "" ? YouTube_Enhancer_Public_Youtube_Data_API_V3_Key : youtube_data_api_v3_key;
+ const pageType = IsWatchPage ? "watch" : "playlist";
+ try {
+ documentObserver = await initializePlaylistLength({
+ apiKey,
+ pageType,
+ playlistLengthGetMethod,
+ playlistWatchTimeGetMethod
+ });
+ } catch (error) {
+ documentObserver?.disconnect();
+ documentObserver = null;
+ documentObserver = await initializePlaylistLength({
+ apiKey,
+ pageType,
+ playlistLengthGetMethod: "html",
+ playlistWatchTimeGetMethod
+ });
+ }
+}
+export function disablePlaylistLength() {
+ eventManager.removeEventListeners("playlistLength");
+ if (documentObserver) documentObserver.disconnect();
+ document.querySelector("#yte-playlist-length-ui")?.remove();
+}
diff --git a/src/features/playlistLength/utils.ts b/src/features/playlistLength/utils.ts
new file mode 100644
index 00000000..530a352f
--- /dev/null
+++ b/src/features/playlistLength/utils.ts
@@ -0,0 +1,405 @@
+import type { Nullable, PlaylistLengthGetMethod, PlaylistWatchTimeGetMethod, VideoDetails, YouTubePlaylistItem } from "@/src/types";
+
+import eventManager from "@/src/utils/EventManager";
+import {
+ conditionalStyles,
+ createStyledElement,
+ formatDuration,
+ isNewYouTubeVideoLayout,
+ isWatchPage,
+ parseISO8601Duration,
+ timeStringToSeconds,
+ waitForAllElements
+} from "@/src/utils/utilities";
+import { z } from "zod";
+
+export const headerSelector = () =>
+ isWatchPage() ?
+ isNewYouTubeVideoLayout() ? "#page-manager > ytd-watch-grid #playlist #header-contents"
+ : "#page-manager > ytd-watch-flexy #playlist #header-contents"
+ : "ytd-playlist-header-renderer div.immersive-header-container div.immersive-header-content";
+export const playlistItemsSelector = () =>
+ isWatchPage() ? "ytd-playlist-panel-renderer:not([hidden]) div#container div#items" : "ytd-playlist-video-list-renderer div#contents";
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+const youtubePlaylistResponseSchema = z.object({
+ items: z.array(z.object({ contentDetails: z.object({ videoId: z.string() }) })),
+ nextPageToken: z.string().optional()
+});
+const youtubeVideoDurationResponseSchema = z.object({
+ items: z.array(z.object({ contentDetails: z.object({ duration: z.string() }) }))
+});
+const youtubeDataAPIErrorSchema = z.object({
+ error: z.object({
+ code: z.number(),
+ errors: z.array(
+ z.object({
+ reason: z.string()
+ })
+ ),
+ message: z.string()
+ })
+});
+export async function fetchPlaylistVideos(playlistId: string, apiKey: string): Promise {
+ const playlistItemsUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=50&fields=items/contentDetails/videoId,nextPageToken&key=${apiKey}&playlistId=${playlistId}`;
+ let nextPageToken: string | undefined = undefined;
+ const allVideos: YouTubePlaylistItem[] = [];
+ try {
+ do {
+ const playlistResponse = await fetch(`${playlistItemsUrl}${nextPageToken ? `&pageToken=${nextPageToken}` : ""}`);
+ const data = await playlistResponse.json();
+ const youtubeDataAPIParsed = youtubeDataAPIErrorSchema.safeParse(data);
+ if (youtubeDataAPIParsed.success && youtubeDataAPIParsed.data.error) {
+ switch (youtubeDataAPIParsed.data.error.code) {
+ case 403:
+ throw new Error("YouTube Enhancer (YouTube Data API V3): Quota exceeded. Please try again later.");
+ case 404:
+ throw new Error("YouTube Enhancer (YouTube Data API V3): Playlist not found. Please try again later.");
+ default:
+ throw new Error("YouTube Enhancer (YouTube Data API V3): Unknown error. Please try again later.");
+ }
+ }
+ const parsedData = youtubePlaylistResponseSchema.safeParse(data);
+ if (!parsedData.success) throw new Error("Failed to parse playlist response.");
+ if (parsedData.data.items && parsedData.data.items.length === 0) throw new Error("No items found in playlist.");
+ nextPageToken = parsedData.data.nextPageToken || "";
+ allVideos.push(...parsedData.data.items);
+ await delay(40); // Adding delay between requests to avoid rate limiting
+ } while (nextPageToken);
+ return allVideos;
+ } catch (error) {
+ throw new Error(`Error fetching playlist videos: ${error}`);
+ }
+}
+export async function getPlaylistDuration(playlistVideos: YouTubePlaylistItem[], apiKey: string) {
+ const videoIds = playlistVideos.map((video) => video.contentDetails.videoId);
+ try {
+ const videoDurationPromises = videoIds.map(async (videoId) => {
+ await delay(1); // Adding delay between requests to avoid rate limiting
+ return getVideoDuration(videoId, apiKey);
+ });
+ const videoDurations = await Promise.all(videoDurationPromises);
+ const totalDuration = videoDurations.reduce((acc, duration) => acc + duration, 0);
+ return totalDuration;
+ } catch (error) {
+ throw new Error(`Error fetching playlist duration: ${error}`);
+ }
+}
+export async function getVideoDuration(videoId: string, apiKey: string) {
+ const videoDetailsUrl = `https://www.googleapis.com/youtube/v3/videos?part=contentDetails&fields=items/contentDetails/duration&key=${apiKey}&id=${videoId}`;
+ try {
+ const videoResponse = await fetch(videoDetailsUrl);
+ const data = await videoResponse.json();
+ const youtubeDataAPIParsed = youtubeDataAPIErrorSchema.safeParse(data);
+ const parsedData = youtubeVideoDurationResponseSchema.safeParse(data);
+ if (!parsedData.success) throw new Error("Failed to parse video duration response.");
+ if (
+ youtubeDataAPIParsed.success &&
+ youtubeDataAPIParsed.data.error &&
+ youtubeDataAPIParsed.data.error.code === 403 &&
+ youtubeDataAPIParsed.data.error.errors.find((e) => e.reason === "quotaExceeded")
+ ) {
+ throw new Error("Quota exceeded. Please try again later.");
+ }
+ const videoDuration = parsedData.data.items.at(0)?.contentDetails?.duration;
+ if (!videoDuration) throw new Error("Failed to get video duration.");
+ return parseISO8601Duration(videoDuration);
+ } catch (error) {
+ throw new Error(`Error getting video duration: ${error}`);
+ }
+}
+export function getPlaylistItemsFromWatchPage() {
+ const playlistItems = document.querySelector(
+ isNewYouTubeVideoLayout() ? "#page-manager > ytd-watch-grid #playlist #items" : "#page-manager > ytd-watch-flexy #playlist #items"
+ );
+ if (!playlistItems) return [];
+ const { children: videos } = playlistItems;
+ return Array.from(videos) as HTMLElement[];
+}
+export function getPlaylistItemsFromPlaylistPage() {
+ const playlistItems = document.querySelector("ytd-playlist-video-list-renderer div#contents");
+ if (!playlistItems) return [];
+ const { children: videos } = playlistItems;
+ return Array.from(videos) as HTMLElement[];
+}
+export function getPlaylistItemsWatchedProgress(playlistItems: HTMLElement[]): VideoDetails[] {
+ return playlistItems.map(getVideoDetails);
+}
+function getWatchedPercentage(videoElement: Element): number {
+ const progressBar = videoElement.querySelector(".ytd-thumbnail-overlay-resume-playback-renderer,#progress");
+ if (!progressBar) return 0;
+ return parseFloat(progressBar.style.width) || 0;
+}
+function getVideoDurationInSeconds(videoElement: Element): number {
+ const durationElement = videoElement.querySelector("ytd-thumbnail-overlay-time-status-renderer > div#time-status");
+ if (!durationElement || !durationElement.textContent?.trim()) return 0;
+ return timeStringToSeconds(durationElement.textContent.trim());
+}
+function findIndexById(array: VideoDetails[], id: string): number {
+ return array.findIndex((video) => video.videoId === id);
+}
+export function sliceArrayById(array: VideoDetails[], id: string): VideoDetails[] {
+ const index = findIndexById(array, id);
+ if (index === -1) {
+ // If the videoId is not found, return an empty array or handle it as needed
+ return [];
+ }
+ // Slice the array from the start to the found index (inclusive)
+ return array.slice(0, index);
+}
+function getVideoId(videoElement: Element): null | string {
+ const videoIdElement = videoElement.querySelector("a#thumbnail");
+ if (!videoIdElement) return null;
+ const url = new URL(`https://youtube.com${videoIdElement.href}`);
+ return url.searchParams.get("v");
+}
+function getVideoDetails(videoElement: Element): VideoDetails {
+ const videoId = getVideoId(videoElement);
+ const duration = getVideoDurationInSeconds(videoElement);
+ const progress = Math.floor((getWatchedPercentage(videoElement) / 100) * duration);
+ return {
+ duration: duration,
+ progress: progress,
+ videoId: videoId
+ };
+}
+type VideoTimeState = { totalTimeSeconds: number; watchedTimeSeconds: number };
+type PageType = "playlist" | "watch";
+type PlaylistLengthParameters = {
+ apiKey: string;
+ pageType: PageType;
+ playlistLengthGetMethod: PlaylistLengthGetMethod;
+ playlistWatchTimeGetMethod: PlaylistWatchTimeGetMethod;
+};
+export function createPlaylistLengthUIElement(
+ initialState: VideoTimeState,
+ pageType: PageType
+): {
+ element: HTMLDivElement;
+ update: (state: VideoTimeState) => void;
+} {
+ const wrapper = createStyledElement({
+ elementId: "yte-playlist-length-ui",
+ elementType: "div",
+ styles: {
+ backgroundColor: "rgb(43, 43, 43)",
+ border: "2px solid rgb(84, 84, 84)",
+ borderRadius: "10px",
+ height: "48px",
+ marginBottom: "10px",
+ overflow: "hidden",
+ position: "relative",
+ transform: "translate(-50%, 0%)",
+ ...conditionalStyles({
+ condition: pageType === "watch",
+ left: "48.8%",
+ top: "50%",
+ width: "100%"
+ }),
+ ...conditionalStyles({
+ condition: pageType === "playlist",
+ left: "50%",
+ marginTop: "10px",
+ width: "99%"
+ })
+ }
+ });
+ const watchedProgressBar = createStyledElement({
+ elementId: "yte-playlist-length-ui-watchedProgressBar",
+ elementType: "div",
+ styles: { backgroundColor: "#522628", borderRadius: "8px", height: "100%" }
+ });
+ const videoTimeDisplay = createStyledElement({
+ elementId: "yte-playlist-length-ui-times",
+ elementType: "div",
+ styles: {
+ bottom: "15px",
+ color: "var(--yt-spec-text-primary)",
+ fontSize: "15px",
+ marginLeft: "19px",
+ position: "absolute"
+ }
+ });
+ videoTimeDisplay.textContent = `${formatDuration(initialState.watchedTimeSeconds)} / ${formatDuration(initialState.totalTimeSeconds)} (- ${formatDuration(initialState.totalTimeSeconds - initialState.watchedTimeSeconds)})`;
+ const percentageWatched = createStyledElement({
+ elementId: "yte-playlist-length-ui-percentageWatched",
+ elementType: "div",
+ styles: {
+ backgroundColor: "#3f3f3f",
+ borderRadius: "6px",
+ bottom: "0px",
+ color: "var(--yt-spec-text-primary)",
+ fontSize: "15px",
+ padding: "4px 8px",
+ position: "absolute",
+ right: "0px",
+ transform: "translateX(-24%) translateY(-11px)"
+ }
+ });
+ percentageWatched.textContent = `0%`;
+ wrapper.append(watchedProgressBar, percentageWatched, videoTimeDisplay);
+ const updateElement = ({ totalTimeSeconds, watchedTimeSeconds }: VideoTimeState) => {
+ const watchedPercentage =
+ Number.isNaN(Math.floor((watchedTimeSeconds / totalTimeSeconds) * 100)) ? 0
+ : Math.floor((watchedTimeSeconds / totalTimeSeconds) * 100) === Infinity ? 0
+ : Math.floor((watchedTimeSeconds / totalTimeSeconds) * 100);
+ watchedProgressBar.style.width = `${watchedPercentage}%`;
+ videoTimeDisplay.textContent = `${formatDuration(watchedTimeSeconds)} / ${formatDuration(totalTimeSeconds)} (- ${formatDuration(totalTimeSeconds - watchedTimeSeconds)})`;
+ percentageWatched.textContent = `${watchedPercentage}%`;
+ };
+ wrapper.title = window.i18nextInstance.t("pages.content.features.playlistLength.title");
+ updateElement(initialState);
+ return {
+ element: wrapper,
+ update: updateElement
+ };
+}
+export async function appendPlaylistLengthUIElement(playlistLengthUIElement: HTMLDivElement) {
+ await waitForAllElements([headerSelector()]);
+ const headerContents = document.querySelector(headerSelector());
+ if (!headerContents) return null;
+ if (document.querySelector("#yte-playlist-length-ui") !== null) {
+ document.querySelector("#yte-playlist-length-ui")?.remove();
+ }
+ headerContents.append(playlistLengthUIElement);
+}
+async function getDurationFromAPI(playlistId: string, apiKey: string): Promise {
+ const playlistVideos = await fetchPlaylistVideos(playlistId, apiKey);
+ return getPlaylistDuration(playlistVideos, apiKey);
+}
+type WatchTimeParameters = {
+ pageType: PageType;
+ playlistItemsVideoDetails: VideoDetails[];
+ playlistWatchTimeGetMethod: PlaylistWatchTimeGetMethod;
+};
+
+function calculateWatchedTime({ pageType, playlistItemsVideoDetails, playlistWatchTimeGetMethod }: WatchTimeParameters): number {
+ if (pageType === "watch") {
+ const slicedItems = sliceArrayById(playlistItemsVideoDetails, getCurrentVideoId()!);
+ return (
+ slicedItems.reduce((total, video) => total + (playlistWatchTimeGetMethod === "youtube" ? video.progress : video.duration), 0) +
+ getCurrentVideoTime()
+ );
+ } else {
+ return playlistItemsVideoDetails.reduce((total, video) => total + video.progress, 0);
+ }
+}
+function getDurationAndWatchedTimeHTML({ pageType, playlistItemsVideoDetails, playlistWatchTimeGetMethod }: WatchTimeParameters): VideoTimeState {
+ const totalTimeSeconds = playlistItemsVideoDetails.reduce((total, video) => total + video.duration, 0);
+ const watchedTimeSeconds = calculateWatchedTime({ pageType, playlistItemsVideoDetails, playlistWatchTimeGetMethod });
+ return { totalTimeSeconds, watchedTimeSeconds };
+}
+export async function getDataForPlaylistLengthUIElement({
+ apiKey,
+ pageType,
+ playlistLengthGetMethod,
+ playlistWatchTimeGetMethod
+}: PlaylistLengthParameters): Promise {
+ const playlistId = getPlaylistId();
+ if (!playlistId) return { totalTimeSeconds: 0, watchedTimeSeconds: 0 };
+ // Check cache
+ if (playlistLengthGetMethod === "api" && window.cachedPlaylistDuration && window.cachedPlaylistDuration.playlistId === playlistId) {
+ const {
+ cachedPlaylistDuration: { totalTimeSeconds }
+ } = window;
+ const playlistItems = pageType === "watch" ? getPlaylistItemsFromWatchPage() : getPlaylistItemsFromPlaylistPage();
+ const playlistItemsVideoDetails = getPlaylistItemsWatchedProgress(playlistItems);
+ const watchedTimeSeconds = calculateWatchedTime({ pageType, playlistItemsVideoDetails, playlistWatchTimeGetMethod });
+ return { totalTimeSeconds, watchedTimeSeconds };
+ }
+ const playlistItems = pageType === "watch" ? getPlaylistItemsFromWatchPage() : getPlaylistItemsFromPlaylistPage();
+ const playlistItemsVideoDetails = getPlaylistItemsWatchedProgress(playlistItems);
+ let totalTimeSeconds: number;
+ if (playlistLengthGetMethod === "api") {
+ totalTimeSeconds = await getDurationFromAPI(playlistId, apiKey);
+ // Cache the duration
+ window.cachedPlaylistDuration = { playlistId, totalTimeSeconds };
+ } else if (playlistLengthGetMethod === "html") {
+ ({ totalTimeSeconds } = getDurationAndWatchedTimeHTML({ pageType, playlistItemsVideoDetails, playlistWatchTimeGetMethod }));
+ } else {
+ return { totalTimeSeconds: 0, watchedTimeSeconds: 0 };
+ }
+ const watchedTimeSeconds = calculateWatchedTime({ pageType, playlistItemsVideoDetails, playlistWatchTimeGetMethod });
+ return { totalTimeSeconds, watchedTimeSeconds };
+}
+function getPlaylistId() {
+ const playlistId = new URLSearchParams(window.location.search).get("list");
+ return playlistId;
+}
+function getCurrentVideoId() {
+ const videoId = new URLSearchParams(window.location.search).get("v");
+ return videoId;
+}
+function getCurrentVideoTime() {
+ const videoElement = document.querySelector("video") as HTMLVideoElement;
+ return videoElement.currentTime;
+}
+export async function initializePlaylistLength({
+ apiKey,
+ pageType,
+ playlistLengthGetMethod,
+ playlistWatchTimeGetMethod
+}: PlaylistLengthParameters): Promise> {
+ const playlistHeader = document.querySelector(headerSelector());
+ if (!playlistHeader) return null;
+ let { totalTimeSeconds, watchedTimeSeconds } = await getDataForPlaylistLengthUIElement({
+ apiKey,
+ pageType,
+ playlistLengthGetMethod,
+ playlistWatchTimeGetMethod
+ });
+ if (playlistHeader) {
+ const videoElement = document.querySelector("video");
+ const playlistItemsElement = document.querySelector(playlistItemsSelector());
+ if (!playlistItemsElement) return null;
+ const { playbackRate: playerSpeed = 1 } = videoElement || {};
+ const { element, update } = createPlaylistLengthUIElement(
+ {
+ totalTimeSeconds: Math.floor(totalTimeSeconds / playerSpeed),
+ watchedTimeSeconds: Math.floor(watchedTimeSeconds / playerSpeed)
+ },
+ pageType
+ );
+ await appendPlaylistLengthUIElement(element);
+ const documentObserver = new MutationObserver(() => {
+ void (async () => {
+ const videoElement = document.querySelector("video");
+ const { playbackRate: playerSpeed = 1 } = videoElement || {};
+ ({ totalTimeSeconds, watchedTimeSeconds } = await getDataForPlaylistLengthUIElement({
+ apiKey,
+ pageType,
+ playlistLengthGetMethod,
+ playlistWatchTimeGetMethod
+ }));
+ update({
+ totalTimeSeconds: Math.floor(totalTimeSeconds / playerSpeed),
+ watchedTimeSeconds: Math.floor(watchedTimeSeconds / playerSpeed)
+ });
+ })();
+ });
+ documentObserver.observe(document.documentElement, { childList: true, subtree: true });
+ if (videoElement)
+ eventManager.addEventListener(
+ videoElement,
+ "timeupdate",
+ () => {
+ void (async () => {
+ const videoElement = document.querySelector("video");
+ const { playbackRate: playerSpeed = 1 } = videoElement || {};
+ ({ totalTimeSeconds, watchedTimeSeconds } = await getDataForPlaylistLengthUIElement({
+ apiKey,
+ pageType,
+ playlistLengthGetMethod,
+ playlistWatchTimeGetMethod
+ }));
+ update({
+ totalTimeSeconds: Math.floor(totalTimeSeconds / playerSpeed),
+ watchedTimeSeconds: Math.floor(watchedTimeSeconds / playerSpeed)
+ });
+ })();
+ },
+ "playlistLength"
+ );
+ return documentObserver;
+ }
+ return null;
+}
diff --git a/src/features/remainingTime/index.ts b/src/features/remainingTime/index.ts
index 1abdc1cc..d1b2c442 100644
--- a/src/features/remainingTime/index.ts
+++ b/src/features/remainingTime/index.ts
@@ -12,13 +12,10 @@ function playerTimeUpdateListener() {
isWatchPage() ? document.querySelector("div#movie_player")
: isShortsPage() ? document.querySelector("div#shorts-player")
: null;
-
// If player element is not available, return
if (!playerContainer) return;
-
// Get the video element
const videoElement = playerContainer.querySelector("video");
-
// If video element is not available, return
if (!videoElement) return;
// Get the remaining time element
@@ -30,12 +27,11 @@ function playerTimeUpdateListener() {
}
export async function setupRemainingTime() {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_remaining_time }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
// If remaining time option is disabled, return
if (!enable_remaining_time) return;
const timeDisplay = document.querySelector(".ytp-time-display > span:nth-of-type(2)");
@@ -55,7 +51,6 @@ export async function setupRemainingTime() {
const remainingTime = await calculateRemainingTime({ playerContainer, videoElement });
const remainingTimeElementExists = document.querySelector("span#ytp-time-remaining") !== null;
if (playerVideoData.isLive && !remainingTimeElementExists) return;
-
const remainingTimeElement = document.querySelector("span#ytp-time-remaining") ?? document.createElement("span");
// If the video is live return
if (playerVideoData.isLive && remainingTimeElementExists) {
diff --git a/src/features/remainingTime/utils.ts b/src/features/remainingTime/utils.ts
index b255782b..99a26897 100644
--- a/src/features/remainingTime/utils.ts
+++ b/src/features/remainingTime/utils.ts
@@ -7,7 +7,6 @@ export function formatTime(timeInSeconds: number) {
Math.floor((timeInSeconds % 3600) / 60),
Math.floor(timeInSeconds % 60)
];
-
const formattedUnits: string[] = units.reduce((acc: string[], unit) => {
if (acc.length > 0) {
acc.push(unit.toString().padStart(2, "0"));
@@ -16,7 +15,6 @@ export function formatTime(timeInSeconds: number) {
acc.push(unit.toString());
}
}
-
return acc;
}, []);
return `${formattedUnits.length > 0 ? formattedUnits.join(":") : "0"}`;
@@ -30,14 +28,11 @@ export async function calculateRemainingTime({
}) {
// Get the player speed (playback rate)
const { playbackRate } = videoElement;
-
// Get the current time and duration of the video
const currentTime = await playerContainer.getCurrentTime();
const duration = await playerContainer.getDuration();
-
// Calculate the remaining time in seconds
const remainingTimeInSeconds = (duration - currentTime) / playbackRate;
-
// Format the remaining time
return ` (-${formatTime(remainingTimeInSeconds)})`;
}
diff --git a/src/features/rememberVolume/index.ts b/src/features/rememberVolume/index.ts
index bb29bf40..e66d024e 100644
--- a/src/features/rememberVolume/index.ts
+++ b/src/features/rememberVolume/index.ts
@@ -1,6 +1,6 @@
import type { YouTubePlayerDiv } from "@/src/types";
-import { isShortsPage, isWatchPage, waitForSpecificMessage } from "@/src/utils/utilities";
+import { isLivePage, isShortsPage, isWatchPage, waitForSpecificMessage } from "@/src/utils/utilities";
import { setRememberedVolume, setupVolumeChangeListener } from "./utils";
@@ -12,31 +12,29 @@ import { setRememberedVolume, setupVolumeChangeListener } from "./utils";
*/
export default async function enableRememberVolume(): Promise {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_remember_last_volume: enableRememberVolume, remembered_volumes: rememberedVolumes }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
// If the volume is not being remembered, return
if (!enableRememberVolume) return;
const IsWatchPage = isWatchPage();
+ const IsLivePage = isLivePage();
const IsShortsPage = isShortsPage();
// Get the player container element
const playerContainer =
- IsWatchPage ? document.querySelector("div#movie_player")
+ IsWatchPage || IsLivePage ? document.querySelector("div#movie_player")
: IsShortsPage ? document.querySelector("div#shorts-player")
: null;
-
// If player container is not available, return
if (!playerContainer) return;
-
// If setVolume method is not available in the player container, return
if (!playerContainer.setVolume) return;
void setRememberedVolume({
enableRememberVolume,
isShortsPage: IsShortsPage,
- isWatchPage: IsWatchPage,
+ isWatchPage: IsWatchPage || IsLivePage,
playerContainer,
rememberedVolumes
});
diff --git a/src/features/rememberVolume/utils.ts b/src/features/rememberVolume/utils.ts
index e8a10040..37ae7b30 100644
--- a/src/features/rememberVolume/utils.ts
+++ b/src/features/rememberVolume/utils.ts
@@ -1,22 +1,22 @@
import type { YouTubePlayerDiv, configuration } from "@/src/types";
import eventManager from "@/src/utils/EventManager";
-import { browserColorLog, isShortsPage, isWatchPage, sendContentOnlyMessage, waitForSpecificMessage } from "@/src/utils/utilities";
+import { browserColorLog, isLivePage, isShortsPage, isWatchPage, sendContentOnlyMessage, waitForSpecificMessage } from "@/src/utils/utilities";
export async function setupVolumeChangeListener() {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_remember_last_volume: enableRememberVolume }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
// If the volume is not being remembered, return
if (!enableRememberVolume) return;
const IsWatchPage = isWatchPage();
+ const IsLivePage = isLivePage();
const IsShortsPage = isShortsPage();
// Get the player container element
const playerContainer =
- IsWatchPage ? document.querySelector("div#movie_player")
+ IsWatchPage || IsLivePage ? document.querySelector("div#movie_player")
: IsShortsPage ? document.querySelector("div#shorts-player")
: null;
if (!playerContainer) return;
@@ -29,7 +29,7 @@ export async function setupVolumeChangeListener() {
void (async () => {
if (!currentTarget) return;
const newVolume = await playerContainer.getVolume();
- if (IsWatchPage) {
+ if (IsWatchPage || IsLivePage) {
// Send a "setVolume" message to the content script
sendContentOnlyMessage("setRememberedVolume", { watchPageVolume: newVolume });
} else if (IsShortsPage) {
diff --git a/src/features/removeRedirect/index.ts b/src/features/removeRedirect/index.ts
index 0f17f6b2..693d162d 100644
--- a/src/features/removeRedirect/index.ts
+++ b/src/features/removeRedirect/index.ts
@@ -2,16 +2,14 @@ import { type Nullable } from "@/src/types";
import { browserColorLog, waitForSpecificMessage } from "@/src/utils/utilities";
export default async function enableRemoveRedirect() {
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_redirect_remover: removeRedirectEnabled }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
if (!removeRedirectEnabled) return;
browserColorLog(`Enabling removeRedirect`, "FgMagenta");
const regex = /https\:\/\/www\.youtube\.com\/redirect\?.+/gm;
-
const links: NodeListOf = document.querySelectorAll(
".yt-core-attributed-string__link, .yt-simple-endpoint.style-scope.yt-formatted-string"
);
@@ -22,7 +20,6 @@ export default async function enableRemoveRedirect() {
link.setAttribute("href", urlParams.get("q") || "");
}
});
-
const callback: MutationCallback = (mutationsList: MutationRecord[]) => {
for (const mutation of mutationsList) {
if (mutation.type === "childList") {
@@ -38,7 +35,6 @@ export default async function enableRemoveRedirect() {
}
}
};
-
const observer: MutationObserver = new MutationObserver(callback);
observer.observe(document.body, { attributes: false, childList: true, subtree: true });
}
diff --git a/src/features/screenshotButton/index.ts b/src/features/screenshotButton/index.ts
index edb1da6a..4328c15c 100644
--- a/src/features/screenshotButton/index.ts
+++ b/src/features/screenshotButton/index.ts
@@ -12,26 +12,21 @@ async function takeScreenshot(videoElement: HTMLVideoElement) {
// Create a canvas element and get its context
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
-
// Set the dimensions of the canvas to the video's dimensions
const { videoHeight, videoWidth } = videoElement;
canvas.width = videoWidth;
canvas.height = videoHeight;
-
// Draw the video element onto the canvas
if (!context) return;
context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
-
// Wait for the options message and get the format from it
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { screenshot_format, screenshot_save_as }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
const blob = await new Promise>((resolve) => canvas.toBlob(resolve, "image/png"));
if (!blob) return;
-
switch (screenshot_save_as) {
case "clipboard": {
const screenshotButton = getFeatureButton("screenshotButton");
@@ -65,7 +60,6 @@ async function takeScreenshot(videoElement: HTMLVideoElement) {
export const addScreenshotButton: AddButtonFunction = async () => {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: {
@@ -73,8 +67,7 @@ export const addScreenshotButton: AddButtonFunction = async () => {
enable_screenshot_button: enableScreenshotButton
}
}
- } = optionsData;
-
+ } = await waitForSpecificMessage("options", "request_data", "content");
// If the screenshot button option is disabled, return
if (!enableScreenshotButton) return;
// Add a click event listener to the screenshot button
diff --git a/src/features/scrollWheelSpeedControl/index.ts b/src/features/scrollWheelSpeedControl/index.ts
index 3070b500..dc764c99 100644
--- a/src/features/scrollWheelSpeedControl/index.ts
+++ b/src/features/scrollWheelSpeedControl/index.ts
@@ -1,5 +1,6 @@
import type { YouTubePlayerDiv } from "@/src/types";
+import { calculatePlaybackButtonSpeed, updatePlaybackSpeedButtonTooltip } from "@/src/features/playbackSpeedButtons";
import { setupScrollListeners } from "@/src/features/scrollWheelVolumeControl/utils";
import OnScreenDisplayManager from "@/src/utils/OnScreenDisplayManager";
import { isShortsPage, isWatchPage, preventScroll, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
@@ -33,7 +34,6 @@ export default async function adjustSpeedOnScrollWheel() {
const setOptionsData = async () => {
return (optionsData = await waitForSpecificMessage("options", "request_data", "content"));
};
-
void (async () => {
if (!optionsData) {
return void (await setOptionsData());
@@ -48,6 +48,7 @@ export default async function adjustSpeedOnScrollWheel() {
osd_display_padding,
osd_display_position,
osd_display_type,
+ playback_buttons_speed,
scroll_wheel_speed_control_modifier_key,
speed_adjustment_steps
}
@@ -56,14 +57,11 @@ export default async function adjustSpeedOnScrollWheel() {
const wheelEvent = event as WheelEvent;
// If the modifier key is required and not pressed, return
if (enable_scroll_wheel_speed_control && !wheelEvent[scroll_wheel_speed_control_modifier_key]) return void (await setOptionsData());
-
// Only prevent default scroll wheel behavior
// if we are going to handle the event
preventScroll(wheelEvent);
-
// Update the options data after preventScroll()
await setOptionsData();
-
// Get the player element
const playerContainer =
isWatchPage() ? document.querySelector("div#movie_player")
@@ -71,11 +69,18 @@ export default async function adjustSpeedOnScrollWheel() {
: null;
// If player element is not available, return
if (!playerContainer) return;
-
// 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")
+ );
+ await updatePlaybackSpeedButtonTooltip(
+ "decreasePlaybackSpeedButton",
+ calculatePlaybackButtonSpeed(newSpeed, playback_buttons_speed, "decrease")
+ );
new OnScreenDisplayManager(
{
displayColor: osd_display_color,
@@ -88,14 +93,13 @@ export default async function adjustSpeedOnScrollWheel() {
},
"yte-osd",
{
- max: 4,
+ max: 16,
type: "speed",
value: newSpeed
}
);
})();
};
-
// Set up the scroll wheel event listeners on the specified container selectors
for (const selector of containerSelectors) {
setupScrollListeners(selector, handleWheel);
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/features/scrollWheelVolumeControl/index.ts b/src/features/scrollWheelVolumeControl/index.ts
index d7087f02..2023f3a6 100644
--- a/src/features/scrollWheelVolumeControl/index.ts
+++ b/src/features/scrollWheelVolumeControl/index.ts
@@ -1,7 +1,7 @@
import type { YouTubePlayerDiv } from "@/src/types";
import OnScreenDisplayManager from "@/src/utils/OnScreenDisplayManager";
-import { isShortsPage, isWatchPage, preventScroll, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
+import { isLivePage, isShortsPage, isWatchPage, preventScroll, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
import { adjustVolume, setupScrollListeners } from "./utils";
@@ -34,7 +34,6 @@ export default async function adjustVolumeOnScrollWheel(): Promise {
const setOptionsData = async () => {
return (optionsData = await waitForSpecificMessage("options", "request_data", "content"));
};
-
void (async () => {
if (!optionsData) {
return void (await setOptionsData());
@@ -73,18 +72,15 @@ export default async function adjustVolumeOnScrollWheel(): Promise {
// Only prevent default scroll wheel behavior
// if we are going to handle the event
preventScroll(wheelEvent);
-
// Update the options data after preventScroll()
await setOptionsData();
-
// Get the player element
const playerContainer =
- isWatchPage() ? document.querySelector("div#movie_player")
+ isWatchPage() || isLivePage() ? document.querySelector("div#movie_player")
: isShortsPage() ? document.querySelector("div#shorts-player")
: null;
// If player element is not available, return
if (!playerContainer) return;
-
// Adjust the volume based on the scroll direction
const scrollDelta = wheelEvent.deltaY < 0 ? 1 : -1;
// Adjust the volume based on the scroll direction and options
@@ -108,7 +104,6 @@ export default async function adjustVolumeOnScrollWheel(): Promise {
);
})();
};
-
// Set up the scroll wheel event listeners on the specified container selectors
for (const selector of containerSelectors) {
setupScrollListeners(selector, handleWheel);
diff --git a/src/features/shareShortener/index.ts b/src/features/shareShortener/index.ts
index e744c038..33c71687 100644
--- a/src/features/shareShortener/index.ts
+++ b/src/features/shareShortener/index.ts
@@ -43,12 +43,11 @@ function handleInput(event: MouseEvent) {
}
export async function enableShareShortener() {
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_share_shortener }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
if (!enable_share_shortener) return;
cleanSearchPage(window.location.href);
document.addEventListener("click", handleInput);
diff --git a/src/features/shortsAutoScroll/index.ts b/src/features/shortsAutoScroll/index.ts
index 8b0a9f67..155dc333 100644
--- a/src/features/shortsAutoScroll/index.ts
+++ b/src/features/shortsAutoScroll/index.ts
@@ -7,12 +7,11 @@ import { isShortsPage, waitForAllElements, waitForSpecificMessage } from "@/src/
export async function enableShortsAutoScroll() {
if (!isShortsPage()) return;
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_shorts_auto_scroll }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
// If the shorts auto scroll option is disabled, return
if (!enable_shorts_auto_scroll) return;
await waitForAllElements(["#shorts-player"]);
diff --git a/src/features/shortsAutoScroll/utils.ts b/src/features/shortsAutoScroll/utils.ts
index 68003a8c..55b66c92 100644
--- a/src/features/shortsAutoScroll/utils.ts
+++ b/src/features/shortsAutoScroll/utils.ts
@@ -9,7 +9,6 @@ export const setupAutoScroll = (playerContainer: YouTubePlayerDiv, video: HTMLVi
const progressState = playerContainer.getProgressState();
const currentTime = Math.floor(progressState.current);
const duration = Math.floor(progressState.duration);
-
if (currentTime === duration) {
eventManager.removeEventListener(video, "timeupdate", "shortsAutoScroll");
const nextButton = document.querySelector("#navigation-button-down > ytd-button-renderer > yt-button-shape > button");
diff --git a/src/features/skipContinueWatching/index.ts b/src/features/skipContinueWatching/index.ts
index 13d04688..2d2c4526 100644
--- a/src/features/skipContinueWatching/index.ts
+++ b/src/features/skipContinueWatching/index.ts
@@ -5,12 +5,11 @@ interface YtdWatchElement extends Element {
}
export async function enableSkipContinueWatching() {
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_skip_continue_watching }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
if (!enable_skip_continue_watching) return;
browserColorLog("Enabling skipContinueWatching", "FgMagenta");
const ytdWatchElement = document.querySelector(isNewYouTubeVideoLayout() ? "ytd-watch-grid" : "ytd-watch-flexy");
diff --git a/src/features/videoHistory/index.ts b/src/features/videoHistory/index.ts
index fd06fd91..371919c3 100644
--- a/src/features/videoHistory/index.ts
+++ b/src/features/videoHistory/index.ts
@@ -10,22 +10,20 @@ import {
isWatchPage,
round,
sendContentMessage,
+ waitForAllElements,
waitForSpecificMessage
} from "@/utils/utilities";
export async function setupVideoHistory() {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_video_history: enableVideoHistory }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
if (!enableVideoHistory) return;
+ if (!isWatchPage()) return;
// Get the player container element
- const playerContainer =
- isWatchPage() ? document.querySelector("div#movie_player")
- : isShortsPage() ? null
- : null;
+ const playerContainer = document.querySelector("div#movie_player");
// If player container is not available, return
if (!playerContainer) return;
const playerVideoData = await playerContainer.getVideoData();
@@ -35,7 +33,9 @@ export async function setupVideoHistory() {
if (!videoId) return;
const videoElement = playerContainer.querySelector("video.video-stream.html5-main-video");
if (!videoElement) return;
-
+ await waitForAllElements(["#owner #upload-info #channel-name"]);
+ const isOfficialArtistChannel = document.querySelector("#owner #upload-info #channel-name .badge-style-type-verified-artist") !== null;
+ if (isOfficialArtistChannel) return;
const videoPlayerTimeUpdateListener = () => {
void (async () => {
const currentTime = await playerContainer.getCurrentTime();
@@ -53,26 +53,24 @@ export async function setupVideoHistory() {
}
export async function promptUserToResumeVideo(cb: () => void) {
// Wait for the "options" message from the content script
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
options: { enable_video_history: enableVideoHistory, video_history_resume_type }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
if (!enableVideoHistory) return;
-
// Get the player container element
const playerContainer =
isWatchPage() ? document.querySelector("div#movie_player")
: isShortsPage() ? null
: null;
-
// If player container is not available, return
if (!playerContainer) return;
-
+ await waitForAllElements(["#owner #upload-info #channel-name"]);
+ const isOfficialArtistChannel = document.querySelector("#owner #upload-info #channel-name .badge-style-type-verified-artist") !== null;
+ if (isOfficialArtistChannel) return;
const { video_id: videoId } = await playerContainer.getVideoData();
if (!videoId) return;
-
const videoHistoryOneData = await waitForSpecificMessage("videoHistoryOne", "request_data", "content", { id: videoId });
if (!videoHistoryOneData) {
cb();
@@ -101,7 +99,6 @@ function createResumePrompt(videoHistoryEntry: VideoHistoryEntry, playerContaine
const resumeButtonId = "resume-prompt-button";
const promptId = "resume-prompt";
const progressBarDuration = 15;
-
const prompt = createStyledElement({
elementId: promptId,
elementType: "div",
@@ -133,7 +130,6 @@ function createResumePrompt(videoHistoryEntry: VideoHistoryEntry, playerContaine
zIndex: "1000"
}
});
-
const closeButton = createStyledElement({
elementId: closeButtonId,
elementType: "button",
@@ -168,7 +164,6 @@ function createResumePrompt(videoHistoryEntry: VideoHistoryEntry, playerContaine
}
});
resumeButton.textContent = window.i18nextInstance.t("pages.content.features.videoHistory.resumeButton");
-
function startCountdown() {
if (prompt) prompt.style.display = "block";
if (animationFrameId) {
@@ -188,24 +183,20 @@ function createResumePrompt(videoHistoryEntry: VideoHistoryEntry, playerContaine
}
animationFrameId = requestAnimationFrame(updateResumeProgress);
}
-
function hidePrompt() {
if (animationFrameId) cancelAnimationFrame(animationFrameId);
prompt.style.display = "none";
cb();
}
-
function resumeButtonClickListener() {
hidePrompt();
browserColorLog(window.i18nextInstance.t("messages.resumingVideo", { VIDEO_TIME: formatTime(videoHistoryEntry.timestamp) }), "FgGreen");
void playerContainer.seekTo(videoHistoryEntry.timestamp, true);
cb();
}
-
if (!elementExists(progressBarId)) {
prompt.appendChild(progressBar);
}
-
if (!elementExists(closeButtonId)) {
prompt.appendChild(closeButton);
}
@@ -217,9 +208,7 @@ function createResumePrompt(videoHistoryEntry: VideoHistoryEntry, playerContaine
});
eventManager.removeEventListener(closeButton, "mouseover", "videoHistory");
eventManager.addEventListener(closeButton, "mouseover", resumePromptCloseButtonMouseOverListener, "videoHistory");
-
startCountdown();
-
const closeListener = () => {
hidePrompt();
};
@@ -227,7 +216,6 @@ function createResumePrompt(videoHistoryEntry: VideoHistoryEntry, playerContaine
eventManager.addEventListener(resumeButton, "click", resumeButtonClickListener, "videoHistory");
eventManager.removeEventListener(closeButton, "click", "videoHistory");
eventManager.addEventListener(closeButton, "click", closeListener, "videoHistory");
-
// Display the prompt
if (!elementExists(promptId)) {
prompt.appendChild(resumeButton);
diff --git a/src/features/volumeBoost/index.ts b/src/features/volumeBoost/index.ts
index 80bd634b..31b72efc 100644
--- a/src/features/volumeBoost/index.ts
+++ b/src/features/volumeBoost/index.ts
@@ -7,16 +7,13 @@ import eventManager from "@/src/utils/EventManager";
import { browserColorLog, formatError, waitForSpecificMessage } from "@/src/utils/utilities";
export default async function volumeBoost() {
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
-
const {
data: {
options: { enable_volume_boost, volume_boost_amount, volume_boost_mode }
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
if (!enable_volume_boost) return;
setupVolumeBoost();
-
if (volume_boost_mode === "per_video") {
await addVolumeBoostButton();
} else if (volume_boost_mode === "global") {
@@ -25,14 +22,11 @@ export default async function volumeBoost() {
}
export async function enableVolumeBoost() {
setupVolumeBoost();
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
-
const {
data: {
options: { volume_boost_amount }
}
- } = optionsData;
-
+ } = await waitForSpecificMessage("options", "request_data", "content");
applyVolumeBoost(volume_boost_amount);
}
function setupVolumeBoost() {
@@ -64,15 +58,13 @@ export function applyVolumeBoost(volume_boost_amount: number) {
window.gainNode.gain.value = Math.pow(10, volume_boost_amount / 20);
}
export const addVolumeBoostButton: AddButtonFunction = async () => {
- const optionsData = await waitForSpecificMessage("options", "request_data", "content");
-
const {
data: {
options: {
button_placements: { volumeBoostButton: volumeBoostButtonPlacement }
}
}
- } = optionsData;
+ } = await waitForSpecificMessage("options", "request_data", "content");
await addFeatureButton(
"volumeBoostButton",
volumeBoostButtonPlacement,
diff --git a/src/global.d.ts b/src/global.d.ts
index 46b23fc7..3e76a27d 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -55,6 +55,8 @@ declare module "node_modules/@types/youtube-player/dist/types" {
viewerLivestreamJoinMediaTime: number;
}
interface YouTubePlayer {
+ unloadModule(moduleName: string): void;
+ loadModule(moduleName: string): void;
getProgressState(): ProgressState;
getVideoBytesLoaded(): Promise;
getVideoData(): Promise;
@@ -68,6 +70,7 @@ declare global {
}
interface Window {
audioCtx: AudioContext;
+ cachedPlaylistDuration: { playlistId: string; totalTimeSeconds: number } | null;
gainNode: GainNode;
i18nextInstance: i18nInstanceType;
webkitAudioContext: AudioContext;
diff --git a/src/hooks/useClickOutside.ts b/src/hooks/useClickOutside.ts
index 364f78c8..cc924bdb 100644
--- a/src/hooks/useClickOutside.ts
+++ b/src/hooks/useClickOutside.ts
@@ -6,43 +6,28 @@ import { type RefObject, useEffect } from "react";
const useClickOutside = (
ref: RefObject,
-
handler: (event: FocusEvent | MouseEvent | TouchEvent) => void
) => {
useEffect(() => {
let startedInside: Nullable | boolean> = false;
-
let startedWhenMounted: Nullable["current"] | boolean> = false;
-
const listener = (event: FocusEvent | MouseEvent | TouchEvent) => {
// Do nothing if `mousedown` or `touchstart` started inside ref element
-
if (startedInside || !startedWhenMounted) return;
-
// Do nothing if clicking ref's element or descendent elements
-
if (!ref.current || ref.current.contains(event.target as Node)) return;
-
handler(event);
};
-
const validateEventStart = (event: FocusEvent | MouseEvent | TouchEvent) => {
({ current: startedWhenMounted } = ref);
-
startedInside = event.target && ref.current && ref.current.contains(event.target as Node);
};
-
document.addEventListener("mousedown", validateEventStart);
-
document.addEventListener("touchstart", validateEventStart);
-
document.addEventListener("click", listener);
-
return () => {
document.removeEventListener("mousedown", validateEventStart);
-
document.removeEventListener("touchstart", validateEventStart);
-
document.removeEventListener("click", listener);
};
}, [ref, handler]);
diff --git a/src/hooks/useComponentVisible.ts b/src/hooks/useComponentVisible.ts
index 263ad075..79c4c13c 100644
--- a/src/hooks/useComponentVisible.ts
+++ b/src/hooks/useComponentVisible.ts
@@ -5,7 +5,6 @@ export default function useComponentVisible {
if (ref.current && !ref.current.contains(event.target as Node)) {
@@ -14,13 +13,11 @@ export default function useComponentVisible {
document.addEventListener("click", handleClickOutside, true);
return () => {
document.removeEventListener("click", handleClickOutside, true);
};
}, [handleClickOutside]);
-
return { isComponentVisible, setIsComponentVisible };
}
diff --git a/src/hooks/useNotifications/index.ts b/src/hooks/useNotifications/index.ts
index 5728e3f0..ed205126 100644
--- a/src/hooks/useNotifications/index.ts
+++ b/src/hooks/useNotifications/index.ts
@@ -6,7 +6,6 @@ const useNotifications = () => {
if (!context) {
throw new Error("useNotifications must be used within a NotificationsProvider");
}
-
return context;
};
export default useNotifications;
diff --git a/src/hooks/useNotifications/provider.tsx b/src/hooks/useNotifications/provider.tsx
index cfdeb0a0..d67fa48c 100644
--- a/src/hooks/useNotifications/provider.tsx
+++ b/src/hooks/useNotifications/provider.tsx
@@ -20,10 +20,8 @@ export const NotificationsProvider = ({ children }: NotificationProviderProps) =
const createNotification: CreateNotification = (type, message, action) => {
const removeNotificationAfterMs = action && action === "reset_settings" ? 15_000 : 5_000;
const notification = { action, message, removeAfterMs: removeNotificationAfterMs, timestamp: +new Date(), type } satisfies Notification;
-
return notification;
};
-
const scheduleNotificationRemoval: ScheduleNotificationRemoval = (notification, removeAfterMs) => {
if (removeAfterMs) {
setTimeout(() => {
@@ -35,7 +33,6 @@ export const NotificationsProvider = ({ children }: NotificationProviderProps) =
const notification = createNotification(type, message, action);
const existingNotification = notifications.find((n) => notificationIsEqual(n, notification));
if (existingNotification) return;
-
setNotifications((notifications) => [notification, ...notifications]);
scheduleNotificationRemoval(notification, notification.removeAfterMs);
};
diff --git a/src/hooks/useRunAfterUpdate.ts b/src/hooks/useRunAfterUpdate.ts
index 27f35a19..1ba9383e 100644
--- a/src/hooks/useRunAfterUpdate.ts
+++ b/src/hooks/useRunAfterUpdate.ts
@@ -4,12 +4,10 @@ import type { AnyFunction } from "../types";
const useRunAfterUpdate = () => {
const handlersRef = useRef([]);
-
useLayoutEffect(() => {
handlersRef.current.forEach((handler) => handler());
handlersRef.current = [];
});
-
return (handler: AnyFunction) => {
handlersRef.current.push(handler);
};
diff --git a/src/hooks/useSectionTitle/index.ts b/src/hooks/useSectionTitle/index.ts
index cf52d3c3..6415433b 100644
--- a/src/hooks/useSectionTitle/index.ts
+++ b/src/hooks/useSectionTitle/index.ts
@@ -4,11 +4,9 @@ import { SectionTitleContext } from "./context";
const useSectionTitle = () => {
const context = useContext(SectionTitleContext);
-
if (context === undefined) {
throw new Error("useSectionTitle must be used within a SectionTitleProvider");
}
-
return context;
};
export default useSectionTitle;
diff --git a/src/hooks/useSettingsFilter/index.ts b/src/hooks/useSettingsFilter/index.ts
index 65a611cd..840a8115 100644
--- a/src/hooks/useSettingsFilter/index.ts
+++ b/src/hooks/useSettingsFilter/index.ts
@@ -4,11 +4,9 @@ import { SettingsFilterContext } from "./context";
const useSettingsFilter = () => {
const context = useContext(SettingsFilterContext);
-
if (context === undefined) {
throw new Error("useSettingsFilter must be used within a SettingsFilterProvider");
}
-
return context;
};
diff --git a/src/hooks/useStorage.ts b/src/hooks/useStorage.ts
index 12a776b2..ae30a807 100644
--- a/src/hooks/useStorage.ts
+++ b/src/hooks/useStorage.ts
@@ -14,7 +14,6 @@ type SetValue = Dispatch>;
*/
export function useStorage(key: string, initialValue: T, area: StorageArea = "local"): [T, SetValue] {
const [storedValue, setStoredValue] = useState(initialValue);
-
useEffect(() => {
readStorage(key, area)
.then((res) => {
@@ -22,16 +21,13 @@ export function useStorage(key: string, initialValue: T, area: StorageArea =
return;
})
.catch((err) => console.error(err));
-
chrome.storage.onChanged.addListener((changes, namespace) => {
if (namespace === area && Object.hasOwnProperty.call(changes, key)) {
if (changes[key].newValue) setStoredValue(changes[key].newValue as unknown as T);
}
});
}, [area, key]);
-
const setValueRef = useRef>();
-
setValueRef.current = (value) => {
// Allow value to be a function, so we have the same API as useState
const newValue = value instanceof Function ? value(storedValue) : value;
@@ -43,15 +39,12 @@ export function useStorage(key: string, initialValue: T, area: StorageArea =
return;
})
.catch((error) => console.error(error));
-
return newValue;
});
};
-
// Return a wrapped version of useState's setter function that ...
// ... persists the new value to storage.
const setValue: SetValue = useCallback((value) => setValueRef.current?.(value), []);
-
return [storedValue, setValue];
}
diff --git a/src/i18n/constants.ts b/src/i18n/constants.ts
index 4ec7960c..b86a717d 100644
--- a/src/i18n/constants.ts
+++ b/src/i18n/constants.ts
@@ -1,50 +1,50 @@
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,
"ca-ES": 0,
"cs-CZ": 0,
- "de-DE": 31,
- "en-GB": 2,
- "en-US": 100,
- "es-ES": 54,
+ "de-DE": 27,
+ "en-GB": 1,
+ "es-ES": 48,
"fa-IR": 0,
- "fr-FR": 57,
+ "fr-FR": 50,
"he-IL": 0,
"hi-IN": 0,
- "it-IT": 100,
- "ja-JP": 100,
- "ko-KR": 94,
+ "it-IT": 89,
+ "ja-JP": 89,
+ "ko-KR": 89,
"pl-PL": 0,
- "pt-BR": 63,
- "ru-RU": 100,
- "sv-SE": 94,
- "tr-TR": 69,
- "uk-UA": 21,
+ "pt-BR": 55,
+ "ru-RU": 89,
+ "sv-SE": 89,
+ "tr-TR": 62,
+ "uk-UA": 18,
"vi-VN": 0,
- "zh-CN": 100,
- "zh-TW": 96
+ "zh-CN": 89,
+ "zh-TW": 86
};
export const localeDirection: Record = {
"ca-ES": "ltr",
diff --git a/src/icons.ts b/src/icons.ts
index 2cc7fec9..f714b68a 100644
--- a/src/icons.ts
+++ b/src/icons.ts
@@ -286,7 +286,23 @@ const rewindButtonSVG = createSVGElement(
d: "M 11.685714,19.542856 V 4.4571438 L 1.000001,12 Z M 12.314285,12 22.999999,19.542856 V 4.4571438 Z"
})
);
+const copyURLWithTimestampSVG = createSVGElement(
+ "svg",
+ {
+ fill: "white",
+ height: "23px",
+ viewBox: "0 0 21.443 23.000378",
+ width: "21.442648"
+ },
+ createSVGElement("path", {
+ d: "m 15.231937,11.02203 c -3.168022,0 -5.7334298,2.571146 -5.7334298,5.739168 0,3.168023 2.5654078,5.739172 5.7334298,5.739172 3.17376,0 5.74491,-2.571149 5.74491,-5.739172 0,-3.168022 -2.57115,-5.739168 -5.74491,-5.739168 z m 0.0057,10.330505 c -2.536712,0 -4.591336,-2.054622 -4.591336,-4.591337 0,-2.536712 2.054624,-4.591335 4.591336,-4.591335 2.536713,0 4.591336,2.054623 4.591336,4.591335 0,2.536715 -2.054623,4.591337 -4.591336,4.591337 z m 0.286972,-7.460921 h -0.860876 v 3.443503 l 3.013064,1.807837 0.430438,-0.705918 -2.582626,-1.532357 z M 6.4145673,0.50020216 C 5.3380684,0.52772093 4.4660134,1.4182478 4.4660134,2.5010665 V 16.499645 c 0,1.100008 0.9008568,2.000863 2.0008639,2.000863 h 2.7892545 c -0.00367,-0.0126 -0.0076,-0.02471 -0.011238,-0.03738 -0.013947,-0.04919 -0.026468,-0.09981 -0.039218,-0.149459 -0.012751,-0.04966 -0.025827,-0.09933 -0.037381,-0.149458 -0.011555,-0.05014 -0.021442,-0.100746 -0.031723,-0.151322 -0.010367,-0.05062 -0.020801,-0.100308 -0.029895,-0.151323 -0.00909,-0.05102 -0.018332,-0.101758 -0.026143,-0.153195 -0.00786,-0.05142 -0.013947,-0.103218 -0.020562,-0.155063 -0.00658,-0.05182 -0.013392,-0.104699 -0.018648,-0.156925 -0.0053,-0.05221 -0.00909,-0.104327 -0.013076,-0.156928 -0.00402,-0.05261 -0.00858,-0.105839 -0.011238,-0.1588 -0.00265,-0.05292 -0.00428,-0.105496 -0.00564,-0.158798 -0.00137,-0.05333 -0.00188,-0.107037 -0.00188,-0.160659 0,-0.05364 5.187e-4,-0.107362 0.00188,-0.160665 8.547e-4,-0.03388 0.00231,-0.06711 0.00376,-0.100881 H 6.4668773 V 2.5010665 H 17.466961 v 8.4611715 c 0.01179,0.0045 0.02376,0.0084 0.03547,0.01308 0.04711,0.01858 0.09544,0.03826 0.14199,0.05796 0.04655,0.01969 0.0923,0.03905 0.13825,0.05978 0.04591,0.02073 0.09103,0.04168 0.136377,0.06353 0.04536,0.02185 0.09165,0.0444 0.136376,0.06727 0.04472,0.02288 0.08855,0.04703 0.132647,0.07102 0.04409,0.02391 0.08733,0.04791 0.130773,0.07286 0.04344,0.02495 0.08613,0.05063 0.128909,0.0766 0.0428,0.02599 0.08496,0.0534 0.127043,0.08034 0.04209,0.02694 0.08378,0.05428 0.12517,0.0822 0.04138,0.02798 0.08263,0.05515 0.123305,0.08407 0.04065,0.02894 0.0815,0.05796 0.121431,0.08781 0.03993,0.02981 0.08038,0.06074 0.119566,0.09154 0.03922,0.03077 0.0774,0.0617 0.115826,0.09341 0.03841,0.03173 0.07635,0.06456 0.113963,0.09715 0.03762,0.03261 0.07525,0.06552 0.112098,0.09901 0.02041,0.01849 0.03961,0.03723 0.05978,0.05603 V 2.5010665 c 2e-5,-1.1000068 -0.898969,-2.00086434 -1.998976,-2.00086434 H 6.4668773 c -0.017186,0 -0.035224,-4.3671e-4 -0.05231,0 z M 10.257499,20.499504 H 2.4651491 V 6.5009267 H 0.46615326 V 20.499504 c 0,1.100008 0.89898954,2.000866 1.99899584,2.000866 H 12.830037 c -0.0093,-0.0038 -0.01881,-0.0073 -0.02805,-0.01124 -0.04648,-0.01969 -0.09238,-0.03906 -0.138251,-0.05978 -0.04584,-0.02073 -0.09112,-0.04169 -0.136377,-0.06353 -0.04528,-0.02185 -0.08987,-0.0444 -0.134512,-0.06727 -0.04464,-0.02288 -0.08864,-0.04703 -0.132647,-0.07102 -0.04399,-0.02391 -0.08929,-0.04791 -0.132646,-0.07286 -0.04336,-0.02495 -0.08622,-0.05062 -0.128909,-0.0766 -0.04272,-0.02599 -0.08503,-0.0534 -0.127042,-0.08033 -0.042,-0.02695 -0.08386,-0.05428 -0.12517,-0.08219 -0.04128,-0.02798 -0.08084,-0.05515 -0.121432,-0.08407 -0.04057,-0.02894 -0.08158,-0.05796 -0.121431,-0.08781 -0.03986,-0.0298 -0.0786,-0.06074 -0.117701,-0.09154 -0.03914,-0.03076 -0.07748,-0.0617 -0.115827,-0.09341 -0.03834,-0.03164 -0.07636,-0.06456 -0.113963,-0.09715 -0.03754,-0.03261 -0.07533,-0.06552 -0.112089,-0.09902 -0.03675,-0.03348 -0.07238,-0.06656 -0.108359,-0.100882 -0.03596,-0.03436 -0.07326,-0.06942 -0.108359,-0.10462 -0.03515,-0.03515 -0.06848,-0.07047 -0.102755,-0.106486 -0.03428,-0.03603 -0.06935,-0.07341 -0.102755,-0.110225 -0.0334,-0.03683 -0.06648,-0.07262 -0.09902,-0.110223 -0.03252,-0.03762 -0.06361,-0.07556 -0.09528,-0.113963 -0.03164,-0.03843 -0.06265,-0.07852 -0.09341,-0.1177 -0.02583,-0.03285 -0.05149,-0.0656 -0.0766,-0.09902 z"
+ })
+);
export const featureIcons = {
+ copyTimestampUrlButton: {
+ feature_menu: copyURLWithTimestampSVG,
+ shared_icon_position: copyURLWithTimestampSVG
+ },
decreasePlaybackSpeedButton: {
feature_menu: decreasePlaybackSpeedButtonSVG,
shared_icon_position: decreasePlaybackSpeedButtonSVG
diff --git a/src/pages/content/index.ts b/src/pages/content/index.ts
index 2f7d7776..17be107c 100644
--- a/src/pages/content/index.ts
+++ b/src/pages/content/index.ts
@@ -122,7 +122,6 @@ document.addEventListener("yte-message-from-youtube", () => {
});
break;
}
-
case "language": {
const language = await new Promise((resolve) => {
chrome.storage.local.get("language", (o) => {
@@ -145,7 +144,6 @@ document.addEventListener("yte-message-from-youtube", () => {
void chrome.storage.local.set({ remembered_volumes: JSON.stringify({ ...existingRememberedVolumes, ...message.data }) });
break;
}
-
case "pageLoaded": {
chrome.storage.onChanged.addListener(storageListeners);
window.onunload = () => {
@@ -196,36 +194,28 @@ const getStoredSettings = async (): Promise => {
resolve(storedSettings as configuration);
});
});
-
return options;
};
const deepEqual = (a: unknown, b: unknown): boolean => {
if (a === b) return true;
-
if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) {
return false;
}
-
const keysA = Object.keys(a);
const keysB = Object.keys(b);
-
if (keysA.length !== keysB.length) return false;
-
for (const key of keysA) {
if (!keysB.includes(key)) return false;
if (!deepEqual((a as Record)[key], (b as Record)[key])) return false;
}
-
return true;
};
const isValidChange = (change?: { newValue?: unknown; oldValue?: unknown }) => {
if (change?.newValue === undefined || change?.oldValue === undefined) {
return false;
}
-
const parsedOldValue = parseStoredValue(change.oldValue as string);
const parsedNewValue = parseStoredValue(change.newValue as string);
-
return !deepEqual(parsedOldValue, parsedNewValue);
};
const storageChangeHandler = async (changes: StorageChanges, areaName: string) => {
@@ -281,6 +271,11 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
automaticTheaterModeEnabled: newValue
});
},
+ enable_copy_timestamp_url_button: (__oldValue, newValue) => {
+ sendExtensionOnlyMessage("copyTimestampUrlButtonChange", {
+ copyTimestampUrlButtonEnabled: newValue
+ });
+ },
enable_custom_css: (__oldValue, newValue) => {
sendExtensionOnlyMessage("customCSSChange", { customCSSCode: options.custom_css_code, customCSSEnabled: newValue });
},
@@ -348,6 +343,9 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
maximizePlayerButtonEnabled: newValue
});
},
+ enable_hide_official_artist_videos_from_home_page: (__oldValue, newValue) => {
+ sendExtensionOnlyMessage("hideOfficialArtistVideosFromHomePageChange", { hideOfficialArtistVideosFromHomePageEnabled: newValue });
+ },
enable_open_transcript_button: (__oldValue, newValue) => {
sendExtensionOnlyMessage("openTranscriptButtonChange", {
openTranscriptButtonEnabled: newValue
@@ -369,6 +367,11 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
playbackSpeedButtonsEnabled: newValue
});
},
+ enable_playlist_length: (__oldValue, newValue) => {
+ sendExtensionOnlyMessage("playlistLengthChange", {
+ playlistLengthEnabled: newValue
+ });
+ },
enable_redirect_remover: (__oldValue, newValue) => {
sendExtensionOnlyMessage("removeRedirectChange", {
removeRedirectEnabled: newValue
@@ -394,6 +397,11 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
scrollWheelSpeedControlEnabled: newValue
});
},
+ enable_automatically_disable_closed_captions: (__oldValue, newValue) => {
+ sendExtensionOnlyMessage("automaticallyDisableClosedCaptionsChange", {
+ automaticallyDisableClosedCaptionsEnabled: newValue
+ });
+ },
enable_scroll_wheel_volume_control: (__oldValue, newValue) => {
sendExtensionOnlyMessage("scrollWheelVolumeControlChange", {
scrollWheelVolumeControlEnabled: newValue
@@ -452,6 +460,12 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
playerSpeed: newValue
});
},
+ playlist_length_get_method: () => {
+ sendExtensionOnlyMessage("playlistLengthGetMethodChange", undefined);
+ },
+ playlist_watch_time_get_method: () => {
+ sendExtensionOnlyMessage("playlistWatchTimeGetMethodChange", undefined);
+ },
volume_boost_amount: (newValue) => {
sendExtensionOnlyMessage("volumeBoostAmountChange", {
volumeBoostAmount: newValue,
diff --git a/src/pages/embedded/index.ts b/src/pages/embedded/index.ts
index 0b5b8642..ec28decd 100644
--- a/src/pages/embedded/index.ts
+++ b/src/pages/embedded/index.ts
@@ -1,9 +1,14 @@
/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
import { deepDarkPresets } from "@/src/deepDarkPresets";
import { type FeatureFuncRecord, featureButtonFunctions } from "@/src/features";
+import {
+ disableAutomaticallyDisableClosedCaptions,
+ enableAutomaticallyDisableClosedCaptions
+} from "@/src/features/automaticallyDisableClosedCaptions";
import { enableAutomaticTheaterMode } from "@/src/features/automaticTheaterMode";
import { featuresInControls } from "@/src/features/buttonPlacement";
import { getFeatureButton, updateFeatureButtonIcon, updateFeatureButtonTitle } from "@/src/features/buttonPlacement/utils";
+import { addCopyTimestampUrlButton, removeCopyTimestampUrlButton } from "@/src/features/copyTimestampUrlButton";
import { disableCustomCSS, enableCustomCSS } from "@/src/features/customCSS";
import { customCSSExists, updateCustomCSS } from "@/src/features/customCSS/utils";
import { disableDeepDarkCSS, enableDeepDarkCSS } from "@/src/features/deepDarkCSS";
@@ -19,6 +24,10 @@ import {
removeHideEndScreenCardsButton
} from "@/src/features/hideEndScreenCards";
import { disableHideLiveStreamChat, enableHideLiveStreamChat } from "@/src/features/hideLiveStreamChat";
+import {
+ disableHideOfficialArtistVideosFromHomePage,
+ enableHideOfficialArtistVideosFromHomePage
+} from "@/src/features/hideOfficialArtistVideosFromHomePage";
import { disableHidePaidPromotionBanner, enableHidePaidPromotionBanner } from "@/src/features/hidePaidPromotionBanner";
import { enableHideScrollBar } from "@/src/features/hideScrollBar";
import { hideScrollBar, showScrollBar } from "@/src/features/hideScrollBar/utils";
@@ -34,11 +43,14 @@ 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";
+import { disablePlaylistLength, enablePlaylistLength } from "@/src/features/playlistLength";
import { setupRemainingTime as enableRemainingTime, removeRemainingTimeDisplay } from "@/src/features/remainingTime";
import enableRememberVolume from "@/src/features/rememberVolume";
import enableRemoveRedirect from "@/src/features/removeRedirect";
@@ -78,7 +90,9 @@ import {
findKeyByValue,
formatError,
groupButtonChanges,
+ isLivePage,
isNewYouTubeVideoLayout,
+ isPlaylistPage,
isShortsPage,
isWatchPage,
sendContentOnlyMessage,
@@ -134,7 +148,9 @@ const alwaysShowProgressBar = async function () {
progressPlay += progressWidth;
progressLoad += progressWidth;
};
-
+function shouldEnableFeaturesFuncReturn() {
+ return !(isWatchPage() || isShortsPage() || isPlaylistPage() || isLivePage());
+}
const enableFeatures = () => {
browserColorLog(`Enabling features...`, "FgMagenta");
void (async () => {
@@ -153,15 +169,13 @@ const enableFeatures = () => {
enableShareShortener(),
enableSkipContinueWatching(),
enablePauseBackgroundPlayers(),
- enableRememberVolume(),
enableHideScrollBar(),
enableCustomCSS(),
- enableDeepDarkCSS()
+ enableDeepDarkCSS(),
+ enableHideOfficialArtistVideosFromHomePage()
]);
-
// Use a guard clause to reduce amount of times nesting code happens
- if (!(isWatchPage() || isShortsPage())) return;
-
+ if (shouldEnableFeaturesFuncReturn()) return;
void Promise.all([
promptUserToResumeVideo(() => void setupVideoHistory()),
setupPlaybackSpeedChangeListener(),
@@ -171,13 +185,14 @@ const enableFeatures = () => {
enableRememberVolume(),
enableAutomaticTheaterMode(),
enableRemainingTime(),
- volumeBoost(),
setPlayerQuality(),
setPlayerSpeed(),
adjustVolumeOnScrollWheel(),
adjustSpeedOnScrollWheel(),
enableHideTranslateComment(),
- enableHideEndScreenCards()
+ enableHideEndScreenCards(),
+ enablePlaylistLength(),
+ enableAutomaticallyDisableClosedCaptions()
]);
// Enable feature menu before calling button functions
await enableFeatureMenu();
@@ -224,6 +239,8 @@ const enableFeatures = () => {
await openTranscriptButton();
await addMaximizePlayerButton();
await addLoopButton();
+ await addCopyTimestampUrlButton();
+ await volumeBoost();
})();
};
const getFeatureFunctions = (featureName: AllButtonNames, oldPlacement: ButtonPlacement) => {
@@ -232,17 +249,18 @@ const getFeatureFunctions = (featureName: AllButtonNames, oldPlacement: ButtonPl
if (!featureFunctions) {
throw new Error(`Feature '${featureName}' not found in featureButtonFunctions`);
}
-
// Cast featureFunctions to FeatureFuncRecord
const castFeatureFunctions = featureFunctions as unknown as FeatureFuncRecord;
-
return {
add: () => castFeatureFunctions.add(),
remove: () => castFeatureFunctions.remove(oldPlacement)
};
};
function handleSoftNavigate() {
- // Listen to YouTube's soft navigate event
+ // Remove existing listeners
+ document.removeEventListener("yt-navigate-finish", enableFeatures);
+ document.removeEventListener("yt-player-updated", enableFeatures);
+ // Add listeners
document.addEventListener("yt-navigate-finish", enableFeatures);
document.addEventListener("yt-player-updated", enableFeatures);
}
@@ -259,7 +277,7 @@ window.addEventListener("DOMContentLoaded", function () {
enableFeatures();
handleSoftNavigate();
} else if (!isFirstLoad) {
- handleSoftNavigate;
+ handleSoftNavigate();
}
isFirstLoad = false;
/**
@@ -282,6 +300,34 @@ window.addEventListener("DOMContentLoaded", function () {
}
if (!message) return;
switch (message.type) {
+ case "hideOfficialArtistVideosFromHomePageChange": {
+ const {
+ data: { hideOfficialArtistVideosFromHomePageEnabled }
+ } = message;
+ if (hideOfficialArtistVideosFromHomePageEnabled) {
+ await enableHideOfficialArtistVideosFromHomePage();
+ } else {
+ disableHideOfficialArtistVideosFromHomePage();
+ }
+ break;
+ }
+ case "playlistLengthChange": {
+ const {
+ data: { playlistLengthEnabled }
+ } = message;
+ if (playlistLengthEnabled) {
+ await enablePlaylistLength();
+ } else {
+ disablePlaylistLength();
+ }
+ break;
+ }
+ case "playlistLengthGetMethodChange":
+ case "playlistWatchTimeGetMethodChange": {
+ disablePlaylistLength();
+ await enablePlaylistLength();
+ break;
+ }
case "volumeBoostChange": {
const {
data: { volumeBoostEnabled, volumeBoostMode }
@@ -306,7 +352,6 @@ window.addEventListener("DOMContentLoaded", function () {
const {
data: { volumeBoostAmount, volumeBoostEnabled, volumeBoostMode }
} = message;
-
switch (volumeBoostMode) {
case "global": {
if (!volumeBoostEnabled) return;
@@ -326,10 +371,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("video");
+ if (!videoElement) return;
+ const { playbackRate: currentSpeed } = videoElement;
+ await updatePlaybackSpeedButtonTooltip(
+ "increasePlaybackSpeedButton",
+ calculatePlaybackButtonSpeed(currentSpeed, playbackSpeedPerClick, "increase")
+ );
+ await updatePlaybackSpeedButtonTooltip(
+ "decreasePlaybackSpeedButton",
+ calculatePlaybackButtonSpeed(currentSpeed, playbackSpeedPerClick, "decrease")
+ );
}
break;
}
@@ -431,6 +500,17 @@ window.addEventListener("DOMContentLoaded", function () {
}
break;
}
+ case "copyTimestampUrlButtonChange": {
+ const {
+ data: { copyTimestampUrlButtonEnabled }
+ } = message;
+ if (copyTimestampUrlButtonEnabled) {
+ await addCopyTimestampUrlButton();
+ } else {
+ await removeCopyTimestampUrlButton();
+ }
+ break;
+ }
case "forwardRewindButtonsChange": {
const {
data: { forwardRewindButtonsEnabled }
@@ -573,6 +653,17 @@ window.addEventListener("DOMContentLoaded", function () {
else await removeHideEndScreenCardsButton();
break;
}
+ case "automaticallyDisableClosedCaptionsChange": {
+ const {
+ data: { automaticallyDisableClosedCaptionsEnabled }
+ } = message;
+ if (automaticallyDisableClosedCaptionsEnabled) {
+ await enableAutomaticallyDisableClosedCaptions();
+ } else {
+ await disableAutomaticallyDisableClosedCaptions();
+ }
+ break;
+ }
case "hideLiveStreamChatChange": {
const {
data: { hideLiveStreamChatEnabled }
@@ -678,7 +769,6 @@ window.addEventListener("DOMContentLoaded", function () {
// If the size button is not available return
if (!sizeButton) return;
sizeButton.click();
-
break;
}
case "featureMenuOpenTypeChange": {
diff --git a/src/types/index.ts b/src/types/index.ts
index d7762413..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;
@@ -122,6 +122,10 @@ export const videoHistoryResumeTypes = ["automatic", "prompt"] as const;
export type VideoHistoryResumeType = (typeof videoHistoryResumeTypes)[number];
export const buttonPlacements = ["below_player", "feature_menu", "player_controls_left", "player_controls_right"] as const;
export type ButtonPlacement = (typeof buttonPlacements)[number];
+export const playlistWatchTimeGetMethod = ["duration", "youtube"] as const;
+export type PlaylistWatchTimeGetMethod = (typeof playlistWatchTimeGetMethod)[number];
+export const playlistLengthGetMethod = ["api", "html"] as const;
+export type PlaylistLengthGetMethod = (typeof playlistLengthGetMethod)[number];
export const featureMenuOpenTypes = ["click", "hover"] as const;
export type MultiButtonChange = {
[K in MultiButtonFeatureNames]: {
@@ -185,6 +189,7 @@ export type FeatureMenuItemIconId = `yte-${AllButtonNames}-icon`;
export type FeatureMenuItemId = `yte-feature-${AllButtonNames}-menuitem`;
export type FeatureMenuItemLabelId = `yte-${AllButtonNames}-label`;
export const buttonNames = Object.keys({
+ copyTimestampUrlButton: "",
decreasePlaybackSpeedButton: "",
forwardButton: "",
hideEndScreenCardsButton: "",
@@ -197,6 +202,7 @@ export const buttonNames = Object.keys({
volumeBoostButton: ""
} satisfies Record);
export const buttonNameToSettingName = {
+ copyTimestampUrlButton: "enable_copy_timestamp_url_button",
decreasePlaybackSpeedButton: "enable_playback_speed_buttons",
forwardButton: "enable_forward_rewind_buttons",
hideEndScreenCardsButton: "enable_hide_end_screen_cards_button",
@@ -232,6 +238,37 @@ export type Notification = {
timestamp?: number;
type: NotificationType;
};
+export type YouTubePlaylistResponse = {
+ items: YouTubePlaylistItem[];
+ nextPageToken?: string;
+};
+export type YouTubePlaylistItem = {
+ contentDetails: {
+ videoId: string;
+ };
+};
+
+export type YouTubeVideoResponse = {
+ items: YouTubeVideoItem[];
+};
+
+export type YouTubeVideoItem = {
+ contentDetails: {
+ duration: string; // ISO 8601 duration format
+ };
+};
+export type YouTubeAPIQuotaError = {
+ error: {
+ code: number;
+ errors: { domain: string; message: string; reason: string }[];
+ message: string;
+ };
+};
+export type VideoDetails = {
+ duration: number;
+ progress: number;
+ videoId: Nullable;
+};
export type CrowdinLanguageProgressResponse = {
data: {
data: {
@@ -318,6 +355,7 @@ export type ContentToBackgroundSendOnlyMessageMappings = {
export type ExtensionSendOnlyMessageMappings = {
automaticTheaterModeChange: DataResponseMessage<"automaticTheaterModeChange", { automaticTheaterModeEnabled: boolean }>;
buttonPlacementChange: DataResponseMessage<"buttonPlacementChange", ButtonPlacementChange>;
+ copyTimestampUrlButtonChange: DataResponseMessage<"copyTimestampUrlButtonChange", { copyTimestampUrlButtonEnabled: boolean }>;
customCSSChange: DataResponseMessage<"customCSSChange", { customCSSCode: string; customCSSEnabled: boolean }>;
deepDarkThemeChange: DataResponseMessage<
"deepDarkThemeChange",
@@ -335,6 +373,10 @@ export type ExtensionSendOnlyMessageMappings = {
hideScrollBarChange: DataResponseMessage<"hideScrollBarChange", { hideScrollBarEnabled: boolean }>;
hideShortsChange: DataResponseMessage<"hideShortsChange", { hideShortsEnabled: boolean }>;
hideTranslateCommentChange: DataResponseMessage<"hideTranslateCommentChange", { hideTranslateCommentEnabled: boolean }>;
+ hideOfficialArtistVideosFromHomePageChange: DataResponseMessage<
+ "hideOfficialArtistVideosFromHomePageChange",
+ { hideOfficialArtistVideosFromHomePageEnabled: boolean }
+ >;
languageChange: DataResponseMessage<"languageChange", { language: AvailableLocales }>;
loopButtonChange: DataResponseMessage<"loopButtonChange", { loopButtonEnabled: boolean }>;
maximizeButtonChange: DataResponseMessage<"maximizeButtonChange", { maximizePlayerButtonEnabled: boolean }>;
@@ -351,6 +393,9 @@ export type ExtensionSendOnlyMessageMappings = {
{ playbackButtonsSpeed: number; playbackSpeedButtonsEnabled: boolean }
>;
playerSpeedChange: DataResponseMessage<"playerSpeedChange", { enableForcedPlaybackSpeed: boolean; playerSpeed?: number }>;
+ playlistLengthChange: DataResponseMessage<"playlistLengthChange", { playlistLengthEnabled: boolean }>;
+ playlistLengthGetMethodChange: DataResponseMessage<"playlistLengthGetMethodChange", undefined>;
+ playlistWatchTimeGetMethodChange: DataResponseMessage<"playlistWatchTimeGetMethodChange", undefined>;
remainingTimeChange: DataResponseMessage<"remainingTimeChange", { remainingTimeEnabled: boolean }>;
rememberVolumeChange: DataResponseMessage<"rememberVolumeChange", { rememberVolumeEnabled: boolean }>;
removeRedirectChange: DataResponseMessage<"removeRedirectChange", { removeRedirectEnabled: boolean }>;
@@ -371,6 +416,10 @@ export type ExtensionSendOnlyMessageMappings = {
{ volumeBoostAmount: number; volumeBoostEnabled: boolean; volumeBoostMode: VolumeBoostMode }
>;
volumeBoostChange: DataResponseMessage<"volumeBoostChange", { volumeBoostEnabled: boolean; volumeBoostMode: VolumeBoostMode }>;
+ automaticallyDisableClosedCaptionsChange: DataResponseMessage<
+ "automaticallyDisableClosedCaptionsChange",
+ { automaticallyDisableClosedCaptionsEnabled: boolean }
+ >;
};
export type FilterMessagesBySource = {
[K in keyof T]: Extract;
@@ -409,11 +458,14 @@ export type configuration = {
deep_dark_preset: DeepDarkPreset;
enable_automatic_theater_mode: boolean;
enable_automatically_set_quality: boolean;
+ enable_copy_timestamp_url_button: boolean;
+ enable_automatically_disable_closed_captions: boolean;
enable_custom_css: boolean;
enable_deep_dark_theme: boolean;
enable_forced_playback_speed: boolean;
enable_forward_rewind_buttons: boolean;
enable_hide_end_screen_cards: boolean;
+ enable_hide_official_artist_videos_from_home_page: boolean;
enable_hide_end_screen_cards_button: boolean;
enable_hide_live_stream_chat: boolean;
enable_hide_paid_promotion_banner: boolean;
@@ -426,6 +478,7 @@ export type configuration = {
enable_open_youtube_settings_on_hover: boolean;
enable_pausing_background_players: boolean;
enable_playback_speed_buttons: boolean;
+ enable_playlist_length: boolean;
enable_redirect_remover: boolean;
enable_remaining_time: boolean;
enable_remember_last_volume: boolean;
@@ -452,6 +505,8 @@ export type configuration = {
player_quality: YoutubePlayerQualityLevel;
player_quality_fallback_strategy: PlayerQualityFallbackStrategy;
player_speed: number;
+ playlist_length_get_method: PlaylistLengthGetMethod;
+ playlist_watch_time_get_method: PlaylistWatchTimeGetMethod;
remembered_volumes: RememberedVolumes;
screenshot_format: ScreenshotFormat;
screenshot_save_as: ScreenshotType;
@@ -462,6 +517,7 @@ export type configuration = {
volume_adjustment_steps: number;
volume_boost_amount: number;
volume_boost_mode: VolumeBoostMode;
+ youtube_data_api_v3_key: string;
};
export type configurationKeys = keyof configuration;
export type configurationId = Path;
diff --git a/src/utils/EventManager.ts b/src/utils/EventManager.ts
index 96d47845..2091d255 100644
--- a/src/utils/EventManager.ts
+++ b/src/utils/EventManager.ts
@@ -1,5 +1,6 @@
export type FeatureName =
| "automaticTheaterMode"
+ | "copyTimestampUrlButton"
| "featureMenu"
| "forwardRewindButtons"
| "hideEndScreenCardsButton"
@@ -12,6 +13,7 @@ export type FeatureName =
| "playbackSpeedButtons"
| "playerQuality"
| "playerSpeed"
+ | "playlistLength"
| "remainingTime"
| "rememberVolume"
| "removeRedirect"
@@ -84,10 +86,8 @@ export const eventManager: EventManager = {
target.addEventListener(eventName, callback, options);
}
},
-
// event listener info objects
- listeners: new Map(),
-
+ listeners: new Map>(),
// Removes all event listeners
removeAllEventListeners: function (exclude) {
// Iterate over all registered listeners
diff --git a/src/utils/OnScreenDisplayManager.ts b/src/utils/OnScreenDisplayManager.ts
index 0a691d0f..70bf700d 100644
--- a/src/utils/OnScreenDisplayManager.ts
+++ b/src/utils/OnScreenDisplayManager.ts
@@ -144,6 +144,11 @@ export default class OnScreenDisplayManager {
this.canvas.width = width;
this.canvas.height = fontSize;
this.clearCanvas();
+ // Add a shadow effect around the text.
+ this.context.shadowColor = "black";
+ this.context.shadowBlur = 10;
+ this.context.shadowOffsetX = 0;
+ this.context.shadowOffsetY = 0;
this.context.globalAlpha = displayOpacity / 100;
this.context.fillStyle = displayColor;
this.setFont();
@@ -156,11 +161,16 @@ export default class OnScreenDisplayManager {
const lineHeight = 5;
this.canvas.width = lineWidth;
this.canvas.height = lineHeight;
- this.clearCanvas();
this.context.globalAlpha = displayOpacity / 100;
this.context.fillStyle = displayColor;
const lineX = (this.canvas.width - lineWidth) / 2;
const lineY = (this.canvas.height - lineHeight) / 2;
+ this.clearCanvas();
+ // Add a shadow effect around the line.
+ this.context.shadowColor = "black";
+ this.context.shadowBlur = 10;
+ this.context.shadowOffsetX = 0;
+ this.context.shadowOffsetY = 0;
this.context.fillRect(lineX, lineY, lineWidth, lineHeight);
break;
}
@@ -176,6 +186,11 @@ export default class OnScreenDisplayManager {
const centerY = this.canvas.height / 2;
const startAngle = Math.PI + Math.PI * round(value / max, 2);
const endAngle = Math.PI - Math.PI * round(value / max, 2);
+ // Add a shadow effect around the circle.
+ this.context.shadowColor = "black";
+ this.context.shadowBlur = 10;
+ this.context.shadowOffsetX = 0;
+ this.context.shadowOffsetY = 0;
this.context.strokeStyle = displayColor;
this.context.lineWidth = lineWidth;
this.context.lineCap = "butt";
@@ -225,28 +240,23 @@ export default class OnScreenDisplayManager {
// method to set up the canvas based on options.
private setupCanvas(): void {
if (!ensurePlayerContainerExists(this.options.playerContainer)) return;
-
const {
options: {
playerContainer: { clientHeight: height, clientWidth: width }
}
} = this;
-
// Adjust displayPadding if it exceeds max width or height.
if (this.options.displayPadding > Math.max(width, height)) {
this.options.displayPadding = clamp(this.options.displayPadding, 0, Math.max(width, height));
browserColorLog(`Clamped display padding to ${this.options.displayPadding}`, "FgRed");
}
-
// Calculate font size based on canvas dimensions.
this.fontSize = clamp(Math.min(width, height) / 10, 48, 72);
-
// Find elements for positioning the canvas.
const bottomElement: Nullable =
document.querySelector(
"ytd-reel-video-renderer[is-active] > div.overlay.ytd-reel-video-renderer > ytd-reel-player-overlay-renderer > div > ytd-reel-player-header-renderer"
) ?? document.querySelector(".ytp-chrome-bottom");
-
const { top: topRectTop = 0 } = document.querySelector(".player-controls > ytd-shorts-player-controls")?.getBoundingClientRect() || {};
const { bottom: bottomRectBottom = 0, top: bottomRectTop = 0 } = bottomElement?.getBoundingClientRect() || {};
const heightExcludingMarginPadding =
@@ -258,10 +268,8 @@ export default class OnScreenDisplayManager {
parseInt(getComputedStyle(bottomElement).paddingBottom, 10)) +
10
: 0;
-
const paddingTop = isShortsPage() ? topRectTop / 2 : 0;
const paddingBottom = isShortsPage() ? heightExcludingMarginPadding : Math.round(bottomRectBottom - bottomRectTop);
-
// Position the canvas based on options.
Object.assign(this.canvas.style, {
...calculateCanvasPosition(this.options.displayPosition, this.options.displayPadding, paddingTop, paddingBottom)
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 53a543fe..5b9c5a5e 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -13,16 +13,21 @@ import {
onScreenDisplayColors,
onScreenDisplayPositions,
onScreenDisplayTypes,
+ playlistLengthGetMethod,
+ playlistWatchTimeGetMethod,
screenshotFormats,
screenshotTypes,
videoHistoryResumeTypes,
volumeBoostModes,
- youtubePlayerQualityLevels
+ youtubePlayerMinSpeed,
+ youtubePlayerQualityLevels,
+ youtubePlayerSpeedStep
} from "../types";
export const outputFolderName = "dist";
export const defaultConfiguration = {
button_placements: {
+ copyTimestampUrlButton: "player_controls_right",
decreasePlaybackSpeedButton: "player_controls_left",
forwardButton: "player_controls_right",
hideEndScreenCardsButton: "player_controls_right",
@@ -47,8 +52,10 @@ export const defaultConfiguration = {
deep_dark_preset: "Deep-Dark",
enable_automatic_theater_mode: false,
enable_automatically_set_quality: false,
+ enable_copy_timestamp_url_button: false,
enable_custom_css: false,
enable_deep_dark_theme: false,
+ enable_hide_official_artist_videos_from_home_page: false,
enable_forced_playback_speed: false,
enable_forward_rewind_buttons: false,
enable_hide_end_screen_cards: false,
@@ -64,6 +71,7 @@ export const defaultConfiguration = {
enable_open_youtube_settings_on_hover: false,
enable_pausing_background_players: false,
enable_playback_speed_buttons: false,
+ enable_playlist_length: false,
enable_redirect_remover: false,
enable_remaining_time: false,
enable_remember_last_volume: false,
@@ -90,6 +98,8 @@ export const defaultConfiguration = {
player_quality: "auto",
player_quality_fallback_strategy: "lower",
player_speed: 1,
+ playlist_length_get_method: "api",
+ playlist_watch_time_get_method: "youtube",
remembered_volumes: {
shortsPageVolume: 100,
watchPageVolume: 100
@@ -102,7 +112,9 @@ export const defaultConfiguration = {
video_history_resume_type: "prompt",
volume_adjustment_steps: 5,
volume_boost_amount: 5,
- volume_boost_mode: "global"
+ volume_boost_mode: "global",
+ youtube_data_api_v3_key: "",
+ enable_automatically_disable_closed_captions: false
} satisfies configuration;
export const configurationImportSchema: TypeToPartialZodSchema<
configuration,
@@ -135,6 +147,7 @@ export const configurationImportSchema: TypeToPartialZodSchema<
deep_dark_preset: z.enum(deepDarkPreset).optional(),
enable_automatic_theater_mode: z.boolean().optional(),
enable_automatically_set_quality: z.boolean().optional(),
+ enable_copy_timestamp_url_button: z.boolean().optional(),
enable_custom_css: z.boolean().optional(),
enable_deep_dark_theme: z.boolean().optional(),
enable_forced_playback_speed: z.boolean().optional(),
@@ -142,6 +155,7 @@ export const configurationImportSchema: TypeToPartialZodSchema<
enable_hide_end_screen_cards: z.boolean().optional(),
enable_hide_end_screen_cards_button: z.boolean().optional(),
enable_hide_live_stream_chat: z.boolean().optional(),
+ enable_hide_official_artist_videos_from_home_page: z.boolean().optional(),
enable_hide_paid_promotion_banner: z.boolean().optional(),
enable_hide_scrollbar: z.boolean().optional(),
enable_hide_shorts: z.boolean().optional(),
@@ -152,6 +166,7 @@ export const configurationImportSchema: TypeToPartialZodSchema<
enable_open_youtube_settings_on_hover: z.boolean().optional(),
enable_pausing_background_players: z.boolean().optional(),
enable_playback_speed_buttons: z.boolean().optional(),
+ enable_playlist_length: z.boolean().optional(),
enable_redirect_remover: z.boolean().optional(),
enable_remaining_time: z.boolean().optional(),
enable_remember_last_volume: z.boolean().optional(),
@@ -174,10 +189,12 @@ 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
.object({
shortsPageVolume: z.number().min(0).max(100).optional(),
@@ -192,7 +209,10 @@ export const configurationImportSchema: TypeToPartialZodSchema<
video_history_resume_type: z.enum(videoHistoryResumeTypes).optional(),
volume_adjustment_steps: z.number().min(1).max(100).optional(),
volume_boost_amount: z.number().optional(),
- volume_boost_mode: z.enum(volumeBoostModes).optional()
+ volume_boost_mode: z.enum(volumeBoostModes).optional(),
+ youtube_data_api_v3_key: z.string().optional(),
+ enable_automatically_disable_closed_captions: z.boolean().optional()
});
export const DEV_MODE = process.env.__DEV__ === "true";
export const ENABLE_SOURCE_MAP = DEV_MODE === true ? "inline" : false;
+export const YouTube_Enhancer_Public_Youtube_Data_API_V3_Key = "AIzaSyA_z2BR_HSfKsPvuttqjD_6AY60zgqbm5k";
diff --git a/src/utils/log.ts b/src/utils/log.ts
index 3395d9a2..9059bb5f 100644
--- a/src/utils/log.ts
+++ b/src/utils/log.ts
@@ -1,3 +1,5 @@
+import { getFormattedTimestamp } from "./utilities";
+
type ColorType = "error" | "info" | "success" | "warning" | keyof typeof TerminalColors;
function getColor(type: ColorType) {
switch (type) {
@@ -18,7 +20,7 @@ export function colorizeTerminalLog(message: string, type: ColorType = "FgBlack"
return `${color}${message}${TerminalColors.Reset}`;
}
export default function terminalColorLog(message: string, type?: ColorType) {
- console.log(colorizeTerminalLog(`[YouTube Enhancer]`, "FgCyan"), colorizeTerminalLog(message, type));
+ console.log(colorizeTerminalLog(`[${getFormattedTimestamp()}] [YouTube Enhancer]`, "FgCyan"), colorizeTerminalLog(message, type));
}
const TerminalColors = {
diff --git a/src/utils/updateAvailableLocales.ts b/src/utils/updateAvailableLocales.ts
index 976e424b..90a055ae 100644
--- a/src/utils/updateAvailableLocales.ts
+++ b/src/utils/updateAvailableLocales.ts
@@ -3,7 +3,6 @@ import { readFileSync, readdirSync, writeFileSync } from "fs";
import { i18nDir, publicDir } from "./plugins/utils";
function updateAvailableLocalesArray(code: string, updatedArray: string[]) {
const match = code.match(/export\s+const\s+availableLocales\s*=\s*\[([^\]]*)\]\s*as\s*const\s*;/);
-
if (match) {
const [, oldArrayPart] = match;
const newArrayPart = JSON.stringify(updatedArray, null, 2).replace(/^\[|\]$/g, "");
diff --git a/src/utils/updateLocalePercentages.ts b/src/utils/updateLocalePercentages.ts
index 0fc77eec..f6f8c741 100644
--- a/src/utils/updateLocalePercentages.ts
+++ b/src/utils/updateLocalePercentages.ts
@@ -54,7 +54,6 @@ const crowdinLanguageProgressResponseSchema: TypeToZodSchema) {
const match = code.match(/export\s+const\s+localePercentages\s*:\s*Record\s*=\s*({[^}]+});/);
-
if (match) {
const [, oldObjectPart] = match;
const newObjectPart = JSON.stringify(updatedObject, null, 2);
diff --git a/src/utils/updateStoredSettings.ts b/src/utils/updateStoredSettings.ts
index 98306528..eba99347 100644
--- a/src/utils/updateStoredSettings.ts
+++ b/src/utils/updateStoredSettings.ts
@@ -10,25 +10,20 @@ const changedKeys = Object.keys({
export async function updateStoredSettings() {
try {
const settings = await getStoredSettings();
-
const removedKeys = Object.keys(settings).filter((key) => !Object.keys(defaultConfiguration).includes(key));
-
for (const changedKey of changedKeys) {
switch (changedKey) {
case "osd_display_type": {
if ((settings.osd_display_type as unknown as string) === "round") {
settings.osd_display_type = "circle";
}
-
break;
}
}
}
-
for (const key of removedKeys) {
delete settings[key];
}
-
await setModifiedSettings(settings);
} catch (error) {
console.error("Failed to update stored settings:", error);
@@ -37,11 +32,9 @@ export async function updateStoredSettings() {
async function setModifiedSettings(settings: Partial) {
const updates: Record = {};
-
for (const [key, value] of Object.entries(settings)) {
updates[key] = typeof value !== "string" ? JSON.stringify(value) : value;
}
-
await chrome.storage.local.set(updates);
}
@@ -51,14 +44,10 @@ async function getStoredSettings(): Promise {
try {
const storedSettings: Partial = (
Object.keys(settings)
-
.filter((key) => typeof key === "string")
-
.filter((key) => Object.keys(defaultConfiguration).includes(key as unknown as string)) as configurationKeys[]
).reduce((acc, key) => Object.assign(acc, { [key]: parseStoredValue(settings[key] as string) }), {});
-
const castedSettings = storedSettings as configuration;
-
resolve(castedSettings);
} catch (error) {
reject(error);
diff --git a/src/utils/utilities.ts b/src/utils/utilities.ts
index b0b70ab6..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;
@@ -178,7 +177,7 @@ function groupMessages(messages: { message: string; styling: string[] }[]): Arra
* @returns The colorized log message.
*/
export function browserColorLog(message: string, type?: ColorType) {
- const prependLog = colorizeLog(`[YouTube Enhancer]`, "FgCyan");
+ const prependLog = colorizeLog(`[${getFormattedTimestamp()}] [YouTube Enhancer]`, "FgCyan");
const colorizedMessage = colorizeLog(message, type);
console.log(...groupMessages([prependLog, colorizedMessage]));
}
@@ -365,6 +364,14 @@ export function isShortsPage() {
const firstSection = extractFirstSectionFromYouTubeURL(window.location.href);
return firstSection === "shorts";
}
+export function isPlaylistPage() {
+ const firstSection = extractFirstSectionFromYouTubeURL(window.location.href);
+ return firstSection === "playlist";
+}
+export function isLivePage() {
+ const firstSection = extractFirstSectionFromYouTubeURL(window.location.href);
+ return firstSection === "live";
+}
export function formatError(error: unknown) {
if (error instanceof Error) {
return `${error.message}\n${error?.stack}`;
@@ -728,7 +735,7 @@ export function groupButtonChanges(changes: ButtonPlacementChange): {
.flat()
.includes(buttonName)
)
- // eslint-disable-next-line prefer-destructuring
+ // eslint-disable-next-line prefer-destructuring, @typescript-eslint/no-unnecessary-type-assertion
return (singleButtonChanges[buttonName as SingleButtonFeatureNames] = changes.buttonPlacement[buttonName]);
const multiButtonFeatureNames = findKeyByValue(buttonName as Exclude);
if (multiButtonFeatureNames === undefined) return;
@@ -766,3 +773,70 @@ export function isNewYouTubeVideoLayout(): boolean {
return false; // It's the old layout
}
}
+export function getFormattedTimestamp() {
+ const now = new Date();
+
+ const month = (now.getMonth() + 1).toString().padStart(2, "0");
+ const day = now.getDate().toString().padStart(2, "0");
+ const year = now.getFullYear().toString().substr(-2);
+ const hours = now.getHours();
+ const minutes = now.getMinutes().toString().padStart(2, "0");
+ const seconds = now.getSeconds().toString().padStart(2, "0");
+ const milliseconds = now.getMilliseconds().toString().padStart(3, "0");
+
+ const period = hours >= 12 ? "PM" : "AM";
+ const paddedHours = (hours % 12 || 12).toString().padStart(2, "0"); // Convert to 12-hour format and handle midnight (0 hours)
+
+ return `${month}/${day}/${year} ${paddedHours}:${minutes}:${seconds}:${milliseconds} ${period}`;
+}
+/**
+ * Parses an ISO 8601 duration string and returns the total number of seconds.
+ *
+ * @param {string} duration - The ISO 8601 duration string to parse.
+ * @return {number} The total number of seconds represented by the duration string.
+ */
+export function parseISO8601Duration(duration: string): number {
+ // Regular expression to match ISO 8601 duration format
+ const regex = /^PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?$/;
+ // Extract hours, minutes, and seconds from the duration string
+ const matches = regex.exec(duration);
+ // If the duration string does not match the expected format, return 0
+ if (!matches) return 0;
+
+ // Parse the hours, minutes, and seconds from the matches array
+ const hours = parseInt(matches[1] || "0", 10);
+ const minutes = parseInt(matches[2] || "0", 10);
+ const seconds = parseInt(matches[3] || "0", 10);
+
+ // Calculate the total number of seconds by multiplying hours, minutes, and seconds
+ return hours * 3600 + minutes * 60 + seconds;
+}
+
+/**
+ * Formats a duration in seconds into a string representation.
+ *
+ * @param {number} seconds - The duration in seconds.
+ * @return {string} The formatted duration string in the format "HHhMMmSSs".
+ */
+export function formatDuration(seconds: number): string {
+ // Calculate the hours, minutes, and seconds
+ const hours = Math.floor(seconds / 3600);
+ const minutes = Math.floor((seconds % 3600) / 60);
+ const secs = seconds % 60;
+
+ // Format the hours, minutes, and seconds with leading zeros
+ const formattedHours = hours.toString();
+ const formattedMinutes = minutes.toString().padStart(2, "0");
+ const formattedSeconds = secs.toString().padStart(2, "0");
+
+ // Combine the formatted values into a single string
+ return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
+}
+export function timeStringToSeconds(timeString: string): number {
+ const parts = timeString.split(":").reverse();
+ let seconds = 0;
+ for (let i = 0; i < parts.length; i++) {
+ seconds += parseInt(parts[i], 10) * Math.pow(60, i);
+ }
+ return seconds;
+}
