refactor(hide translate comment): Improve hiding logic by using nested selectors

Author: VampireChicken12

src/features/hideTranslateComment/index.css

@@ -1,3 +1,5 @@
-.yte-hide-translate-comment {
-	display: none !important;
-}
+body.yte-hide-translate-comment {
+	& ytd-tri-state-button-view-model.translate-button {
+		display: none !important;
+	}
+}

src/features/hideTranslateComment/index.ts

@@ -1,43 +1,12 @@
-import type { Nullable } from "@/src/types";
-
-import {
-	type EngagementPanelVisibility,
-	observeCommentsPanelVisibilityChange,
-	observeTranslateComment,
-	translateButtonSelector
-} from "@/src/features/hideTranslateComment/utils";
-import { isNewYouTubeVideoLayout, modifyElementClassList, waitForAllElements, waitForElement, waitForSpecificMessage } from "@/src/utils/utilities";
+import { modifyElementClassList, waitForSpecificMessage } from "@/src/utils/utilities";
 
 import "./index.css";
-export const commentsPanelSelector = "ytd-engagement-panel-section-list-renderer[target-id='engagement-panel-comments-section']";
-export const commentsHeaderSelector = "ytd-item-section-renderer.ytd-comments div#header div#leading-section";
-let translateCommentObserver: Nullable<MutationObserver> = null;
-let commentsPanelObserver: Nullable<MutationObserver> = null;
-type ObserverType = "commentsPanel" | "translateComment";
-export function cleanUpHideTranslateCommentObserver(observerType: ObserverType) {
-	if (observerType === "translateComment") {
-		translateCommentObserver?.disconnect();
-		translateCommentObserver = null;
-	} else {
-		commentsPanelObserver?.disconnect();
-		commentsPanelObserver = null;
-	}
-}
+
 export async function disableHideTranslateComment() {
-	cleanUpHideTranslateCommentObserver("commentsPanel");
-	cleanUpHideTranslateCommentObserver("translateComment");
-	const isNewVideLayout = isNewYouTubeVideoLayout();
-	if (isNewVideLayout) {
-		const commentsPanelElement = await waitForElement(commentsPanelSelector);
-		if (
-			commentsPanelElement &&
-			(commentsPanelElement.getAttribute("visibility") as EngagementPanelVisibility) === "ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"
-		)
-			toggleHideTranslateCommentButtonsVisibility(true);
-	} else {
-		await waitForAllElements([commentsHeaderSelector]);
-		toggleHideTranslateCommentButtonsVisibility(true);
-	}
+	modifyElementClassList("remove", {
+		className: "yte-hide-translate-comment",
+		element: document.body
+	});
 }
 export async function enableHideTranslateComment() {
 	const {
@@ -46,31 +15,8 @@ export async function enableHideTranslateComment() {
 		}
 	} = await waitForSpecificMessage("options", "request_data", "content");
 	if (!enable_hide_translate_comment) return;
-	const isNewVideLayout = isNewYouTubeVideoLayout();
-	if (isNewVideLayout) {
-		const commentsPanelElement = await waitForElement(commentsPanelSelector);
-		if (
-			commentsPanelElement &&
-			(commentsPanelElement.getAttribute("visibility") as EngagementPanelVisibility) === "ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"
-		)
-			toggleHideTranslateCommentButtonsVisibility(false);
-		const observer = observeCommentsPanelVisibilityChange();
-		if (observer) setHideTranslateCommentObserver("commentsPanel", observer);
-	} else {
-		await waitForAllElements([commentsHeaderSelector]);
-		toggleHideTranslateCommentButtonsVisibility(false);
-		const observer = observeTranslateComment();
-		if (observer) setHideTranslateCommentObserver("translateComment", observer);
-	}
-}
-export function setHideTranslateCommentObserver(observerType: ObserverType, observer: MutationObserver) {
-	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-	observerType === "translateComment" ? (translateCommentObserver = observer) : (commentsPanelObserver = observer);
-}
-
-export function toggleHideTranslateCommentButtonsVisibility(visible: boolean) {
-	const translateCommentButtons = document.querySelectorAll(translateButtonSelector);
-	translateCommentButtons.forEach((button) =>
-		modifyElementClassList(!visible ? "add" : "remove", { className: "yte-hide-translate-comment", element: button })
-	);
+	modifyElementClassList("add", {
+		className: "yte-hide-translate-comment",
+		element: document.body
+	});
 }