From 15bd26399f0b542a7f370ce47a1a50498f2cfaf9 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Wed, 9 Mar 2022 21:10:20 +0800
Subject: [PATCH] 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.
---
 web/component/ads/view.jsx | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/web/component/ads/view.jsx b/web/component/ads/view.jsx
index b911c2c93..3820ea44c 100644
--- a/web/component/ads/view.jsx
+++ b/web/component/ads/view.jsx
@@ -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) {}
     }