Merge pull request #8 from Financial-Times/native-video-ads

Native video ads

circle.yml

@@ -1,3 +1,14 @@
 machine:
   node:
     version: 4.2.2
+  post:
+    - npm install -g Financial-Times/origami-build-tools#node4
+dependencies:
+  override:
+    - obt install
+  cache_directories:
+    - "node_modules"
+test:
+  override:
+    - obt test
+    - obt verify

demos/src/demo.js

@@ -0,0 +1,5 @@
+/* global console */
+const oVideo = require('../../main');
+oVideo.init({
+	advertising: true
+});

demos/src/placeholder.js

@@ -1,2 +1,2 @@
 const oVideo = require('../../main');
-oVideo.init({ placeholder: true });
+oVideo.init({ placeholder: true, advertising: true });

demos/src/video.mustache

@@ -1,5 +1,5 @@
 <div>
-	<div class="video-container" data-o-component="o-video"
+	<div class="o-video video-container" data-o-component="o-video"
 		data-o-video-source="Brightcove"
 		data-o-video-id="4165329773001"></div>
 </div>

demos/src/videojs.mustache

@@ -0,0 +1,6 @@
+<div>
+	<div class="video-container o-video--videojs video-js" data-o-component="o-video"
+		data-o-video-source="Brightcove"
+		data-o-video-player="videojs"
+		data-o-video-id="4165329773001"></div>
+</div>

main.js

@@ -1,26 +1,61 @@
 const factory = require('./src/models/video-factory');
-const init = opts => {
+
+function loadAdsLibrary() {
+	return new Promise((resolve, reject) => {
+		const googleSdkScript = document.createElement('script');
+		googleSdkScript.setAttribute('type', 'text/javascript');
+		googleSdkScript.setAttribute('src', `//imasdk.googleapis.com/js/sdkloader/ima3.js`);
+		googleSdkScript.setAttribute('async', true);
+		googleSdkScript.setAttribute('defer', true);
+		document.getElementsByTagName("head")[0].appendChild(googleSdkScript);
+
+		googleSdkScript.addEventListener('load', () => {
+			resolve();
+		});
+
+		googleSdkScript.addEventListener('error', () => {
+			reject();
+		});
+	});
+}
+
+function loadVideos(options) {
+	const videoPromises = [].map.call(options.context.querySelectorAll(options.selector + ':not([data-o-video-js])[data-o-component~="o-video"]'), videoEl => {
+		return factory(videoEl, options)
+			.init()
+			// don't fail all if a video errors
+			.catch(() => { });
+	});
+
+	return Promise.all(videoPromises);
+}
+
+function init(opts) {
 	const options = opts || {};
 	const defaultOpts = {
 		context: document.body,
 		selector: '*'
 	};
+
 	for (let defaultOpt in defaultOpts) {
 		if (defaultOpts.hasOwnProperty(defaultOpt) && !options.hasOwnProperty(defaultOpt)) {
 			options[defaultOpt] = defaultOpts[defaultOpt];
 		}
 	}
-	const context = options.context instanceof HTMLElement ? options.context : document.querySelector(opts.context);
-	const videoPromises = [].map.call(context.querySelectorAll(options.selector + ':not([data-o-video-js])[data-o-component~="o-video"]'), videoEl => {
-		return factory(videoEl, options)
-			.init()
-			// don't fail all if a video errors
-			.catch(() => { });
+
+	const librariesLoaded = options.advertising ? loadAdsLibrary() : Promise.resolve();
+	options.context = options.context instanceof HTMLElement ? options.context : document.querySelector(opts.context);
+
+	return librariesLoaded.then(() => {
+		return loadVideos(options);
+	}, () => {
+		options.ads = false;
+		return loadVideos(options);
 	});
-	return Promise.all(videoPromises);
-}
+};
 
 module.exports = {
 	init,
-	factory
+	factory,
+	_loadAdsLibrary: loadAdsLibrary
 };

main.scss

@@ -4,7 +4,7 @@ $_o-video_applied: false !default;
 @import "o-colors/main";
 
 @if (not $_o-video_applied) {
-	.o-video--card {
+	.o-video {
 		position: relative;
 		cursor: pointer;
 		width: 100%;
@@ -15,16 +15,17 @@ $_o-video_applied: false !default;
 			width: 100%;
 			padding: 56.25% 0 0;
 		}
-
-		.o-video__video {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-		}
 	}
 
+	.o-video__video,
+	.o-video__placeholder,
+	.o-video__ad {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
 
 	.o-video__title {
 		position: absolute;
@@ -67,7 +68,8 @@ $_o-video_applied: false !default;
 		}
 	}
 
-	.video-js {
+	// Videojs stuff
+	.o-video--videojs {
 		width: 100%;
 		height: 100%;
 		border: 0;
@@ -79,6 +81,10 @@ $_o-video_applied: false !default;
 		right: 0;
 	}
 
+	[data-o-video-player="videojs"] .o-video--videojs {
+		position: absolute;
+	}
+
 	// HACK: Liberal use of `!important` to override videojs styling.
 	.vjs-big-play-button {
 		position: absolute !important;
@@ -104,7 +110,7 @@ $_o-video_applied: false !default;
 			margin-left: -20px;
 			opacity: 1;
 			transition: opacity 0.1s;
-			background-color: #000000;
+			background: #000000;
 			background-color: rgba(0, 0, 0, 0.5);
 			border-radius: 20px;
 		}
@@ -114,9 +120,5 @@ $_o-video_applied: false !default;
 		}
 	}
 
-	[data-o-video-player="videojs"] .o-video--videojs {
-		position: absolute;
-	}
-
 	$_o-video_applied: true !global;
 }

origami.json

@@ -6,20 +6,26 @@
 	"support": "github.com/Financial-Times/o-video/issues",
 	"demosDefaults": {
 		"sass": "demos/src/main.scss",
+		"js": "demos/src/demo.js",
 		"template": "demos/src/video.mustache"
 	},
 	"demos": [
 		{
-			"name": "brightcove",
-			"description": "Brightcove",
-			"expanded": true,
-			"js": "demos/src/brightcove.js"
+			"name": "native",
+			"description": "Native",
+			"expanded": true
 		},
 		{
 			"name": "placeholder",
 			"description": "Placeholder",
 			"expanded": true,
 			"js": "demos/src/placeholder.js"
+		},
+		{
+			"name": "videojs",
+			"description": "Video.js",
+			"expanded": true,
+			"template": "demos/src/videojs.mustache"
 		}
 	]
 }