Initial commit
This commit is contained in:
Chris Boustead
commit
f0a97f8e13
|
|
@ -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
|
||||
|
|
@ -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/
|
||||
|
|
@ -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.
|
||||
|
|
@ -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,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
|
||||
|
|
@ -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.
|
||||
|
|
@ -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 <chris@forgemotion.com>
|
||||
|
||||
|
||||
[videojs]: http://videojs.com/
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"plugins": ["plugins/markdown"]
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/**
|
||||
* <%- pkg.name %>
|
||||
* @version <%- pkg.version %>
|
||||
* @copyright <%- date.getFullYear() %> <%- pkg.author %>
|
||||
* @license <%- pkg.license %>
|
||||
*/
|
||||
|
|
@ -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'
|
||||
]
|
||||
})
|
||||
]
|
||||
};
|
||||
|
|
@ -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'
|
||||
]
|
||||
})
|
||||
]
|
||||
};
|
||||
|
|
@ -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'
|
||||
]
|
||||
})
|
||||
]
|
||||
};
|
||||
|
|
@ -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');
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
});
|
||||
};
|
||||
|
|
@ -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'
|
||||
);
|
||||
});
|
||||
Loading…
Reference in New Issue