add message to ads about signing in

lbrytv/component/ads.jsx

@@ -1,28 +1,61 @@
+// @flow
+import * as PAGES from 'constants/pages';
 import React, { useEffect } from 'react';
+import { withRouter } from 'react-router';
+import I18nMessage from 'component/i18nMessage';
+import Button from 'component/button';
 
-function Extra(props) {
-  const url = '//assets.revcontent.com/master/delivery.js';
+const ADS_URL = '//assets.revcontent.com/master/delivery.js';
+
+type Props = {
+  location: { pathname: string },
+};
+
+function Ads(props: Props) {
+  const {
+    location: { pathname },
+  } = props;
 
   useEffect(() => {
     const script = document.createElement('script');
 
-    script.src = url;
+    script.src = ADS_URL;
     script.async = true;
 
+    // $FlowFixMe
     document.body.appendChild(script);
 
     return () => {
+      // $FlowFixMe
       document.body.removeChild(script);
       // if user navigates too rapidly, <style> tags can build up
+      // $FlowFixMe
       if (document.body.getElementsByTagName('style').length) {
+        // $FlowFixMe
         document.body.getElementsByTagName('style')[0].remove();
       }
     };
   }, []);
 
   return (
-    <>
+    <div className="ads-wrapper">
       <p>Ads</p>
+      <p>
+        <I18nMessage
+          tokens={{
+            sign_in_to_lbrytv: (
+              <Button
+                button="link"
+                label={__('Sign in to lbry.tv')}
+                navigate={`/$/${PAGES.AUTH}?redirect=${pathname}`}
+              />
+            ),
+            download_the_app: <Button button="link" label={__('download the app')} href="https://lbry.com/get" />,
+          }}
+        >
+          Hate these? %sign_in_to_lbrytv% or %download_the_app% for an ad free experience.
+        </I18nMessage>
+      </p>
       <div
         id="rc-widget-0a74cf"
         data-rc-widget
@@ -30,8 +63,8 @@ function Extra(props) {
         data-endpoint="//trends.revcontent.com"
         data-widget-id="117427"
       />
-    </>
+    </div>
   );
 }
 
-export default Extra;
+export default withRouter(Ads);

ui/component/sideNavigation/view.jsx

@@ -8,7 +8,9 @@ import Tag from 'component/tag';
 import StickyBox from 'react-sticky-box/dist/esnext';
 import Spinner from 'component/spinner';
 import usePersistedState from 'effects/use-persisted-state';
-import Ad from 'lbrytv/component/ads';
+// @if TARGET='web'
+import Ads from 'lbrytv/component/ads';
+// @endif
 
 const SHOW_CHANNELS = 'SHOW_CHANNELS';
 const SHOW_TAGS = 'SHOW_TAGS';
@@ -83,13 +85,17 @@ function SideNavigation(props: Props) {
       <div>{children}</div>
     );
 
-  return obscureSideNavigation ? (
-    <Wrapper>
-      <div className="navigation--placeholder">
-        <Ad />
-      </div>
-    </Wrapper>
-  ) : (
+  // @if TARGET='web'
+  if (obscureSideNavigation) {
+    return (
+      <Wrapper>
+        <Ads />
+      </Wrapper>
+    );
+  }
+  // @endif
+
+  return (
     <Wrapper>
       <nav className="navigation">
         <ul className="navigation-links">

ui/scss/all.scss

@@ -6,6 +6,7 @@
 @import 'init/vars';
 @import 'init/mixins';
 @import 'init/gui';
+@import 'component/ads';
 @import 'component/animation';
 @import 'component/button';
 @import 'component/card';

ui/scss/component/_ads.scss

@@ -0,0 +1,9 @@
+.ads-wrapper {
+  @extend .navigation;
+
+  p {
+    margin-left: 0.4rem; // The ads provider adds weird padding to their wrapper
+    font-size: var(--font-xsmall);
+    color: var(--color-text-subtitle);
+  }
+}

ui/scss/component/_navigation.scss

@@ -13,18 +13,6 @@
   margin-top: var(--spacing-large);
 }
 
-.navigation--placeholder {
-  @extend .navigation;
-  border-radius: var(--card-radius);
-  position: relative;
-  margin: auto;
-
-  p {
-    font-size: var(--font-xsmall);
-    color: var(--color-text-subtitle);
-  }
-}
-
 .navigation-links {
   @extend .ul--no-style;
   flex-direction: column;