Merge pull request #10 from Financial-Times/v1

Refactors o-video to follow the spec and to remove all unused code

README.md

@@ -1,46 +1,49 @@
 # FT Video [![Circle CI](https://circleci.com/gh/Financial-Times/o-video.svg?style=svg)](https://circleci.com/gh/Financial-Times/o-video)
 
-Creates a video player and attaches analytics
+Creates a video player and attaches analytics. Also supports pre roll ads.
 
 ## Usage
 
 Create an element of the format e.g.
 
-    <div data-o-component="o-video"
-        data-o-video-source="brightcove"
-        data-o-video-id="4165329773001"></div>
-
-Where
-
- * `data-o-video-source['brightcove']` Source of the video (currently only accepts `Brightcove`)
- * `data-o-video-id` Source's ID of the video
+```html
+    <div data-o-component="o-video"></div>
+```
 
 In JS
 
-    var oVideo = require('o-video');
-    var opts = {
-        optimumWidth: 710,
+```js
+    const OVideo = require('o-video');
+    const opts = {
+        id: 4165329773001,
+        source: "brightcove",
+        optimumwidth: 710,
         placeholder: true,
-        classes: ['video'],
-        selector: '.js-video'
+        classes: ['video']
     };
-    oVideo.init(opts);
+    const video = new OVideo(document.body, opts);
+```
+
+### Config
 
 Where `opts` is an optional object with properties
 
- * `optimumWidth` [`Number`] The optimum width of the video, used when there are multiple video renditions available to
+ * `id` [`Number`] Source's ID of the video
+ * `source` [`String`] Source of the video (currently only accepts `brightcove`)
+ * `optimumwidth` [`Number`] The optimum width of the video, used when there are multiple video renditions available to
  decide which to display (the smallest one that's at least as large as this width, if it exists)
  * `placeholder` [`Boolean`] Show just the poster image, load (and play) video on click
- * `placeholderTitle` [`Boolean`] Show just the title as an overlay on the placeholder
+ * `placeholdertitle` [`Boolean`] Show just the title as an overlay on the placeholder
  * `classes` [`Array`] Classes to add to the video (and placeholder) element
- * `selector` [`String`] Selector to use to find the `o-video` elements. Appended with
- `:not([data-o-video-js])[data-o-component~="o-video"]`. Defaults to `*`.
 
- `optimumWidth`, `palceholder` and `classes` can also be set in the markup with an attribute of the form `data-o-video-opts-*`, e.g.
- `data-o-video-opts-optimum-width="300"`. These trump options supplied to the `init` method.
+The config options can also be set as data attribute to instantiate the module declaratively:
 
- If the data is available, it can also be passed through in an attribute (e.g. `data-o-video-opts-data="{ "videoStillURL": ... }"`)
- to save the browser an HTTP request
+```html
+    <div data-o-component="o-video"
+            data-o-video-id="4165329773001"
+            data-o-video-source="brightcove"
+            data-o-video-optimumwidth="710"></div>
+```
 
 ## Testing
 

demos/src/demo.js

@@ -1,5 +1,6 @@
 /* global console */
-const oVideo = require('../../main');
-oVideo.init({
-	advertising: true
+import './../../main.js';
+
+document.addEventListener("DOMContentLoaded", function() {
+	document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
 });

demos/src/placeholder.mustache

@@ -0,0 +1,7 @@
+<div>
+	<div class="o-video video-container" data-o-component="o-video"
+		data-o-video-source="Brightcove"
+		data-o-video-id="4165329773001"
+		data-o-video-advertising="true"
+		data-o-video-placeholder="true"></div>
+</div>

demos/src/video.mustache

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

main.js

@@ -1,61 +1,10 @@
-const factory = require('./src/models/video-factory');
+import Video from './src/video.js';
 
-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 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);
-	});
+const constructAll = () => {
+	Video.init();
+	document.removeEventListener('o.DOMContentLoaded', constructAll);
 };
 
-module.exports = {
-	init,
-	factory,
-	_loadAdsLibrary: loadAdsLibrary
-};
+document.addEventListener('o.DOMContentLoaded', constructAll);
+
+export default Video;

main.scss

@@ -68,57 +68,5 @@ $_o-video_applied: false !default;
 		}
 	}
 
-	// Videojs stuff
-	.o-video--videojs {
-		width: 100%;
-		height: 100%;
-		border: 0;
-		display: block;
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		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;
-		width: 100% !important;
-		height: 100% !important;
-		top: 0 !important;
-		left: 0 !important;
-		padding: 0;
-		background: transparent !important;
-		border-radius: 0;
-		text-indent: -9999px;
-		cursor: pointer;
-		border: 0;
-		z-index: 1;
-
-		&:after {
-			@include oIconsGetIcon('play', #fcfcfc, 40);
-			content: '';
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			margin-top: -20px;
-			margin-left: -20px;
-			opacity: 1;
-			transition: opacity 0.1s;
-			background: #000000;
-			background-color: rgba(0, 0, 0, 0.5);
-			border-radius: 20px;
-		}
-
-		&:hover:after {
-			opacity: 0.5;
-		}
-	}
-
 	$_o-video_applied: true !global;
 }

origami.json

@@ -19,13 +19,7 @@
 			"name": "placeholder",
 			"description": "Placeholder",
 			"expanded": true,
-			"js": "demos/src/placeholder.js"
-		},
-		{
-			"name": "videojs",
-			"description": "Video.js",
-			"expanded": true,
-			"template": "demos/src/videojs.mustache"
+			"template": "demos/src/placeholder.mustache"
 		}
 	]
 }