Initial commit

This commit is contained in:
Chris Boustead 2017-11-10 12:15:08 -05:00
commit f0a97f8e13
23 changed files with 1020 additions and 0 deletions

13
.editorconfig Normal file
View file

@ -0,0 +1,13 @@
# http://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false

34
.gitignore vendored Normal file
View file

@ -0,0 +1,34 @@
# OS
Thumbs.db
ehthumbs.db
Desktop.ini
.DS_Store
._*
# Editors
*~
*.swp
*.tmproj
*.tmproject
*.sublime-*
.idea/
.project/
.settings/
.vscode/
# Logs
logs
*.log
npm-debug.log*
# Dependency directories
bower_components/
node_modules/
# Yeoman meta-data
.yo-rc.json
# Build-related directories
dist/
docs/api/
test/dist/

3
.npmignore Normal file
View file

@ -0,0 +1,3 @@
# Intentionally left blank, so that npm does not ignore anything by default,
# but relies on the package.json "files" array to explicitly define what ends
# up in the package.

32
.travis.yml Normal file
View file

@ -0,0 +1,32 @@
sudo: false
dist: trusty
language: node_js
node_js:
- 'node'
- 'lts/argon'
before_script:
# Check if the current version is equal to the major version for the env.
- 'export IS_INSTALLED="$(npm list video.js | grep "video.js@$VJS")"'
# We have to add semicolons to the end of each line in the if as Travis runs
# this all on one line.
- 'if [ -z "$IS_INSTALLED" ]; then
echo "INSTALLING video.js@>=$VJS.0.0-RC.0 <$(($VJS+1)).0.0";
npm i "video.js@>=$VJS.0.0-RC.0 <\$(($VJS+1)).0.0";
else
echo "video.js@$VJS ALREADY INSTALLED";
fi'
- export CHROME_BIN=/usr/bin/google-chrome
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
env:
- VJS=5
- VJS=6
addons:
firefox: latest
apt:
sources:
- google-chrome
packages:
- google-chrome-stable

0
CHANGELOG.md Normal file
View file

30
CONTRIBUTING.md Normal file
View file

@ -0,0 +1,30 @@
# CONTRIBUTING
We welcome contributions from everyone!
## Getting Started
Make sure you have NodeJS 0.10 or higher and npm installed.
1. Fork this repository and clone your fork
1. Install dependencies: `npm install`
1. Run a development server: `npm start`
### Making Changes
Refer to the [video.js plugin conventions][conventions] for more detail on best practices and tooling for video.js plugin authorship.
When you've made your changes, push your commit(s) to your fork and issue a pull request against the original repository.
### Running Tests
Testing is a crucial part of any software project. For all but the most trivial changes (typos, etc) test cases are expected. Tests are run in actual browsers using [Karma][karma].
- In all available and supported browsers: `npm test`
- In a specific browser: `npm run test:chrome`, `npm run test:firefox`, etc.
- While development server is running (`npm start`), navigate to [`http://localhost:9999/test/`][local]
[karma]: http://karma-runner.github.io/
[local]: http://localhost:9999/test/
[conventions]: https://github.com/videojs/generator-videojs-plugin/blob/master/docs/conventions.md

19
LICENSE Normal file
View file

@ -0,0 +1,19 @@
Copyright (c) Chris Boustead <chris@forgemotion.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

80
README.md Normal file
View file

@ -0,0 +1,80 @@
# videojs-vtt-thumbnails
Video.js plugin that displays thumbnails on progress bar hover, driven by external VTT files. Based on the spec at: https://support.jwplayer.com/customer/portal/articles/1407439-adding-preview-thumbnails
Note: Plugin hides the default skin's mouse display timestamp on hover.
## Table of Contents
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
## Installation
- [Installation](#installation)
- [Usage](#usage)
- [`<script>` Tag](#script-tag)
- [Browserify/CommonJS](#browserifycommonjs)
- [RequireJS/AMD](#requirejsamd)
- [License](#license)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
## Installation
```sh
npm install --save videojs-vtt-thumbnails
```
## Usage
To include videojs-vtt-thumbnails on your website or web application, use any of the following methods.
### `<script>` Tag
This is the simplest case. Get the script in whatever way you prefer and include the plugin _after_ you include [video.js][videojs], so that the `videojs` global is available.
```html
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-vtt-thumbnails.min.js"></script>
<script>
var player = videojs('my-video');
player.vttThumbnails({
src: 'example/thumbs.vtt'
});
</script>
```
### Browserify/CommonJS
When using with Browserify, install videojs-vtt-thumbnails via npm and `require` the plugin as you would any other module.
```js
var videojs = require('video.js');
// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-vtt-thumbnails');
var player = videojs('my-video');
player.vttThumbnails();
```
### RequireJS/AMD
When using with RequireJS (or another AMD library), get the script in whatever way you prefer and `require` the plugin as you normally would:
```js
require(['video.js', 'videojs-vtt-thumbnails'], function(videojs) {
var player = videojs('my-video');
player.vttThumbnails();
});
```
## License
MIT. Copyright (c) Chris Boustead &lt;chris@forgemotion.com&gt;
[videojs]: http://videojs.com/

BIN
example/thumbs.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

13
example/thumbs.vtt Normal file
View file

@ -0,0 +1,13 @@
WEBVTT
00:00.000 --> 00:05.000
thumbs.jpg#xywh=0,0,160,70
00:05.000 --> 00:10.000
thumbs.jpg#xywh=160,0,160,70
00:10.000 --> 00:15.000
thumbs.jpg#xywh=0,70,160,70
00:15.000 --> 00:20.000
thumbs.jpg#xywh=160,70,160,70

30
index.html Normal file
View file

@ -0,0 +1,30 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>videojs-vtt-thumbnails Demo</title>
<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
<link href="dist/videojs-vtt-thumbnails.css" rel="stylesheet">
</head>
<body>
<video id="videojs-vtt-thumbnails-player" class="video-js vjs-default-skin" controls>
<source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
<source src="//vjs.zencdn.net/v/oceans.webm" type='video/webm'>
</video>
<ul>
<li><a href="test/">Run unit tests in browser.</a></li>
<li><a href="docs/api/">Read generated docs.</a></li>
</ul>
<script src="node_modules/video.js/dist/video.js"></script>
<script src="dist/videojs-vtt-thumbnails.js"></script>
<script>
(function(window, videojs) {
var player = window.player = videojs('videojs-vtt-thumbnails-player');
player.vttThumbnails({
src: 'example/thumbs.vtt'
});
}(window, window.videojs));
</script>
</body>
</html>

3
jsdoc.json Normal file
View file

@ -0,0 +1,3 @@
{
"plugins": ["plugins/markdown"]
}

107
package.json Normal file
View file

@ -0,0 +1,107 @@
{
"name": "videojs-vtt-thumbnails",
"version": "0.0.0",
"description": "Display thumnails on progress bar hover, driven by external VTT files.",
"main": "dist/videojs-vtt-thumbnails.cjs.js",
"module": "dist/videojs-vtt-thumbnails.es.js",
"generator-videojs-plugin": {
"version": "5.0.3"
},
"scripts": {
"prebuild": "npm run clean",
"build": "npm-run-all -p build:*",
"build:css": "npm-run-all build:css:sass build:css:bannerize",
"build:css:bannerize": "bannerize dist/videojs-vtt-thumbnails.css --banner=scripts/banner.ejs",
"build:css:sass": "node-sass src/plugin.scss dist/videojs-vtt-thumbnails.css --output-style=compressed --linefeed=lf",
"build:js": "npm-run-all build:js:rollup-modules build:js:rollup-umd build:js:bannerize build:js:uglify",
"build:js:bannerize": "bannerize dist/videojs-vtt-thumbnails.js --banner=scripts/banner.ejs",
"build:js:rollup-modules": "rollup -c scripts/modules.rollup.config.js",
"build:js:rollup-umd": "rollup -c scripts/umd.rollup.config.js",
"build:js:uglify": "uglifyjs dist/videojs-vtt-thumbnails.js --comments --mangle --compress -o dist/videojs-vtt-thumbnails.min.js",
"build:test": "rollup -c scripts/test.rollup.config.js",
"clean": "rimraf dist test/dist",
"postclean": "mkdirp dist test/dist",
"docs": "npm-run-all docs:*",
"docs:api": "jsdoc src -r -c jsdoc.json -d docs/api",
"docs:toc": "doctoc README.md",
"lint": "vjsstandard",
"start": "npm-run-all -p start:server watch",
"start:server": "static -a 0.0.0.0 -p 9999 -H '{\"Cache-Control\": \"no-cache, must-revalidate\"}' .",
"pretest": "npm-run-all lint build",
"test": "karma start test/karma.conf.js",
"preversion": "npm test",
"version": "node scripts/version.js",
"watch": "npm-run-all -p watch:*",
"watch:css": "npm-run-all build:css:sass watch:css:sass",
"watch:css:sass": "node-sass src/plugin.scss dist/videojs-vtt-thumbnails.css --output-style=compressed --linefeed=lf --watch src/**/*.scss",
"watch:js-modules": "rollup -c scripts/modules.rollup.config.js -w",
"watch:js-umd": "rollup -c scripts/umd.rollup.config.js -w",
"watch:test": "rollup -c scripts/test.rollup.config.js -w",
"prepublish": "npm run build",
"prepush": "npm run lint",
"precommit": "npm run docs:toc && git add README.md"
},
"keywords": [
"videojs",
"videojs-plugin"
],
"author": "Chris Boustead <chris@forgemotion.com>",
"license": "MIT",
"vjsstandard": {
"ignore": [
"dist",
"docs",
"test/dist",
"test/karma.conf.js"
]
},
"files": [
"CONTRIBUTING.md",
"dist/",
"docs/",
"index.html",
"scripts/",
"src/",
"test/"
],
"dependencies": {
"global": "^4.3.2",
"request": "^2.83.0",
"video.js": "^5.19.2"
},
"devDependencies": {
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-object-assign": "^6.8.0",
"babel-preset-es2015": "^6.14.0",
"bannerize": "^1.0.2",
"conventional-changelog-cli": "^1.3.1",
"conventional-changelog-videojs": "^3.0.0",
"doctoc": "^1.3.0",
"husky": "^0.13.3",
"jsdoc": "^3.4.3",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.1.1",
"karma-detect-browsers": "^2.2.5",
"karma-firefox-launcher": "^1.0.1",
"karma-ie-launcher": "^1.0.0",
"karma-qunit": "^1.2.1",
"karma-safari-launcher": "^1.0.0",
"mkdirp": "^0.5.1",
"node-sass": "4.5.3",
"node-static": "^0.7.9",
"npm-run-all": "^4.0.2",
"qunitjs": "^2.3.2",
"rimraf": "^2.6.1",
"rollup": "^0.50.0",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-commonjs": "^8.0.2",
"rollup-plugin-json": "^2.1.1",
"rollup-plugin-multi-entry": "^2.0.1",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-watch": "^3.2.2",
"semver": "^5.3.0",
"sinon": "^2.2.0",
"uglify-js": "^3.0.7",
"videojs-standard": "^6.0.0"
}
}

6
scripts/banner.ejs Normal file
View file

@ -0,0 +1,6 @@
/**
* <%- pkg.name %>
* @version <%- pkg.version %>
* @copyright <%- date.getFullYear() %> <%- pkg.author %>
* @license <%- pkg.license %>
*/

View file

@ -0,0 +1,47 @@
/**
* Rollup configuration for packaging the plugin in a module that is consumable
* by either CommonJS (e.g. Node or Browserify) or ECMAScript (e.g. Rollup).
*
* These modules DO NOT include their dependencies as we expect those to be
* handled by the module system.
*/
import babel from 'rollup-plugin-babel';
import json from 'rollup-plugin-json';
export default {
name: 'videojsVttThumbnails',
input: 'src/plugin.js',
output: [{
file: 'dist/videojs-vtt-thumbnails.cjs.js',
format: 'cjs'
}, {
file: 'dist/videojs-vtt-thumbnails.es.js',
format: 'es'
}],
external: [
'global',
'global/document',
'global/window',
'video.js'
],
globals: {
'video.js': 'videojs'
},
plugins: [
json(),
babel({
babelrc: false,
exclude: 'node_modules/**',
presets: [
['es2015', {
loose: true,
modules: false
}]
],
plugins: [
'external-helpers',
'transform-object-assign'
]
})
]
};

View file

@ -0,0 +1,59 @@
/**
* Rollup configuration for packaging the plugin in a test bundle.
*
* This includes all dependencies for both the plugin and its tests.
*/
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import multiEntry from 'rollup-plugin-multi-entry';
import resolve from 'rollup-plugin-node-resolve';
export default {
name: 'videojsVttThumbnailsTests',
input: 'test/**/*.test.js',
output: {
file: 'test/dist/bundle.js',
format: 'iife'
},
external: [
'qunit',
'qunitjs',
'sinon',
'video.js'
],
globals: {
'qunit': 'QUnit',
'qunitjs': 'QUnit',
'sinon': 'sinon',
'video.js': 'videojs'
},
plugins: [
multiEntry({
exports: false
}),
resolve({
browser: true,
main: true,
jsnext: true
}),
json(),
commonjs({
sourceMap: false
}),
babel({
babelrc: false,
exclude: 'node_modules/**',
presets: [
['es2015', {
loose: true,
modules: false
}]
],
plugins: [
'external-helpers',
'transform-object-assign'
]
})
]
};

View file

@ -0,0 +1,50 @@
/**
* Rollup configuration for packaging the plugin in a module that is consumable
* as the `src` of a `script` tag or via AMD or similar client-side loading.
*
* This module DOES include its dependencies.
*/
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import resolve from 'rollup-plugin-node-resolve';
export default {
name: 'videojsVttThumbnails',
input: 'src/plugin.js',
output: {
file: 'dist/videojs-vtt-thumbnails.js',
format: 'umd'
},
external: [
'video.js'
],
globals: {
'video.js': 'videojs'
},
plugins: [
resolve({
browser: true,
main: true,
jsnext: true
}),
json(),
commonjs({
sourceMap: false
}),
babel({
babelrc: false,
exclude: 'node_modules/**',
presets: [
['es2015', {
loose: true,
modules: false
}]
],
plugins: [
'external-helpers',
'transform-object-assign'
]
})
]
};

10
scripts/version.js Normal file
View file

@ -0,0 +1,10 @@
const execSync = require('child_process').execSync;
const path = require('path');
const semver = require('semver');
const pkg = require('../package.json');
if (!semver.prerelease(pkg.version)) {
process.chdir(path.resolve(__dirname, '..'));
execSync('conventional-changelog -p videojs -i CHANGELOG.md -s');
execSync('git add CHANGELOG.md');
}

346
src/plugin.js Normal file
View file

@ -0,0 +1,346 @@
import videojs from 'video.js'
import { version as VERSION } from '../package.json'
// import request from 'request';
// Default options for the plugin.
const defaults = {}
// Cross-compatibility for Video.js 5 and 6.
const registerPlugin = videojs.registerPlugin || videojs.plugin
// const dom = videojs.dom || videojs;
/**
* Function to invoke when the player is ready.
*
* This is a great place for your plugin to initialize itself. When this
* function is called, the player will have its DOM and child components
* in place.
*
* @function onPlayerReady
* @param {Player} player
* A Video.js player object.
*
* @param {Object} [options={}]
* A plain object containing options for the plugin.
*/
const onPlayerReady = (player, options) => {
player.addClass('vjs-vtt-thumbnails')
new vttThumbnailsPlugin(player, options)
}
/**
* A video.js plugin.
*
* In the plugin function, the value of `this` is a video.js `Player`
* instance. You cannot rely on the player being in a "ready" state here,
* depending on how the plugin is invoked. This may or may not be important
* to you; if not, remove the wait for "ready"!
*
* @function vttThumbnails
* @param {Object} [options={}]
* An object of options left to the plugin author to define.
*/
const vttThumbnails = function (options) {
this.ready(() => {
onPlayerReady(this, videojs.mergeOptions(defaults, options))
})
}
/**
* VTT Thumbnails class.
*
* This class performs all functions related to displaying the vtt
* thumbnails.
*/
class vttThumbnailsPlugin {
/**
* Plugin class constructor, called by videojs on
* ready event.
*
* @function constructor
* @param {Player} player
* A Video.js player object.
*
* @param {Object} [options={}]
* A plain object containing options for the plugin.
*/
constructor (player, options) {
this.player = player
this.options = options
this.initializeThumbnails()
}
/**
* Bootstrap the plugin.
*/
initializeThumbnails () {
if (!this.options.src) {
return
}
const baseUrl = this.getBaseUrl()
const url = this.getFullyQualifiedUrl(this.options.src, baseUrl)
this.getVttFile(url)
.then((data) => {
this.vttData = this.processVtt(data)
this.setupThumbnailElement()
})
}
/**
* Builds a base URL should we require one.
*
* @returns {string}
*/
getBaseUrl () {
return [
window.location.protocol,
'//',
window.location.hostname,
(window.location.port ? ':' + window.location.port : ''),
window.location.pathname
].join('').split(/([^\/]*)$/gi).shift()
}
/**
* Grabs the contents of the VTT file.
*
* @param url
* @returns {Promise}
*/
getVttFile (url) {
return new Promise((resolve, reject) => {
const req = new XMLHttpRequest()
req.data = {
resolve: resolve
}
req.addEventListener('load', this.vttFileLoaded)
req.open('GET', url)
req.send()
})
}
/**
* Callback for loaded VTT file.
*/
vttFileLoaded () {
this.data.resolve(this.responseText)
}
setupThumbnailElement (data) {
const mouseDisplay = this.player.$('.vjs-mouse-display')
this.progressBar = this.player.$('.vjs-progress-control')
const thumbHolder = document.createElement('div')
thumbHolder.setAttribute('class', 'vjs-vtt-thumbnail-display')
this.progressBar.appendChild(thumbHolder)
this.thumbnailHolder = thumbHolder
mouseDisplay.classList.add('vjs-hidden')
this.progressBar.addEventListener('mouseenter', () => { return this.onBarMouseenter() })
this.progressBar.addEventListener('mouseleave', () => { return this.onBarMouseleave() })
}
onBarMouseenter () {
this.mouseMoveCallback = (e) => { this.onBarMousemove(e) }
this.progressBar.addEventListener('mousemove', this.mouseMoveCallback)
this.showThumbnailHolder()
}
onBarMouseleave () {
this.progressBar.removeEventListener('mousemove', this.mouseMoveCallback)
this.hideThumbnailHolder()
}
onBarMousemove (event) {
this.updateThumbnailStyle(
event.clientX - this.progressBar.offsetLeft,
this.progressBar.offsetWidth
)
}
getStyleForTime (time) {
for (let i = 0; i < this.vttData.length; ++i) {
let item = this.vttData[i]
if (time >= item.start && time < item.end) {
return item.css
}
}
}
showThumbnailHolder () {
this.thumbnailHolder.style.opacity = '1'
}
hideThumbnailHolder () {
this.thumbnailHolder.style.opacity = '0'
}
updateThumbnailStyle (x, width) {
const duration = this.player.duration()
const time = ((1 - ((width - x) / width))) * duration
const currentStyle = this.getStyleForTime(time)
if (!currentStyle) {
return this.hideThumbnailHolder()
}
const xPos = ((1 - ((width - x) / width))) * width
this.thumbnailHolder.style.transform = 'translateX(' + xPos + 'px)'
this.thumbnailHolder.style.marginLeft = '-' + (parseInt(currentStyle.width) / 2) + 'px'
if (this.lastStyle && this.lastStyle === currentStyle) {
return
}
this.lastStyle = currentStyle
for (let style in currentStyle) {
if (currentStyle.hasOwnProperty(style)) {
this.thumbnailHolder.style[style] = currentStyle[style]
}
}
}
processVtt (data) {
const processedVtts = []
const vttDefinitions = data.split(/[\r\n][\r\n]/i)
vttDefinitions.forEach((vttDef) => {
if (vttDef.match(/([0-9]{2}:)?([0-9]{2}:)?[0-9]{2}(.[0-9]{3})?( ?--> ?)([0-9]{2}:)?([0-9]{2}:)?[0-9]{2}(.[0-9]{3})?[\r\n]{1}.*/gi)) {
let vttDefSplit = vttDef.split(/[\r\n]/i)
let vttTiming = vttDefSplit[0]
let vttTimingSplit = vttTiming.split(/ ?--> ?/i)
let vttTimeStart = vttTimingSplit[0]
let vttTimeEnd = vttTimingSplit[1]
let vttImageDef = vttDefSplit[1]
let vttCssDef = this.getVttCss(vttImageDef)
processedVtts.push({
start: this.getSecondsFromTimestamp(vttTimeStart),
end: this.getSecondsFromTimestamp(vttTimeEnd),
css: vttCssDef
})
}
})
return processedVtts
}
getFullyQualifiedUrl (path, base) {
if (!path.match(/\/\//i)) {
return [
this.trim(base, '/'),
this.trim(path, '/')
].join('/')
}
return path
}
getPropsFromDef (def) {
const imageDefSplit = def.split(/#xywh=/i)
const imageUrl = imageDefSplit[0]
const imageCoords = imageDefSplit[1]
const splitCoords = imageCoords.match(/[0-9]+/gi)
return {
x: splitCoords[0],
y: splitCoords[1],
w: splitCoords[2],
h: splitCoords[3],
image: imageUrl
}
}
getVttCss (vttImageDef) {
const cssObj = {}
// If there isn't a protocol, use the VTT source URL.
const baseSplit = this.options.src.split(/([^\/]*)$/gi)
vttImageDef = this.getFullyQualifiedUrl(vttImageDef, baseSplit[0])
if (!vttImageDef.match(/#xywh=/i)) {
cssObj.background = 'url("' + vttImageDef + '")'
return cssObj
}
const imageProps = this.getPropsFromDef(vttImageDef)
cssObj.background = 'url("' + imageProps.image + '") no-repeat -' + imageProps.x + 'px -' + imageProps.y + 'px'
cssObj.width = imageProps.w + 'px'
cssObj.height = imageProps.h + 'px'
return cssObj
}
doconstructTimestamp (timestamp) {
const splitStampMilliseconds = timestamp.split('.')
const timeParts = splitStampMilliseconds[0]
const timePartsSplit = timeParts.split(':')
return {
milliseconds: parseInt(splitStampMilliseconds[1]) || 0,
seconds: parseInt(timePartsSplit.pop()) || 0,
minutes: parseInt(timePartsSplit.pop()) || 0,
hours: parseInt(timePartsSplit.pop()) || 0,
}
}
getSecondsFromTimestamp (timestamp) {
const timestampParts = this.doconstructTimestamp(timestamp)
return parseInt((timestampParts.hours * (60 * 60)) +
(timestampParts.minutes * 60) +
timestampParts.seconds +
(timestampParts.milliseconds * 1000))
}
trim (str, charlist) {
let whitespace = [
' ',
'\n',
'\r',
'\t',
'\f',
'\x0b',
'\xa0',
'\u2000',
'\u2001',
'\u2002',
'\u2003',
'\u2004',
'\u2005',
'\u2006',
'\u2007',
'\u2008',
'\u2009',
'\u200a',
'\u200b',
'\u2028',
'\u2029',
'\u3000'
].join('')
let l = 0
let i = 0
str += ''
if (charlist) {
whitespace = (charlist + '').replace(/([[\]().?/*{}+$^:])/g, '$1')
}
l = str.length
for (i = 0; i < l; i++) {
if (whitespace.indexOf(str.charAt(i)) === -1) {
str = str.substring(i)
break
}
}
l = str.length
for (i = l - 1; i >= 0; i--) {
if (whitespace.indexOf(str.charAt(i)) === -1) {
str = str.substring(0, i + 1)
break
}
}
return whitespace.indexOf(str.charAt(0)) === -1 ? str : ''
}
}
// Register the plugin with video.js.
registerPlugin('vttThumbnails', vttThumbnails)
// Include the version number.
vttThumbnails.VERSION = VERSION
export default vttThumbnails

18
src/plugin.scss Normal file
View file

@ -0,0 +1,18 @@
// Sass for videojs-vtt-thumbnails
.video-js {
// This class is added to the video.js element by the plugin by default.
&.vjs-vtt-thumbnails {
display: block;
}
.vjs-vtt-thumbnail-display {
position: absolute;
transition: transform .1s, opacity .2s;
bottom: 85%;
pointer-events: none;
box-shadow: 0 0 7px rgba(0,0,0,.6);
}
}

19
test/index.html Normal file
View file

@ -0,0 +1,19 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>videojs-vtt-thumbnails Unit Tests</title>
<link rel="stylesheet" href="../node_modules/qunitjs/qunit/qunit.css">
<link rel="stylesheet" href="../node_modules/video.js/dist/video-js.css">
<link href="../dist/videojs-vtt-thumbnails.css" rel="stylesheet">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="../node_modules/sinon/pkg/sinon.js"></script>
<script src="../node_modules/qunitjs/qunit/qunit.js"></script>
<script src="../node_modules/video.js/dist/video.js"></script>
<script src="../test/dist/bundle.js"></script>
</body>
</html>

43
test/karma.conf.js Normal file
View file

@ -0,0 +1,43 @@
module.exports = function(config) {
var detectBrowsers = {
enabled: false,
usePhantomJS: false
};
// On Travis CI, we can only run in Firefox and Chrome; so, enforce that.
if (process.env.TRAVIS) {
config.browsers = ['Firefox', 'travisChrome'];
}
// If no browsers are specified, we enable `karma-detect-browsers`
// this will detect all browsers that are available for testing
if (!config.browsers.length) {
detectBrowsers.enabled = true;
}
config.set({
basePath: '..',
frameworks: ['qunit', 'detectBrowsers'],
files: [
'node_modules/video.js/dist/video-js.css',
'dist/videojs-vtt-thumbnails.css',
'node_modules/sinon/pkg/sinon.js',
'node_modules/video.js/dist/video.js',
'test/dist/bundle.js'
],
customLaunchers: {
travisChrome: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
detectBrowsers: detectBrowsers,
reporters: ['dots'],
port: 9876,
colors: true,
autoWatch: false,
singleRun: true,
concurrency: Infinity
});
};

58
test/plugin.test.js Normal file
View file

@ -0,0 +1,58 @@
import document from 'global/document';
import QUnit from 'qunit';
import sinon from 'sinon';
import videojs from 'video.js';
import plugin from '../src/plugin';
const 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 plugin, 'function', 'plugin is a function');
});
QUnit.module('videojs-vtt-thumbnails', {
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.getElementById('qunit-fixture');
this.video = document.createElement('video');
this.fixture.appendChild(this.video);
this.player = videojs(this.video);
},
afterEach() {
this.player.dispose();
this.clock.restore();
}
});
QUnit.test('registers itself with video.js', function(assert) {
assert.expect(2);
assert.strictEqual(
typeof Player.prototype.vttThumbnails,
'function',
'videojs-vtt-thumbnails plugin was registered'
);
this.player.vttThumbnails();
// Tick the clock forward enough to trigger the player to be "ready".
this.clock.tick(2);
assert.ok(
this.player.hasClass('vjs-vtt-thumbnails'),
'the plugin adds a class to the player'
);
});