From 3759d7f39efa31b2eb134cd287b38a3976b61776 Mon Sep 17 00:00:00 2001 From: VampireChicken12 Date: Sat, 5 Oct 2024 02:57:32 -0400 Subject: [PATCH] fix: features not working on '/live' page --- src/features/automaticTheaterMode/index.ts | 5 +-- .../index.ts | 6 +-- src/features/forwardRewindButtons/index.ts | 8 ++-- src/features/hideEndScreenCards/index.ts | 13 +++++- src/features/playbackSpeedButtons/index.ts | 17 +++---- src/features/playerQuality/index.ts | 12 +---- src/features/playerSpeed/index.ts | 2 +- src/features/remainingTime/index.ts | 3 -- src/features/rememberVolume/index.ts | 9 ++-- src/features/rememberVolume/utils.ts | 7 +-- .../scrollWheelVolumeControl/index.ts | 4 +- src/features/videoHistory/index.ts | 6 +-- src/i18n/constants.ts | 44 +++++++++---------- src/pages/embedded/index.ts | 7 ++- src/utils/utilities.ts | 4 ++ 15 files changed, 72 insertions(+), 75 deletions(-) diff --git a/src/features/automaticTheaterMode/index.ts b/src/features/automaticTheaterMode/index.ts index 7efe2bcc..c601cff6 100644 --- a/src/features/automaticTheaterMode/index.ts +++ b/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("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 index 761fea9f..0559ae94 100644 --- a/src/features/automaticallyDisableClosedCaptions/index.ts +++ b/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("div#movie_player") : null; + 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; @@ -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("div#movie_player") : null; + 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 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/playbackSpeedButtons/index.ts b/src/features/playbackSpeedButtons/index.ts index c51cdef1..bc0b4da4 100644 --- a/src/features/playbackSpeedButtons/index.ts +++ b/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("div#movie_player") - : isShortsPage() ? document.querySelector("div#shorts-player") - : null; + const playerContainer = document.querySelector("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("video"); if (!videoElement) return; ({ playbackRate: currentPlaybackSpeed } = videoElement); - const playerContainer = - isWatchPage() ? document.querySelector("div#movie_player") - : isShortsPage() ? document.querySelector("div#shorts-player") - : null; + const playerContainer = document.querySelector("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("video"); if (!videoElement) return; ({ playbackRate: currentPlaybackSpeed } = videoElement); - const playerContainer = - isWatchPage() ? document.querySelector("div#movie_player") - : isShortsPage() ? document.querySelector("div#shorts-player") - : null; + const playerContainer = document.querySelector("div#movie_player"); if (!playerContainer) return; const playerVideoData = await playerContainer.getVideoData(); if (playerVideoData.isLive && checkIfFeatureButtonExists("decreasePlaybackSpeedButton", decreasePlaybackSpeedButtonPlacement)) { diff --git a/src/features/playerQuality/index.ts b/src/features/playerQuality/index.ts index f6559dc9..3ec305a0 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. @@ -16,35 +16,27 @@ export default async function setPlayerQuality(): Promise { 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("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..4172fc58 100644 --- a/src/features/playerSpeed/index.ts +++ b/src/features/playerSpeed/index.ts @@ -70,11 +70,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"); diff --git a/src/features/remainingTime/index.ts b/src/features/remainingTime/index.ts index 1abdc1cc..592bfe2b 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 diff --git a/src/features/rememberVolume/index.ts b/src/features/rememberVolume/index.ts index bb29bf40..483f4374 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"; @@ -21,22 +21,21 @@ export default async function enableRememberVolume(): Promise { // 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..1db90761 100644 --- a/src/features/rememberVolume/utils.ts +++ b/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("div#movie_player") + IsWatchPage || IsLivePage ? document.querySelector("div#movie_player") : IsShortsPage ? document.querySelector("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) { diff --git a/src/features/scrollWheelVolumeControl/index.ts b/src/features/scrollWheelVolumeControl/index.ts index d7087f02..838e3287 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"; @@ -79,7 +79,7 @@ export default async function adjustVolumeOnScrollWheel(): Promise { // 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 diff --git a/src/features/videoHistory/index.ts b/src/features/videoHistory/index.ts index 0f4a882c..3b25652f 100644 --- a/src/features/videoHistory/index.ts +++ b/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("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(); diff --git a/src/i18n/constants.ts b/src/i18n/constants.ts index 772eb3d3..b86a717d 100644 --- a/src/i18n/constants.ts +++ b/src/i18n/constants.ts @@ -1,26 +1,26 @@ export const availableLocales = [ - "ca-ES", - "cs-CZ", - "de-DE", - "en-GB", - "en-US", - "es-ES", - "fa-IR", - "fr-FR", - "he-IL", - "hi-IN", - "it-IT", - "ja-JP", - "ko-KR", - "pl-PL", - "pt-BR", - "ru-RU", - "sv-SE", - "tr-TR", - "uk-UA", - "vi-VN", - "zh-CN", - "zh-TW" + "ca-ES", + "cs-CZ", + "de-DE", + "en-GB", + "en-US", + "es-ES", + "fa-IR", + "fr-FR", + "he-IL", + "hi-IN", + "it-IT", + "ja-JP", + "ko-KR", + "pl-PL", + "pt-BR", + "ru-RU", + "sv-SE", + "tr-TR", + "uk-UA", + "vi-VN", + "zh-CN", + "zh-TW" ] as const; export const localePercentages: Record = { "en-US": 100, diff --git a/src/pages/embedded/index.ts b/src/pages/embedded/index.ts index f7af1058..a462231d 100644 --- a/src/pages/embedded/index.ts +++ b/src/pages/embedded/index.ts @@ -90,6 +90,7 @@ import { findKeyByValue, formatError, groupButtonChanges, + isLivePage, isNewYouTubeVideoLayout, isPlaylistPage, isShortsPage, @@ -147,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 () => { @@ -173,7 +176,7 @@ const enableFeatures = () => { ]); // Use a guard clause to reduce amount of times nesting code happens - if (!(isWatchPage() || isShortsPage() || isPlaylistPage())) return; + if (shouldEnableFeaturesFuncReturn()) return; void Promise.all([ promptUserToResumeVideo(() => void setupVideoHistory()), diff --git a/src/utils/utilities.ts b/src/utils/utilities.ts index 01559a1a..a20e7884 100644 --- a/src/utils/utilities.ts +++ b/src/utils/utilities.ts @@ -369,6 +369,10 @@ 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}`;