mirror of
				https://gitea.invidious.io/iv-org/videojs-quality-selector.git
				synced 2024-08-15 00:43:13 +00:00 
			
		
		
		
	Merge 294c48d119 into 33e026eb51
				
					
				
			This commit is contained in:
		
						commit
						75a26c8e28
					
				
					 27 changed files with 23022 additions and 6525 deletions
				
			
		
							
								
								
									
										1
									
								
								.browserslistrc
									
										
									
									
									
										Symbolic link
									
								
							
							
						
						
									
										1
									
								
								.browserslistrc
									
										
									
									
									
										Symbolic link
									
								
							|  | @ -0,0 +1 @@ | ||||||
|  | ./node_modules/@silvermine/standardization/browserslist/.browserslistrc-broad-support | ||||||
							
								
								
									
										1
									
								
								.editorconfig
									
										
									
									
									
										Symbolic link
									
								
							
							
						
						
									
										1
									
								
								.editorconfig
									
										
									
									
									
										Symbolic link
									
								
							|  | @ -0,0 +1 @@ | ||||||
|  | node_modules/@silvermine/standardization/.editorconfig | ||||||
|  | @ -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
									
								
							
							
						
						
									
										38
									
								
								.github/workflows/ci.yml
									
										
									
									
										vendored
									
									
										Normal 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
									
									
								
							
							
						
						
									
										2
									
								
								.gitignore
									
										
									
									
										vendored
									
									
								
							|  | @ -1,4 +1,6 @@ | ||||||
| .DS_Store | .DS_Store | ||||||
| node_modules | node_modules | ||||||
| coverage | coverage | ||||||
|  | .nyc_output | ||||||
| dist | dist | ||||||
|  | .idea | ||||||
|  |  | ||||||
							
								
								
									
										3
									
								
								.markdownlint.json
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										3
									
								
								.markdownlint.json
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,3 @@ | ||||||
|  | { | ||||||
|  |    "extends": "./node_modules/@silvermine/standardization/.markdownlint.json" | ||||||
|  | } | ||||||
|  | @ -3,3 +3,5 @@ | ||||||
| Gruntfile.js | Gruntfile.js | ||||||
| tests/** | tests/** | ||||||
| docs | docs | ||||||
|  | .nyc_output | ||||||
|  | coverage | ||||||
|  |  | ||||||
							
								
								
									
										2
									
								
								.nvmrc
									
										
									
									
									
								
							
							
						
						
									
										2
									
								
								.nvmrc
									
										
									
									
									
								
							|  | @ -1 +1 @@ | ||||||
| 12.14.0 | 16.15.0 | ||||||
|  |  | ||||||
							
								
								
									
										16
									
								
								.nycrc.json
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										16
									
								
								.nycrc.json
									
										
									
									
									
										Normal 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
									
								
							
							
						
						
									
										1
									
								
								.stylelintrc.yml
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1 @@ | ||||||
|  | extends: ./node_modules/@silvermine/standardization/.stylelintrc.yml | ||||||
							
								
								
									
										18
									
								
								.travis.yml
									
										
									
									
									
								
							
							
						
						
									
										18
									
								
								.travis.yml
									
										
									
									
									
								
							|  | @ -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
									
										
									
									
									
								
							
							
						
						
									
										14
									
								
								CHANGELOG.md
									
										
									
									
									
								
							|  | @ -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 | ## 1.2.3 | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
							
								
								
									
										58
									
								
								Gruntfile.js
									
										
									
									
									
								
							
							
						
						
									
										58
									
								
								Gruntfile.js
									
										
									
									
									
								
							|  | @ -2,18 +2,25 @@ | ||||||
|  * Copyright (c) 2017 Jeremy Thomerson |  * Copyright (c) 2017 Jeremy Thomerson | ||||||
|  * Licensed under the MIT license. |  * Licensed under the MIT license. | ||||||
|  */ |  */ | ||||||
| 
 |  | ||||||
| 'use strict'; |  | ||||||
| 
 |  | ||||||
| var path = require('path'), | var path = require('path'), | ||||||
|     getCodeVersion = require('silvermine-serverless-utils/src/get-code-version'); |     getCodeVersion = require('silvermine-serverless-utils/src/get-code-version'); | ||||||
| 
 | 
 | ||||||
| const sass = require('node-sass'); | const sass = require('sass'); | ||||||
| 
 | 
 | ||||||
| module.exports = function(grunt) { | module.exports = function(grunt) { | ||||||
| 
 | 
 | ||||||
|    var DEBUG = !!grunt.option('debug'), |    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 = { |    config = { | ||||||
|       js: { |       js: { | ||||||
|  | @ -22,7 +29,7 @@ module.exports = function(grunt) { | ||||||
|       }, |       }, | ||||||
| 
 | 
 | ||||||
|       sass: { |       sass: { | ||||||
|          base: path.join(__dirname, 'src', 'sass'), |          base: path.join(__dirname, 'src', 'scss'), | ||||||
|          all: [ 'src/**/*.scss' ], |          all: [ 'src/**/*.scss' ], | ||||||
|       }, |       }, | ||||||
| 
 | 
 | ||||||
|  | @ -44,14 +51,34 @@ module.exports = function(grunt) { | ||||||
| 
 | 
 | ||||||
|    grunt.initConfig({ |    grunt.initConfig({ | ||||||
| 
 | 
 | ||||||
|       pkg: grunt.file.readJSON('package.json'), |       pkg: pkgJSON, | ||||||
|       versionInfo: getCodeVersion.both(), |       versionInfo: versionInfo, | ||||||
|       config: config, |       config: config, | ||||||
| 
 | 
 | ||||||
|       browserify: { |       browserify: { | ||||||
|          main: { |          main: { | ||||||
|             src: config.js.standalone, |             src: config.js.standalone, | ||||||
|             dest: config.dist.js.bundle, |             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, |          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: { |       watch: { | ||||||
|          grunt: { |          grunt: { | ||||||
|             files: [ 'Gruntfile.js' ], |             files: [ 'Gruntfile.js' ], | ||||||
|  | @ -136,19 +152,15 @@ module.exports = function(grunt) { | ||||||
|             tasks: [ 'build-css' ], |             tasks: [ 'build-css' ], | ||||||
|          }, |          }, | ||||||
|       }, |       }, | ||||||
| 
 |  | ||||||
|    }); |    }); | ||||||
| 
 | 
 | ||||||
|    grunt.loadNpmTasks('grunt-contrib-uglify'); |    grunt.loadNpmTasks('grunt-contrib-uglify'); | ||||||
|    grunt.loadNpmTasks('grunt-contrib-watch'); |    grunt.loadNpmTasks('grunt-contrib-watch'); | ||||||
|    grunt.loadNpmTasks('grunt-browserify'); |    grunt.loadNpmTasks('grunt-browserify'); | ||||||
|    grunt.loadNpmTasks('grunt-eslint'); |  | ||||||
|    grunt.loadNpmTasks('grunt-postcss'); |    grunt.loadNpmTasks('grunt-postcss'); | ||||||
|    grunt.loadNpmTasks('grunt-contrib-clean'); |    grunt.loadNpmTasks('grunt-contrib-clean'); | ||||||
|    grunt.loadNpmTasks('grunt-sass'); |    grunt.loadNpmTasks('grunt-sass'); | ||||||
|    grunt.loadNpmTasks('grunt-sass-lint'); |  | ||||||
| 
 | 
 | ||||||
|    grunt.registerTask('standards', [ 'eslint', 'sasslint' ]); |  | ||||||
|    grunt.registerTask('build-js', [ 'browserify', 'uglify' ]); |    grunt.registerTask('build-js', [ 'browserify', 'uglify' ]); | ||||||
|    grunt.registerTask('build-css', [ 'sass', 'postcss' ]); |    grunt.registerTask('build-css', [ 'sass', 'postcss' ]); | ||||||
|    grunt.registerTask('build', [ 'build-js', 'build-css' ]); |    grunt.registerTask('build', [ 'build-js', 'build-css' ]); | ||||||
|  |  | ||||||
							
								
								
									
										35
									
								
								README.md
									
										
									
									
									
								
							
							
						
						
									
										35
									
								
								README.md
									
										
									
									
									
								
							|  | @ -31,14 +31,14 @@ for `videojs` at `window.videojs`). | ||||||
| There is an example of this in | There is an example of this in | ||||||
| [`docs/demo/index.html`](./docs/demo/index.html). | [`docs/demo/index.html`](./docs/demo/index.html). | ||||||
| 
 | 
 | ||||||
| ##### From local file: | ##### From local file | ||||||
| 
 | 
 | ||||||
| ```js | ```js | ||||||
| <script src="./path/to/video.min.js"></script> | <script src="./path/to/video.min.js"></script> | ||||||
| <script src="./path/to/silvermine-videojs-quality-selector.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 | ```js | ||||||
| <link href="https://unpkg.com/@silvermine/videojs-quality-selector/dist/css/quality-selector.css" rel="stylesheet"> | <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. | When using NPM/Browserify, first install the plugin. | ||||||
| 
 | 
 | ||||||
| ``` | ```bash | ||||||
| npm install --save @silvermine/videojs-quality-selector | npm install --save @silvermine/videojs-quality-selector | ||||||
| ``` | ``` | ||||||
| 
 | 
 | ||||||
|  | @ -64,6 +64,23 @@ var videojs = require('videojs'); | ||||||
| require('@silvermine/videojs-quality-selector')(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 | ### Providing video sources | ||||||
| 
 | 
 | ||||||
| Sources can be provided with either the `<source>` tag or via the `src` function on the | 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>` | #### Using `<source>` | ||||||
| 
 | 
 | ||||||
| ```html | ```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_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_480.mp4" type="video/mp4" label="480P" selected="true"> | ||||||
|    <source src="https://example.com/video_360.mp4" type="video/mp4" label="360P"> |    <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 | 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: | bar. The first is directly adding it via `addChild`. For example: | ||||||
| 
 | 
 | ||||||
| ``` | ```js | ||||||
| player.controlBar.addChild('QualitySelector'); | 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: | The second option is to add the control via the player's options, for instance: | ||||||
| 
 | 
 | ||||||
| ``` | ```js | ||||||
| var options, player; | var options, player; | ||||||
| 
 | 
 | ||||||
| options = { | options = { | ||||||
|  |  | ||||||
|  | @ -1,5 +1,3 @@ | ||||||
| 'use strict'; |  | ||||||
| 
 |  | ||||||
| module.exports = { | module.exports = { | ||||||
|    extends: [ '@silvermine/eslint-config/commitlint.js' ], |    extends: [ '@silvermine/standardization/commitlint.js' ], | ||||||
| }; | }; | ||||||
|  |  | ||||||
|  | @ -3,23 +3,23 @@ | ||||||
| <head> | <head> | ||||||
|    <meta charset=utf-8 /> |    <meta charset=utf-8 /> | ||||||
|    <title>videojs-quality-selector Demo</title> |    <title>videojs-quality-selector Demo</title> | ||||||
|    <link href="https://unpkg.com/video.js@7.5.4/dist/video-js.css" rel="stylesheet"> |    <link href="https://unpkg.com/video.js@8.6.1/dist/video-js.css" rel="stylesheet"> | ||||||
|    <script src="https://unpkg.com/video.js@7.5.4/dist/video.js"></script> |    <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> |    <script src="../../dist/js/silvermine-videojs-quality-selector.min.js"></script> | ||||||
|    <link href="../../dist/css/quality-selector.css" rel="stylesheet"> |    <link href="../../dist/css/quality-selector.css" rel="stylesheet"> | ||||||
| </head> | </head> | ||||||
| <body> | <body> | ||||||
|    <h1>Demo of <code>videojs-quality-selector</code></h1> |    <h1>Demo of <code>videojs-quality-selector</code></h1> | ||||||
| 
 | 
 | ||||||
|    <video id="video_1" class="video-js vjs-default-skin" controls preload="auto" data-setup='{}'> |    <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.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.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.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.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.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.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.webm" type="video/webm" label="240P"> |       <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> |    </video> | ||||||
| 
 | 
 | ||||||
|    <script> |    <script> | ||||||
|       videojs("video_1", {}, function() { |       videojs('video_1', {}, function() { | ||||||
|          var player = this; |          var player = this; | ||||||
| 
 | 
 | ||||||
|          player.controlBar.addChild('QualitySelector'); |          player.controlBar.addChild('QualitySelector'); | ||||||
|  |  | ||||||
							
								
								
									
										29018
									
								
								package-lock.json
									
										
									
										generated
									
									
									
								
							
							
						
						
									
										29018
									
								
								package-lock.json
									
										
									
										generated
									
									
									
								
							
										
											
												File diff suppressed because it is too large
												Load diff
											
										
									
								
							
							
								
								
									
										40
									
								
								package.json
									
										
									
									
									
								
							
							
						
						
									
										40
									
								
								package.json
									
										
									
									
									
								
							|  | @ -1,12 +1,19 @@ | ||||||
| { | { | ||||||
|   "name": "@silvermine/videojs-quality-selector", |   "name": "@silvermine/videojs-quality-selector", | ||||||
|   "version": "1.2.4", |   "version": "1.3.1", | ||||||
|   "description": "video.js plugin for selecting a video quality or resolution", |   "description": "video.js plugin for selecting a video quality or resolution", | ||||||
|   "main": "src/js/index.js", |   "main": "src/js/index.js", | ||||||
|   "scripts": { |   "scripts": { | ||||||
|     "prepare": "grunt build", |     "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'", |     "test": "check-node-version --npm 8.5.5 && nyc mocha -- 'tests/**/*.test.js'", | ||||||
|     "commitlint": "commitlint --from ad805e8" |     "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", |   "author": "Jeremy Thomerson", | ||||||
|   "license": "MIT", |   "license": "MIT", | ||||||
|  | @ -26,28 +33,36 @@ | ||||||
|   }, |   }, | ||||||
|   "homepage": "https://github.com/silvermine/videojs-quality-selector#readme", |   "homepage": "https://github.com/silvermine/videojs-quality-selector#readme", | ||||||
|   "devDependencies": { |   "devDependencies": { | ||||||
|  |     "@babel/core": "7.13.16", | ||||||
|  |     "@babel/preset-env": "7.13.15", | ||||||
|     "@commitlint/cli": "8.3.5", |     "@commitlint/cli": "8.3.5", | ||||||
|     "@commitlint/travis-cli": "8.3.5", |     "@commitlint/travis-cli": "8.3.5", | ||||||
|     "@silvermine/eslint-config": "3.0.0-rc.0", |     "@silvermine/eslint-config": "3.0.1", | ||||||
|     "@silvermine/sass-lint-config": "1.1.0", |     "@silvermine/standardization": "2.0.0", | ||||||
|     "autoprefixer": "9.5.1", |     "autoprefixer": "8.6.5", | ||||||
|  |     "babel-eslint": "10.1.0", | ||||||
|  |     "babelify": "10.0.0", | ||||||
|     "check-node-version": "4.0.3", |     "check-node-version": "4.0.3", | ||||||
|  |     "core-js": "3.11.0", | ||||||
|     "coveralls": "3.0.3", |     "coveralls": "3.0.3", | ||||||
|  |     "eslint": "6.8.0", | ||||||
|     "expect.js": "0.3.1", |     "expect.js": "0.3.1", | ||||||
|     "grunt": "1.0.4", |     "grunt": "1.4.0", | ||||||
|     "grunt-browserify": "5.3.0", |     "grunt-browserify": "5.3.0", | ||||||
|  |     "grunt-cli": "1.3.2", | ||||||
|     "grunt-contrib-clean": "2.0.0", |     "grunt-contrib-clean": "2.0.0", | ||||||
|     "grunt-contrib-uglify": "4.0.1", |     "grunt-contrib-uglify": "4.0.1", | ||||||
|     "grunt-contrib-watch": "1.1.0", |     "grunt-contrib-watch": "1.1.0", | ||||||
|     "grunt-eslint": "22.0.0", |     "grunt-eslint": "22.0.0", | ||||||
|  |     "grunt-markdownlint": "3.1.4", | ||||||
|     "grunt-postcss": "0.9.0", |     "grunt-postcss": "0.9.0", | ||||||
|     "grunt-sass": "3.0.2", |     "grunt-sass": "3.0.2", | ||||||
|     "grunt-sass-lint": "0.2.4", |     "grunt-stylelint": "0.16.0", | ||||||
|     "istanbul": "0.4.5", |     "mocha": "8.4.0", | ||||||
|     "mocha": "6.1.4", |  | ||||||
|     "mocha-lcov-reporter": "1.3.0", |     "mocha-lcov-reporter": "1.3.0", | ||||||
|     "node-sass": "4.12.0", |     "nyc": "15.1.0", | ||||||
|     "rewire": "4.0.1", |     "rewire": "4.0.1", | ||||||
|  |     "sass": "1.49.7", | ||||||
|     "silvermine-serverless-utils": "git+https://github.com/silvermine/serverless-utils.git#910f1149af824fc8d0fa840878079c7d3df0f414", |     "silvermine-serverless-utils": "git+https://github.com/silvermine/serverless-utils.git#910f1149af824fc8d0fa840878079c7d3df0f414", | ||||||
|     "sinon": "7.3.2" |     "sinon": "7.3.2" | ||||||
|   }, |   }, | ||||||
|  | @ -55,7 +70,6 @@ | ||||||
|     "video.js": ">=6.0.0" |     "video.js": ">=6.0.0" | ||||||
|   }, |   }, | ||||||
|   "dependencies": { |   "dependencies": { | ||||||
|     "class.extend": "0.9.1", |     "underscore": "1.13.1" | ||||||
|     "underscore": "1.9.1" |  | ||||||
|   } |   } | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @ -1,5 +1,3 @@ | ||||||
| 'use strict'; |  | ||||||
| 
 |  | ||||||
| var _ = require('underscore'), | var _ = require('underscore'), | ||||||
|     events = require('../events'); |     events = require('../events'); | ||||||
| 
 | 
 | ||||||
|  | @ -12,12 +10,12 @@ module.exports = function(videojs) { | ||||||
|     * @class QualityOption |     * @class QualityOption | ||||||
|     * @extends videojs.MenuItem |     * @extends videojs.MenuItem | ||||||
|     */ |     */ | ||||||
|    return videojs.extend(MenuItem, { |    return class QualityOption extends MenuItem { | ||||||
| 
 | 
 | ||||||
|       /** |       /** | ||||||
|        * @inheritdoc |        * @inheritdoc | ||||||
|        */ |        */ | ||||||
|       constructor: function(player, options) { |       constructor(player, options) { | ||||||
|          var source = options.source; |          var source = options.source; | ||||||
| 
 | 
 | ||||||
|          if (!_.isObject(source)) { |          if (!_.isObject(source)) { | ||||||
|  | @ -29,18 +27,17 @@ module.exports = function(videojs) { | ||||||
|             label: source.label, |             label: source.label, | ||||||
|          }, options); |          }, options); | ||||||
| 
 | 
 | ||||||
|          MenuItem.call(this, player, options); |          super(player, options); | ||||||
| 
 | 
 | ||||||
|          this.source = source; |          this.source = source; | ||||||
|       }, |       } | ||||||
| 
 | 
 | ||||||
|       /** |       /** | ||||||
|        * @inheritdoc |        * @inheritdoc | ||||||
|        */ |        */ | ||||||
|       handleClick: function(event) { |       handleClick(event) { | ||||||
|          MenuItem.prototype.handleClick.call(this, event); |          super.handleClick(event); | ||||||
|          this.player().trigger(events.QUALITY_REQUESTED, this.source); |          this.player().trigger(events.QUALITY_REQUESTED, this.source); | ||||||
|       }, |       } | ||||||
| 
 |    }; | ||||||
|    }); |  | ||||||
| }; | }; | ||||||
|  |  | ||||||
|  | @ -1,5 +1,3 @@ | ||||||
| 'use strict'; |  | ||||||
| 
 |  | ||||||
| var _ = require('underscore'), | var _ = require('underscore'), | ||||||
|     events = require('../events'), |     events = require('../events'), | ||||||
|     qualityOptionFactory = require('./QualityOption'), |     qualityOptionFactory = require('./QualityOption'), | ||||||
|  | @ -7,8 +5,7 @@ var _ = require('underscore'), | ||||||
| 
 | 
 | ||||||
| module.exports = function(videojs) { | module.exports = function(videojs) { | ||||||
|    var MenuButton = videojs.getComponent('MenuButton'), |    var MenuButton = videojs.getComponent('MenuButton'), | ||||||
|        QualityOption = qualityOptionFactory(videojs), |        QualityOption = qualityOptionFactory(videojs); | ||||||
|        QualitySelector; |  | ||||||
| 
 | 
 | ||||||
|    /** |    /** | ||||||
|     * A component for changing video resolutions |     * A component for changing video resolutions | ||||||
|  | @ -16,13 +13,13 @@ module.exports = function(videojs) { | ||||||
|     * @class QualitySelector |     * @class QualitySelector | ||||||
|     * @extends videojs.Button |     * @extends videojs.Button | ||||||
|     */ |     */ | ||||||
|    QualitySelector = videojs.extend(MenuButton, { |    class QualitySelector extends MenuButton { | ||||||
| 
 | 
 | ||||||
|       /** |       /** | ||||||
|        * @inheritdoc |        * @inheritdoc | ||||||
|        */ |        */ | ||||||
|       constructor: function(player, options) { |       constructor(player, options) { | ||||||
|          MenuButton.call(this, player, options); |          super(player, options); | ||||||
| 
 | 
 | ||||||
|          // Update interface instantly so the user's change is acknowledged
 |          // Update interface instantly so the user's change is acknowledged
 | ||||||
|          player.on(events.QUALITY_REQUESTED, function(event, newSource) { |          player.on(events.QUALITY_REQUESTED, function(event, newSource) { | ||||||
|  | @ -52,14 +49,14 @@ module.exports = function(videojs) { | ||||||
|          }.bind(this)); |          }.bind(this)); | ||||||
| 
 | 
 | ||||||
|          this.controlText('Open quality selector menu'); |          this.controlText('Open quality selector menu'); | ||||||
|       }, |       } | ||||||
| 
 | 
 | ||||||
|       /** |       /** | ||||||
|        * Updates the source that is selected in the menu |        * Updates the source that is selected in the menu | ||||||
|        * |        * | ||||||
|        * @param source {object} player source to display as selected |        * @param source {object} player source to display as selected | ||||||
|        */ |        */ | ||||||
|       setSelectedSource: function(source) { |       setSelectedSource(source) { | ||||||
|          var src = (source ? source.src : undefined); |          var src = (source ? source.src : undefined); | ||||||
| 
 | 
 | ||||||
|          if (this.selectedSrc !== src) { |          if (this.selectedSrc !== src) { | ||||||
|  | @ -68,12 +65,12 @@ module.exports = function(videojs) { | ||||||
|                item.selected(item.source.src === src); |                item.selected(item.source.src === src); | ||||||
|             }); |             }); | ||||||
|          } |          } | ||||||
|       }, |       } | ||||||
| 
 | 
 | ||||||
|       /** |       /** | ||||||
|        * @inheritdoc |        * @inheritdoc | ||||||
|        */ |        */ | ||||||
|       createItems: function() { |       createItems() { | ||||||
|          var player = this.player(), |          var player = this.player(), | ||||||
|              sources = player.currentSources(); |              sources = player.currentSources(); | ||||||
|            |            | ||||||
|  | @ -87,16 +84,15 @@ module.exports = function(videojs) { | ||||||
|                selected: source.src === this.selectedSrc, |                selected: source.src === this.selectedSrc, | ||||||
|             }); |             }); | ||||||
|          }.bind(this)); |          }.bind(this)); | ||||||
|       }, |       } | ||||||
| 
 | 
 | ||||||
|       /** |       /** | ||||||
|        * @inheritdoc |        * @inheritdoc | ||||||
|        */ |        */ | ||||||
|       buildWrapperCSSClass: function() { |       buildWrapperCSSClass() { | ||||||
|          return 'vjs-quality-selector ' + MenuButton.prototype.buildWrapperCSSClass.call(this); |          return 'vjs-quality-selector ' + super.buildWrapperCSSClass(); | ||||||
|       }, |       } | ||||||
| 
 |    } | ||||||
|    }); |  | ||||||
| 
 | 
 | ||||||
|    videojs.registerComponent('QualitySelector', QualitySelector); |    videojs.registerComponent('QualitySelector', QualitySelector); | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -1,9 +1,5 @@ | ||||||
| 'use strict'; |  | ||||||
| 
 |  | ||||||
| module.exports = { | module.exports = { | ||||||
| 
 |  | ||||||
|    QUALITY_REQUESTED: 'qualityRequested', |    QUALITY_REQUESTED: 'qualityRequested', | ||||||
|    QUALITY_SELECTED: 'qualitySelected', |    QUALITY_SELECTED: 'qualitySelected', | ||||||
|    PLAYER_SOURCES_CHANGED: 'playerSourcesChanged', |    PLAYER_SOURCES_CHANGED: 'playerSourcesChanged', | ||||||
| 
 |  | ||||||
| }; | }; | ||||||
|  |  | ||||||
|  | @ -1,5 +1,3 @@ | ||||||
| 'use strict'; |  | ||||||
| 
 |  | ||||||
| var _ = require('underscore'), | var _ = require('underscore'), | ||||||
|     events = require('./events'), |     events = require('./events'), | ||||||
|     qualitySelectorFactory = require('./components/QualitySelector'), |     qualitySelectorFactory = require('./components/QualitySelector'), | ||||||
|  |  | ||||||
|  | @ -1,5 +1,3 @@ | ||||||
| 'use strict'; |  | ||||||
| 
 |  | ||||||
| var _ = require('underscore'), | var _ = require('underscore'), | ||||||
|     events = require('../events'); |     events = require('../events'); | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -1,3 +1 @@ | ||||||
| 'use strict'; |  | ||||||
| 
 |  | ||||||
| require('./index')(); | require('./index')(); | ||||||
|  |  | ||||||
|  | @ -1,17 +1,13 @@ | ||||||
| 'use strict'; | class SafeSeek { | ||||||
| 
 |    constructor(player, seekToTime) { | ||||||
| var Class = require('class.extend'); |  | ||||||
| 
 |  | ||||||
| module.exports = Class.extend({ |  | ||||||
|    init: function(player, seekToTime) { |  | ||||||
|       this._player = player; |       this._player = player; | ||||||
|       this._seekToTime = seekToTime; |       this._seekToTime = seekToTime; | ||||||
|       this._hasFinished = false; |       this._hasFinished = false; | ||||||
|       this._keepThisInstanceWhenPlayerSourcesChange = false; |       this._keepThisInstanceWhenPlayerSourcesChange = false; | ||||||
|       this._seekWhenSafe(); |       this._seekWhenSafe(); | ||||||
|    }, |    } | ||||||
| 
 | 
 | ||||||
|    _seekWhenSafe: function() { |    _seekWhenSafe() { | ||||||
|       var HAVE_FUTURE_DATA = 3; |       var HAVE_FUTURE_DATA = 3; | ||||||
| 
 | 
 | ||||||
|       // `readyState` in Video.js is the same as the HTML5 Media element's `readyState`
 |       // `readyState` in Video.js is the same as the HTML5 Media element's `readyState`
 | ||||||
|  | @ -35,9 +31,9 @@ module.exports = Class.extend({ | ||||||
|       } else { |       } else { | ||||||
|          this._seek(); |          this._seek(); | ||||||
|       } |       } | ||||||
|    }, |    } | ||||||
| 
 | 
 | ||||||
|    onPlayerSourcesChange: function() { |    onPlayerSourcesChange() { | ||||||
|       if (this._keepThisInstanceWhenPlayerSourcesChange) { |       if (this._keepThisInstanceWhenPlayerSourcesChange) { | ||||||
|          // By setting this to `false`, we know that if the player sources change again
 |          // 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
 |          // the change did not originate from a quality selection change, the new sources
 | ||||||
|  | @ -47,9 +43,9 @@ module.exports = Class.extend({ | ||||||
|       } else { |       } else { | ||||||
|          this.cancel(); |          this.cancel(); | ||||||
|       } |       } | ||||||
|    }, |    } | ||||||
| 
 | 
 | ||||||
|    onQualitySelectionChange: function() { |    onQualitySelectionChange() { | ||||||
|       // `onPlayerSourcesChange` will cancel this pending seek unless we tell it not to.
 |       // `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
 |       // 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
 |       // paused, the `preload` attribute is set to `none`, and the user selects one
 | ||||||
|  | @ -60,21 +56,23 @@ module.exports = Class.extend({ | ||||||
|       if (!this.hasFinished()) { |       if (!this.hasFinished()) { | ||||||
|          this._keepThisInstanceWhenPlayerSourcesChange = true; |          this._keepThisInstanceWhenPlayerSourcesChange = true; | ||||||
|       } |       } | ||||||
|    }, |    } | ||||||
| 
 | 
 | ||||||
|    _seek: function() { |    _seek() { | ||||||
|       this._player.currentTime(this._seekToTime); |       this._player.currentTime(this._seekToTime); | ||||||
|       this._keepThisInstanceWhenPlayerSourcesChange = false; |       this._keepThisInstanceWhenPlayerSourcesChange = false; | ||||||
|       this._hasFinished = true; |       this._hasFinished = true; | ||||||
|    }, |    } | ||||||
| 
 | 
 | ||||||
|    hasFinished: function() { |    hasFinished() { | ||||||
|       return this._hasFinished; |       return this._hasFinished; | ||||||
|    }, |    } | ||||||
| 
 | 
 | ||||||
|    cancel: function() { |    cancel() { | ||||||
|       this._player.off('canplay', this._seekFn); |       this._player.off('canplay', this._seekFn); | ||||||
|       this._keepThisInstanceWhenPlayerSourcesChange = false; |       this._keepThisInstanceWhenPlayerSourcesChange = false; | ||||||
|       this._hasFinished = true; |       this._hasFinished = true; | ||||||
|    }, |    } | ||||||
| }); | } | ||||||
|  | 
 | ||||||
|  | module.exports = SafeSeek; | ||||||
|  |  | ||||||
|  | @ -7,12 +7,20 @@ | ||||||
|    } |    } | ||||||
|    .vjs-icon-placeholder { |    .vjs-icon-placeholder { | ||||||
|       // From video.js font: https://github.com/videojs/font |       // From video.js font: https://github.com/videojs/font | ||||||
|  |       /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ | ||||||
|       font-family: 'VideoJS'; |       font-family: 'VideoJS'; | ||||||
|       font-weight: normal; |       font-weight: normal; | ||||||
|       font-style: normal; |       font-style: normal; | ||||||
|       &:before { |       &::before { | ||||||
|  |          // The correct icon font character for Video.js 7 and below: | ||||||
|  |          .video-js:not(.vjs-v8) & { | ||||||
|             content: '\f110'; |             content: '\f110'; | ||||||
|          } |          } | ||||||
|  |          // Icon font character for Video.js 8: | ||||||
|  |          .vjs-v8 & { | ||||||
|  |             content: '\f114'; | ||||||
|  |          } | ||||||
|  |       } | ||||||
|    } |    } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | @ -1,5 +1,3 @@ | ||||||
| 'use strict'; |  | ||||||
| 
 |  | ||||||
| var expect = require('expect.js'); | var expect = require('expect.js'); | ||||||
| 
 | 
 | ||||||
| describe('Everything', function() { | describe('Everything', function() { | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue