├── .editorconfig ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── bower.json ├── index.html ├── logo-example.png ├── package.json ├── screenshot.png ├── scripts ├── banner.ejs ├── build-test.js ├── postversion.js ├── server.js └── version.js ├── src ├── plugin.js └── plugin.scss └── test ├── index.html ├── karma.conf.js └── plugin.test.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_style = space 8 | indent_size = 2 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OS 2 | Thumbs.db 3 | ehthumbs.db 4 | Desktop.ini 5 | .DS_Store 6 | ._* 7 | 8 | # Editors 9 | *~ 10 | *.swp 11 | *.tmproj 12 | *.tmproject 13 | *.sublime-* 14 | .idea/ 15 | .project/ 16 | .settings/ 17 | .vscode/ 18 | 19 | # Logs 20 | logs 21 | *.log 22 | npm-debug.log* 23 | 24 | # Dependency directories 25 | bower_components/ 26 | node_modules/ 27 | 28 | # Yeoman meta-data 29 | .yo-rc.json 30 | 31 | # Build-related directories 32 | dist/ 33 | docs/api/ 34 | es5/ 35 | test/dist/ 36 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Intentionally left blank, so that npm does not ignore anything by default, 2 | # but relies on the package.json "files" array to explicitly define what ends 3 | # up in the package. 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - 'node' 5 | - '4.2' 6 | - '0.12' 7 | - '0.10' 8 | 9 | before_script: 10 | 11 | # Set up a virtual screen for Firefox. 12 | - export DISPLAY=:99.0 13 | - sh -e /etc/init.d/xvfb start 14 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | CHANGELOG 2 | ========= 3 | 4 | ## HEAD (Unreleased) 5 | _(none)_ 6 | 7 | -------------------- 8 | 9 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # CONTRIBUTING 2 | 3 | We welcome contributions from everyone! 4 | 5 | ## Getting Started 6 | 7 | Make sure you have NodeJS 0.10 or higher and npm installed. 8 | 9 | 1. Fork this repository and clone your fork 10 | 1. Install dependencies: `npm install` 11 | 1. Run a development server: `npm start` 12 | 13 | ### Making Changes 14 | 15 | Refer to the [video.js plugin standards][standards] for more detail on best practices and tooling for video.js plugin authorship. 16 | 17 | When you've made your changes, push your commit(s) to your fork and issue a pull request against the original repository. 18 | 19 | ### Running Tests 20 | 21 | 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]. 22 | 23 | - In all available and supported browsers: `npm test` 24 | - In a specific browser: `npm run test:chrome`, `npm run test:firefox`, etc. 25 | - While development server is running (`npm start`), navigate to [`http://localhost:9999/test/`][local] 26 | 27 | 28 | [karma]: http://karma-runner.github.io/ 29 | [local]: http://localhost:9999/test/ 30 | [standards]: https://github.com/videojs/generator-videojs-plugin/docs/standards.md 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016 Emmanuel Alves <manel.pb@gmail.com> 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # videojs-brand 2 | 3 | Simple plugin that adds your logo brand in the player controls 4 | 5 | ![alt tag](https://raw.githubusercontent.com/manelpb/videojs-brand/master/screenshot.png) 6 | 7 | ## Installation 8 | 9 | ```sh 10 | npm install --save videojs-brand 11 | ``` 12 | 13 | ## Usage 14 | 15 | To include videojs-brand on your website or web application, use any of the following methods. 16 | 17 | ### ` 23 | 24 | 33 | 34 | or 35 | . 36 | . 37 | 38 | ```html 39 | 63 | 64 | ``` 65 | 66 | 67 | ## License 68 | 69 | MIT. Copyright (c) Emmanuel Alves / http://github.com/manelpb 70 | 71 | 72 | [videojs]: http://videojs.com/ 73 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "videojs-brand", 3 | "author": "Emmanuel Alves <manel.pb@gmail.com>", 4 | "license": "MIT", 5 | "main": [ 6 | "dist/videojs-brand.css", 7 | "dist/videojs-brand.min.js" 8 | ], 9 | "keywords": [ 10 | "videojs", 11 | "videojs-plugin" 12 | ] 13 | } 14 | 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | videojs-brand Demo 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 22 | 26 | 27 | 28 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /logo-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manelpb/videojs-brand/4073dece0e41361d749eb3032d730c888e9a2098/logo-example.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "videojs-brand", 3 | "version": "0.0.4", 4 | "description": "Simple plugin that adds your logo brand in the player controls", 5 | "main": "es5/plugin.js", 6 | "scripts": { 7 | "prebuild": "npm run clean", 8 | "build": "npm-run-all -p build:*", 9 | "build:css": "npm-run-all build:css:sass build:css:bannerize", 10 | "build:css:bannerize": "bannerize dist/videojs-brand.css --banner=scripts/banner.ejs", 11 | "build:css:sass": "node-sass src/plugin.scss dist/videojs-brand.css --output-style=compressed --linefeed=lf", 12 | "build:js": "npm-run-all build:js:babel build:js:browserify build:js:bannerize build:js:uglify", 13 | "build:js:babel": "babel src -d es5", 14 | "build:js:bannerize": "bannerize dist/videojs-brand.js --banner=scripts/banner.ejs", 15 | "build:js:browserify": "browserify . -s videojs-brand -o dist/videojs-brand.js", 16 | "build:js:uglify": "uglifyjs dist/videojs-brand.js --comments --mangle --compress -o dist/videojs-brand.min.js", 17 | "build:test": "babel-node scripts/build-test.js", 18 | "change": "chg add", 19 | "clean": "rimraf dist test/dist es5 && mkdirp dist test/dist es5", 20 | "lint": "vjsstandard", 21 | "start": "babel-node scripts/server.js", 22 | "pretest": "npm-run-all lint build", 23 | "test": "karma start test/karma.conf.js", 24 | "test:chrome": "npm run pretest && karma start test/karma.conf.js --browsers Chrome", 25 | "test:firefox": "npm run pretest && karma start test/karma.conf.js --browsers Firefox", 26 | "test:ie": "npm run pretest && karma start test/karma.conf.js --browsers IE", 27 | "test:safari": "npm run pretest && karma start test/karma.conf.js --browsers Safari", 28 | "preversion": "npm test", 29 | "version": "babel-node scripts/version.js", 30 | "postversion": "babel-node scripts/postversion.js", 31 | "prepublish": "npm run build" 32 | }, 33 | "repository" : 34 | { "type" : "git" 35 | , "url" : "https://github.com/manelpb/videojs-brand.git" 36 | }, 37 | "keywords": [ 38 | "videojs", 39 | "videojs-plugin" 40 | ], 41 | "author": "Emmanuel Alves ", 42 | "license": "MIT", 43 | "browserify": { 44 | "transform": [ 45 | "browserify-shim", 46 | "browserify-versionify" 47 | ] 48 | }, 49 | "browserify-shim": { 50 | "qunit": "global:QUnit", 51 | "sinon": "global:sinon", 52 | "video.js": "global:videojs" 53 | }, 54 | "style": "dist/videojs-brand.css", 55 | "videojs-plugin": { 56 | "style": "dist/videojs-brand.css", 57 | "script": "dist/videojs-brand.min.js" 58 | }, 59 | "vjsstandard": { 60 | "ignore": [ 61 | "dist", 62 | "docs", 63 | "es5", 64 | "test/dist", 65 | "test/karma.conf.js" 66 | ] 67 | }, 68 | "files": [ 69 | "CONTRIBUTING.md", 70 | "bower.json", 71 | "dist/", 72 | "docs/", 73 | "es5/", 74 | "index.html", 75 | "scripts/", 76 | "src/", 77 | "test/" 78 | ], 79 | "dependencies": { 80 | "video.js": "^5.6.0" 81 | }, 82 | "devDependencies": { 83 | "babel": "^5.8.35", 84 | "babelify": "^6.4.0", 85 | "bannerize": "^1.0.2", 86 | "bluebird": "^3.2.2", 87 | "browserify": "^12.0.2", 88 | "browserify-shim": "^3.8.12", 89 | "browserify-versionify": "^1.0.6", 90 | "budo": "^8.0.4", 91 | "chg": "^0.3.2", 92 | "glob": "^6.0.3", 93 | "global": "^4.3.0", 94 | "karma": "^0.13.19", 95 | "karma-chrome-launcher": "^0.2.2", 96 | "karma-detect-browsers": "^2.0.2", 97 | "karma-firefox-launcher": "^0.1.7", 98 | "karma-ie-launcher": "^0.2.0", 99 | "karma-qunit": "^0.1.9", 100 | "karma-safari-launcher": "^0.1.1", 101 | "mkdirp": "^0.5.1", 102 | "node-sass": "^3.4.2", 103 | "npm-run-all": "^1.5.1", 104 | "qunitjs": "^1.21.0", 105 | "rimraf": "^2.5.1", 106 | "sinon": "~1.14.0", 107 | "uglify-js": "^2.6.1", 108 | "videojs-standard": "^4.0.0" 109 | } 110 | } -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manelpb/videojs-brand/4073dece0e41361d749eb3032d730c888e9a2098/screenshot.png -------------------------------------------------------------------------------- /scripts/banner.ejs: -------------------------------------------------------------------------------- 1 | /** 2 | * <%- pkg.name %> 3 | * @version <%- pkg.version %> 4 | * @copyright <%- date.getFullYear() %> <%- pkg.author %> 5 | * @license <%- pkg.license %> 6 | */ 7 | -------------------------------------------------------------------------------- /scripts/build-test.js: -------------------------------------------------------------------------------- 1 | import browserify from 'browserify'; 2 | import fs from 'fs'; 3 | import glob from 'glob'; 4 | 5 | /* eslint no-console: 0 */ 6 | 7 | glob('test/**/*.test.js', (err, files) => { 8 | if (err) { 9 | throw err; 10 | } 11 | browserify(files) 12 | .transform('babelify') 13 | .bundle() 14 | .pipe(fs.createWriteStream('test/dist/bundle.js')); 15 | }); 16 | -------------------------------------------------------------------------------- /scripts/postversion.js: -------------------------------------------------------------------------------- 1 | import {exec} from 'child_process'; 2 | import fs from 'fs'; 3 | import path from 'path'; 4 | 5 | /* eslint no-console: 0 */ 6 | 7 | /** 8 | * Determines whether or not the project has the Bower setup by checking for 9 | * the presence of a bower.json file. 10 | * 11 | * @return {Boolean} 12 | */ 13 | const hasBower = () => { 14 | try { 15 | fs.statSync(path.join(__dirname, '../bower.json')); 16 | return true; 17 | } catch (x) { 18 | return false; 19 | } 20 | }; 21 | 22 | // If the project supports Bower, roll HEAD back one commit to avoid having 23 | // the tagged commit - with `dist/` - in the main history. 24 | if (hasBower()) { 25 | exec('git reset --hard HEAD~1', (err, stdout, stderr) => { 26 | if (err) { 27 | process.stdout.write(err.stack); 28 | process.exit(err.status || 1); 29 | } else { 30 | process.stdout.write(stdout); 31 | } 32 | }); 33 | } 34 | -------------------------------------------------------------------------------- /scripts/server.js: -------------------------------------------------------------------------------- 1 | import Promise from 'bluebird'; 2 | import browserify from 'browserify'; 3 | import budo from 'budo'; 4 | import fs from 'fs'; 5 | import glob from 'glob'; 6 | import mkdirp from 'mkdirp'; 7 | import sass from 'node-sass'; 8 | import path from 'path'; 9 | 10 | /* eslint no-console: 0 */ 11 | 12 | const pkg = require(path.join(__dirname, '../package.json')); 13 | 14 | // Replace "%s" tokens with the plugin name in a string. 15 | const nameify = (str) => 16 | str.replace(/%s/g, pkg.name.split('/').reverse()[0]); 17 | 18 | const srces = { 19 | css: 'src/plugin.scss', 20 | js: 'src/plugin.js', 21 | tests: glob.sync('test/**/*.test.js') 22 | }; 23 | 24 | const dests = { 25 | css: nameify('dist/%s.css'), 26 | js: nameify('dist/%s.js'), 27 | tests: 'test/dist/bundle.js' 28 | }; 29 | 30 | const bundlers = { 31 | 32 | js: browserify({ 33 | debug: true, 34 | entries: [srces.js], 35 | standalone: nameify('%s'), 36 | transform: [ 37 | 'babelify', 38 | 'browserify-shim', 39 | 'browserify-versionify' 40 | ] 41 | }), 42 | 43 | tests: browserify({ 44 | debug: true, 45 | entries: srces.tests, 46 | transform: [ 47 | 'babelify', 48 | 'browserify-shim', 49 | 'browserify-versionify' 50 | ] 51 | }) 52 | }; 53 | 54 | const bundle = (name) => { 55 | return new Promise((resolve, reject) => { 56 | bundlers[name] 57 | .bundle() 58 | .pipe(fs.createWriteStream(dests[name])) 59 | .on('finish', resolve) 60 | .on('error', reject); 61 | }); 62 | }; 63 | 64 | mkdirp.sync('dist'); 65 | 66 | // Start the server _after_ the initial bundling is done. 67 | Promise.all([bundle('js'), bundle('tests')]).then(() => { 68 | const server = budo({ 69 | port: 9999, 70 | stream: process.stdout 71 | }).on('reload', (f) => console.log('reloading %s', f || 'everything')); 72 | 73 | /** 74 | * A collection of functions which are mapped to strings that are used to 75 | * generate RegExp objects. If a filepath matches the RegExp, the function 76 | * will be used to handle that watched file. 77 | * 78 | * @type {Object} 79 | */ 80 | const handlers = { 81 | 82 | /** 83 | * Handler for Sass source. 84 | * 85 | * @param {String} event 86 | * @param {String} file 87 | */ 88 | '^src/.+\.scss$'(event, file) { 89 | console.log('re-compiling sass'); 90 | let result = sass.renderSync({file: srces.css, outputStyle: 'compressed'}); 91 | 92 | fs.writeFileSync(dests.css, result.css); 93 | server.reload(); 94 | }, 95 | 96 | /** 97 | * Handler for JavaScript source. 98 | * 99 | * @param {String} event 100 | * @param {String} file 101 | */ 102 | '^src/.+\.js$'(event, file) { 103 | console.log('re-bundling javascript and tests'); 104 | Promise.all([bundle('js'), bundle('tests')]).then(() => server.reload()); 105 | }, 106 | 107 | /** 108 | * Handler for JavaScript tests. 109 | * 110 | * @param {String} event 111 | * @param {String} file 112 | */ 113 | '^test/.+\.test\.js$'(event, file) { 114 | console.log('re-bundling tests'); 115 | bundle('tests').then(() => server.reload()); 116 | } 117 | }; 118 | 119 | /** 120 | * Finds the first handler function for the file that matches a RegExp 121 | * derived from the keys. 122 | * 123 | * @param {String} file 124 | * @return {Function|Undefined} 125 | */ 126 | const findHandler = (file) => { 127 | const keys = Object.keys(handlers); 128 | 129 | for (let i = 0; i < keys.length; i++) { 130 | let regex = new RegExp(keys[i]); 131 | 132 | if (regex.test(file)) { 133 | return handlers[keys[i]]; 134 | } 135 | } 136 | }; 137 | 138 | server 139 | .live() 140 | .watch([ 141 | 'index.html', 142 | 'src/**/*.{scss,js}', 143 | 'test/**/*.test.js', 144 | 'test/index.html' 145 | ]) 146 | .on('watch', (event, file) => { 147 | const handler = findHandler(file); 148 | 149 | console.log(`detected a "${event}" event in "${file}"`); 150 | 151 | if (handler) { 152 | handler(event, file); 153 | } else { 154 | server.reload(); 155 | } 156 | }); 157 | }); 158 | -------------------------------------------------------------------------------- /scripts/version.js: -------------------------------------------------------------------------------- 1 | import {exec} from 'child_process'; 2 | import fs from 'fs'; 3 | import path from 'path'; 4 | 5 | /* eslint no-console: 0 */ 6 | 7 | const pkg = require(path.join(__dirname, '../package.json')); 8 | 9 | /** 10 | * Determines whether or not the project has the CHANGELOG setup by checking 11 | * for the presence of a CHANGELOG.md file and the necessary dependency and 12 | * npm script. 13 | * 14 | * @return {Boolean} 15 | */ 16 | const hasChangelog = () => { 17 | try { 18 | fs.statSync(path.join(__dirname, '../CHANGELOG.md')); 19 | } catch (x) { 20 | return false; 21 | } 22 | return pkg.devDependencies.hasOwnProperty('chg') && 23 | pkg.scripts.hasOwnProperty('change'); 24 | }; 25 | 26 | /** 27 | * Determines whether or not the project has the Bower setup by checking for 28 | * the presence of a bower.json file. 29 | * 30 | * @return {Boolean} 31 | */ 32 | const hasBower = () => { 33 | try { 34 | fs.statSync(path.join(__dirname, '../bower.json')); 35 | return true; 36 | } catch (x) { 37 | return false; 38 | } 39 | }; 40 | 41 | const commands = []; 42 | 43 | // If the project has a CHANGELOG, update it for the new release. 44 | if (hasChangelog()) { 45 | commands.push(`chg release "${pkg.version}"`); 46 | commands.push('git add CHANGELOG.md'); 47 | } 48 | 49 | // If the project supports Bower, perform special extra versioning step. 50 | if (hasBower()) { 51 | commands.push('git add package.json'); 52 | commands.push(`git commit -m "${pkg.version}"`); 53 | 54 | // We only need a build in the Bower-supported case because of the 55 | // temporary addition of the dist/ directory. 56 | commands.push('npm run build'); 57 | commands.push('git add -f dist'); 58 | } 59 | 60 | if (commands.length) { 61 | exec(commands.join(' && '), (err, stdout, stderr) => { 62 | if (err) { 63 | process.stdout.write(err.stack); 64 | process.exit(err.status || 1); 65 | } else { 66 | process.stdout.write(stdout); 67 | } 68 | }); 69 | } 70 | -------------------------------------------------------------------------------- /src/plugin.js: -------------------------------------------------------------------------------- 1 | import videojs from 'video.js'; 2 | 3 | // Default options for the plugin. 4 | const defaults = { 5 | image: "/logo-example.png", 6 | title: "Logo Title", 7 | destination: "http://www.google.com", 8 | destinationTarget: "_blank" 9 | }; 10 | 11 | /** 12 | * Function to invoke when the player is ready. 13 | * 14 | * This is a great place for your plugin to initialize itself. When this 15 | * function is called, the player will have its DOM and child components 16 | * in place. 17 | * 18 | * @function onPlayerReady 19 | * @param {Player} player 20 | * @param {Object} [options={}] 21 | */ 22 | const onPlayerReady = (player, options) => { 23 | let containerElement = document.createElement("div"); 24 | containerElement.className = "vjs-brand-container"; 25 | 26 | let linkElement = document.createElement("a"); 27 | linkElement.className = "vjs-brand-container-link"; 28 | linkElement.setAttribute("href", options.destination || defaults.destination); 29 | linkElement.setAttribute("title", options.title || defaults.title); 30 | linkElement.setAttribute("target", options.destinationTarget || defaults.destinationTarget) 31 | 32 | let imageElement = document.createElement("img"); 33 | imageElement.src = options.image || defaults.image; 34 | 35 | linkElement.appendChild(imageElement); 36 | containerElement.appendChild(linkElement); 37 | 38 | player.controlBar.el().insertBefore(containerElement, player.controlBar.fullscreenToggle.el()); 39 | player.addClass('vjs-brand'); 40 | }; 41 | 42 | /** 43 | * A video.js plugin. 44 | * 45 | * In the plugin function, the value of `this` is a video.js `Player` 46 | * instance. You cannot rely on the player being in a "ready" state here, 47 | * depending on how the plugin is invoked. This may or may not be important 48 | * to you; if not, remove the wait for "ready"! 49 | * 50 | * @function brand 51 | * @param {Object} [options={}] 52 | * An object of options left to the plugin author to define. 53 | */ 54 | const brand = function(options) { 55 | this.ready(() => { 56 | onPlayerReady(this, videojs.mergeOptions(defaults, options)); 57 | }); 58 | }; 59 | 60 | // Register the plugin with video.js. 61 | videojs.plugin('brand', brand); 62 | 63 | // Include the version number. 64 | brand.VERSION = '__VERSION__'; 65 | 66 | export default brand; 67 | -------------------------------------------------------------------------------- /src/plugin.scss: -------------------------------------------------------------------------------- 1 | // Sass for videojs-brand 2 | 3 | .video-js { 4 | 5 | // This class is added to the video.js element by the plugin by default. 6 | &.vjs-brand { 7 | display: block; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | videojs-brand Unit Tests 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /test/karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function(config) { 2 | var browsers = config.browsers; 3 | var frameworks = ['qunit']; 4 | var plugins = ['karma-qunit']; 5 | 6 | var addBrowserLauncher = function(browser) { 7 | plugins.push('karma-' + browser.toLowerCase() + '-launcher'); 8 | }; 9 | 10 | // On Travis CI, we can only run in Firefox. 11 | if (process.env.TRAVIS) { 12 | browsers = ['Firefox']; 13 | browsers.forEach(addBrowserLauncher); 14 | 15 | // If specific browsers are requested on the command line, load their 16 | // launchers. 17 | } else if (browsers.length) { 18 | browsers.forEach(addBrowserLauncher); 19 | 20 | // If no browsers are specified, we will do a `karma-detect-browsers` run, 21 | // which means we need to set up that plugin and all the browser plugins 22 | // we are supporting. 23 | } else { 24 | frameworks.push('detectBrowsers'); 25 | plugins.push('karma-detect-browsers'); 26 | ['chrome', 'firefox', 'ie', 'safari'].forEach(addBrowserLauncher); 27 | } 28 | 29 | config.set({ 30 | basePath: '..', 31 | frameworks: frameworks, 32 | 33 | files: [ 34 | 'dist/videojs-brand.css', 35 | 'node_modules/sinon/pkg/sinon.js', 36 | 'node_modules/sinon/pkg/sinon-ie.js', 37 | 'node_modules/video.js/dist/video.js', 38 | 'node_modules/video.js/dist/video-js.css', 39 | 'test/dist/bundle.js' 40 | ], 41 | 42 | browsers: browsers, 43 | plugins: plugins, 44 | 45 | detectBrowsers: { 46 | usePhantomJS: false 47 | }, 48 | 49 | reporters: ['dots'], 50 | port: 9876, 51 | colors: true, 52 | autoWatch: false, 53 | singleRun: true, 54 | concurrency: Infinity 55 | }); 56 | }; 57 | -------------------------------------------------------------------------------- /test/plugin.test.js: -------------------------------------------------------------------------------- 1 | import document from 'global/document'; 2 | 3 | import QUnit from 'qunit'; 4 | import sinon from 'sinon'; 5 | import videojs from 'video.js'; 6 | 7 | import plugin from '../src/plugin'; 8 | 9 | const Player = videojs.getComponent('Player'); 10 | 11 | QUnit.test('the environment is sane', function(assert) { 12 | assert.strictEqual(typeof Array.isArray, 'function', 'es5 exists'); 13 | assert.strictEqual(typeof sinon, 'object', 'sinon exists'); 14 | assert.strictEqual(typeof videojs, 'function', 'videojs exists'); 15 | assert.strictEqual(typeof plugin, 'function', 'plugin is a function'); 16 | }); 17 | 18 | QUnit.module('videojs-brand', { 19 | 20 | beforeEach() { 21 | 22 | // Mock the environment's timers because certain things - particularly 23 | // player readiness - are asynchronous in video.js 5. This MUST come 24 | // before any player is created; otherwise, timers could get created 25 | // with the actual timer methods! 26 | this.clock = sinon.useFakeTimers(); 27 | 28 | this.fixture = document.getElementById('qunit-fixture'); 29 | this.video = document.createElement('video'); 30 | this.fixture.appendChild(this.video); 31 | this.player = videojs(this.video); 32 | }, 33 | 34 | afterEach() { 35 | this.player.dispose(); 36 | this.clock.restore(); 37 | } 38 | }); 39 | 40 | QUnit.test('registers itself with video.js', function(assert) { 41 | assert.expect(2); 42 | 43 | assert.strictEqual( 44 | Player.prototype.brand, 45 | plugin, 46 | 'videojs-brand plugin was registered' 47 | ); 48 | 49 | this.player.brand(); 50 | 51 | // Tick the clock forward enough to trigger the player to be "ready". 52 | this.clock.tick(1); 53 | 54 | assert.ok( 55 | this.player.hasClass('vjs-brand'), 56 | 'the plugin adds a class to the player' 57 | ); 58 | }); 59 | --------------------------------------------------------------------------------