Skip to content
This repository has been archived by the owner on Nov 26, 2021. It is now read-only.

Commit

Permalink
Merge pull request #25 from Financial-Times/matth/update-method
Browse files Browse the repository at this point in the history
Add update method to switch the current placeholder and/or video
  • Loading branch information
Alberto Elias authored Aug 18, 2016
2 parents dac595d + 598aed0 commit 3c6f869
Show file tree
Hide file tree
Showing 12 changed files with 372 additions and 38 deletions.
14 changes: 12 additions & 2 deletions demos/src/demo.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
/* global console */
import './../../main.js';
import OVideo from '../../src/js/video';

document.addEventListener("DOMContentLoaded", function() {
document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
const video = new OVideo(document.querySelector('[data-o-component="o-video"]'));

const select = document.querySelector('select');

if (select) {
select.addEventListener('change', function () {
video.update({ id: this.value });
});

select.value = video.opts.id;
}
});
1 change: 1 addition & 0 deletions demos/src/placeholder.mustache
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@
data-o-video-source="Brightcove"
data-o-video-id="4165329773001"
data-o-video-advertising="true"
data-o-video-placeholdertitle="true"
data-o-video-placeholder="true"></div>
</div>
8 changes: 8 additions & 0 deletions demos/src/video.mustache
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,11 @@
data-o-video-advertising="true">
</div>
</div>
<label>
Select video:
<select>
<option value="5072828916001">Nationhood and the Edinburgh festivals</option>
<option value="4907997821001">Austrian far-right candidate narrowly defeated</option>
<option value="4165329773001">Teaching real-world economics to undergraduates</option>
</select>
</label>
3 changes: 1 addition & 2 deletions karma.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,12 @@ module.exports = function(config) {

// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['mocha', 'sinon', 'chai-as-promised', 'chai'],
frameworks: ['mocha', 'sinon', 'chai'],


plugins: [
'karma-mocha',
'karma-sinon',
'karma-chai-as-promised',
'karma-chai',
'karma-firefox-launcher',
'karma-webpack'
Expand Down
4 changes: 1 addition & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,10 @@
"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",
Expand All @@ -21,7 +19,7 @@
"karma-sinon": "^1.0.4",
"karma-webpack": "^1.7.0",
"origami-build-tools": "^5.0.0",
"sinon": "1.14.1",
"sinon": "^1.14.1",
"webpack": "^1.12.2"
}
}
2 changes: 1 addition & 1 deletion src/js/helpers/get-rendition.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ function getRendition(renditions, options) {
// allow mocking of supported formats module
const opts = options || {};
const width = opts.width;
const formats = opts.supportedFormats || supportedFormats;
const formats = opts.supportedFormats || supportedFormats();
let appropriateRendition;
// order smallest to largest
const orderedRenditions = renditions
Expand Down
14 changes: 9 additions & 5 deletions src/js/helpers/supported-formats.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
const testEl = document.createElement('video');

const formats = {
mpeg4: [
'video/mp4; codecs="mp4v.20.8"'
Expand All @@ -16,11 +14,17 @@ const formats = {
]
};

let supportedFormats = [];
if (testEl.canPlayType) {
function supportedFormats () {
const testEl = document.createElement('video');
const supported = [];

try {
supportedFormats = Object.keys(formats).filter(format => formats[format].some(type => testEl.canPlayType(type)));
Object.keys(formats).filter(format => {
formats[format].some(type => testEl.canPlayType(type)) && supported.push(format);
});
} catch(e) { }

return supported;
}

export default supportedFormats;
58 changes: 47 additions & 11 deletions src/js/video.js
Original file line number Diff line number Diff line change
Expand Up @@ -147,10 +147,11 @@ class Video {
addVideo() {
this.videoEl = document.createElement('video');
this.videoEl.setAttribute('controls', true);
this.videoEl.setAttribute('poster', this.posterImage);
this.videoEl.setAttribute('src', this.rendition && this.rendition.url);
this.videoEl.className = Array.isArray(this.opts.classes) ? this.opts.classes.join(' ') : this.opts.classes;
this.containerEl.classList.add('o-video--player');

this.updateVideo();

this.containerEl.appendChild(this.videoEl);

addEvents(this, ['play', 'pause', 'ended']);
Expand All @@ -163,22 +164,30 @@ class Video {
}
}

updateVideo() {
this.videoEl.poster = this.posterImage;
this.videoEl.src = this.rendition && this.rendition.url;
}

addPlaceholder() {
this.placeholderEl = document.createElement('div');
this.placeholderEl.classList.add('o-video__placeholder');
const placeholderImageEl = document.createElement('img');
placeholderImageEl.classList.add('o-video__placeholder-image');
placeholderImageEl.setAttribute('src', this.posterImage);
this.placeholderEl.appendChild(placeholderImageEl);

let titleEl;
this.placeholderImageEl = document.createElement('img');
this.placeholderImageEl.classList.add('o-video__placeholder-image');
this.placeholderImageEl.setAttribute('role', 'presentation');
this.placeholderImageEl.setAttribute('alt', '');

this.placeholderEl.appendChild(this.placeholderImageEl);

if (this.opts.placeholdertitle) {
titleEl = document.createElement('div');
titleEl.className = 'o-video__title';
titleEl.textContent = this.videoData && this.videoData.name;
this.placeholderEl.appendChild(titleEl);
this.placeholderTitleEl = document.createElement('div');
this.placeholderTitleEl.className = 'o-video__title';
this.placeholderEl.appendChild(this.placeholderTitleEl);
}

this.updatePlaceholder();

const playButtonEl = document.createElement('button');
playButtonEl.className = 'o-video__play-button';

Expand All @@ -199,6 +208,10 @@ class Video {

this.containerEl.removeChild(this.placeholderEl);

this.placeholderEl = null;
this.placeholderImageEl = null;
this.placeholderTitleEl = null;

if (!this.opts.advertising) {
this.videoEl.play();
}
Expand All @@ -208,6 +221,29 @@ class Video {
this.containerEl.appendChild(this.placeholderEl);
}

updatePlaceholder() {
this.placeholderImageEl.src = this.posterImage;

if (this.placeholderTitleEl) {
this.placeholderTitleEl.textContent = this.videoData && this.videoData.name;
}
}

update(newOpts) {
this.videoEl && this.videoEl.pause();
this.clearCurrentlyPlaying();

this.opts = Object.assign(this.opts, { data: null }, newOpts);

return this.getData().then(() => {
if (this.placeholderEl) {
this.updatePlaceholder();
} else {
this.updateVideo();
}
});
}

getProgress() {
return this.videoEl.duration ? parseInt(100 * this.videoEl.currentTime / this.videoEl.duration, 10) : 0;
}
Expand Down
File renamed without changes.
165 changes: 165 additions & 0 deletions test/fixtures/brightcove-2.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
{

"id": 4907997821001,
"name": "Austrian far-right candidate narrowly defeated",
"adKeys": null,
"shortDescription": "Right-winger Norbert Hofer was edged out in a tight presidential race. The FT reports",
"longDescription": "The Austrian Freedom party candidate Norbert Hofer lost to Alexander Van der Bellen, a Green politician who ran as an independent. The result was welcomed by those worried about the emergence of a far-right head of state in a European country. The FT's Ralph Atkins reports from Vienna.",
"creationDate": "1464038093344",
"publishedDate": "1464038243341",
"lastModifiedDate": "1464124438800",
"tags": [
"section:world",
"Norbert Hofer",
"Austrian election",
"Austria",
"brand:FT World",
"austrian freedom party",
"Alexander van der Bellen"
],
"videoStillURL": "https://bcsecure01-a.akamaihd.net/13/47628783001/201605/227/47628783001_4908536547001_MAS-FT-World-Norbert-Hofer.jpg?pubId=47628783001",
"referenceId": null,
"length": 156735,
"economics": "AD_SUPPORTED",
"itemState": "ACTIVE",
"playsTotal": 1553,
"playsTrailingWeek": 3,
"version": 37,
"cuePoints": [
{
"forceStop": false,
"id": 4906502619001,
"metadata": null,
"name": "Pre-roll",
"time": 0,
"type": 0,
"typeEnum": "AD",
"videoId": 4907997821001
}
],
"customFields": {
"byline": "Produced by Gregory Bobillot. Footage: Getty"
},
"HLSURL": "http://c.brightcove.com/services/mobile/streaming/index/master.m3u8?videoId=4907997821001&pubId=47628783001",
"renditions": [
{
"audioOnly": false,
"controllerType": "DEFAULT",
"displayName": "47628783001_4908185652001_4907997821001_1_1.mp4",
"encodingRate": 129876,
"frameHeight": 224,
"frameWidth": 400,
"id": 4908307801001,
"referenceId": null,
"remoteStreamName": null,
"remoteUrl": null,
"size": 2609217,
"uploadTimestampMillis": 1464045034838,
"url": "http://uds.ak.o.brightcove.com/47628783001/47628783001_4908307801001_4907997821001.mp4",
"videoCodec": "H264",
"videoContainer": "MP4",
"videoDuration": 156800
},
{
"audioOnly": false,
"controllerType": "DEFAULT",
"displayName": "47628783001_4908185652001_4907997821001_1_1.mp4",
"encodingRate": 480398,
"frameHeight": 268,
"frameWidth": 480,
"id": 4908307965001,
"referenceId": null,
"remoteStreamName": null,
"remoteUrl": null,
"size": 9408160,
"uploadTimestampMillis": 1464045067293,
"url": "http://uds.ak.o.brightcove.com/47628783001/47628783001_4908307965001_4907997821001.mp4",
"videoCodec": "H264",
"videoContainer": "MP4",
"videoDuration": 156735
},
{
"audioOnly": false,
"controllerType": "DEFAULT",
"displayName": "47628783001_4908185652001_4907997821001_1_1.mp4",
"encodingRate": 776000,
"frameHeight": 360,
"frameWidth": 640,
"id": 4908307914001,
"referenceId": null,
"remoteStreamName": null,
"remoteUrl": null,
"size": 15105430,
"uploadTimestampMillis": 1464045039918,
"url": "http://uds.ak.o.brightcove.com/47628783001/47628783001_4908307914001_4907997821001.mp4",
"videoCodec": "H264",
"videoContainer": "MP4",
"videoDuration": 156735
},
{
"audioOnly": false,
"controllerType": "DEFAULT",
"displayName": "47628783001_4908185652001_4907997821001_1_1.mp4",
"encodingRate": 301884,
"frameHeight": 224,
"frameWidth": 400,
"id": 4908307967001,
"referenceId": null,
"remoteStreamName": null,
"remoteUrl": null,
"size": 5963907,
"uploadTimestampMillis": 1464045071746,
"url": "http://uds.ak.o.brightcove.com/47628783001/47628783001_4908307967001_4907997821001.mp4",
"videoCodec": "H264",
"videoContainer": "MP4",
"videoDuration": 156735
},
{
"audioOnly": false,
"controllerType": "DEFAULT",
"displayName": "47628783001_4908185652001_4907997821001_1_1.mp4",
"encodingRate": 1171495,
"frameHeight": 404,
"frameWidth": 720,
"id": 4908307939001,
"referenceId": null,
"remoteStreamName": null,
"remoteUrl": null,
"size": 22714998,
"uploadTimestampMillis": 1464045050114,
"url": "http://uds.ak.o.brightcove.com/47628783001/47628783001_4908307939001_4907997821001.mp4",
"videoCodec": "H264",
"videoContainer": "MP4",
"videoDuration": 156735
},
{
"audioOnly": false,
"controllerType": "DEFAULT",
"displayName": "47628783001_4908185652001_4907997821001_1_1.mp4",
"encodingRate": 1771495,
"frameHeight": 720,
"frameWidth": 1280,
"id": 4908307961001,
"referenceId": null,
"remoteStreamName": null,
"remoteUrl": null,
"size": 34119363,
"uploadTimestampMillis": 1464045065259,
"url": "http://uds.ak.o.brightcove.com/47628783001/47628783001_4908307961001_4907997821001.mp4",
"videoCodec": "H264",
"videoContainer": "MP4",
"videoDuration": 156735
}
],
"geoFiltered": false,
"geoRestricted": false,
"videoStill": {
"displayName": "MAS_FT-World_Norbert-Hofer.jpg",
"id": 4908536547001,
"referenceId": null,
"remoteUrl": null,
"type": "VIDEO_STILL"
},
"captioning": null

}
2 changes: 1 addition & 1 deletion test/helpers/get-rendition.test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* global describe, it */
const getRendition = require('./../../src/js/helpers/get-rendition');
const renditions = require('./../fixtures/brightcove.json').renditions;
const renditions = require('./../fixtures/brightcove-1.json').renditions;

describe('Get Appropriate Renditions', () => {

Expand Down
Loading

0 comments on commit 3c6f869

Please sign in to comment.