style: format

src/i18n/index.ts

@@ -18,8 +18,10 @@ export async function i18nService(locale: AvailableLocales) {
 		extensionURL = chrome.runtime.getURL("");
 	}
 	if (!availableLocales.includes(locale)) throw new Error(`The locale '${locale}' is not available`);
-	const response = await fetch(`${extensionURL}locales/${locale}.json`).catch((err) => console.error(err));
-	const translations = (await response?.json()) as typeof import("../../public/locales/en-US.json");
+	const response = await fetch(`${extensionURL}locales/${locale}.json`).catch((err) => {
+		throw new Error(err);
+	});
+	const translations = (await response.json()) as typeof import("../../public/locales/en-US.json");
 	const i18nextInstance = await new Promise<i18nInstanceType>((resolve, reject) => {
 		const resources: {
 			[k in AvailableLocales]?: {

src/pages/content/index.tsx

@@ -1,4 +1,4 @@
-import type { ExtensionSendOnlyMessageMappings, Messages, YouTubePlayerDiv } from "@/src/@types";
+import type { ExtensionSendOnlyMessageMappings, Messages, YouTubePlayerDiv } from "@/src/types";
 
 import { enableFeatureMenu } from "@/src/features/featureMenu";
 import { updateFeatureMenuItemLabel, updateFeatureMenuTitle } from "@/src/features/featureMenu/utils";
@@ -17,9 +17,26 @@ import { promptUserToResumeVideo, setupVideoHistory } from "@/src/features/video
 import volumeBoost from "@/src/features/volumeBoost";
 import { i18nService } from "@/src/i18n";
 import eventManager from "@/utils/EventManager";
-import { browserColorLog, formatError, sendContentOnlyMessage, waitForSpecificMessage } from "@/utils/utilities";
+import {
+	browserColorLog,
+	formatError,
+	isShortsPage,
+	isWatchPage,
+	sendContentOnlyMessage,
+	waitForAllElements,
+	waitForSpecificMessage
+} from "@/utils/utilities";
 // TODO: Add always show progressbar feature
 
+/**
+ * Creates a hidden div element with a specific ID that can be used to receive messages from YouTube.
+ * The element is appended to the document's root element.
+ */
+const element = document.createElement("div");
+element.style.display = "none";
+element.id = "yte-message-from-youtube";
+document.documentElement.appendChild(element);
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const alwaysShowProgressBar = async function () {
 	const player = document.querySelector("#movie_player") as YouTubePlayerDiv | null;
@@ -59,20 +76,13 @@ const alwaysShowProgressBar = async function () {
 	progressLoad += progressWidth;
 };
 
-/**
- * Creates a hidden div element with a specific ID that can be used to receive messages from YouTube.
- * The element is appended to the document's root element.
- */
-const element = document.createElement("div");
-element.style.display = "none";
-element.id = "yte-message-from-youtube";
-document.documentElement.appendChild(element);
-
-window.onload = async function () {
+window.addEventListener("DOMContentLoaded", async function () {
 	enableRememberVolume();
 	enableHideScrollBar();
 
-	const enableFeatures = () => {
+	const enableFeatures = async () => {
+		// Wait for the specified container selectors to be available on the page
+		await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
 		eventManager.removeAllEventListeners(["featureMenu"]);
 		enableFeatureMenu();
 		addLoopButton();
@@ -95,6 +105,7 @@ window.onload = async function () {
 	} = response;
 	const i18nextInstance = await i18nService(language);
 	window.i18nextInstance = i18nextInstance;
+	if (isWatchPage() || isShortsPage()) document.addEventListener("yt-navigate-finish", enableFeatures);
 	document.addEventListener("yt-player-updated", enableFeatures);
 	/**
 	 * Listens for the "yte-message-from-youtube" event and handles incoming messages from the YouTube page.
@@ -276,7 +287,7 @@ window.onload = async function () {
 		}
 	});
 	sendContentOnlyMessage("pageLoaded", undefined);
-};
+});
 window.onbeforeunload = function () {
 	eventManager.removeAllEventListeners();
 	element.remove();