Remount banner on theme-change as their ad can't change theme on the fly.

It would be nice if the individual components can handle the remounting of the ad-script, but there is currently a need to synchronize the cleanup of the `window.OBR` object.

The quickest solution for now is to add a key at the parent side to synchronize the mount-unmounting. Not ideal -- revisit later.

ui/page/home/index.js

@@ -34,6 +34,7 @@ const select = (state) => ({
   homepageOrder: selectClientSetting(state, SETTINGS.HOMEPAGE_ORDER),
   hasMembership: selectHasOdyseeMembership(state),
   hasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
+  currentTheme: selectClientSetting(state, SETTINGS.THEME),
 });
 
 const perform = (dispatch) => ({

ui/page/home/view.jsx

@@ -44,6 +44,7 @@ type Props = {
   doOpenModal: (id: string, ?{}) => void,
   hasMembership: ?boolean,
   hasPremiumPlus: boolean,
+  currentTheme: string,
 };
 
 function HomePage(props: Props) {
@@ -63,6 +64,7 @@ function HomePage(props: Props) {
     doOpenModal,
     hasMembership,
     hasPremiumPlus,
+    currentTheme,
   } = props;
 
   const showPersonalizedChannels = (authenticated || !IS_WEB) && subscribedChannels && subscribedChannels.length > 0;
@@ -184,8 +186,8 @@ function HomePage(props: Props) {
                 label={__('View More')}
               />
             )}
-            {isMobileScreen && <AdsBanner />}
-            {!isMobileScreen && (index === 0 || index % 2 === 0) && <AdsBanner />}
+            {isMobileScreen && <AdsBanner key={`${currentTheme}:${title}`} />}
+            {!isMobileScreen && (index === 0 || index % 2 === 0) && <AdsBanner key={`${currentTheme}:${title}`} />}
           </>
         )}
       </div>

web/component/adsBanner/view.jsx

@@ -56,6 +56,8 @@ export default function AdsBanner(props: Props) {
           document.body.removeChild(script);
 
           if (--gReferenceCounter <= 0) {
+            // Note: This method has the bad requirement of the parent having to
+            // mount and dismount all banners in the same cycle.
             delete window.OBR;
             // TODO: clear styles after the team adds an ID or class for us to query.
           }