Merge pull request #2 from Financial-Times/origami-structure

Origami structure

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+/npm-debug.log*
+/build
+/.idea/
+/demos/local/
+/bower_components/
+/node_modules/

README.md

@@ -0,0 +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
+
+## 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
+
+In JS
+
+    var oVideo = require('o-video');
+    var opts = {
+        optimumWidth: 710,
+        placeholder: true,
+        classes: ['video'],
+        selector: '.js-video'
+    };
+    oVideo.init(opts);
+
+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
+ 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
+ * `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.
+
+ 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
+
+## Testing
+
+    $ npm test
+
+(Requires Firefox)

bower.json

@@ -0,0 +1,14 @@
+{
+  "name": "o-video",
+  "description": "Video player for the FT",
+  "license": "MIT",
+  "main": [
+    "main.js",
+    "main.scss"
+  ],
+  "dependencies": {
+    "o-icons": "^4.0.0",
+    "o-colors": "^3.3.0",
+    "o-fetch-jsonp": "^1.0.0"
+  }
+}

circle.yml

@@ -0,0 +1,3 @@
+machine:
+  node:
+    version: 4.2.2

demos/src/brightcove.js

@@ -0,0 +1,7 @@
+/* global console */
+const oVideo = require('../../main');
+oVideo.init();
+
+document.body.addEventListener('beacon:media', ev => {
+	console.log(ev.detail);
+});

demos/src/main.scss

@@ -0,0 +1,11 @@
+@import "../../main";
+
+.video-container {
+	width: 512px;
+	min-height: 228px;
+	position: relative;
+}
+video,
+img {
+	width: 100%;
+}

demos/src/placeholder.js

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

demos/src/video.mustache

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

karma.conf.js

@@ -0,0 +1,117 @@
+/*eslint-env node*/
+
+const BowerPlugin = require('bower-webpack-plugin');
+const path = require('path');
+const cwd = process.cwd();
+
+module.exports = function(config) {
+	config.set({
+
+		// base path that will be used to resolve all patterns (eg. files, exclude)
+		basePath: '',
+
+
+		// frameworks to use
+		// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+		frameworks: ['mocha', 'sinon', 'chai-as-promised', 'chai'],
+
+
+		plugins: [
+			'karma-mocha',
+			'karma-sinon',
+			'karma-chai-as-promised',
+			'karma-chai',
+			'karma-firefox-launcher',
+			'karma-webpack'
+		],
+
+
+		// list of files / patterns to load in the browser
+		files: [
+			'http://cdn.polyfill.io/v2/polyfill.js?features=fetch&flags=gated',
+			'test/**/*.test.js'
+		],
+
+
+		// list of files to exclude
+		exclude: [
+		],
+
+
+		// preprocess matching files before serving them to the browser
+		// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+		preprocessors: {
+			'test/**/*.test.js': ['webpack']
+		},
+
+
+		// test results reporter to use
+		// possible values: 'dots', 'progress'
+		// available reporters: https://npmjs.org/browse/keyword/karma-reporter
+		reporters: ['progress'],
+
+
+		// web server port
+		port: 9876,
+
+
+		// enable / disable colors in the output (reporters and logs)
+		colors: true,
+
+
+		// level of logging
+		// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+		logLevel: config.LOG_INFO,
+
+
+		// enable / disable watching file and executing tests whenever any file changes
+		autoWatch: false,
+
+
+		// start these browsers
+		// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+		browsers: ['Firefox'],
+
+
+		// Continuous Integration mode
+		// if true, Karma captures browsers, runs the tests and exits
+		singleRun: true,
+
+		webpack: {
+			quiet: true,
+			module: {
+				loaders: [
+					{
+						test: /\.js$/,
+						exclude: /node_modules/,
+						loaders: [
+							'babel?optional[]=runtime',
+							'imports?define=>false'
+						]
+					},
+					{
+						test: /\.json$/,
+						loader: 'json'
+					}
+				],
+				noParse: [
+					/\/sinon\.js/,
+				]
+			},
+			resolve: {
+				root: [path.join(cwd, 'bower_components')]
+			},
+			plugins: [
+				new BowerPlugin({
+					includes:  /\.js$/
+				})
+			]
+		},
+
+		// Hide webpack output logging
+		webpackMiddleware: {
+			noInfo: true
+		}
+
+	});
+};

main.js

@@ -0,0 +1,26 @@
+const factory = require('./src/models/video-factory');
+const 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(() => { });
+	});
+	return Promise.all(videoPromises);
+}
+
+module.exports = {
+	init,
+	factory
+};

main.scss

@@ -0,0 +1,71 @@
+$_o-video_applied: false !default;
+
+@import "o-icons/main";
+@import "o-colors/main";
+
+@if (not $_o-video_applied) {
+	.o-video--card {
+		position: relative;
+		cursor: pointer;
+		width: 100%;
+
+		&:before {
+			content: '';
+			display: block;
+			width: 100%;
+			padding: 56.25% 0 0;
+		}
+
+		.o-video__video {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+
+	.o-video__title {
+		position: absolute;
+		top: 0;
+		left: 0;
+		padding: 8px;
+		background-color: rgba(oColorsGetPaletteColor('grey-tint4'), 0.9);
+		color: oColorsGetPaletteColor('white');
+	}
+
+	.o-video__play-button {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		padding: 0;
+		background-color: transparent;
+		cursor: pointer;
+		border: 0;
+
+		.o-video__play-button-text {
+			text-indent: -9999px;
+		}
+
+		.o-video__play-button-icon {
+			@include oIconsGetIcon('play', oColorsGetPaletteColor('white'), 40);
+			@include oIconsBaseStyles;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			margin-top: -20px;
+			margin-left: -20px;
+			opacity: 1;
+			transition: opacity 0.1s;
+			border-radius: 20px;
+		}
+		&:hover .o-video__play-button-icon {
+			opacity: 0.5;
+		}
+	}
+
+	$_o-video_applied: true !global;
+}

origami.json

@@ -1,14 +1,25 @@
 {
-	"description": "Standard video player and controls",
-	"origamiType": "module",
+	"description": "Financial Times video component",
 	"origamiVersion": 1,
-	"support": "https://github.com/Financial-Times/o-video/issues",
-	"supportStatus": "experimental",
+	"origamiType": "module",
+	"supportStatus": "active",
+	"support": "github.com/Financial-Times/o-video/issues",
+	"demosDefaults": {
+		"sass": "demos/src/main.scss",
+		"template": "demos/src/video.mustache"
+	},
 	"demos": [
 		{
-			"path": "/demos/demo.html",
+			"name": "brightcove",
+			"description": "Brightcove",
+			"expanded": true,
+			"js": "demos/src/brightcove.js"
+		},
+		{
+			"name": "placeholder",
+			"description": "Placeholder",
 			"expanded": true,
-			"description": ""
+			"js": "demos/src/placeholder.js"
 		}
 	]
 }

package.json

@@ -0,0 +1,27 @@
+{
+  "private": true,
+  "scripts": {
+    "test": "./node_modules/karma/bin/karma start karma.conf.js"
+  },
+  "devDependencies": {
+    "babel-loader": "^5.3.2",
+    "babel-runtime": "^5.6.15",
+    "bower-webpack-plugin": "^0.1.8",
+    "chai-as-promised": "^5.0.0",
+    "imports-loader": "^0.6.4",
+    "json-loader": "^0.5.4",
+    "karma": "^0.13.15",
+    "karma-chai": "^0.1.0",
+    "karma-chai-as-promised": "^0.1.2",
+    "karma-chrome-launcher": "^1.0.1",
+    "karma-cli": "^0.1.1",
+    "karma-firefox-launcher": "^1.0.0",
+    "karma-mocha": "^0.2.2",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-sinon": "^1.0.4",
+    "karma-webpack": "^1.7.0",
+    "origami-build-tools": "^5.0.0",
+    "sinon": "1.14.1",
+    "webpack": "^1.12.2"
+  }
+}