iv-org/videojs-quality-selector
1
0
Fork 0
mirror of https://github.com/iv-org/videojs-quality-selector.git synced 2025-04-25 01:39:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge 294c48d1196bba1365c4c1296fe0a77ff565fed7 into 33e026eb51a2ffc807f290179f5bdc6d236bfd50

Browse Source
This commit is contained in:
Émilien (perso) 2024-04-28 11:56:09 +00:00 committed by GitHub
commit 75a26c8e28
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
27 changed files with 23022 additions and 6525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.browserslistrc Symbolic link
View File

@ -0,0 +1 @@
./node_modules/@silvermine/standardization/browserslist/.browserslistrc-broad-support

1
.editorconfig Symbolic link
View File

@ -0,0 +1 @@
node_modules/@silvermine/standardization/.editorconfig

5
.eslintrc.json
View File

@ -1,5 +1,4 @@
{
"extends": "@silvermine/eslint-config/node"
"extends": "@silvermine/eslint-config/node",
"parser": "babel-eslint"
}

38
.github/workflows/ci.yml vendored Normal file
View File

@ -0,0 +1,38 @@
name: CI
on: [ push, pull_request ]
jobs:
build:
runs-on: ubuntu-latest
steps:
-
uses: actions/checkout@v3
with:
fetch-depth: 0 # Fetch all history
-
uses: actions/setup-node@v3
with:
node-version-file: '.nvmrc'
- run: npm i -g npm@8.5.5
- run: npm ci
- run: npm run standards
test:
needs: [ build ]
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
node-version: [ 14, 16, 'lts/*', 'latest' ]
steps:
- uses: actions/checkout@v3
-
name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- run: npm i -g npm@8.5.5
- run: npm ci # Reinstall the dependencies to ensure they install with the current version of node
- run: npm test
- name: Coveralls
uses: coverallsapp/github-action@v1

2
.gitignore vendored
View File

@ -1,4 +1,6 @@
.DS_Store
node_modules
coverage
.nyc_output
dist
.idea

3
.markdownlint.json Normal file
View File

@ -0,0 +1,3 @@
{
"extends": "./node_modules/@silvermine/standardization/.markdownlint.json"
}

2
.npmignore
View File

@ -3,3 +3,5 @@
Gruntfile.js
tests/**
docs
.nyc_output
coverage

2
.nvmrc
View File

@ -1 +1 @@
12.14.0
16.15.0

16
.nycrc.json Normal file
View File

@ -0,0 +1,16 @@
{
"include": [
"src/**/*.js"
],
"extension": [
".js"
],
"reporter": [
"text-summary",
"html",
"lcov"
],
"instrument": true,
"sourceMap": true,
"all": true
}

1
.stylelintrc.yml Normal file
View File

@ -0,0 +1 @@
extends: ./node_modules/@silvermine/standardization/.stylelintrc.yml

18
.travis.yml
View File

@ -1,18 +0,0 @@
language: node_js
node_js:
- "node" # Latest node version
- "lts/*" # Latest LTS version
- "12"
- "10"
- "8"
before_install: npm i -g npm@6.13.4
script:
- npm run commitlint
- grunt standards
- npm test
# For code coverage:
after_success:
cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage

14
CHANGELOG.md
View File

@ -1,7 +1,15 @@
# Silvermine VideoJS Quality/Resolution Selector Change Log
# Changelog
All notable changes to this project will be documented in this file.
See [our coding standards][commit-messages] for commit guidelines.
### [1.3.1](https://github.com/silvermine/videojs-quality-selector/compare/v1.3.0...v1.3.1) (2023-11-15)
### Bug Fixes
* use correct icon for Video.js 8 ([1209756](https://github.com/silvermine/videojs-quality-selector/commit/1209756616af52843f55ac53e2c7fbe29df63541))
In general, this project adheres to [Semantic Versioning](http://semver.org/). If for some
reason we do something that's not strictly semantic, it will be clearly called out below.
## 1.2.3

58
Gruntfile.js
View File

@ -2,18 +2,25 @@
* Copyright (c) 2017 Jeremy Thomerson
* Licensed under the MIT license.
*/
'use strict';
var path = require('path'),
getCodeVersion = require('silvermine-serverless-utils/src/get-code-version');
const sass = require('node-sass');
const sass = require('sass');
module.exports = function(grunt) {
var DEBUG = !!grunt.option('debug'),
config;
pkgJSON = grunt.file.readJSON('package.json'),
config, versionInfo;
try {
versionInfo = getCodeVersion.both();
} catch(e) {
// When this package is installed as a git URL, getCodeVersion throws an error and
// is not able to find the git version for this package. So, we fall back to using
// the version number from package.json
versionInfo = pkgJSON.version;
}
config = {
js: {
@ -22,7 +29,7 @@ module.exports = function(grunt) {
},
sass: {
base: path.join(__dirname, 'src', 'sass'),
base: path.join(__dirname, 'src', 'scss'),
all: [ 'src/**/*.scss' ],
},
@ -44,14 +51,34 @@ module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
versionInfo: getCodeVersion.both(),
pkg: pkgJSON,
versionInfo: versionInfo,
config: config,
browserify: {
main: {
src: config.js.standalone,
dest: config.dist.js.bundle,
options: {
transform: [
[
'babelify',
{
presets: [
[
'@babel/preset-env',
{
debug: true,
useBuiltIns: 'usage',
shippedProposals: true,
corejs: 3,
},
],
],
},
],
],
},
},
},
@ -109,17 +136,6 @@ module.exports = function(grunt) {
dist: config.dist.base,
},
eslint: {
target: config.js.all,
},
sasslint: {
options: {
configFile: path.join(__dirname, 'node_modules', '@silvermine/sass-lint-config', 'sass-lint.yml'),
},
target: config.sass.all,
},
watch: {
grunt: {
files: [ 'Gruntfile.js' ],
@ -136,19 +152,15 @@ module.exports = function(grunt) {
tasks: [ 'build-css' ],
},
},
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-eslint');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-sass-lint');
grunt.registerTask('standards', [ 'eslint', 'sasslint' ]);
grunt.registerTask('build-js', [ 'browserify', 'uglify' ]);
grunt.registerTask('build-css', [ 'sass', 'postcss' ]);
grunt.registerTask('build', [ 'build-js', 'build-css' ]);

35
README.md
View File

@ -31,14 +31,14 @@ for `videojs` at `window.videojs`).
There is an example of this in
[`docs/demo/index.html`](./docs/demo/index.html).
##### From local file:
##### From local file
```js
<script src="./path/to/video.min.js"></script>
<script src="./path/to/silvermine-videojs-quality-selector.min.js"></script>
```
##### From [`unpkg`](https://unpkg.com/@silvermine/videojs-quality-selector/):
##### From [`unpkg`](https://unpkg.com/@silvermine/videojs-quality-selector/)
```js
<link href="https://unpkg.com/@silvermine/videojs-quality-selector/dist/css/quality-selector.css" rel="stylesheet">
@ -50,7 +50,7 @@ There is an example of this in
When using NPM/Browserify, first install the plugin.
```
```bash
npm install --save @silvermine/videojs-quality-selector
```
@ -64,6 +64,23 @@ var videojs = require('videojs');
require('@silvermine/videojs-quality-selector')(videojs);
```
Remember to also add the CSS to your build. With most bundlers you can:
```js
require('@silvermine/videojs-quality-selector/dist/css/quality-selector.css')
```
> [!WARNING]
> This plugin's source code uses ES6+ syntax and keywords, such as `class` and `static`.
> If you need to support [browsers that do not support newer JavaScript
> syntax](https://caniuse.com/es6), you will need to use a tool like
> [Babel](https://babeljs.io/) to transpile and polyfill your code.
>
> Alternatively, you can
> `require('@silvermine/videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.js')`
> to use a JavaScript file that has already been polyfilled/transpiled down to ES5
> compatibility.
### Providing video sources
Sources can be provided with either the `<source>` tag or via the `src` function on the
@ -72,7 +89,7 @@ instance of a `video.js` player.
#### Using `<source>`
```html
<video id="video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'>
<video id="video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268">
<source src="https://example.com/video_720.mp4" type="video/mp4" label="720P">
<source src="https://example.com/video_480.mp4" type="video/mp4" label="480P" selected="true">
<source src="https://example.com/video_360.mp4" type="video/mp4" label="360P">
@ -107,13 +124,17 @@ player.src([
There are at least two ways to add the quality selector control to the player's control
bar. The first is directly adding it via `addChild`. For example:
```
player.controlBar.addChild('QualitySelector');
```js
videojs('video_1', {}, function() {
var player = this;
player.controlBar.addChild('QualitySelector');
});
```
The second option is to add the control via the player's options, for instance:
```
```js
var options, player;
options = {

4
commitlint.config.js
View File

@ -1,5 +1,3 @@
'use strict';
module.exports = {
extends: [ '@silvermine/eslint-config/commitlint.js' ],
extends: [ '@silvermine/standardization/commitlint.js' ],
};

16
docs/demo/index.html
View File

@ -3,23 +3,23 @@
<head>
<meta charset=utf-8 />
<title>videojs-quality-selector Demo</title>
<link href="https://unpkg.com/video.js@7.5.4/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js@7.5.4/dist/video.js"></script>
<link href="https://unpkg.com/video.js@8.6.1/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js@8.6.1/dist/video.js"></script>
<script src="../../dist/js/silvermine-videojs-quality-selector.min.js"></script>
<link href="../../dist/css/quality-selector.css" rel="stylesheet">
</head>
<body>
<h1>Demo of <code>videojs-quality-selector</code></h1>
<video id="video_1" class="video-js vjs-default-skin" controls preload="auto" data-setup='{}'>
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.720p.webm" type="video/webm" label="720P">
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.480p.webm" type="video/webm" label="480P" selected="true">
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.360p.webm" type="video/webm" label="360P">
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.240p.webm" type="video/webm" label="240P">
<video id="video_1" class="video-js vjs-default-skin" controls preload="auto">
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.720p.vp9.webm" type="video/webm" label="720P">
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.480p.vp9.webm" type="video/webm" label="480P" selected="true">
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.360p.vp9.webm" type="video/webm" label="360P">
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.240p.vp9.webm" type="video/webm" label="240P">
</video>
<script>
videojs("video_1", {}, function() {
videojs('video_1', {}, function() {
var player = this;
player.controlBar.addChild('QualitySelector');

29180
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

40
package.json
View File

@ -1,12 +1,19 @@
{
"name": "@silvermine/videojs-quality-selector",
"version": "1.2.4",
"version": "1.3.1",
"description": "video.js plugin for selecting a video quality or resolution",
"main": "src/js/index.js",
"scripts": {
"prepare": "grunt build",
"test": "check-node-version --npm 6.13.4 && ./node_modules/.bin/istanbul cover ./node_modules/.bin/_mocha -- -R spec 'tests/**/*.test.js'",
"commitlint": "commitlint --from ad805e8"
"test": "check-node-version --npm 8.5.5 && nyc mocha -- 'tests/**/*.test.js'",
"commitlint": "commitlint --from ad805e8",
"markdownlint": "markdownlint -c .markdownlint.json -i CHANGELOG.md '{,!(node_modules)/**/}*.md'",
"eslint": "eslint '{,!(node_modules|dist)/**/}*.js'",
"stylelint": "stylelint './src/scss/**/*.scss'",
"standards": "npm run commitlint && npm run markdownlint && npm run stylelint && npm run eslint",
"release:preview": "node ./node_modules/@silvermine/standardization/scripts/release.js preview",
"release:prep-changelog": "node ./node_modules/@silvermine/standardization/scripts/release.js prep-changelog",
"release:finalize": "node ./node_modules/@silvermine/standardization/scripts/release.js finalize"
},
"author": "Jeremy Thomerson",
"license": "MIT",
@ -26,28 +33,36 @@
},
"homepage": "https://github.com/silvermine/videojs-quality-selector#readme",
"devDependencies": {
"@babel/core": "7.13.16",
"@babel/preset-env": "7.13.15",
"@commitlint/cli": "8.3.5",
"@commitlint/travis-cli": "8.3.5",
"@silvermine/eslint-config": "3.0.0-rc.0",
"@silvermine/sass-lint-config": "1.1.0",
"autoprefixer": "9.5.1",
"@silvermine/eslint-config": "3.0.1",
"@silvermine/standardization": "2.0.0",
"autoprefixer": "8.6.5",
"babel-eslint": "10.1.0",
"babelify": "10.0.0",
"check-node-version": "4.0.3",
"core-js": "3.11.0",
"coveralls": "3.0.3",
"eslint": "6.8.0",
"expect.js": "0.3.1",
"grunt": "1.0.4",
"grunt": "1.4.0",
"grunt-browserify": "5.3.0",
"grunt-cli": "1.3.2",
"grunt-contrib-clean": "2.0.0",
"grunt-contrib-uglify": "4.0.1",
"grunt-contrib-watch": "1.1.0",
"grunt-eslint": "22.0.0",
"grunt-markdownlint": "3.1.4",
"grunt-postcss": "0.9.0",
"grunt-sass": "3.0.2",
"grunt-sass-lint": "0.2.4",
"istanbul": "0.4.5",
"mocha": "6.1.4",
"grunt-stylelint": "0.16.0",
"mocha": "8.4.0",
"mocha-lcov-reporter": "1.3.0",
"node-sass": "4.12.0",
"nyc": "15.1.0",
"rewire": "4.0.1",
"sass": "1.49.7",
"silvermine-serverless-utils": "git+https://github.com/silvermine/serverless-utils.git#910f1149af824fc8d0fa840878079c7d3df0f414",
"sinon": "7.3.2"
},
@ -55,7 +70,6 @@
"video.js": ">=6.0.0"
},
"dependencies": {
"class.extend": "0.9.1",
"underscore": "1.9.1"
"underscore": "1.13.1"
}
}

19
src/js/components/QualityOption.js
View File

@ -1,5 +1,3 @@
'use strict';
var _ = require('underscore'),
events = require('../events');
@ -12,12 +10,12 @@ module.exports = function(videojs) {
* @class QualityOption
* @extends videojs.MenuItem
*/
return videojs.extend(MenuItem, {
return class QualityOption extends MenuItem {
/**
* @inheritdoc
*/
constructor: function(player, options) {
constructor(player, options) {
var source = options.source;
if (!_.isObject(source)) {
@ -29,18 +27,17 @@ module.exports = function(videojs) {
label: source.label,
}, options);
MenuItem.call(this, player, options);
super(player, options);
this.source = source;
},
}
/**
* @inheritdoc
*/
handleClick: function(event) {
MenuItem.prototype.handleClick.call(this, event);
handleClick(event) {
super.handleClick(event);
this.player().trigger(events.QUALITY_REQUESTED, this.source);
},
});
}
};
};

30
src/js/components/QualitySelector.js
View File

@ -1,5 +1,3 @@
'use strict';
var _ = require('underscore'),
events = require('../events'),
qualityOptionFactory = require('./QualityOption'),
@ -7,8 +5,7 @@ var _ = require('underscore'),
module.exports = function(videojs) {
var MenuButton = videojs.getComponent('MenuButton'),
QualityOption = qualityOptionFactory(videojs),
QualitySelector;
QualityOption = qualityOptionFactory(videojs);
/**
* A component for changing video resolutions
@ -16,13 +13,13 @@ module.exports = function(videojs) {
* @class QualitySelector
* @extends videojs.Button
*/
QualitySelector = videojs.extend(MenuButton, {
class QualitySelector extends MenuButton {
/**
* @inheritdoc
*/
constructor: function(player, options) {
MenuButton.call(this, player, options);
constructor(player, options) {
super(player, options);
// Update interface instantly so the user's change is acknowledged
player.on(events.QUALITY_REQUESTED, function(event, newSource) {
@ -52,14 +49,14 @@ module.exports = function(videojs) {
}.bind(this));
this.controlText('Open quality selector menu');
},
}
/**
* Updates the source that is selected in the menu
*
* @param source {object} player source to display as selected
*/
setSelectedSource: function(source) {
setSelectedSource(source) {
var src = (source ? source.src : undefined);
if (this.selectedSrc !== src) {
@ -68,12 +65,12 @@ module.exports = function(videojs) {
item.selected(item.source.src === src);
});
}
},
}
/**
* @inheritdoc
*/
createItems: function() {
createItems() {
var player = this.player(),
sources = player.currentSources();
@ -87,16 +84,15 @@ module.exports = function(videojs) {
selected: source.src === this.selectedSrc,
});
}.bind(this));
},
}
/**
* @inheritdoc
*/
buildWrapperCSSClass: function() {
return 'vjs-quality-selector ' + MenuButton.prototype.buildWrapperCSSClass.call(this);
},
});
buildWrapperCSSClass() {
return 'vjs-quality-selector ' + super.buildWrapperCSSClass();
}
}
videojs.registerComponent('QualitySelector', QualitySelector);

4
src/js/events.js
View File

@ -1,9 +1,5 @@
'use strict';
module.exports = {
QUALITY_REQUESTED: 'qualityRequested',
QUALITY_SELECTED: 'qualitySelected',
PLAYER_SOURCES_CHANGED: 'playerSourcesChanged',
};

2
src/js/index.js
View File

@ -1,5 +1,3 @@
'use strict';
var _ = require('underscore'),
events = require('./events'),
qualitySelectorFactory = require('./components/QualitySelector'),

2
src/js/middleware/SourceInterceptor.js
View File

@ -1,5 +1,3 @@
'use strict';
var _ = require('underscore'),
events = require('../events');

2
src/js/standalone.js
View File

@ -1,3 +1 @@
'use strict';
require('./index')();

38
src/js/util/SafeSeek.js
View File

@ -1,17 +1,13 @@
'use strict';
var Class = require('class.extend');
module.exports = Class.extend({
init: function(player, seekToTime) {
class SafeSeek {
constructor(player, seekToTime) {
this._player = player;
this._seekToTime = seekToTime;
this._hasFinished = false;
this._keepThisInstanceWhenPlayerSourcesChange = false;
this._seekWhenSafe();
},
}
_seekWhenSafe: function() {
_seekWhenSafe() {
var HAVE_FUTURE_DATA = 3;
// `readyState` in Video.js is the same as the HTML5 Media element's `readyState`
@ -35,9 +31,9 @@ module.exports = Class.extend({
} else {
this._seek();
}
},
}
onPlayerSourcesChange: function() {
onPlayerSourcesChange() {
if (this._keepThisInstanceWhenPlayerSourcesChange) {
// By setting this to `false`, we know that if the player sources change again
// the change did not originate from a quality selection change, the new sources
@ -47,9 +43,9 @@ module.exports = Class.extend({
} else {
this.cancel();
}
},
}
onQualitySelectionChange: function() {
onQualitySelectionChange() {
// `onPlayerSourcesChange` will cancel this pending seek unless we tell it not to.
// We need to reuse this same pending seek instance because when the player is
// paused, the `preload` attribute is set to `none`, and the user selects one
@ -60,21 +56,23 @@ module.exports = Class.extend({
if (!this.hasFinished()) {
this._keepThisInstanceWhenPlayerSourcesChange = true;
}
},
}
_seek: function() {
_seek() {
this._player.currentTime(this._seekToTime);
this._keepThisInstanceWhenPlayerSourcesChange = false;
this._hasFinished = true;
},
}
hasFinished: function() {
hasFinished() {
return this._hasFinished;
},
}
cancel: function() {
cancel() {
this._player.off('canplay', this._seekFn);
this._keepThisInstanceWhenPlayerSourcesChange = false;
this._hasFinished = true;
},
});
}
}
module.exports = SafeSeek;

12
src/sass/quality-selector.scss → src/scss/quality-selector.scss
View File

@ -7,11 +7,19 @@
}
.vjs-icon-placeholder {
// From video.js font: https://github.com/videojs/font
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
font-family: 'VideoJS';
font-weight: normal;
font-style: normal;
&:before {
content: '\f110';
&::before {
// The correct icon font character for Video.js 7 and below:
.video-js:not(.vjs-v8) & {
content: '\f110';
}
// Icon font character for Video.js 8:
.vjs-v8 & {
content: '\f114';
}
}
}
}

2
tests/Placeholder.test.js
View File

@ -1,5 +1,3 @@
'use strict';
var expect = require('expect.js');
describe('Everything', function() {