fix: features not working on '/live' page

src/features/automaticTheaterMode/index.ts

@@ -1,6 +1,6 @@
 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
@@ -12,9 +12,8 @@ export async function enableAutomaticTheaterMode() {
 	} = optionsData;
 	// 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<YouTubePlayerDiv>("div#movie_player") : null;
+	const playerContainer = isWatchPage() || isLivePage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player") : null;
 	// If player element is not available, return
 	if (!playerContainer) return;
 	const { width } = await playerContainer.getSize();

src/features/automaticallyDisableClosedCaptions/index.ts

@@ -1,5 +1,5 @@
 import type { YouTubePlayerDiv } from "@/src/types";
-import { isWatchPage, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
+import { isLivePage, isWatchPage, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
 let captionsWhereEnabled = false;
 export async function enableAutomaticallyDisableClosedCaptions() {
 	const {
@@ -10,7 +10,7 @@ export async function enableAutomaticallyDisableClosedCaptions() {
 	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() ? document.querySelector<YouTubePlayerDiv>("div#movie_player") : null;
+	const playerContainer = isWatchPage() || isLivePage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player") : null;
 	const subtitlesButton = document.querySelector("button.ytp-subtitles-button");
 	// If player element is not available, return
 	if (!playerContainer || !subtitlesButton) return;
@@ -21,7 +21,7 @@ export async function enableAutomaticallyDisableClosedCaptions() {
 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() ? document.querySelector<YouTubePlayerDiv>("div#movie_player") : null;
+	const playerContainer = isWatchPage() || isLivePage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player") : null;
 	// If player element is not available, return
 	if (!playerContainer) return;
 	// If captions weren't enabled, return

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<YouTubePlayerDiv>("div#movie_player") : null;
+	const playerContainer = document.querySelector<YouTubePlayerDiv>("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<YouTubePlayerDiv>("div#movie_player") : null;
+	const playerContainer = document.querySelector<YouTubePlayerDiv>("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<YouTubePlayerDiv>("div#movie_player") : null;
+	const playerContainer = document.querySelector<YouTubePlayerDiv>("div#movie_player");
 	// If player element is not available, return
 	if (!playerContainer) return;
 	const playerVideoData = await playerContainer.getVideoData();

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<YouTubePlayerDiv>("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");
 };

src/features/playbackSpeedButtons/index.ts

@@ -68,10 +68,7 @@ function playbackSpeedButtonClickListener(speedPerClick: number, direction: "dec
 				({ playbackRate: currentPlaybackSpeed } = videoElement);
 				if (currentPlaybackSpeed + adjustmentAmount <= 0) return;
 				if (currentPlaybackSpeed + adjustmentAmount > 4) return;
-				const playerContainer =
-					isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
-					: isShortsPage() ? document.querySelector<YouTubePlayerDiv>("div#shorts-player")
-					: null;
+				const playerContainer = document.querySelector<YouTubePlayerDiv>("div#movie_player");
 				if (!playerContainer) return;
 				const optionsData = await waitForSpecificMessage("options", "request_data", "content");
 				const {
@@ -119,13 +116,11 @@ export const addIncreasePlaybackSpeedButton: AddButtonFunction = async () => {
 		}
 	} = optionsData;
 	if (!enable_playback_speed_buttons) return;
+	if (!isWatchPage()) return;
 	const videoElement = document.querySelector<HTMLVideoElement>("video");
 	if (!videoElement) return;
 	({ playbackRate: currentPlaybackSpeed } = videoElement);
-	const playerContainer =
-		isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
-		: isShortsPage() ? document.querySelector<YouTubePlayerDiv>("div#shorts-player")
-		: null;
+	const playerContainer = document.querySelector<YouTubePlayerDiv>("div#movie_player");
 	if (!playerContainer) return;
 	const playerVideoData = await playerContainer.getVideoData();
 	if (playerVideoData.isLive && checkIfFeatureButtonExists("increasePlaybackSpeedButton", increasePlaybackSpeedButtonPlacement)) {
@@ -162,13 +157,11 @@ export const addDecreasePlaybackSpeedButton: AddButtonFunction = async () => {
 		}
 	} = optionsData;
 	if (!enable_playback_speed_buttons) return;
+	if (!isWatchPage()) return;
 	const videoElement = document.querySelector<HTMLVideoElement>("video");
 	if (!videoElement) return;
 	({ playbackRate: currentPlaybackSpeed } = videoElement);
-	const playerContainer =
-		isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
-		: isShortsPage() ? document.querySelector<YouTubePlayerDiv>("div#shorts-player")
-		: null;
+	const playerContainer = document.querySelector<YouTubePlayerDiv>("div#movie_player");
 	if (!playerContainer) return;
 	const playerVideoData = await playerContainer.getVideoData();
 	if (playerVideoData.isLive && checkIfFeatureButtonExists("decreasePlaybackSpeedButton", decreasePlaybackSpeedButtonPlacement)) {

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.
@@ -16,35 +16,27 @@ export default async function setPlayerQuality(): Promise<void> {
 			options: { enable_automatically_set_quality, player_quality, player_quality_fallback_strategy }
 		}
 	} = optionsData;
-
 	// 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<YouTubePlayerDiv>("div#movie_player")
+		isWatchPage() || isLivePage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
 		: isShortsPage() ? document.querySelector<YouTubePlayerDiv>("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;

src/features/playerSpeed/index.ts

@@ -70,11 +70,11 @@ export function restorePlayerSpeed() {
 		isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
 		: isShortsPage() ? document.querySelector<YouTubePlayerDiv>("div#shorts-player")
 		: null;
-	const video = document.querySelector<HTMLVideoElement>("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<HTMLVideoElement>("video.html5-main-video");
 	if (!video) return;
 	// Log the message indicating the player speed being set
 	browserColorLog(`Restoring player speed to ${playerSpeed}`, "FgMagenta");

src/features/remainingTime/index.ts

@@ -12,13 +12,10 @@ function playerTimeUpdateListener() {
 			isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
 			: isShortsPage() ? document.querySelector<YouTubePlayerDiv>("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

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";
 
@@ -21,22 +21,21 @@ export default async function enableRememberVolume(): Promise<void> {
 	// 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<YouTubePlayerDiv>("div#movie_player")
+		IsWatchPage || IsLivePage ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
 		: IsShortsPage ? document.querySelector<YouTubePlayerDiv>("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
 	});

src/features/rememberVolume/utils.ts

@@ -1,7 +1,7 @@
 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");
@@ -13,10 +13,11 @@ export async function setupVolumeChangeListener() {
 	// 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<YouTubePlayerDiv>("div#movie_player")
+		IsWatchPage || IsLivePage ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
 		: IsShortsPage ? document.querySelector<YouTubePlayerDiv>("div#shorts-player")
 		: null;
 	if (!playerContainer) return;
@@ -29,7 +30,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) {

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";
 
@@ -79,7 +79,7 @@ export default async function adjustVolumeOnScrollWheel(): Promise<void> {
 
 			// Get the player element
 			const playerContainer =
-				isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
+				isWatchPage() || isLivePage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
 				: isShortsPage() ? document.querySelector<YouTubePlayerDiv>("div#shorts-player")
 				: null;
 			// If player element is not available, return

src/features/videoHistory/index.ts

@@ -22,11 +22,9 @@ export async function setupVideoHistory() {
 		}
 	} = optionsData;
 	if (!enableVideoHistory) return;
+	if (!isWatchPage()) return;
 	// Get the player container element
-	const playerContainer =
-		isWatchPage() ? document.querySelector<YouTubePlayerDiv>("div#movie_player")
-		: isShortsPage() ? null
-		: null;
+	const playerContainer = document.querySelector<YouTubePlayerDiv>("div#movie_player");
 	// If player container is not available, return
 	if (!playerContainer) return;
 	const playerVideoData = await playerContainer.getVideoData();

src/i18n/constants.ts

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