Merge branch 'master' into cookie-consent-platform

nuagnorab · May 30, 2019 · 30e0fdc · 30e0fdc
2 parents 161701c + 7fc0e79
commit 30e0fdc
Show file tree

Hide file tree

Showing 22 changed files with 624 additions and 310 deletions.
diff --git a/config/default.json b/config/default.json
@@ -4,7 +4,7 @@
   "helmet": {
     "directives": {
       "childSrc": "'self' emb.d.tube player.twitch.tv www.youtube.com staticxx.facebook.com w.soundcloud.com player.vimeo.com",
-      "connectSrc": "securepubads.g.doubleclick.net 'self' steemit.com https://api.steemit.com api.blocktrades.us",
+      "connectSrc": "https://steemitimages.com securepubads.g.doubleclick.net 'self' steemit.com https://api.steemit.com api.blocktrades.us",
       "defaultSrc": "tpc.googlesyndication.com 'self' emb.d.tube www.youtube.com staticxx.facebook.com player.vimeo.com",
       "fontSrc": "data: fonts.gstatic.com",
       "frameAncestors": "'none'",
@@ -157,6 +157,23 @@
       "dimensions": [[220, 90]]
     },
 
+    "top-navigation": {
+      "path": "/21784675435/steemit_top-navi",
+      "dimensions": [[728, 90], [970, 90]]
+    },
+    "top-navigation-loggedin-mobile": {
+      "path": "/21784675435/steemit_top-navi/steemit_top-navi_loggedin_mobile",
+      "dimensions": [[220, 90]]
+    },
+    "top-navigation-loggedin": {
+      "path": "/21784675435/steemit_top-navi/steemit_top-navi_loggedin",
+      "dimensions": [[728, 90], [970, 90]]
+    },
+    "top-navigation-mobile": {
+      "path": "/21784675435/steemit_top-navi/steemit_top-navi_mobile",
+      "dimensions": [[220, 90]]
+    },
+
     "left-navigation": {
       "path": "/21784675435/steemit_left-navigation/steemit_left-navigation_prebid",
       "dimensions": [[120, 600], [160, 600]]
@@ -166,6 +183,14 @@
     "prebid_timeout": 2000,
     "failsafe_timeout": 3000,
     "ad_units": [
+      {
+        "code": "/21784675435/steemit_top-navi",
+        "mediaTypes": { "banner": { "sizes": [[728, 90], [220, 90], [970, 90]] } },
+        "bids": [{
+          "bidder": "coinzilla",
+          "params": { "placementId": "6425c7b9886e0045972" }
+        }]
+      },
       {
         "code": "/21784675435/steemit_post-page-above-comments",
         "mediaTypes": { "banner": { "sizes": [[728, 90], [220, 90], [970, 90]] } },

diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx
@@ -24,15 +24,8 @@ class App extends React.Component {
         this.state = {
             showCallout: true,
             showBanner: true,
-            gptBannerHeight: 0,
         };
         this.listenerActive = null;
-        this.gptadshownListener = this.gptadshown.bind(this);
-    }
-
-    gptadshown(e) {
-        const height = document.querySelector('header .gpt-ad').offsetHeight;
-        this.setState({ gptBannerHeight: height });
     }
 
     toggleBodyNightmode(nightmodeEnabled) {
@@ -58,12 +51,6 @@ class App extends React.Component {
     componentDidMount() {
         const { nightmodeEnabled } = this.props;
         this.toggleBodyNightmode(nightmodeEnabled);
-
-        window.addEventListener('gptadshown', this.gptadshownListener);
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener('gptadshown', this.gptadshownListener);
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -79,7 +66,6 @@ class App extends React.Component {
             new_visitor !== n.new_visitor ||
             this.state.showBanner !== nextState.showBanner ||
             this.state.showCallout !== nextState.showCallout ||
-            this.state.gptBannerHeight !== nextState.gptBannerHeight ||
             nightmodeEnabled !== n.nightmodeEnabled ||
             showAnnouncement !== n.showAnnouncement
         );

diff --git a/src/app/components/elements/BiddingAd.jsx b/src/app/components/elements/BiddingAd.jsx
@@ -20,6 +20,12 @@ class BiddingAd extends Component {
                 googletag.cmd.push(() => {
                     googletag.display(this.ad.path);
                     this.refreshBid(this.ad.path, slot);
+
+                    googletag
+                        .pubads()
+                        .addEventListener('slotRenderEnded', e => {
+                            window.dispatchEvent(new Event('gptadshown', e));
+                        });
                 });
             }
         });
@@ -99,7 +105,6 @@ export default connect(
         const slotName = props.slotName;
         let type = props.type;
         let slot = state.app.getIn(['googleAds', `gpt${type}Slots`, slotName]);
-        console.log('Found slot for type', type, slot);
 
         return {
             enabled,

diff --git a/src/app/components/elements/GptAd.jsx b/src/app/components/elements/GptAd.jsx
@@ -22,8 +22,8 @@ class GptAd extends Component {
                     googletag.pubads().refresh([slot]);
                     googletag
                         .pubads()
-                        .addEventListener('slotRenderEnded', event => {
-                            window.dispatchEvent(new Event('gptadshown'));
+                        .addEventListener('slotRenderEnded', e => {
+                            window.dispatchEvent(new Event('gptadshown', e));
                         });
                 });
             }

diff --git a/src/app/components/modules/Header/index.jsx b/src/app/components/modules/Header/index.jsx
@@ -19,7 +19,7 @@ import SteemLogo from 'app/components/elements/SteemLogo';
 import normalizeProfile from 'app/utils/NormalizeProfile';
 import Announcement from 'app/components/elements/Announcement';
 import { GptUtils } from 'app/utils/GptUtils';
-import GptAd from 'app/components/elements/GptAd';
+import BiddingAd from 'app/components/elements/BiddingAd';
 
 class Header extends React.Component {
     static propTypes = {
@@ -30,15 +30,13 @@ class Header extends React.Component {
         pathname: PropTypes.string,
     };
 
-    constructor() {
-        super();
-        this.gptadshown = event => {
-            // This makes sure that the sticky header doesn't overlap the welcome splash.
-            this.forceUpdate();
-        };
-        this.hideAnnouncement = event => {
-            this.props.hideAnnouncement(event);
-            this.forceUpdate();
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            gptAdRendered: false,
+            showAd: false,
+            showAnnouncement: this.props.showAnnouncement,
         };
     }
 
@@ -52,7 +50,7 @@ class Header extends React.Component {
             return null;
         }
 
-        window.addEventListener('gptadshown', this.gptadshown);
+        window.addEventListener('gptadshown', e => this.gptAdRendered(e));
     }
 
     componentWillUnmount() {
@@ -64,8 +62,6 @@ class Header extends React.Component {
         ) {
             return null;
         }
-
-        window.removeEventListener('gptadshown', this.gptadshown);
     }
 
     // Consider refactor.
@@ -88,6 +84,23 @@ class Header extends React.Component {
         }
     }
 
+    headroomOnUnpin() {
+        this.setState({ showAd: false });
+    }
+
+    headroomOnUnfix() {
+        this.setState({ showAd: true });
+    }
+
+    gptAdRendered() {
+        this.setState({ showAd: true, gptAdRendered: true });
+    }
+
+    hideAnnouncement() {
+        this.setState({ showAnnouncement: false });
+        this.props.hideAnnouncement();
+    }
+
     render() {
         const {
             category,
@@ -108,6 +121,8 @@ class Header extends React.Component {
             walletUrl,
         } = this.props;
 
+        const { showAd, showAnnouncement } = this.state;
+
         /*Set the document.title on each header render.*/
         const route = resolveRoute(pathname);
         let home_account = false;
@@ -277,21 +292,25 @@ class Header extends React.Component {
         ];
 
         return (
-            <Headroom>
+            <Headroom
+                onUnpin={e => this.headroomOnUnpin(e)}
+                onUnfix={e => this.headroomOnUnfix(e)}
+            >
                 <header className="Header">
-                    {this.props.showAnnouncement && (
-                        <Announcement onClose={this.hideAnnouncement} />
+                    {showAnnouncement && (
+                        <Announcement onClose={e => this.hideAnnouncement(e)} />
                     )}
                     {/* If announcement is shown, ad will not render unless it's in a parent div! */}
-                    <div>
-                        <GptAd
-                            type="Basic"
+                    <div style={showAd ? {} : { display: 'none' }}>
+                        <BiddingAd
+                            type="Bidding"
                             id="/21784675435/steemit_top-navi"
                             slotName={GptUtils.MobilizeSlotName(
                                 'top-navigation'
                             )}
                         />
                     </div>
+
                     <nav className="row Header__nav">
                         <div className="small-5 large-4 columns Header__logotype">
                             {/*LOGO*/}