From 33d56058707465307ec2288fa1023848e4c87e50 Mon Sep 17 00:00:00 2001
From: thanos <236362159+thanoskn@users.noreply.github.com>
Date: Wed, 7 Jan 2026 12:54:24 +0200
Subject: [PATCH] refactor(popups): Remove jQuery from popups (@thanoskn)
 (#7321)

### Description

Replace jQuery with dom utils

### Checks

- [x] Adding/modifying Typescript code?
  - [x] I have used `qs`, `qsa` or `qsr` instead of JQuery selectors.
- [x] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [x] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [x] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.

### Related #7186
---
 frontend/src/ts/popups/video-ad-popup.ts | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/ts/popups/video-ad-popup.ts b/frontend/src/ts/popups/video-ad-popup.ts
index 036d65d4c..572d9abcd 100644
--- a/frontend/src/ts/popups/video-ad-popup.ts
+++ b/frontend/src/ts/popups/video-ad-popup.ts
@@ -4,7 +4,7 @@ import * as Notifications from "../elements/notifications";
 import * as AdController from "../controllers/ad-controller";
 import * as Skeleton from "../utils/skeleton";
 import { isPopupVisible } from "../utils/misc";
-import { animate } from "animejs";
+import { qs } from "../utils/dom";
 
 const wrapperId = "videoAdPopupWrapper";
 
@@ -35,13 +35,13 @@ export async function show(): Promise<void> {
   }
 
   if (!isPopupVisible(wrapperId)) {
-    const el = document.querySelector("#videoAdPopupWrapper") as HTMLElement;
+    const el = qs("#videoAdPopupWrapper");
 
-    animate(el, {
+    el?.animate({
       opacity: [0, 1],
       duration: 125,
       onBegin: () => {
-        el.classList.remove("hidden");
+        el.show();
       },
       onComplete: () => {
         //@ts-expect-error 3rd party ad code
@@ -53,12 +53,13 @@ export async function show(): Promise<void> {
 
 function hide(): void {
   if (isPopupVisible(wrapperId)) {
-    const el = document.querySelector("#videoAdPopupWrapper") as HTMLElement;
-    animate(el, {
+    const el = qs("#videoAdPopupWrapper");
+
+    el?.animate({
       opacity: [1, 0],
       duration: 125,
       onComplete: () => {
-        el.classList.add("hidden");
+        el.hide();
         Skeleton.remove(wrapperId);
       },
     });
@@ -80,7 +81,7 @@ export function egVideoListener(options: Record<string, string>): void {
   }
 }
 
-$(".pageTest #watchVideoAdButton").on("click", () => {
+qs(".pageTest #watchVideoAdButton")?.on("click", () => {
   void show();
 });