videojs-sprite-thumbnails
Version:
Plugin to display thumbnails from a sprite image when hovering over the progress bar.
1,355 lines (1,318 loc) • 29.5 kB
JavaScript
/*! @name videojs-sprite-thumbnails @version 0.5.2 @license MIT */
(function (QUnit, sinon, videojs) {
'use strict';
QUnit = QUnit && QUnit.hasOwnProperty('default') ? QUnit['default'] : QUnit;
sinon = sinon && sinon.hasOwnProperty('default') ? sinon['default'] : sinon;
videojs = videojs && videojs.hasOwnProperty('default') ? videojs['default'] : videojs;
var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
var minDoc = {};
var topLevel = typeof commonjsGlobal !== 'undefined' ? commonjsGlobal :
typeof window !== 'undefined' ? window : {};
var doccy;
if (typeof document !== 'undefined') {
doccy = document;
} else {
doccy = topLevel['__GLOBAL_DOCUMENT_CACHE@4'];
if (!doccy) {
doccy = topLevel['__GLOBAL_DOCUMENT_CACHE@4'] = minDoc;
}
}
var document_1 = doccy;
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
}
var cov_2f4agnc3lg = function () {
var path = '/Users/chris/Sites/blacktrash/flowplayer/videojs-sprite-thumbnails/src/sprite-thumbnails.js',
hash = '3190754f71605c536b914fd4c5c7308a1293990a',
Function = function () {}.constructor,
global = new Function('return this')(),
gcv = '__coverage__',
coverageData = {
path: '/Users/chris/Sites/blacktrash/flowplayer/videojs-sprite-thumbnails/src/sprite-thumbnails.js',
statementMap: {
'0': {
start: {
line: 13,
column: 14
},
end: {
line: 13,
column: 25
}
},
'1': {
start: {
line: 14,
column: 17
},
end: {
line: 14,
column: 31
}
},
'2': {
start: {
line: 15,
column: 16
},
end: {
line: 15,
column: 29
}
},
'3': {
start: {
line: 16,
column: 21
},
end: {
line: 16,
column: 39
}
},
'4': {
start: {
line: 18,
column: 14
},
end: {
line: 18,
column: 36
}
},
'5': {
start: {
line: 19,
column: 19
},
end: {
line: 19,
column: 36
}
},
'6': {
start: {
line: 20,
column: 19
},
end: {
line: 20,
column: 43
}
},
'7': {
start: {
line: 21,
column: 18
},
end: {
line: 21,
column: 34
}
},
'8': {
start: {
line: 22,
column: 27
},
end: {
line: 22,
column: 51
}
},
'9': {
start: {
line: 24,
column: 2
},
end: {
line: 103,
column: 3
}
},
'10': {
start: {
line: 25,
column: 16
},
end: {
line: 27,
column: 6
}
},
'11': {
start: {
line: 29,
column: 25
},
end: {
line: 40,
column: 5
}
},
'12': {
start: {
line: 30,
column: 6
},
end: {
line: 39,
column: 9
}
},
'13': {
start: {
line: 31,
column: 20
},
end: {
line: 31,
column: 28
}
},
'14': {
start: {
line: 32,
column: 24
},
end: {
line: 32,
column: 62
}
},
'15': {
start: {
line: 34,
column: 8
},
end: {
line: 38,
column: 9
}
},
'16': {
start: {
line: 35,
column: 10
},
end: {
line: 35,
column: 40
}
},
'17': {
start: {
line: 37,
column: 10
},
end: {
line: 37,
column: 38
}
},
'18': {
start: {
line: 42,
column: 31
},
end: {
line: 84,
column: 5
}
},
'19': {
start: {
line: 43,
column: 23
},
end: {
line: 43,
column: 39
}
},
'20': {
start: {
line: 44,
column: 24
},
end: {
line: 44,
column: 41
}
},
'21': {
start: {
line: 46,
column: 6
},
end: {
line: 83,
column: 7
}
},
'22': {
start: {
line: 47,
column: 26
},
end: {
line: 47,
column: 37
}
},
'23': {
start: {
line: 48,
column: 28
},
end: {
line: 48,
column: 71
}
},
'24': {
start: {
line: 50,
column: 8
},
end: {
line: 50,
column: 84
}
},
'25': {
start: {
line: 51,
column: 8
},
end: {
line: 82,
column: 9
}
},
'26': {
start: {
line: 52,
column: 10
},
end: {
line: 52,
column: 59
}
},
'27': {
start: {
line: 54,
column: 30
},
end: {
line: 54,
column: 52
}
},
'28': {
start: {
line: 55,
column: 30
},
end: {
line: 56,
column: 40
}
},
'29': {
start: {
line: 57,
column: 26
},
end: {
line: 57,
column: 42
}
},
'30': {
start: {
line: 58,
column: 30
},
end: {
line: 58,
column: 49
}
},
'31': {
start: {
line: 59,
column: 31
},
end: {
line: 59,
column: 51
}
},
'32': {
start: {
line: 60,
column: 24
},
end: {
line: 60,
column: 74
}
},
'33': {
start: {
line: 61,
column: 23
},
end: {
line: 61,
column: 74
}
},
'34': {
start: {
line: 62,
column: 25
},
end: {
line: 63,
column: 57
}
},
'35': {
start: {
line: 64,
column: 30
},
end: {
line: 64,
column: 73
}
},
'36': {
start: {
line: 65,
column: 29
},
end: {
line: 65,
column: 69
}
},
'37': {
start: {
line: 67,
column: 28
},
end: {
line: 67,
column: 81
}
},
'38': {
start: {
line: 69,
column: 10
},
end: {
line: 81,
column: 13
}
},
'39': {
start: {
line: 86,
column: 4
},
end: {
line: 98,
column: 7
}
},
'40': {
start: {
line: 100,
column: 4
},
end: {
line: 100,
column: 49
}
},
'41': {
start: {
line: 101,
column: 4
},
end: {
line: 101,
column: 49
}
},
'42': {
start: {
line: 102,
column: 4
},
end: {
line: 102,
column: 45
}
}
},
fnMap: {
'0': {
name: 'spriteThumbs',
decl: {
start: {
line: 12,
column: 24
},
end: {
line: 12,
column: 36
}
},
loc: {
start: {
line: 12,
column: 54
},
end: {
line: 104,
column: 1
}
},
line: 12
},
'1': {
name: '(anonymous_1)',
decl: {
start: {
line: 29,
column: 25
},
end: {
line: 29,
column: 26
}
},
loc: {
start: {
line: 29,
column: 34
},
end: {
line: 40,
column: 5
}
},
line: 29
},
'2': {
name: '(anonymous_2)',
decl: {
start: {
line: 30,
column: 31
},
end: {
line: 30,
column: 32
}
},
loc: {
start: {
line: 30,
column: 40
},
end: {
line: 39,
column: 7
}
},
line: 30
},
'3': {
name: '(anonymous_3)',
decl: {
start: {
line: 42,
column: 31
},
end: {
line: 42,
column: 32
}
},
loc: {
start: {
line: 42,
column: 37
},
end: {
line: 84,
column: 5
}
},
line: 42
}
},
branchMap: {
'0': {
loc: {
start: {
line: 18,
column: 14
},
end: {
line: 18,
column: 36
}
},
type: 'binary-expr',
locations: [{
start: {
line: 18,
column: 14
},
end: {
line: 18,
column: 25
}
}, {
start: {
line: 18,
column: 29
},
end: {
line: 18,
column: 36
}
}],
line: 18
},
'1': {
loc: {
start: {
line: 24,
column: 2
},
end: {
line: 103,
column: 3
}
},
type: 'if',
locations: [{
start: {
line: 24,
column: 2
},
end: {
line: 103,
column: 3
}
}, {
start: {
line: 24,
column: 2
},
end: {
line: 103,
column: 3
}
}],
line: 24
},
'2': {
loc: {
start: {
line: 24,
column: 6
},
end: {
line: 24,
column: 48
}
},
type: 'binary-expr',
locations: [{
start: {
line: 24,
column: 6
},
end: {
line: 24,
column: 9
}
}, {
start: {
line: 24,
column: 13
},
end: {
line: 24,
column: 19
}
}, {
start: {
line: 24,
column: 23
},
end: {
line: 24,
column: 28
}
}, {
start: {
line: 24,
column: 32
},
end: {
line: 24,
column: 48
}
}],
line: 24
},
'3': {
loc: {
start: {
line: 34,
column: 8
},
end: {
line: 38,
column: 9
}
},
type: 'if',
locations: [{
start: {
line: 34,
column: 8
},
end: {
line: 38,
column: 9
}
}, {
start: {
line: 34,
column: 8
},
end: {
line: 38,
column: 9
}
}],
line: 34
},
'4': {
loc: {
start: {
line: 46,
column: 6
},
end: {
line: 83,
column: 7
}
},
type: 'if',
locations: [{
start: {
line: 46,
column: 6
},
end: {
line: 83,
column: 7
}
}, {
start: {
line: 46,
column: 6
},
end: {
line: 83,
column: 7
}
}],
line: 46
},
'5': {
loc: {
start: {
line: 46,
column: 10
},
end: {
line: 46,
column: 31
}
},
type: 'binary-expr',
locations: [{
start: {
line: 46,
column: 10
},
end: {
line: 46,
column: 18
}
}, {
start: {
line: 46,
column: 22
},
end: {
line: 46,
column: 31
}
}],
line: 46
},
'6': {
loc: {
start: {
line: 51,
column: 8
},
end: {
line: 82,
column: 9
}
},
type: 'if',
locations: [{
start: {
line: 51,
column: 8
},
end: {
line: 82,
column: 9
}
}, {
start: {
line: 51,
column: 8
},
end: {
line: 82,
column: 9
}
}],
line: 51
},
'7': {
loc: {
start: {
line: 55,
column: 30
},
end: {
line: 56,
column: 40
}
},
type: 'cond-expr',
locations: [{
start: {
line: 56,
column: 12
},
end: {
line: 56,
column: 36
}
}, {
start: {
line: 56,
column: 39
},
end: {
line: 56,
column: 40
}
}],
line: 55
},
'8': {
loc: {
start: {
line: 55,
column: 30
},
end: {
line: 55,
column: 68
}
},
type: 'binary-expr',
locations: [{
start: {
line: 55,
column: 30
},
end: {
line: 55,
column: 40
}
}, {
start: {
line: 55,
column: 44
},
end: {
line: 55,
column: 68
}
}],
line: 55
}
},
s: {
'0': 0,
'1': 0,
'2': 0,
'3': 0,
'4': 0,
'5': 0,
'6': 0,
'7': 0,
'8': 0,
'9': 0,
'10': 0,
'11': 0,
'12': 0,
'13': 0,
'14': 0,
'15': 0,
'16': 0,
'17': 0,
'18': 0,
'19': 0,
'20': 0,
'21': 0,
'22': 0,
'23': 0,
'24': 0,
'25': 0,
'26': 0,
'27': 0,
'28': 0,
'29': 0,
'30': 0,
'31': 0,
'32': 0,
'33': 0,
'34': 0,
'35': 0,
'36': 0,
'37': 0,
'38': 0,
'39': 0,
'40': 0,
'41': 0,
'42': 0
},
f: {
'0': 0,
'1': 0,
'2': 0,
'3': 0
},
b: {
'0': [0, 0],
'1': [0, 0],
'2': [0, 0, 0, 0],
'3': [0, 0],
'4': [0, 0],
'5': [0, 0],
'6': [0, 0],
'7': [0, 0],
'8': [0, 0]
},
_coverageSchema: '332fd63041d2c1bcb487cc26dd0d5f7d97098a6c'
},
coverage = global[gcv] || (global[gcv] = {});
if (coverage[path] && coverage[path].hash === hash) {
return coverage[path];
}
coverageData.hash = hash;
return coverage[path] = coverageData;
}();
function spriteThumbs(player, options) {
cov_2f4agnc3lg.f[0]++;
var url = (cov_2f4agnc3lg.s[0]++, options.url);
var height = (cov_2f4agnc3lg.s[1]++, options.height);
var width = (cov_2f4agnc3lg.s[2]++, options.width);
var responsive = (cov_2f4agnc3lg.s[3]++, options.responsive);
var dom = (cov_2f4agnc3lg.s[4]++, (cov_2f4agnc3lg.b[0][0]++, videojs.dom) || (cov_2f4agnc3lg.b[0][1]++, videojs));
var controls = (cov_2f4agnc3lg.s[5]++, player.controlBar);
var progress = (cov_2f4agnc3lg.s[6]++, controls.progressControl);
var seekBar = (cov_2f4agnc3lg.s[7]++, progress.seekBar);
var mouseTimeDisplay = (cov_2f4agnc3lg.s[8]++, seekBar.mouseTimeDisplay);
cov_2f4agnc3lg.s[9]++;
if ((cov_2f4agnc3lg.b[2][0]++, url) && (cov_2f4agnc3lg.b[2][1]++, height) && (cov_2f4agnc3lg.b[2][2]++, width) && (cov_2f4agnc3lg.b[2][3]++, mouseTimeDisplay)) {
cov_2f4agnc3lg.b[1][0]++;
var img = (cov_2f4agnc3lg.s[10]++, dom.createEl('img', {
src: url
}));
cov_2f4agnc3lg.s[11]++;
var tooltipStyle = function tooltipStyle(obj) {
cov_2f4agnc3lg.f[1]++;
cov_2f4agnc3lg.s[12]++;
Object.keys(obj).forEach(function (key) {
cov_2f4agnc3lg.f[2]++;
var val = (cov_2f4agnc3lg.s[13]++, obj[key]);
var ttstyle = (cov_2f4agnc3lg.s[14]++, mouseTimeDisplay.timeTooltip.el_.style);
cov_2f4agnc3lg.s[15]++;
if (val !== '') {
cov_2f4agnc3lg.b[3][0]++;
cov_2f4agnc3lg.s[16]++;
ttstyle.setProperty(key, val);
} else {
cov_2f4agnc3lg.b[3][1]++;
cov_2f4agnc3lg.s[17]++;
ttstyle.removeProperty(key);
}
});
};
cov_2f4agnc3lg.s[18]++;
var hijackMouseTooltip = function hijackMouseTooltip() {
cov_2f4agnc3lg.f[3]++;
var imgWidth = (cov_2f4agnc3lg.s[19]++, img.naturalWidth);
var imgHeight = (cov_2f4agnc3lg.s[20]++, img.naturalHeight);
cov_2f4agnc3lg.s[21]++;
if ((cov_2f4agnc3lg.b[5][0]++, imgWidth) && (cov_2f4agnc3lg.b[5][1]++, imgHeight)) {
cov_2f4agnc3lg.b[4][0]++;
var seekBarEl = (cov_2f4agnc3lg.s[22]++, seekBar.el_);
var hoverPosition = (cov_2f4agnc3lg.s[23]++, parseFloat(mouseTimeDisplay.el_.style.left));
cov_2f4agnc3lg.s[24]++;
hoverPosition = player.duration() * (hoverPosition / seekBarEl.clientWidth);
cov_2f4agnc3lg.s[25]++;
if (!isNaN(hoverPosition)) {
cov_2f4agnc3lg.b[6][0]++;
cov_2f4agnc3lg.s[26]++;
hoverPosition = hoverPosition / options.interval;
var playerWidth = (cov_2f4agnc3lg.s[27]++, player.el_.clientWidth);
var scaleFactor = (cov_2f4agnc3lg.s[28]++, (cov_2f4agnc3lg.b[8][0]++, responsive) && (cov_2f4agnc3lg.b[8][1]++, playerWidth < responsive) ? (cov_2f4agnc3lg.b[7][0]++, playerWidth / responsive) : (cov_2f4agnc3lg.b[7][1]++, 1));
var columns = (cov_2f4agnc3lg.s[29]++, imgWidth / width);
var scaledWidth = (cov_2f4agnc3lg.s[30]++, width * scaleFactor);
var scaledHeight = (cov_2f4agnc3lg.s[31]++, height * scaleFactor);
var cleft = (cov_2f4agnc3lg.s[32]++, Math.floor(hoverPosition % columns) * -scaledWidth);
var ctop = (cov_2f4agnc3lg.s[33]++, Math.floor(hoverPosition / columns) * -scaledHeight);
var bgSize = (cov_2f4agnc3lg.s[34]++, imgWidth * scaleFactor + 'px ' + imgHeight * scaleFactor + 'px');
var controlsTop = (cov_2f4agnc3lg.s[35]++, dom.getBoundingClientRect(controls.el_).top);
var seekBarTop = (cov_2f4agnc3lg.s[36]++, dom.getBoundingClientRect(seekBarEl).top);
var topOffset = (cov_2f4agnc3lg.s[37]++, -scaledHeight - Math.max(0, seekBarTop - controlsTop));
cov_2f4agnc3lg.s[38]++;
tooltipStyle({
'width': scaledWidth + 'px',
'height': scaledHeight + 'px',
'background-image': 'url(' + url + ')',
'background-repeat': 'no-repeat',
'background-position': cleft + 'px ' + ctop + 'px',
'background-size': bgSize,
'top': topOffset + 'px',
'color': '#fff',
'text-shadow': '1px 1px #000',
'border': '1px solid #000',
'margin': '0 1px'
});
} else {
cov_2f4agnc3lg.b[6][1]++;
}
} else {
cov_2f4agnc3lg.b[4][1]++;
}
};
cov_2f4agnc3lg.s[39]++;
tooltipStyle({
'width': '',
'height': '',
'background-image': '',
'background-repeat': '',
'background-position': '',
'background-size': '',
'top': '',
'color': '',
'text-shadow': '',
'border': '',
'margin': ''
});
cov_2f4agnc3lg.s[40]++;
progress.on('mousemove', hijackMouseTooltip);
cov_2f4agnc3lg.s[41]++;
progress.on('touchmove', hijackMouseTooltip);
cov_2f4agnc3lg.s[42]++;
player.addClass('vjs-sprite-thumbnails');
} else {
cov_2f4agnc3lg.b[1][1]++;
}
}
var version = "0.5.2";
var cov_2gk6ni9fqv = function () {
var path = '/Users/chris/Sites/blacktrash/flowplayer/videojs-sprite-thumbnails/src/plugin.js',
hash = '8bcbfb7522c3f3377be1243607da659b15a0b1f7',
Function = function () {}.constructor,
global = new Function('return this')(),
gcv = '__coverage__',
coverageData = {
path: '/Users/chris/Sites/blacktrash/flowplayer/videojs-sprite-thumbnails/src/plugin.js',
statementMap: {
'0': {
start: {
line: 5,
column: 15
},
end: {
line: 5,
column: 42
}
},
'1': {
start: {
line: 21,
column: 17
},
end: {
line: 27,
column: 1
}
},
'2': {
start: {
line: 47,
column: 4
},
end: {
line: 47,
column: 18
}
},
'3': {
start: {
line: 49,
column: 4
},
end: {
line: 49,
column: 59
}
},
'4': {
start: {
line: 51,
column: 4
},
end: {
line: 53,
column: 7
}
},
'5': {
start: {
line: 52,
column: 6
},
end: {
line: 52,
column: 46
}
},
'6': {
start: {
line: 58,
column: 0
},
end: {
line: 58,
column: 35
}
},
'7': {
start: {
line: 61,
column: 0
},
end: {
line: 61,
column: 35
}
},
'8': {
start: {
line: 64,
column: 0
},
end: {
line: 64,
column: 61
}
}
},
fnMap: {
'0': {
name: '(anonymous_0)',
decl: {
start: {
line: 45,
column: 2
},
end: {
line: 45,
column: 3
}
},
loc: {
start: {
line: 45,
column: 31
},
end: {
line: 54,
column: 3
}
},
line: 45
},
'1': {
name: '(anonymous_1)',
decl: {
start: {
line: 51,
column: 22
},
end: {
line: 51,
column: 23
}
},
loc: {
start: {
line: 51,
column: 28
},
end: {
line: 53,
column: 5
}
},
line: 51
}
},
branchMap: {},
s: {
'0': 0,
'1': 0,
'2': 0,
'3': 0,
'4': 0,
'5': 0,
'6': 0,
'7': 0,
'8': 0
},
f: {
'0': 0,
'1': 0
},
b: {},
_coverageSchema: '332fd63041d2c1bcb487cc26dd0d5f7d97098a6c'
},
coverage = global[gcv] || (global[gcv] = {});
if (coverage[path] && coverage[path].hash === hash) {
return coverage[path];
}
coverageData.hash = hash;
return coverage[path] = coverageData;
}();
var Plugin = (cov_2gk6ni9fqv.s[0]++, videojs.getPlugin('plugin'));
var defaults = (cov_2gk6ni9fqv.s[1]++, {
url: '',
width: 0,
height: 0,
interval: 1,
responsive: 600
});
var SpriteThumbnails =
/*#__PURE__*/
function (_Plugin) {
_inheritsLoose(SpriteThumbnails, _Plugin);
function SpriteThumbnails(player, options) {
var _this;
cov_2gk6ni9fqv.f[0]++;
cov_2gk6ni9fqv.s[2]++;
_this = _Plugin.call(this, player) || this;
cov_2gk6ni9fqv.s[3]++;
_this.options = videojs.mergeOptions(defaults, options);
cov_2gk6ni9fqv.s[4]++;
_this.player.ready(function () {
cov_2gk6ni9fqv.f[1]++;
cov_2gk6ni9fqv.s[5]++;
spriteThumbs(_this.player, _this.options);
});
return _this;
}
return SpriteThumbnails;
}(Plugin);
cov_2gk6ni9fqv.s[6]++;
SpriteThumbnails.defaultState = {};
cov_2gk6ni9fqv.s[7]++;
SpriteThumbnails.VERSION = version;
cov_2gk6ni9fqv.s[8]++;
videojs.registerPlugin('spriteThumbnails', SpriteThumbnails);
var Player = videojs.getComponent('Player');
QUnit.test('the environment is sane', function (assert) {
assert.strictEqual(typeof Array.isArray, 'function', 'es5 exists');
assert.strictEqual(typeof sinon, 'object', 'sinon exists');
assert.strictEqual(typeof videojs, 'function', 'videojs exists');
assert.strictEqual(typeof SpriteThumbnails, 'function', 'plugin is a function');
});
QUnit.module('videojs-sprite-thumbnails', {
beforeEach: function beforeEach() {
// Mock the environment's timers because certain things - particularly
// player readiness - are asynchronous in video.js 5. This MUST come
// before any player is created; otherwise, timers could get created
// with the actual timer methods!
this.clock = sinon.useFakeTimers();
this.fixture = document_1.getElementById('qunit-fixture');
this.video = document_1.createElement('video');
this.fixture.appendChild(this.video);
this.player = videojs(this.video);
},
afterEach: function afterEach() {
this.player.dispose();
this.clock.restore();
}
});
QUnit.test('registers itself with video.js', function (assert) {
assert.expect(2);
assert.strictEqual(typeof Player.prototype.spriteThumbnails, 'function', 'videojs-sprite-thumbnails plugin was registered');
this.player.spriteThumbnails({
url: 'https://raw.githubusercontent.com/blacktrash/videojs-sprite-thumbnails/master/img/oceans-thumbs.jpg',
width: 240,
height: 100
}); // Tick the clock forward enough to trigger the player to be "ready".
this.clock.tick(1);
assert.ok(this.player.hasClass('vjs-sprite-thumbnails'), 'the plugin adds a class to the player');
});
QUnit.test('does not initialize itself when mandatory parameter is not given', function (assert) {
assert.expect(1);
this.player.spriteThumbnails({
width: 240,
height: 100
}); // Tick the clock forward enough to trigger the player to be "ready".
this.clock.tick(1);
assert.ok(!this.player.hasClass('vjs-sprite-thumbnails'), 'no plugin class added to the player');
});
}(QUnit, sinon, videojs));