LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Handle case where ad-cleanup fails

Browse source 
## Issue
Double ads on screen

## Reproduce
- Pre re-design:
    - Change "Only Language" from tne locale nag.
- Post re-design:
    - Follow a bunch of channels with active livestreams. The homepage ad will show 2 ads stack on each other, with second one invisible.

Both should be equivalent, just different UI/style.

## Analysis
In both cases, it is due to `removeIfExists` failing to remove the element if the ad script hasn't run yet.

This can happen when the component is re-mounted immediately after the ad script was added. When the effect-cleanup runs, the script have not started or is running halfway.

Aside: The need to run `removeIfExists` further strengthens my hunch that the script is meant to live throughout the lifetime of the app, with it populating the given div as we navigate. But just my guess.

## Approach
Clean up before adding the script as well. This covers any missed elements from the previous cleanup.

The drawback is that this approach assumes there will only be 1 ad per page, but that's pretty much the case with the existing `removeIfExists` approach.
This commit is contained in:
infinite-persistence 2022-03-09 21:10:20 +08:00 committed by Thomas Zarebczan
parent df04f727da
commit 15bd26399f
1 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
web/component/ads/view.jsx
View file

@ -49,6 +49,20 @@ function removeIfExists(querySelector) {
if (element) element.remove();
}
function clearAdElements() {
// clear aniview state to allow ad reload
delete window.aniplayerPos;
delete window.storageAni;
delete window.__VIDCRUNCH_CONFIG_618bb4d28aac298191eec411__;
delete window.__player_618bb4d28aac298191eec411__;
// clean DOM elements from ad related elements
removeIfExists('[src^="https://cdn.vidcrunch.com/618bb4d28aac298191eec411.js"]');
removeIfExists('[src^="https://player.aniview.com/script/6.1/aniview.js"]');
removeIfExists('[id^="AVLoaderaniplayer_vidcrunch"]');
removeIfExists('#av_css_id');
}
function Ads(props: Props) {
const {
location: { pathname },
@ -71,6 +85,7 @@ function Ads(props: Props) {
if (shouldShowAds) {
let script;
try {
clearAdElements();
script = document.createElement('script');
script.src = adConfig.url;
// $FlowFixMe
@ -79,18 +94,7 @@ function Ads(props: Props) {
return () => {
// $FlowFixMe
document.head.removeChild(script);
// clear aniview state to allow ad reload
delete window.aniplayerPos;
delete window.storageAni;
delete window.__VIDCRUNCH_CONFIG_618bb4d28aac298191eec411__;
delete window.__player_618bb4d28aac298191eec411__;
// clean DOM elements from ad related elements
removeIfExists('[src^="https://cdn.vidcrunch.com/618bb4d28aac298191eec411.js"]');
removeIfExists('[src^="https://player.aniview.com/script/6.1/aniview.js"]');
removeIfExists('[id^="AVLoaderaniplayer_vidcrunch"]');
removeIfExists('#av_css_id');
clearAdElements();
};
} catch (e) {}
}