Telegraph article (MailOnline#22)

* Added a system to configure on a per client basis any page selectors our player can hook onto
* Added telegraph article body detection and attaching to it
* Add telegraph selector detection.
* Separate client configuration into a separate file

Author: iq-dot

.gitignore

@@ -46,3 +46,5 @@ jspm_packages
 
 # Others
 .DS_store
+stats.json
+report.html

package.json

@@ -63,7 +63,8 @@
     "sass-loader": "^6.0.3",
     "script-loader": "^0.7.0",
     "style-loader": "^0.16.1",
-    "webpack": "^2.3.3",
+    "webpack": "^3.0.0",
+    "webpack-bundle-analyzer": "^2.8.2",
     "webpack-dev-server": "^2.4.2"
   }
 }

src/App.jsx

@@ -3,45 +3,10 @@ import throttle from 'lodash/throttle';
 import 'whatwg-fetch';
 
 import Player from './Player';
+import * as clientUtils from './client';
 
 const Modernizr = window.suggestv.Modernizr;
-
-/**
- * Retrieve the current client based on the current URL we are in
- * @returns {*}
- */
-function getClient() {
-  const href = window.location.href;
-
-  if (urlMatch('localhost')) return 'localhost';
-  if (urlMatch(['delta.sugges.tv/test/index', 'build.suggestv.io/test/index', 'build.suggestv.io/test/cjallen'])) return 'test';
-  if (urlMatch(['delta.sugges.tv/test', 'build.suggestv.io/test'])) return 'client-test';
-  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';
-  if (urlMatch('clickon.co')) return 'clickon';
-  if (urlMatch(['lbc.co.uk', 'classicfm.com', 'capitalfm.com', 'heart.co.uk'])) return 'global-radio';
-
-  function urlMatch(url) {
-    return Array.isArray(url)
-      ? url.some(u => href.indexOf(u) !== -1)
-      : href.indexOf(url) !== -1;
-  }
-
-  return 'unknown';
-}
-
-const CLIENT = getClient();
+const CLIENT = clientUtils.getClient();
 
 class App extends React.Component {
   static getVideos(url, client) {
@@ -166,26 +131,23 @@ class App extends React.Component {
 
   setVideos(data) {
     const videos = [];
-    const SCORE_LIMIT = 15;
     this.setState({ query: data.keywords });
 
     if (data !== null && data.results && data.results.length > 0) {
 
       data.results.forEach((video) => {
         const fields = video.fields;
 
-        if (Number(fields._score[0]) > SCORE_LIMIT) {
-          videos.push({
-            sources: [{
-              src: fields.sources[0],
-              type: 'video/mp4',
-            }],
-            poster: fields.poster[0],
-            title: fields.title[0],
-            description: fields.description[0],
-            videoId: video.id,
-          });
-        }
+        videos.push({
+          sources: [{
+            src: fields.sources[0],
+            type: 'video/mp4',
+          }],
+          poster: fields.poster[0],
+          title: fields.title[0],
+          description: fields.description[0],
+          videoId: video.id,
+        });
       });
 
       if (videos.length !== 0) {

src/main.jsx

@@ -3,11 +3,23 @@ import ReactDOM from 'react-dom';
 import './modernizr-flash';
 
 import App from './App';
+import * as clientUtils from './client';
 
 require('./video.scss');
 require('./telegraph-player.scss');
 
-const container = document.getElementById('suggestvplayer');
+let container = document.getElementById('suggestvplayer');
+let client = clientUtils.getClient();
+let selector = clientUtils.getPageSelector(client);
+
+// Some clients rely on being appended to a special article body rather than an explicit id tag
+if (!container && selector) {
+  console.log('SUGGESTV: No Suggestvplayer element');
+  console.log('SUGGESTV: Detected client specfic selector - attaching to it');
+  container = document.createElement('div');
+  container.id = 'suggestvplayer';
+  selector.appendChild(container);
+}
 
 if (container) {
   const links = [
@@ -31,4 +43,3 @@ if (container) {
 } else {
   console.log('SUGGESTV: No player found');
 }
-

webpack.config.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 // Set-up and create plugins
 const videoJsProvider = new webpack.ProvidePlugin({
@@ -52,9 +53,9 @@ module.exports = {
   plugins: [
     extractSass,
     videoJsProvider,
+    new BundleAnalyzerPlugin({ analyzerMode: 'disabled' })
   ],
   resolve: {
     extensions: ['.js', '.jsx'],
   },
 };
-