Handle case where ad-cleanup fails
## 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:
parent
df04f727da
commit
15bd26399f
1 changed files with 16 additions and 12 deletions
|
@ -49,6 +49,20 @@ function removeIfExists(querySelector) {
|
||||||
if (element) element.remove();
|
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) {
|
function Ads(props: Props) {
|
||||||
const {
|
const {
|
||||||
location: { pathname },
|
location: { pathname },
|
||||||
|
@ -71,6 +85,7 @@ function Ads(props: Props) {
|
||||||
if (shouldShowAds) {
|
if (shouldShowAds) {
|
||||||
let script;
|
let script;
|
||||||
try {
|
try {
|
||||||
|
clearAdElements();
|
||||||
script = document.createElement('script');
|
script = document.createElement('script');
|
||||||
script.src = adConfig.url;
|
script.src = adConfig.url;
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
|
@ -79,18 +94,7 @@ function Ads(props: Props) {
|
||||||
return () => {
|
return () => {
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
document.head.removeChild(script);
|
document.head.removeChild(script);
|
||||||
|
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');
|
|
||||||
};
|
};
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue