diff --git a/frontend/src/ts/popups/video-ad-popup.ts b/frontend/src/ts/popups/video-ad-popup.ts index 036d65d4c99c..572d9abcdff3 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 { } 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 { 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): void { } } -$(".pageTest #watchVideoAdButton").on("click", () => { +qs(".pageTest #watchVideoAdButton")?.on("click", () => { void show(); });