From c83c0e6ac17bf501af1821845ec1db5ea973ced3 Mon Sep 17 00:00:00 2001 From: XP Date: Fri, 1 Nov 2024 12:36:36 -0700 Subject: [PATCH 1/5] Improve performance --- .../frontend/src/scripts/components/ads.ts | 248 +++++++++--------- 1 file changed, 127 insertions(+), 121 deletions(-) diff --git a/packages/frontend/src/scripts/components/ads.ts b/packages/frontend/src/scripts/components/ads.ts index 11db9b25..5ceaa34c 100644 --- a/packages/frontend/src/scripts/components/ads.ts +++ b/packages/frontend/src/scripts/components/ads.ts @@ -104,7 +104,7 @@ class ManagedAd { }, }); recordEvent('createAd', {'id': id}); - }); + }, 50); this._installed = true; } @@ -197,31 +197,34 @@ extraLinksHolderInner.style.display = 'content'; window.addEventListener('resize', recheckAds); function recheckAds() { - console.debug('recheckAds'); - let oneAdShown = false; - if (adsEnabled()) { - currentAds.forEach(ad => { - ad.recheck(); - console.debug(`recheckAds: ${ad.id} => ${ad.showing}`); - if (ad.showing && !oneAdShown) { - oneAdShown = true; - ad.addExtras([extraLinksHolderInner]); - } - }); - window['__cmp']?.('addConsentLink'); - window['__uspapi']?.('addLink', 1); - } - else { - console.debug('recheckAds: not enabled'); - } - if (oneAdShown) { - fallbackPrivacyArea.style.display = 'none'; - } - else { - fallbackPrivacyArea.style.display = ''; - moveLinksToFallbackPrivacyArea(); + setTimeout(() => { + + console.debug('recheckAds'); + let oneAdShown = false; + if (adsEnabled()) { + currentAds.forEach(ad => { + ad.recheck(); + console.debug(`recheckAds: ${ad.id} => ${ad.showing}`); + if (ad.showing && !oneAdShown) { + oneAdShown = true; + ad.addExtras([extraLinksHolderInner]); + } + }); + window['__cmp']?.('addConsentLink'); + window['__uspapi']?.('addLink', 1); + } + else { + console.debug('recheckAds: not enabled'); + } + if (oneAdShown) { + fallbackPrivacyArea.style.display = 'none'; + } + else { + fallbackPrivacyArea.style.display = ''; + moveLinksToFallbackPrivacyArea(); - } + } + }); } window['recheckAds'] = recheckAds; @@ -230,114 +233,117 @@ let firstLoad = true; export function insertAds(element: HTMLElement) { - if (currentAds.length === 0) { - // Analytics - setTimeout(() => { - if (adsEnabled()) { - recordEvent('adsEnabled'); - } - else if (Array.from(document.head.querySelectorAll('script')).find(script => script.src && script.src.includes('nitro'))) { - recordEvent('adsDisabled'); - } - else { - recordEvent('adsNotInjected'); - } - }, 10_000); - - try { - // Display on very wide 2-column - const sideWideCond: DisplayCondition = (w, h) => w >= 1900 && h > 650; - // Display on very wide 2-column without sufficient height - const sideWideShortCond: DisplayCondition = (w, h) => w >= 1900 && h > 350 && !sideWideCond(w, h); - // Display on less wide 2-column, or wide 1-column - const sideNarrowCond: DisplayCondition = (w, h) => - ((w >= 1560 && h > 650) - || (w <= 1210 && w >= 1012 && h > 650)) - && !sideWideCond(w, h) && !sideWideShortCond(w, h); - { - const size: AdSize = [300, 600]; - const extraSizes: AdSize[] = [[160, 600], [300, 250]]; - const adAreaLeftWide = new ManagedAd('float-area-wide-left', size, sideWideCond, extraSizes); - { - const outer = adAreaLeftWide.adContainer.outer; - const middle = adAreaLeftWide.adContainer.middle; - outer.style.left = '0'; - middle.style.marginLeft = '-5px'; - middle.style.borderRadius = '0 10px 0 0'; - } - currentAds.push(adAreaLeftWide); + setTimeout(() => { - const adAreaRightWide = new ManagedAd('float-area-wide-right', size, sideWideCond, extraSizes); - { - const outer = adAreaRightWide.adContainer.outer; - const middle = adAreaRightWide.adContainer.middle; - outer.style.left = '100%'; - middle.style.right = '0'; - middle.style.marginRight = '-5px'; - middle.style.borderRadius = '10px 0 0 0'; + if (currentAds.length === 0) { + // Analytics + setTimeout(() => { + if (adsEnabled()) { + recordEvent('adsEnabled'); } - currentAds.push(adAreaRightWide); - } - { - const size: AdSize = [300, 250]; - const adAreaLeftWide = new ManagedAd('float-area-wide-short-left', size, sideWideShortCond); - { - const outer = adAreaLeftWide.adContainer.outer; - const middle = adAreaLeftWide.adContainer.middle; - outer.style.left = '0'; - middle.style.marginLeft = '-5px'; - middle.style.borderRadius = '0 10px 0 0'; + else if (Array.from(document.head.querySelectorAll('script')).find(script => script.src && script.src.includes('nitro'))) { + recordEvent('adsDisabled'); } - currentAds.push(adAreaLeftWide); - - const adAreaRightWide = new ManagedAd('float-area-wide-short-right', size, sideWideShortCond); + else { + recordEvent('adsNotInjected', {'page': document.location.search}); + } + }, 10_000); + + try { + // Display on very wide 2-column + const sideWideCond: DisplayCondition = (w, h) => w >= 1900 && h > 650; + // Display on very wide 2-column without sufficient height + const sideWideShortCond: DisplayCondition = (w, h) => w >= 1900 && h > 350 && !sideWideCond(w, h); + // Display on less wide 2-column, or wide 1-column + const sideNarrowCond: DisplayCondition = (w, h) => + ((w >= 1560 && h > 650) + || (w <= 1210 && w >= 1012 && h > 650)) + && !sideWideCond(w, h) && !sideWideShortCond(w, h); { - const outer = adAreaRightWide.adContainer.outer; - const middle = adAreaRightWide.adContainer.middle; - outer.style.left = '100%'; - middle.style.right = '0'; - middle.style.marginRight = '-5px'; - middle.style.borderRadius = '10px 0 0 0'; + const size: AdSize = [300, 600]; + const extraSizes: AdSize[] = [[160, 600], [300, 250]]; + const adAreaLeftWide = new ManagedAd('float-area-wide-left', size, sideWideCond, extraSizes); + { + const outer = adAreaLeftWide.adContainer.outer; + const middle = adAreaLeftWide.adContainer.middle; + outer.style.left = '0'; + middle.style.marginLeft = '-5px'; + middle.style.borderRadius = '0 10px 0 0'; + } + currentAds.push(adAreaLeftWide); + + const adAreaRightWide = new ManagedAd('float-area-wide-right', size, sideWideCond, extraSizes); + { + const outer = adAreaRightWide.adContainer.outer; + const middle = adAreaRightWide.adContainer.middle; + outer.style.left = '100%'; + middle.style.right = '0'; + middle.style.marginRight = '-5px'; + middle.style.borderRadius = '10px 0 0 0'; + } + currentAds.push(adAreaRightWide); } - currentAds.push(adAreaRightWide); - } - { - const size: AdSize = [160, 600]; - const adAreaLeftNarrow = new ManagedAd('float-area-narrow-left', size, sideNarrowCond); { - const outer = adAreaLeftNarrow.adContainer.outer; - const middle = adAreaLeftNarrow.adContainer.middle; - outer.style.left = '0'; - middle.style.marginLeft = '-5px'; - middle.style.borderRadius = '0 10px 0 0'; + const size: AdSize = [300, 250]; + const adAreaLeftWide = new ManagedAd('float-area-wide-short-left', size, sideWideShortCond); + { + const outer = adAreaLeftWide.adContainer.outer; + const middle = adAreaLeftWide.adContainer.middle; + outer.style.left = '0'; + middle.style.marginLeft = '-5px'; + middle.style.borderRadius = '0 10px 0 0'; + } + currentAds.push(adAreaLeftWide); + + const adAreaRightWide = new ManagedAd('float-area-wide-short-right', size, sideWideShortCond); + { + const outer = adAreaRightWide.adContainer.outer; + const middle = adAreaRightWide.adContainer.middle; + outer.style.left = '100%'; + middle.style.right = '0'; + middle.style.marginRight = '-5px'; + middle.style.borderRadius = '10px 0 0 0'; + } + currentAds.push(adAreaRightWide); } - currentAds.push(adAreaLeftNarrow); - - const adAreaRightNarrow = new ManagedAd('float-area-narrow-right', size, sideNarrowCond); { - const outer = adAreaRightNarrow.adContainer.outer; - const middle = adAreaRightNarrow.adContainer.middle; - outer.style.left = '100%'; - middle.style.right = '0'; - middle.style.marginRight = '-5px'; - middle.style.borderRadius = '10px 0 0 0'; + const size: AdSize = [160, 600]; + const adAreaLeftNarrow = new ManagedAd('float-area-narrow-left', size, sideNarrowCond); + { + const outer = adAreaLeftNarrow.adContainer.outer; + const middle = adAreaLeftNarrow.adContainer.middle; + outer.style.left = '0'; + middle.style.marginLeft = '-5px'; + middle.style.borderRadius = '0 10px 0 0'; + } + currentAds.push(adAreaLeftNarrow); + + const adAreaRightNarrow = new ManagedAd('float-area-narrow-right', size, sideNarrowCond); + { + const outer = adAreaRightNarrow.adContainer.outer; + const middle = adAreaRightNarrow.adContainer.middle; + outer.style.left = '100%'; + middle.style.right = '0'; + middle.style.marginRight = '-5px'; + middle.style.borderRadius = '10px 0 0 0'; + } + currentAds.push(adAreaRightNarrow); } - currentAds.push(adAreaRightNarrow); + } + catch (e) { + console.error(e); } } - catch (e) { - console.error(e); + element.prepend(...currentAds.map(a => a.adContainer.outer)); + setTimeout(recheckAds); + setTimeout(recheckAds, 2_000); + if (firstLoad) { + firstLoad = false; } - } - element.prepend(...currentAds.map(a => a.adContainer.outer)); - setTimeout(recheckAds); - setTimeout(recheckAds, 2_000); - if (firstLoad) { - firstLoad = false; - } - else { - currentAds.forEach(ad => ad.onNavigate()); - } + else { + currentAds.forEach(ad => ad.onNavigate()); + } + }); } // set up extra links From ec7bef221ddde27b55d3618272c24b5344e32c72 Mon Sep 17 00:00:00 2001 From: XP Date: Fri, 1 Nov 2024 12:42:45 -0700 Subject: [PATCH 2/5] Increase delay --- packages/frontend/src/scripts/components/ads.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/scripts/components/ads.ts b/packages/frontend/src/scripts/components/ads.ts index 5ceaa34c..d206a90d 100644 --- a/packages/frontend/src/scripts/components/ads.ts +++ b/packages/frontend/src/scripts/components/ads.ts @@ -343,7 +343,7 @@ export function insertAds(element: HTMLElement) { else { currentAds.forEach(ad => ad.onNavigate()); } - }); + }, 200); } // set up extra links From e23e58ba80688c122b7eb41a62c84aefcf8ac18d Mon Sep 17 00:00:00 2001 From: XP Date: Fri, 1 Nov 2024 12:58:00 -0700 Subject: [PATCH 3/5] Fix re-render --- packages/frontend/src/scripts/components/ads.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/scripts/components/ads.ts b/packages/frontend/src/scripts/components/ads.ts index d206a90d..46e3b056 100644 --- a/packages/frontend/src/scripts/components/ads.ts +++ b/packages/frontend/src/scripts/components/ads.ts @@ -69,7 +69,8 @@ class ManagedAd { } onNavigate(): void { - this.ad?.['onNavigate']?.(); + // this.ad?.['onNavigate']?.(); + this.installAdPlacement(); } /** @@ -196,6 +197,8 @@ extraLinksHolderInner.style.display = 'content'; window.addEventListener('resize', recheckAds); +window['currentAds'] = currentAds; + function recheckAds() { setTimeout(() => { @@ -341,7 +344,7 @@ export function insertAds(element: HTMLElement) { firstLoad = false; } else { - currentAds.forEach(ad => ad.onNavigate()); + setTimeout(() => currentAds.forEach(ad => ad.onNavigate())); } }, 200); } From 11cc8ae6cac6d69e898db5dfb48e739965f90f8b Mon Sep 17 00:00:00 2001 From: XP Date: Fri, 1 Nov 2024 13:36:18 -0700 Subject: [PATCH 4/5] Don't try to re-use --- packages/frontend/src/scripts/components/ads.ts | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/scripts/components/ads.ts b/packages/frontend/src/scripts/components/ads.ts index 46e3b056..d2270689 100644 --- a/packages/frontend/src/scripts/components/ads.ts +++ b/packages/frontend/src/scripts/components/ads.ts @@ -57,20 +57,24 @@ class ManagedAd { if (value !== this._showing || (value && !this._installed)) { if (value) { this.adContainer.outer.style.display = ''; - if (!this._installed) { - this.installAdPlacement(); - } + this.adContainer.middle.prepend(this.adContainer.inner); + this.installAdPlacement(); + // if (!this._installed) { + // } } else { this.adContainer.outer.style.display = 'none'; + this.adContainer.middle.removeChild(this.adContainer.inner); } this._showing = value; } } onNavigate(): void { - // this.ad?.['onNavigate']?.(); - this.installAdPlacement(); + // // this.ad?.['onNavigate']?.(); + // if (this.showing) { + // this.installAdPlacement(); + // } } /** @@ -86,7 +90,7 @@ class ManagedAd { return; } setTimeout(() => { - console.debug(`createAd: ${window['nitroAds'] !== undefined}`); + console.trace(`createAd: ${window['nitroAds'] !== undefined}`); this.ad = window['nitroAds'].createAd(id, { "refreshTime": 30, "renderVisibleOnly": true, @@ -337,6 +341,7 @@ export function insertAds(element: HTMLElement) { console.error(e); } } + currentAds.forEach(ad => ad.showing = false); element.prepend(...currentAds.map(a => a.adContainer.outer)); setTimeout(recheckAds); setTimeout(recheckAds, 2_000); From 648c227772816d6f4021bfba38fc4eff62997443 Mon Sep 17 00:00:00 2001 From: XP Date: Fri, 1 Nov 2024 13:55:49 -0700 Subject: [PATCH 5/5] Try fix --- packages/frontend/src/scripts/components/ads.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/scripts/components/ads.ts b/packages/frontend/src/scripts/components/ads.ts index d2270689..f1613b35 100644 --- a/packages/frontend/src/scripts/components/ads.ts +++ b/packages/frontend/src/scripts/components/ads.ts @@ -61,6 +61,7 @@ class ManagedAd { this.installAdPlacement(); // if (!this._installed) { // } + // setTimeout(() => this.ad['checkVisible'](), 100); } else { this.adContainer.outer.style.display = 'none'; @@ -90,7 +91,7 @@ class ManagedAd { return; } setTimeout(() => { - console.trace(`createAd: ${window['nitroAds'] !== undefined}`); + console.debug(`createAd: ${this.id}`); this.ad = window['nitroAds'].createAd(id, { "refreshTime": 30, "renderVisibleOnly": true,