From 3322f9dee43b651c4cc6c16c271ef0a80ddb0608 Mon Sep 17 00:00:00 2001 From: Iqbal Ahmed Date: Wed, 21 Jun 2017 15:56:23 +0100 Subject: [PATCH] Telegraph article (#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 --- .gitignore | 2 + package.json | 3 +- src/App.jsx | 62 ++++---------------- src/main.jsx | 15 ++++- webpack.config.js | 3 +- yarn.lock | 142 +++++++++++++++++++++++++++++++++++++--------- 6 files changed, 147 insertions(+), 80 deletions(-) diff --git a/.gitignore b/.gitignore index e4deb86..85b214d 100644 --- a/.gitignore +++ b/.gitignore @@ -46,3 +46,5 @@ jspm_packages # Others .DS_store +stats.json +report.html diff --git a/package.json b/package.json index 351fc08..df6e624 100644 --- a/package.json +++ b/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" } } diff --git a/src/App.jsx b/src/App.jsx index 4491191..fe9a6e8 100644 --- a/src/App.jsx +++ b/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,7 +131,6 @@ 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) { @@ -174,18 +138,16 @@ class App extends React.Component { 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) { diff --git a/src/main.jsx b/src/main.jsx index 849866d..e43297d 100644 --- a/src/main.jsx +++ b/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'); } - diff --git a/webpack.config.js b/webpack.config.js index 7468f87..f02ac01 100644 --- a/webpack.config.js +++ b/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'], }, }; - diff --git a/yarn.lock b/yarn.lock index fbe9797..086545b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -29,18 +29,22 @@ acorn@^3.0.4: version "3.3.0" resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a" -acorn@^4.0.3, acorn@^4.0.4: +acorn@^4.0.3: version "4.0.11" resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.11.tgz#edcda3bd937e7556410d42ed5860f67399c794c0" -acorn@^5.0.1: +acorn@^5.0.0, acorn@^5.0.1, acorn@^5.0.3: version "5.0.3" resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.0.3.tgz#c460df08491463f028ccb82eab3730bf01087b3d" -ajv-keywords@^1.0.0, ajv-keywords@^1.1.1: +ajv-keywords@^1.0.0: version "1.5.1" resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c" +ajv-keywords@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0" + ajv@^4.11.2, ajv@^4.7.0, ajv@^4.9.1: version "4.11.5" resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.5.tgz#b6ee74657b993a01dce44b7944d56f485828d5bd" @@ -48,6 +52,15 @@ ajv@^4.11.2, ajv@^4.7.0, ajv@^4.9.1: co "^4.6.0" json-stable-stringify "^1.0.1" +ajv@^5.1.5: + version "5.2.0" + resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.0.tgz#c1735024c5da2ef75cc190713073d44f098bf486" + dependencies: + co "^4.6.0" + fast-deep-equal "^0.1.0" + json-schema-traverse "^0.3.0" + json-stable-stringify "^1.0.1" + align-text@^0.1.1, align-text@^0.1.3: version "0.1.4" resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117" @@ -1456,6 +1469,12 @@ combined-stream@^1.0.5, combined-stream@~1.0.5: dependencies: delayed-stream "~1.0.0" +commander@^2.9.0: + version "2.9.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4" + dependencies: + graceful-readlink ">= 1.0.0" + commondir@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b" @@ -1817,6 +1836,10 @@ domain-browser@^1.1.1: version "1.1.7" resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc" +duplexer@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1" + ecc-jsbn@~0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505" @@ -1827,6 +1850,10 @@ ee-first@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" +ejs@^2.5.6: + version "2.5.6" + resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.6.tgz#479636bfa3fe3b1debd52087f0acb204b4f19c88" + electron-to-chromium@^1.2.7: version "1.3.2" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.2.tgz#b8ce5c93b308db0e92f6d0435c46ddec8f6363ab" @@ -2160,7 +2187,7 @@ expand-range@^1.8.1: dependencies: fill-range "^2.1.0" -express@^4.13.3: +express@^4.13.3, express@^4.15.2: version "4.15.2" resolved "https://registry.yarnpkg.com/express/-/express-4.15.2.tgz#af107fc148504457f2dca9a6f2571d7129b97b35" dependencies: @@ -2216,6 +2243,10 @@ extsprintf@1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550" +fast-deep-equal@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-0.1.0.tgz#5c6f4599aba6b333ee3342e2ed978672f1001f8d" + fast-levenshtein@~2.0.4: version "2.0.6" resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" @@ -2266,6 +2297,10 @@ filename-regex@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775" +filesize@^3.5.9: + version "3.5.10" + resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.10.tgz#fc8fa23ddb4ef9e5e0ab6e1e64f679a24a56761f" + fill-range@^2.1.0: version "2.2.3" resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723" @@ -2497,6 +2532,16 @@ graceful-fs@^4.1.2: version "4.1.11" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658" +"graceful-readlink@>= 1.0.0": + version "1.0.1" + resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725" + +gzip-size@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520" + dependencies: + duplexer "^0.1.1" + handle-thing@^1.2.4: version "1.2.5" resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4" @@ -2990,6 +3035,10 @@ json-loader@^0.5.4: version "0.5.4" resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.4.tgz#8baa1365a632f58a3c46d20175fc6002c96e37de" +json-schema-traverse@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.0.tgz#0016c0b1ca1efe46d44d37541bcdfc19dcfae0db" + json-schema@0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13" @@ -3008,7 +3057,7 @@ json3@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1" -json5@^0.5.0: +json5@^0.5.0, json5@^0.5.1: version "0.5.1" resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821" @@ -3097,7 +3146,7 @@ loader-utils@^0.2.16: json5 "^0.5.0" object-assign "^4.0.1" -loader-utils@^1.0.1, loader-utils@^1.0.2: +loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd" dependencies: @@ -3518,6 +3567,10 @@ onetime@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789" +opener@^1.4.3: + version "1.4.3" + resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8" + opn@4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95" @@ -4319,7 +4372,7 @@ rx-lite@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102" -safe-buffer@^5.0.1: +safe-buffer@^5.0.1, safe-buffer@~5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7" @@ -4493,9 +4546,9 @@ source-list-map@^0.1.7, source-list-map@~0.1.7: version "0.1.8" resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106" -source-list-map@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-1.1.1.tgz#1a33ac210ca144d1e561f906ebccab5669ff4cb4" +source-list-map@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085" source-map-support@^0.4.2: version "0.4.14" @@ -4802,9 +4855,9 @@ ua-parser-js@^0.7.9: version "0.7.12" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb" -uglify-js@^2.8.5: - version "2.8.21" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.21.tgz#1733f669ae6f82fc90c7b25ec0f5c783ee375314" +uglify-js@^2.8.29: + version "2.8.29" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd" dependencies: source-map "~0.5.1" yargs "~3.10.0" @@ -4815,10 +4868,22 @@ uglify-to-browserify@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7" +uglifyjs-webpack-plugin@^0.4.4: + version "0.4.6" + resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz#b951f4abb6bd617e66f63eb891498e391763e309" + dependencies: + source-map "^0.5.6" + uglify-js "^2.8.29" + webpack-sources "^1.0.1" + uid-number@^0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81" +ultron@~1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.0.tgz#b07a2e6a541a815fc6a34ccd4533baec307ca864" + uniq@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff" @@ -4994,6 +5059,22 @@ wbuf@^1.1.0, wbuf@^1.4.0: dependencies: minimalistic-assert "^1.0.0" +webpack-bundle-analyzer@^2.8.2: + version "2.8.2" + resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.8.2.tgz#8b6240c29a9d63bc72f09d920fb050adbcce9fe8" + dependencies: + acorn "^5.0.3" + chalk "^1.1.3" + commander "^2.9.0" + ejs "^2.5.6" + express "^4.15.2" + filesize "^3.5.9" + gzip-size "^3.0.0" + lodash "^4.17.4" + mkdirp "^0.5.1" + opener "^1.4.3" + ws "^2.3.1" + webpack-dev-middleware@^1.9.0: version "1.10.1" resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.1.tgz#c6b4cf428139cf1aefbe06a0c00fdb4f8da2f893" @@ -5032,36 +5113,38 @@ webpack-sources@^0.1.0: source-list-map "~0.1.7" source-map "~0.5.3" -webpack-sources@^0.2.3: - version "0.2.3" - resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.2.3.tgz#17c62bfaf13c707f9d02c479e0dcdde8380697fb" +webpack-sources@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf" dependencies: - source-list-map "^1.1.1" + source-list-map "^2.0.0" source-map "~0.5.3" -webpack@^2.3.3: - version "2.3.3" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.3.3.tgz#eecc083c18fb7bf958ea4f40b57a6640c5a0cc78" +webpack@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.0.0.tgz#ee9bcebf21247f7153cb410168cab45e3a59d4d7" dependencies: - acorn "^4.0.4" + acorn "^5.0.0" acorn-dynamic-import "^2.0.0" - ajv "^4.7.0" - ajv-keywords "^1.1.1" + ajv "^5.1.5" + ajv-keywords "^2.0.0" async "^2.1.2" enhanced-resolve "^3.0.0" + escope "^3.6.0" interpret "^1.0.0" json-loader "^0.5.4" + json5 "^0.5.1" loader-runner "^2.3.0" - loader-utils "^0.2.16" + loader-utils "^1.1.0" memory-fs "~0.4.1" mkdirp "~0.5.0" node-libs-browser "^2.0.0" source-map "^0.5.3" supports-color "^3.1.0" tapable "~0.2.5" - uglify-js "^2.8.5" + uglifyjs-webpack-plugin "^0.4.4" watchpack "^1.3.1" - webpack-sources "^0.2.3" + webpack-sources "^1.0.1" yargs "^6.0.0" websocket-driver@>=0.5.1: @@ -5131,6 +5214,13 @@ write@^0.2.1: dependencies: mkdirp "^0.5.1" +ws@^2.3.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/ws/-/ws-2.3.1.tgz#6b94b3e447cb6a363f785eaf94af6359e8e81c80" + dependencies: + safe-buffer "~5.0.1" + ultron "~1.1.0" + xhr@2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/xhr/-/xhr-2.2.2.tgz#2ee72571869f8686d41559a9ea286c18971435ff"