New api integration (MailOnline#12)

* Integrate the new semantics API endpoint. Adjust the analytics we record * Add better handling of flash, especially on firefox * Do API switch over to new endpoint Add sovrn ad tags * Update logs and analytics
iq-dot · Apr 26, 2017 · fc74d19 · fc74d19
1 parent 55f0b88
commit fc74d19
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 101 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -3,10 +3,13 @@
   "env": {
     "browser": true
   },
+  "globals": {
+    "Modernizr": false
+  },
   "rules": {
     "no-use-before-define": ["error", "nofunc"],
     "padded-blocks": ["off", "always"],
-    "no-underscore-dangle": ["error", { "allow": ["_score", "el_"]} ],
+    "no-underscore-dangle": ["off", "always" ],
     "no-unused-expressions": ["error", { "allowTernary": true }]
   }
 }
diff --git a/public/bundle.js b/public/bundle.js
diff --git a/src/App.jsx b/src/App.jsx
@@ -13,19 +13,29 @@ import { itn, bristolsport, londontheinside, spectator, telegraph } from './play
  * @returns {*}
  */
 function getClient() {
-  if (window.location.href.indexOf('localhost') !== -1) return 'localhost';
-  if (window.location.href.indexOf('telegraph.co.uk') !== -1) return 'telegraph';
-  if (window.location.href.indexOf('londontheinside.com') !== -1) return 'londontheinside';
-  if (window.location.href.indexOf('beautyandthedirt.com') !== -1) return 'beautyandthedirt';
-  if (window.location.href.indexOf('bristol-sport.co.uk') !== -1) return 'bristolsport';
-  if (window.location.href.indexOf('proactiveinvestors.co.uk') !== -1) return 'proactiveinvestors';
-  if (window.location.href.indexOf('advfn.com') !== -1) return 'advfn';
-  if (window.location.href.indexOf('hospitalitytrends.net') !== -1) return 'hospitalitytrends';
-  if (window.location.href.indexOf('prospectmagazine.co.uk') !== -1) return 'prospectmagazine';
-  if (window.location.href.indexOf('spectator.co.uk') !== -1) return 'spectator';
-  if (window.location.href.indexOf('cityam.com') !== -1) return 'cityam';
-  if (window.location.href.indexOf('livingly.com') !== -1) return 'sovrn';
-  if (window.location.href.indexOf('hitc.com') !== -1) return 'hitc';
+  const href = window.location.href;
+
+  if (urlMatch('localhost')) return 'localhost';
+  if (urlMatch('telegraph.co.uk')) return 'telegraph';
+  if (urlMatch('londontheinside.com')) return 'londontheinside';
+  if (urlMatch('beautyandthedirt.com')) return 'beautyandthedirt';
+  if (urlMatch('bristol-sport.co.uk')) return 'bristolsport';
+  if (urlMatch('proactiveinvestors.co.uk')) return 'proactiveinvestors';
+  if (urlMatch('advfn.com')) return 'advfn';
+  if (urlMatch('hospitalitytrends.net')) return 'hospitalitytrends';
+  if (urlMatch('prospectmagazine.co.uk')) return 'prospectmagazine';
+  if (urlMatch('spectator.co.uk')) return 'spectator';
+  if (urlMatch('cityam.com')) return 'cityam';
+  if (urlMatch('hitc.com')) return 'hitc';
+  if (urlMatch('zmescience.com')) return 'sovrnus';
+  if (urlMatch(['livingly.com', 'independent.ie'])) return 'sovrnuk';
+
+  function urlMatch(url) {
+    return Array.isArray(url)
+      ? url.some(u => href.indexOf(u) !== -1)
+      : href.indexOf(url) !== -1;
+  }
+
 
   return 'unknown';
 }
@@ -34,11 +44,14 @@ const CLIENT = getClient();
 
 class App extends React.Component {
 
-  static getClientVideos(url) {
-    const filter = `(term field=aggregator '${CLIENT}')`;
-    const delta = `https://build.sugges.tv?url=${url}&filter=${filter}`;
+  static getVideos(url, client) {
+    let endpoint = `https://api.sugges.tv/semantics?url=${url}`;
+
+    if (client === 'telegraph') {
+      endpoint += `&client=${client}`;
+    }
 
-    return fetch(delta, {
+    return fetch(endpoint, {
       method: 'GET',
       headers: {
         Accept: 'application/json',
@@ -47,19 +60,6 @@ class App extends React.Component {
     }).then(r => r.json());
   }
 
-  static getVideos(url) {
-    return fetch('https://api.sugges.tv', {
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-        'x-api-key': 'NXZAGU0Cf88saYlS2uATAVbjWMsxeEk90r5EBzsa',
-      },
-      body: JSON.stringify({ url }),
-    })
-    .then(r => r.json());
-  }
-
   static isInViewport(element) {
     const rect = element.getBoundingClientRect();
     const html = document.documentElement;
@@ -82,7 +82,8 @@ class App extends React.Component {
     if (CLIENT === 'proactiveinvestors') return cb(null, 'https://ad.360yield.com/advast?p=1026983&w=4&h=3');
     if (CLIENT === 'advfn') return cb(null, 'https://ad.360yield.com/advast?p=1021571&w=4&h=3');
     if (CLIENT === 'hospitalitytrends') return cb(null, 'https://ad.360yield.com/advast?p=1028636&w=4&h=3');
-    if (CLIENT === 'sovrn') return cb(null, 'https://ap.lijit.com/www/delivery/vst.php?zoneid=458676');
+    if (CLIENT === 'sovrnuk') return cb(null, 'https://ap.lijit.com/www/delivery/vst.php?zoneid=458676');
+    if (CLIENT === 'sovrnus') return cb(null, 'http://ap.lijit.com/www/delivery/vst.php?zoneid=463506');
     if (CLIENT === 'hitc') return cb(null, 'https://ad.360yield.com/advast?p=1034241&w=4&h=3');
     if (CLIENT === 'telegraph' && tmgAdsBuildAd) {
       return App.getPlaylistAdTag(tmgAdsBuildAd('advert_body_vid', '', '', '').fetchUrl(), cb);
@@ -102,15 +103,15 @@ class App extends React.Component {
     super(props);
     this.state = {
       videos: '',
-      videoss: '',
-      adError: '',
-      adStart: '',
-      adSrc: '',
+      videosFrom: '',
+      adError: 'N/A',
+      adStart: 'N/A',
+      adSrc: 'N/A',
       adTag: '',
       query: '',
-      windowWidth: window.innerWidth,
       videoLoaded: false,
       firstPlay: false,
+      flashTestFinished: false,
       adLoadingPoster: 'https://delta.sugges.tv/assets/images/adLoading.jpg',
       itn: itn.slice(0).sort(() => 0.5 - Math.random()),
       bristolsport: bristolsport.slice(0).sort(() => 0.5 - Math.random()),
@@ -126,7 +127,6 @@ class App extends React.Component {
 
   componentDidMount() {
     const url = window.location.href;
-    const promise = CLIENT === 'telegraph' ? App.getClientVideos(url) : App.getVideos(url);
     const videoJsOptions = {
       controls: true,
       preload: 'auto', // try auto
@@ -135,13 +135,14 @@ class App extends React.Component {
       width: 640,
       height: 264,
     };
+    console.log('SUGGESTV: Client is - ', CLIENT);
 
     // initialise the video player and do set-up work after the player is ready
     this.player = videojs(this.videoNode, videoJsOptions, () => {
       this.plugins();
 
-      promise.then((data) => {
-        console.log('DELTASTV: DATA', data);
+      App.getVideos(url, CLIENT).then((data) => {
+        console.log('SUGGESTV: DATA', data);
 
         this.setVideos(data);
         const container = document.getElementById('suggestvdeltaplayer');
@@ -152,14 +153,15 @@ class App extends React.Component {
           container.appendChild(player);
           this.videoJsInit(this.state.videos);
           this.videoNode.muted = true;
+
         } else {
-          console.log('DELTASTV: No player found');
+          console.log('SUGGESTV: No player found');
           this.player.dispose();
         }
 
       })
         .catch((err) => {
-          console.log('DELTASTV: Promise Error', err);
+          console.log('SUGGESTV: Promise Error', err);
           this.player.dispose();
         });
     });
@@ -183,7 +185,7 @@ class App extends React.Component {
     this.setState({ query: data.query });
 
     if (data !== null && data.results && data.results.hits && data.results.hits.hit.length !== 0) {
-      console.log('DELTASTV: set videos', data);
+      console.log('SUGGESTV: set videos', data);
 
       data.results.hits.hit.slice(0, 4).forEach((video) => {
         let keywordsMatched = [];
@@ -232,13 +234,12 @@ class App extends React.Component {
       });
 
       if (videos.length !== 0) {
-        console.log('DELTASTV: videos arr [actual] ', videos);
         this.setState({
           videos,
-          videoss: 'semanticsearch',
+          videosFrom: 'semanticsearch',
         });
       } else {
-        console.log('DELTASTV: none of the videos matched enough keywords or have big enough score');
+        console.log('SUGGESTV: none of the videos matched enough keywords or have big enough score');
         setDefaultClientVideos(this);
       }
     } else {
@@ -255,25 +256,24 @@ class App extends React.Component {
       if (CLIENT === 'bristol-sport') videos = ctx.state.bristolsport;
       if (CLIENT === 'proactiveinvestors') videos = ctx.state.itn;
 
-      console.log('DELTASTV: videos arr [default] ', videos);
-
       ctx.setState({
         videos,
-        videoss: 'defaultplaylist',
+        videosFrom: 'defaultplaylist',
       });
     }
   }
 
   handleScroll() {
+    const { firstPlay, flashTestFinished, videoLoaded } = this.state;
     if (App.isInViewport(this.videoNode)) {
 
-      if (this.videoNode && !this.state.firstPlay && this.state.videoLoaded) {
+      if (this.videoNode && !firstPlay && videoLoaded && flashTestFinished) {
 
         if (CLIENT === 'cityam' || CLIENT === 'beautyandthedirt') {
-          console.log('DELTASTV: click-to-play');
+          console.log('SUGGESTV: click-to-play');
         } else {
           this.player.play();
-          console.log('START PLAYING');
+          console.log('SUGGESTV: Autoplay');
         }
 
         // No need to handle this event after we determine autoplay or click to play
@@ -296,7 +296,7 @@ class App extends React.Component {
       function getTagWrapper(cb) {
         player.poster(self.state.adLoadingPoster);
         App.getAdTag((err, adTag) => {
-          console.log('DELTASTV: AdTag = ', adTag);
+          console.log('SUGGESTV: AdTag = ', adTag);
           self.setState({ adTag });
           cb(err, adTag);
         });
@@ -312,28 +312,31 @@ class App extends React.Component {
         preferredTech: 'html5',
       };
 
-      console.log('DELTASTV: vastOptions', options);
+      console.log('SUGGESTV: vastOptions', options);
       const vastAd = player.vastClient(options);
 
+      // Check if we have flash enabled and if flash test is running
+      console.log('SUGGESTV Flash:', Modernizr.flash);
+      if (Modernizr.flash && !Modernizr.flash.blocked) {
+        window.vpaid_video_flash_tester.on('change', () => this.setState({ flashTestFinished: true }));
+      } else {
+        this.setState({ flashTestFinished: true });
+      }
+
       player.on('vast.adStart', () => {
-        console.log('DELTASTV: start ad', vastAd, player);
+        console.log('SUGGESTV: start ad', vastAd, player);
         this.setState({
           adStart: this.state.adStart ? `${this.state.adStart},adStart` : 'adStart',
-          adError: 'N/A',
-          adSrc: player.vast.vastResponse.mediaFiles.length !== 0 ? player.vast.vastResponse.mediaFiles[0].src : 'N/A',
+          adSrc: player.vast.vastResponse.mediaFiles.length ? player.vast.vastResponse.mediaFiles[0].src : 'N/A',
         });
         document.querySelectorAll('.delta-overlay').forEach((overlay) => {
           overlay.style.display = 'none';
         });
       });
 
       player.on('vast.adError', (obj) => {
-        console.log('DELTASTV: error ad', obj);
-        this.setState({
-          adStart: 'N/A',
-          adSrc: 'N/A',
-          adError: obj.error.message,
-        });
+        console.log('SUGGESTV: error ad', obj);
+        this.setState({ adError: obj.error.message });
       });
 
       player.on('vast.contentStart', () => {
@@ -352,12 +355,9 @@ class App extends React.Component {
             aderror: this.state.adError,
             adsrc: this.state.adSrc,
             adtag: this.state.adTag,
-            scripttag: 'https://delta.sugges.tv/test/bundle.js',
-            player: 'delta',
-            player_settings: (CLIENT === 'cityam' || CLIENT === 'beautyandthedirt') ? 'muted,click-to-play' : 'muted,autoplay-in-view',
-            player_type: 'article',
+            autoplay: (CLIENT === 'cityam' || CLIENT === 'beautyandthedirt'),
             keywords: this.state.query,
-            videoss: this.state.videoss,
+            videos_from: this.state.videosFrom,
             player_height: Math.ceil(player.el_.clientHeight),
             player_width: Math.ceil(player.el_.clientWidth),
             player_duration: Math.ceil(player.duration()),
@@ -370,11 +370,13 @@ class App extends React.Component {
             browser_language: navigator.language,
             browser_languages: navigator.languages.join(','),
             platform: navigator.platform,
+            flash_installed: Boolean(Modernizr.flash),
+            flash_blocked: Modernizr.flash ? Modernizr.flash.blocked : false,
           }),
         })
         .then(r => r.json())
         .then((data) => {
-          console.log('DELTASTV: contentStart DATA back', data);
+          console.log('SUGGESTV: contentStart DATA back', data);
         });
       });
 
@@ -387,14 +389,14 @@ class App extends React.Component {
       });
 
       function doVastAdTracking(ctx, events, eventName) {
-        console.log('DELTASTV: vast event - ', eventName);
+        console.log('SUGGESTV: vast event - ', eventName);
         const event = events[eventName];
         ctx.setState({ adStart: `${ctx.state.adStart},${eventName}` });
 
         if (event) {
           fetch(event[0].uri)
               .then(r => r.json())
-              .then(data => console.log(`DELTASTV: vast.${eventName}`, data));
+              .then(data => console.log(`SUGGESTV: vast.${eventName}`, data));
         }
       }
 
@@ -420,7 +422,7 @@ class App extends React.Component {
   }
 
   playlist(videos) {
-    console.log('DELTASTV: Do playlist -', videos);
+    console.log('SUGGESTV: Do playlist -', videos);
     this.player.playlist(videos);
     this.player.playlist.autoadvance(0);
   }
@@ -440,10 +442,9 @@ class App extends React.Component {
   }
 
   videoJsInit(videos) {
-    console.log('DELTASTV: Do videojs', videos);
-    console.log('DELTASTV: Do videojs', this.state);
+    console.log('SUGGESTV: Do videojs', this.state);
 
-    this.playlist(this.state.videos);
+    this.playlist(videos);
     const player = this.player;
 
     player.muted(true);
@@ -453,11 +454,15 @@ class App extends React.Component {
       const currentItem = player.playlist.currentItem();
       const title = playlist[currentItem < 0 ? 0 : currentItem].title;
 
+      player.controlBar.volumeMenuButton.show();
       player.on('touchend', () => {
         player.paused() ? player.play() : player.pause();
       });
-      player.controlBar.volumeMenuButton.show();
-      if (CLIENT === 'telegraph') player.addClass('telegraph-player')
+
+      if (CLIENT === 'telegraph') {
+        player.addClass('telegraph-player');
+      }
+
       this.overlay(title);
     });
 

diff --git a/src/main.jsx b/src/main.jsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import './modernizr-flash';
+
 import App from './App';
 
 require('./video.scss');
-require('./telegraph-player.scss')
+require('./telegraph-player.scss');
 
 const container = document.createElement('div');
 container.id = 'deltaplayercontainer';
@@ -23,9 +25,7 @@ links.forEach((href) => {
   document.head.appendChild(link);
 });
 
-console.log('running');
-
 ReactDOM.render(
   <App />,
   document.getElementById('deltaplayercontainer'),
-);
+);
diff --git a/src/modernizr-flash.js b/src/modernizr-flash.js